<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>OTCHY.NET</title>
	<atom:link href="http://www.otchy.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.otchy.net</link>
	<description>Otchy の技術ネタ。JavaScript 率と Twitter 率がやや高く、他にも PHP/Java/Perl などなど。共通点は Web。</description>
	<lastBuildDate>Sun, 07 Mar 2010 21:52:31 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>テーブルのヘッダを固定してスクロールする jQuery プラグイン</title>
		<link>http://www.otchy.net/20100308/jquery-tablefix-js-had-released/</link>
		<comments>http://www.otchy.net/20100308/jquery-tablefix-js-had-released/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 21:44:47 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[excel]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=1004</guid>
		<description><![CDATA[Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の [...]]]></description>
			<content:encoded><![CDATA[<p>Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。<br />
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。</p>
<p>jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。</p>
<p>下記は簡単なサンプルです。詳細は<a href="/javascript/tablefix/">専用ページ</a>を見てみて下さい。</p>
<p>HTML</p>
<pre class="height_middle">
&lt;table id=&quot;tablefix&quot;&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th rowspan=&quot;2&quot;&gt;ヘッダA&lt;/th&gt;
        &lt;th rowspan=&quot;2&quot;&gt;ヘッダB&lt;/th&gt;
        &lt;th colspan=&quot;2&quot;&gt;ヘッダC&lt;/th&gt;
        &lt;th rowspan=&quot;2&quot;&gt;ヘッダD&lt;/th&gt;
        &lt;th rowspan=&quot;2&quot;&gt;ヘッダE&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;ヘッダ C-1&lt;/th&gt;
        &lt;th&gt;ヘッダ C-2&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
        &lt;td&gt;データデータデータデータデータデータデータデータデータデータデータデータ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</pre>
<p>JavaScript</p>
<pre>
$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});
</pre>
<p>実行結果</p>
<style>
#tablefix {
    width: 800px;
    border-collapse: collapse;
    border-spacing: 0;
}
#tablefix thead th {
    background-color: #333;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
</style>
<table id="tablefix">
<thead>
<tr>
<th rowspan="2">ヘッダA</th>
<th rowspan="2">ヘッダB</th>
<th colspan="2">ヘッダC</th>
<th rowspan="2">ヘッダD</th>
<th rowspan="2">ヘッダE</th>
</tr>
<tr>
<th>ヘッダ C-1</th>
<th>ヘッダ C-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
<td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
</tr>
</tbody>
</table>
<p><script src="/js/jquery.tablefix.js"></script><br />
<script>
$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100308/jquery-tablefix-js-had-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zen Coding の Perl 実装書きました</title>
		<link>http://www.otchy.net/20100225/zen-coding-for-perl/</link>
		<comments>http://www.otchy.net/20100225/zen-coding-for-perl/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 13:32:31 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[perl]]></category>
		<category><![CDATA[zen-coding]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=999</guid>
		<description><![CDATA[今、最高にアツい Zen Coding (ソースは自分) の Perl 実装を書きました。
これがあれば、(今すぐではありませんが) 手に馴染んだ任意のエディタ全てで、Zen Coding を使用することが出来るようにな [...]]]></description>
			<content:encoded><![CDATA[<p>今、最高にアツい Zen Coding (ソースは自分) の Perl 実装を書きました。<br />
これがあれば、(今すぐではありませんが) 手に馴染んだ任意のエディタ全てで、Zen Coding を使用することが出来るようになります。<br />
何故かって…？</p>
<p>その種明かしはちょっと後に回しておいて、とりあえずどんなことが出来るモジュールなのかを紹介します。</p>
<p>こうやって実行すると…</p>
<pre>
use SSSCoding;

print SSSCoding::expand('div') . "\n";
print SSSCoding::expand('a') . "\n";
print SSSCoding::expand('a:mail') . "\n";
print SSSCoding::expand('div#id.class1.class2') . "\n";
print SSSCoding::expand('#head+#body+#foot') . "\n";
print SSSCoding::expand('div#id&gt;ul&gt;li') . "\n";
print SSSCoding::expand('ul&gt;li#id$*5') . "\n";
</pre>
<p>こう出力されます！</p>
<pre>
&lt;div&gt;&lt;/div&gt;
&lt;a href=""&gt;&lt;/a&gt;
&lt;a href="mailto:"&gt;&lt;/a&gt;
&lt;div id="id" class="class1 class2"&gt;&lt;/div&gt;
&lt;div id="head"&gt;&lt;/div&gt;&lt;div id="body"&gt;&lt;/div&gt;&lt;div id="foot"&gt;&lt;/div&gt;
&lt;div id="id"&gt;&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
&lt;ul&gt;&lt;li id="id1"&gt;&lt;/li&gt;&lt;li id="id2"&gt;&lt;/li&gt;&lt;li id="id3"&gt;&lt;/li&gt;&lt;li id="id4"&gt;&lt;/li&gt;&lt;li id="id5"&gt;&lt;/li&gt;&lt;/ul&gt;
</pre>
<p>本来の Zen Coding には色々な機能がありますが、とりあえず CSS っぽい記述を HTML に展開する機能のみ実装しています。<br />
というか、自分が使いたいのがそこだけなので。</p>
<p>サポートしている識別子は、id を指定する &#8220;#&#8221;、class を指定する &#8220;.&#8221;、繰り返しを指定する &#8220;*&#8221;、繰り返し回数を出力する &#8220;$&#8221;、子エレメントを指定する &#8220;>&#8221;、兄弟エレメントを指定する &#8220;+&#8221; です。<br />
評価順を指定する &#8220;()&#8221; については実装が面倒だったので未サポートです。書くと変な感じになります。<br />
後述の目的のため、改行などを入れて整形する機能もないので、&#8221;()&#8221; を使うほど大袈裟な利用はしないだろう、という目論見でもあります。<br />
今後使ってみて、必要を感じたら実装するかも知れません。</p>
<p>また、文法エラーのチェックはしていないため、誤った文法を渡すとメチャクチャな結果になりますが、そこは了承の上で使って下さい。</p>
<h4>任意のエディタで Zen Coding を使う</h4>
<p>さあ、ここが本来の目的です。<br />
種明かしをすると、この Perl モジュールを使って、<a href="http://www.atok.com/useful/developer/api/plugin.html" target="_blank">ATOK のプラグイン</a>を作ればいいのです。<br />
そうすれば、任意のエディタで Zen Coding が利用可能になりますね。</p>
<p>br とか a とか頻繁に使うタグを、辞書登録したことがある人は多いんじゃないでしょうか？<br />
それを動的に行う、超強力版といったイメージです。</p>
<p>もちろんエディタのみならず、ブラウザのテキストエリアでも使えるので、ブログを書く時とか便利かも知れません。<br />
その気になれば、Word でだって Excel でだって利用可能です。</p>
<p>そんなわけで、最終目的は ATOK プラグイン化なのですが、実はまだ出来ていません。<br />
とりあえず Perl 単体で動く状態になったので公開しようと思った次第です。<br />
プラグイン化が完了したらまたアップしたいと思います。</p>
<p>まだ ATOK 16 を使っていてプラグインが使えないので、まずは ATOK のバージョンを上げないと…。</p>
<h4>ダウンロード</h4>
<p><a href="/pm/SSSCoding.pm">SSSCoding.pm</a></p>
<h4>ライセンス</h4>
<p>ライセンスは <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">MIT License</a> (<a href="http://ja.wikipedia.org/wiki/MIT_License" target="_blank">日本版 wikipedia の項</a>) で公開します。</p>
<h4>その他</h4>
<p>Perl で実装しているので CGI にもしやすいかと思います。ウェブサービスを作ってみてもいいですね。<br />
あるいは PHP とか、他の言語への移植も簡単では無いでしょうか。ニーズはさておき。</p>
<p>SSSCoding.pm の中で、閉じタグを使わないエレメントは、%SSSCoding::SINGLES で、各エレメントに追加する属性については、%SSSCoding::ATTRS で定義されています。<br />
必要に応じて修正して使って下さい。</p>
<h4>モジュール名について</h4>
<p>Zen Coding を名乗るには実装が中途半端ですし、名前がぶつかって何らか問題になるのも嫌だったので、モジュール名自体は全く別の名前にしました。<br />
&#8220;Style Sheet&#8221; Style Coding の略で、SSSCoding としています。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100225/zen-coding-for-perl/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Aptana 以外の Eclipse で Zen-Coding を有効にする方法</title>
		<link>http://www.otchy.net/20100224/zen-coding-for-general-eclipse/</link>
		<comments>http://www.otchy.net/20100224/zen-coding-for-general-eclipse/#comments</comments>
		<pubDate>Wed, 24 Feb 2010 03:13:09 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[eclipse]]></category>
		<category><![CDATA[zen-coding]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=996</guid>
		<description><![CDATA[知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた &#8211; EC studio デザインブログ で紹介されていた、Zen-Coding が激しく気になって、常用している Eclip [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html" target="_blank">知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた &#8211; EC studio デザインブログ</a> で紹介されていた、Zen-Coding が激しく気になって、常用している Eclipse で使いたいと思ったのですが、どうも Aptana で無いとすんなりとは動いてくれない様子。</p>
<p>調べていくと、Zen-Coding は、Aptana 自体の機能ではなく、Eclipse Monkey なる Eclipse プラグインの機能を用いて実現しているようだったので、普通の Eclipse でもちゃんと設定すれば動作するのではないかと踏んで、試してみました。<br />
以下、普通の Eclipse で Zen-Coding を有効にする方法です。</p>
<h4>Eclipse Monkey のインストール</h4>
<ul>
<li>ヘルプ → ソフトウェア更新 → 検索およびインストール</li>
<li>サイトの追加 → http://download.eclipse.org/technology/dash/update/</li>
<li>「Eclipse Monkey」「Mozilla Rhino」をインストール</li>
<li>しばし待つ → Eclipse 再起動</li>
</ul>
<p>[参考]<a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20090218/324952/" target="_blank">Part4 Eclipse Monkeyで統合開発環境に機能を追加 &#8211; マクロで始める実用プログラミング：ITpro</a></p>
<h4>Zen-Coding (Eclipse Monkey スクリプト) の導入</h4>
<ul>
<li><a href="http://code.google.com/p/zen-coding/downloads/list" target="_blank">Downloads &#8211; zen-coding &#8211;  Project Hosting on Google Code</a></li>
<li>「Zen Coding for Aptana v0.6.0.1」をダウンロード</li>
<li>Eclipse 上、任意のプロジェクト直下に、scripts フォルダを作成</li>
<li>ダウンロードしたファイルの中身を scripts フォルダ内に展開</li>
<li>Eclipse 再起動</li>
</ul>
<p>[参考]<a href="http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html" target="_blank">知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた &#8211; EC studio デザインブログ</a></p>
<h4>動作確認とショートカット変更</h4>
<p>導入が成功すれば、メニューに「スクリプト」が追加され、導入済みのスクリプト一覧が表示されているはずです。<br />
このメニューから選択しても、Zen-Coding の各機能を使うことが出来ます。</p>
<p>ショートカットの設定が適切であれば、メニュー内にもショートカットが表示されるのですが、元々 Eclipse には大量のショートカットが設定されているため、そのどれかとバッティングしていると、Zen-Coding のショートカットは使用することが出来ません。</p>
<p>ショートカットを利用するためには、参考リンク先にもあるように、Eclipse 側のショートカットを逃がすか、Zen-Coding のショートカットを変更する必要があります。<br />
ここでは、Zen-Coding 側のショートカットを変更する方法を紹介します。</p>
<p>ショートカットの変更は、scripts フォルダ以下にある *.js ファイルを編集して行います。<br />
例えば、HTML の展開だったら、&#8221;Expand Abbreviation.js&#8221; です。</p>
<p>冒頭 5 行目に Key: という値があり、ここでショートカットが定義されています。この辺は Zen-Coding の設定と言うよりも、Eclipse Monkey の設定ですね。<br />
ここでショートカットを変更して *.js ファイルを保存すれば、即座に反映されるので、スクリプトメニューで確認して下さい。<br />
また、仮想キーについては、下記のエイリアスが設定されているようです。</p>
<p>M1 = Ctrl<br />
M2 = Shift<br />
M3 = Alt</p>
<p>…と思ったら、CTRL、SHIFT、ALT と直接書いても大丈夫でした。こっちの方が分かりやすいですね。</p>
<p>[参考]<a href="http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html" target="_blank">  Zen-Codingのショートカットをまとめてみました &#8211; EC studio デザインブログ</a></p>
<p>以上で、すんなりと動作させることが出来ました。<br />
Zen-Coding すげぇ面白いし楽ちんです。素晴らしい！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100224/zen-coding-for-general-eclipse/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Splitwit ver 1.0.0 リリース</title>
		<link>http://www.otchy.net/20100223/splitwit-100-had-released/</link>
		<comments>http://www.otchy.net/20100223/splitwit-100-had-released/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 10:40:19 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=992</guid>
		<description><![CDATA[Splitwit Ver 1.0.0 をリリースしました。
TwitMgr のデザインをそのまま踏襲したので、思いつきからリリースまで約半日でのスピードリリースになりました。
さてこの Splitwit、何をするためのツ [...]]]></description>
			<content:encoded><![CDATA[<p><a href="/splitwit/" target="_blank">Splitwit</a> Ver 1.0.0 をリリースしました。<br />
TwitMgr のデザインをそのまま踏襲したので、思いつきからリリースまで約半日でのスピードリリースになりました。</p>
<p>さてこの Splitwit、何をするためのツールかというと、140 文字の制限がある Twitter の中で、その制限を超えて投稿するためのツールです。<br />
もちろん、既存でも同様の目的を達するためのツールはあるのですが、別サービス上に長い文章を書いて、Twitter への投稿はその冒頭部分だけで、残りはリンクで別サービスに飛んで下さい。というのが普通だったりします。</p>
<p>そもそも、そこまでの長文を書くつもりは無いんだけど、ちょっと長すぎて 140 文字に収まらないような時、わざわざ他の場所に書くのって面倒じゃないですか？<br />
Twitter クライアントで TL を見ている時に、わざわざ外部の URL を開いて投稿の内容を確認しないといけないのって、嫌じゃないですか？</p>
<p>そんなわけで、140文字を超える内容を適宜分割して、連続投稿出来るツールを作りました。</p>
<p>分割といっても、140 文字ぴったりにはこだわらず、なるべく読みやすい位置で分割をするようにしたり、連続投稿といっても、一定のバッファを設けることで、スパム判定されにくくしたり、といった工夫を凝らしています。<br />
また、各投稿にはヘッダとフッタを指定出来るので、連続投稿の関連性を分かりやすくすることも出来ます。</p>
<p>そんなこんなです。ご意見ご感想など、是非お寄せ下さい。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100223/splitwit-100-had-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>自分向け Chrome 拡張まとめ</title>
		<link>http://www.otchy.net/20100205/my-chrome-extensions-list/</link>
		<comments>http://www.otchy.net/20100205/my-chrome-extensions-list/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 04:31:26 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[chrome]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=985</guid>
		<description><![CDATA[Google Chrome v4 で正式対応したエクステンションの自分向けまとめです。
完全に自分向けですが、エクステンションごとにコメントを付けておいたので、誰かの参考になればいいかなぁと思います。
実質的には今使って [...]]]></description>
			<content:encoded><![CDATA[<p>Google Chrome v4 で正式対応したエクステンションの自分向けまとめです。<br />
完全に自分向けですが、エクステンションごとにコメントを付けておいたので、誰かの参考になればいいかなぁと思います。<br />
実質的には今使っているエクステンションのリストなので、内容に変化があったら随時更新する予定です。</p>
<h4>ブラウズ</h4>
<dl>
<dt><a href="https://chrome.google.com/extensions/detail/ajdcjichkpcfidaebcomohkhipfokoga" target="_blank">Handy Google Shortcuts</a></dt>
<dd>単に Google の各サービスへリンクするだけですが、Google に依存しまくっている人は便利。同種のエクステンションだと、<a href="https://chrome.google.com/extensions/detail/bjcpobipejlbogodeiendpdgcdambjgo" target="_blank">Google Apps Shortcuts</a> の方がメジャーなようですが、対応しているサービスがこちらの方が多く、プルダウンから直接新規メールとか作りたいのでなければこちらがお勧め。自分がよく使うサービスだけ表示するように設定変更して使います。</dd>
<dt><a href="https://chrome.google.com/extensions/detail/nfboenbdenomdojedikbbgoemlghpkjn" target="_blank">SimpleGoogleBookmarks</a></dt>
<dd>ソーシャルブックマークとしてはてブを使う一方、「よく参照するサイト」という本来の意味のブックマークとして Google Bookmarks を使っているので入れてます。タグによる絞り込みの他、日本語対応のインクリメンタルサーチが秀逸。</dd>
</dl>
<h4>ツール</h4>
<dl>
<dt><a href="https://chrome.google.com/extensions/detail/encaiiljifbdbjlphpgpiimidegddhic" target="_blank">Chromed Bird</a></dt>
<dd>シンプルに使える Twitter クライアントです。他にも API を使うツールがある場合、初期設定だと API を使い切る事が多いので、設定変更推奨。Firefox の Echofon 代替。</dd>
<dt><a href="https://chrome.google.com/extensions/detail/aphncaagnlabkeipnbbicmcahnamibgb" target="_blank"><s>Google Wave Notifier</s></a></dt>
<dd><s>Google Wave の Notifier (まんますぎる) です。wave は Gmail みたいに常用していないものの、たまーに誰か何か書くので、まさに Notifier が必要。</s><br />利用頻度が低すぎだったのと、<a href="http://jp.techcrunch.com/archives/20100304google-wave-notifications/" target="_blank">メール通知</a>が機能追加されたので、無効化。</dd>
<dt><a href="https://chrome.google.com/extensions/detail/dnlfpnhinnjdgmjfpccajboogcjocdla" target="_blank">Hatena Bookmark GoogleChrome extension</a></dt>
<dd>はてブ公式エクステンション。今開いているページのはてブ数とコメントを簡単に見るために入れてます。はてブの追加自体は <a href="/greasemonkey/hatebu-with-twitter/" target="_blank">はてブ with Twitter</a> を使いたいので、公式ブックマークレットを使ってます。</dd>
<dt><a href="https://chrome.google.com/extensions/detail/jlhlebbhengjlhmcjebbkambaekglhkf" target="_blank">Bubble Translate</a></dt>
<dd>ページ上にポップアップする辞書。英文を読む時に使ってます。</dd>
</dl>
<p>とりあえずこんなもんです。</p>
<h4>更新履歴</h4>
<dl>
<dt>2010-02-05</dt>
<dd>公開</dd>
<dt>2010-02-10</dt>
<dd>Bubble Translate を追加</dd>
<dt>2010-03-05</dt>
<dd>Google Wave Notifier 削除</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100205/my-chrome-extensions-list/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Chrome 正式版 Greasemonkey でクロスドメイン POST をする方法</title>
		<link>http://www.otchy.net/20100129/chrome-greasemonkey-cross-domain-post/</link>
		<comments>http://www.otchy.net/20100129/chrome-greasemonkey-cross-domain-post/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 05:22:05 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[greasemonkey]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[はてブ]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=974</guid>
		<description><![CDATA[最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るように [...]]]></description>
			<content:encoded><![CDATA[<p>最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るようになりました。<br />
それ自体は非常に嬉しい事だったんですが、バージョンアップに伴い、<a href="/greasemonkey/hatebu-with-twitter/">はてブ with Twitter</a> が動かなくなってしまっていました。(現在は修正済み)</p>
<p>以前、<a href="/20090923/send-post-method-to-cross-domain-only-use-javascript/">JavaScript だけでクロスドメインで POST メソッドを送る方法</a>で紹介したやり方が、Chrome のバージョンアップによって無効になってしまったためです。<br />
無効になったとはいえ、通常の JavaScript として使用する分には問題なく、Greasemonkey だけに問題が発生していました。<br />
動的に生成した iframe の contentWidow オブジェクトが取得出来なくなっており、セキュリティの制限が強化されたものと思われます。</p>
<p>最終的にはその制限を回避する方法を見つけたので、以下に解説します。</p>
<h4>通常 JavaScript の記述</h4>
<p>まず、Greasemonkey ではなく普通の JavaScript として<a href="/20090923/send-post-method-to-cross-domain-only-use-javascript/">JavaScript だけでクロスドメインで POST メソッドを送る方法</a>等を参考に、本来やりたい処理を記述します。<br />
この時は普通に script タグでスクリプトを読み込んで、正常動作を確認しておきます。</p>
<p>そして、正常に動作するスクリプトが作成出来たら、それを任意のサーバにアップします。</p>
<h4>Greasemonkey の記述</h4>
<p>以下のようなスクリプトを書きます。</p>
<pre>
(function() {
    var d = document;
    var s = d.createElement('script');
    s.src = 'http://www ...'; // スクリプトファイルをアップした場所
    d.body.appendChild(s);
})();
</pre>
<p>これだけで、本来の window オブジェクトから実行したかった処理が実行され、Greasemonkey の制限に掛かることなく、iframe を使用したクロスドメイン POST が実現します。</p>
<h4>でもちょっと待って</h4>
<p>Greasemonkey が実行されるたびに、自分のサーバから js ファイルがダウンロードされるなんて嫌ですよね？私は嫌です。レスポンスを考えたって好ましくないですし。</p>
<p>そこで、data スキームを使って外部スクリプト自体を Greasemonkey スクリプトの中に埋め込んでしまう事にします。(data スキームについては<a href="http://www.google.com/search?q=javascript+data+%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0&#038;btnG=%E6%A4%9C%E7%B4%A2" target="_blank">この辺</a>を参照して下さい。)</p>
<p>data スキームへの変換には、<a href="http://www.kawa.net/works/js/data-scheme/base64.html" target="_blank">[JavaScript] dataスキームURI生成（画像データのBase64変換）</a>を使用させていただきました。<br />
このサイトで、先ほどアップした js ファイルの URL を指定し、data スキームに変換した文字列を取得します。</p>
<p>その上で、Greasemonkey を以下のように書き換えます。</p>
<pre>
(function() {
    var data = 'data:application/x-javascript;base64,'+
        'KGZ1bmN0aW9uKCkgewoJdmFyIGQgPSBkb2N1bWVudDsKCWZ1bmN0aW9uIGdldEVsZW1lbnQoeHBh'+
        // 中略
        'fSkoKTs=';
        var d = document;
    var s = d.createElement('script');
    s.src = data;
    d.body.appendChild(s);
})();
</pre>
<p>これで、単体の Greasemonkey スクリプトでありながら、外部スクリプトを読み込んだのと同等の状況を作り出す事が出来ます。</p>
<p>これでスッキリしましたね！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100129/chrome-greasemonkey-cross-domain-post/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>自前で短縮 URL。Simple Shorten URL 公開。</title>
		<link>http://www.otchy.net/20100129/simple-shorten-url/</link>
		<comments>http://www.otchy.net/20100129/simple-shorten-url/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 00:55:07 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=941</guid>
		<description><![CDATA[自前のサーバに短縮 URL を設置したい場合の超シンプルな実装、Simple Shorten URL を作りました。DB を使わずに実装したので、レンタルサーバとかでも気軽に動かせるかと思います。
限定された URL 以 [...]]]></description>
			<content:encoded><![CDATA[<p>自前のサーバに短縮 URL を設置したい場合の超シンプルな実装、<a href="/php/simple-shorten-url/">Simple Shorten URL</a> を作りました。DB を使わずに実装したので、レンタルサーバとかでも気軽に動かせるかと思います。<br />
限定された URL 以下の URL のみ短縮可能で、特定用途にしぼった使い方を想定しています。もちろん短縮対象の URL と生成される短縮 URL のドメインは異なっていても構いません。</p>
<p>詳細については、<a href="/php/simple-shorten-url/">Simple Shorten URL</a> を見て下さい。<br />
OTCHY.NET 専用短縮 URL は <a href="http://otchy.net">http://otchy.net</a> で動作しています。</p>
<p>簡易実装と侮る事なかれ。<br />
ひたすらシンプルな実装にしたのでかなり高速に動作する上、自分専用という事で、ハッシュの長さを 3 にしているので、otchy.net で使うと、http://otchy.net/XXX となり、実は bit.ly の http://bit.ly/XXXXXX と同じ長さだったりします。</p>
<p>興味があればお試しを！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100129/simple-shorten-url/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>TwitMgr Ver 1.5.1 リリース</title>
		<link>http://www.otchy.net/20100127/twitmgr-151-hadreleased/</link>
		<comments>http://www.otchy.net/20100127/twitmgr-151-hadreleased/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 06:23:40 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Information]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=938</guid>
		<description><![CDATA[TwitterAPI.js のバージョンアップにあわせて、TwitMgr の Ver 1.5.1 をリリースしました。
TwitterAPI.js のバージョンアップによって、Firefox 3.6 に対応したり、地味な [...]]]></description>
			<content:encoded><![CDATA[<p><a href="/javascript/twitter-api/">TwitterAPI.js</a> のバージョンアップにあわせて、<a href="/twitmgr/" target="_blank">TwitMgr</a> の Ver 1.5.1 をリリースしました。</p>
<p>TwitterAPI.js のバージョンアップによって、Firefox 3.6 に対応したり、地味なところでは API の多重アクセスがあってもエラーにならなくなったりしています。<br />
TwitterAPI.js に Ver 0.9.3 で実装した再ログイン機能についても、TwitMgr に取り込んだので、複数アカウントを管理したい人は便利になったんじゃないかと思います。</p>
<p>フレンズとフォロワを取得する API の仕様が変わったために上手く動作していなかった部分についても修正しました。<br />
従来の API はページを指定する事で、100 件を超えるユーザを取得していたのが、カーソルを指定する事で取得するように API が変わっていたのですね。</p>
<p>フォロワがせいぜい 1,000 くらいまでのうちは別にページ式でもいいですが、100,000 件とか言うユーザも英語圏ではザラにいるので、そういうケースに対応しやすくするためでしょう。<br />
従って、何件中の何番目、という遷移はできなくなり、「次へ」「前へ」式の遷移になりました。</p>
<p>また、フレンズとフォロワの管理についてはカーソル式に対応したのですが、そこで力尽きたので「分析」機能についてはいったんオミットしています。<br />
この辺はまたいずれ復活させたいところですね。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100127/twitmgr-151-hadreleased/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>TwitterAPI.js Ver 0.9.4 リリース。Firefox 3.6 に対応。</title>
		<link>http://www.otchy.net/20100126/twitterapijs-ver-09-had-released/</link>
		<comments>http://www.otchy.net/20100126/twitterapijs-ver-09-had-released/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 04:20:15 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=935</guid>
		<description><![CDATA[TwitterAPI.js の Ver 0.9.4 をリリースしました。
一部、不具合の修正もありますが、メインは Firefox 3.6 に対する対応です。
元々 Firefox のブラウザ判定にワンライナー (/a/ [...]]]></description>
			<content:encoded><![CDATA[<p><a href="/javascript/twitter-api/">TwitterAPI.js</a> の Ver 0.9.4 をリリースしました。</p>
<p>一部、不具合の修正もありますが、メインは Firefox 3.6 に対する対応です。<br />
元々 Firefox のブラウザ判定にワンライナー (/a/[-1]==&#8217;a') を使っていたのですが、それが 3.6 から無効になり、Fx 3.6 で正常動作していませんでした。<br />
こういうイレギュラーなのはあんまり使うもんじゃ無いですね…。</p>
<p>一方、UTF-8 以外の文字コードで使用した場合に、Chrome で文字化けする問題の解決も試みましたがダメでした。<br />
document.createElement(&#8217;iframe&#8217;) した iframe は、元のページのエンコードにかかわらず UTF-8 で生成されるのが Chrome 以外のブラウザの実装なのですが、Chrome だけは律儀に元のページのエンコードを引き継ぐため、文字化けが発生してしまっています。</p>
<p>meta タグで Content-Type を指定してみたり、document.open で、Content-Type を指定してみたりしたのですが上手くいかず挫折です。<br />
誰か Chrome 上で元のページのエンコードにかかわらず、UTF-8 の iframe を生成するいい方法を知っていたら教えて下さい。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100126/twitterapijs-ver-09-had-released/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2009年ブログ記事アクセス数ランキング</title>
		<link>http://www.otchy.net/20100103/blog-entry-ranking-2009/</link>
		<comments>http://www.otchy.net/20100103/blog-entry-ranking-2009/#comments</comments>
		<pubDate>Sat, 02 Jan 2010 15:29:17 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Information]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=895</guid>
		<description><![CDATA[OTCHY.NET を開設して、このブログに最初の記事を投稿したのは、2008 年 12 月 23 日の事で、それから約 1 年経ちました。
今回は、2010 年までブログが続いたら是非やりたいと思っていた企画、自ブログ [...]]]></description>
			<content:encoded><![CDATA[<p>OTCHY.NET を開設して、このブログに最初の記事を投稿したのは、<a href="http://www.otchy.net/20081223/otchy-net-published/">2008 年 12 月 23 日</a>の事で、それから約 1 年経ちました。<br />
今回は、2010 年までブログが続いたら是非やりたいと思っていた企画、自ブログのアクセス数ランキングを発表したいと思います！</p>
<p>おかげさまで昨年の1年間で、ブログのアクセス数自体は順調に伸び続けました。(年末の落ち込みは、Web 全体のアクティブ率が落ち込んでいるせい…と信じています。)</p>
<p><a href="http://www.otchy.net/wp-content/uploads/2009/11/chart.png"><img src="http://www.otchy.net/wp-content/uploads/2009/11/chart-300x66.png" alt="chart" title="chart" width="300" height="66" class="aligncenter size-medium wp-image-923" /></a></p>
<p>途中、目立った山が 2 カ所ありますがその部分については、ランキングの解説の中に書いていきます。</p>
<p>果たして、最もアクセス数を稼いだブログ記事は何だったのでしょうか？<br />
はてブを付けて頂いた数のランキングについては、メニューの中にブログパーツを貼り付けてあって常に表示された状態なので、ここではアクセス数を元にしたランキングを発表します。</p>
<h4>トップ 3</h4>
<p>[1]<a href="/20090629/making-of-twitter-bot-1/">Twitter ボットの作り方 Perl 編 (1)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090629/making-of-twitter-bot-1/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090629/making-of-twitter-bot-1/" /></a></p>
<p>2009 年の栄えある第 1 位は 「Twitter ボットの作り方 Perl 編 (1)」でした！</p>
<p>期間を空けて連載した記事の第 1 回になります。連載が完結する前から結構アクセスが多く、興味を持ってもらった方が多かったのだと思います。<br />
連載完結後に目次を追加してからは、目次のアクセスもかなり伸びたのですが、その時点ではすでに Google 的にも第 1 回の評価が高く、注目度では常に第 1 回の記事がトップでした。</p>
<p>記事を書く立場としては、まとめとしての目次を最初に読んでもらえた方が全体の見通しが良くてお勧めなので、今度また連載記事を書く事があれば、その辺を気にしたいと思います。<br />
最初に目次を公開して、目次の内容については順次更新するなどでしょうか。</p>
<p><a href="http://www.google.co.jp/search?q=twitter+%E3%83%9C%E3%83%83%E3%83%88+%E4%BD%9C%E3%82%8A%E6%96%B9" target="_blank">「Twitter＋ボット＋作り方」検索</a> では、ずっと上位にいるので Google からの流入が多いですね。<br />
今もってアクセス数の稼ぎ頭といえます。</p>
<p>[2]<a href="/20091028/tohoho/">とほほさん騒動まとめ(結論はとほほ(杜甫々)さん≠平志朗氏)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20091028/tohoho/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20091028/tohoho/" /></a><br />
そして、とほほさんの騒動のまとめが次点でランクインしました。</p>
<p>詳細は記事内容を読んでもらうとして、Twitter 世界の情報伝達の早さに驚いた事件です。<br />
まとめ記事としてもスピードが重要と考え、情報の裏が取れた直後からすぐに書き始め、1時間足らずでまとめ上げましたが、まだ混乱が収まらない時期に公開してしまったので、一時期はアクセス集中によりサーバダウンの憂き目を見ました。</p>
<p>サーバが落ちている間、<a href="http://www.otchy.com">OTCHY.COM</a> に同内容のプレーンテキストをおいて、アクセスをそちらに誘導するなどしたので、そこのアクセスまでカウントに入れれば 1 位はこちらの記事だったかもしれません。</p>
<p>それほど Twitter 爆発の破壊力はすさまじかったです。はてブのホッテントリに &quot;かする&quot; 程度はそれまでも何度かあったり、いわゆるアルファブロガーの方に紹介されたりした事もあったのですが、それらからのアクセスを軽く凌駕するアクセスがほんの数時間のうちに集中しました。<br />
最初に出したグラフの右側の山は、この記事に対するアクセスが殆どになります。</p>
<p>[3]<a href="/20090508/chanto-yomechau/">ちんゃと よゃちめう？ジェネレータ。</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090508/chanto-yomechau/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090508/chanto-yomechau/" /></a><br />
冒頭のグラフの左側の山が、この記事へのアクセスになります。<br />
<a href="http://www.asks.jp/users/hiro/59059.html" target="_blank">読めることが間違い？ : ひろゆき＠オープンSNS</a>という記事に触発されて、ジェネレータを作って公開したところ、瞬く間にアクセスが伸びました。<br />
仕組み自体は簡単な物なので、その後もいろんなジェネレータが公開されましたが、それらの中でもかなり早い段階で公開した事でより多くのアクセスを集められたようです。<br />
当時、おもしろがっていろんなブログなどから紹介してもらいました。</p>
<p>確か、最初の記事を読んでから 1 時間かそこらで書き上げて公開したような気がします。<br />
こういうスピードで開発をしたり、ウェブページを公開できたりするのは、ecoder とか WordPress とかウェブベースで動作するツールの力に寄るところが大きいですね。</p>
<h4>トップ 4～10</h4>
<p>[4]<a href="/20090629/making-of-twitter-bot-2/">Twitter ボットの作り方 Perl 編 (2)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090629/making-of-twitter-bot-2/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090629/making-of-twitter-bot-2/" /></a><br />
[5]<a href="/20090726/making-of-twitter-bot-index/">Twitter ボットの作り方 Perl 編 (目次)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090726/making-of-twitter-bot-index/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090726/making-of-twitter-bot-index/" /></a><br />
[6]<a href="/20090710/making-of-twitter-bot-3/">Twitter ボットの作り方 Perl 編 (3)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090710/making-of-twitter-bot-3/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090710/making-of-twitter-bot-3/" /></a><br />
[7]<a href="/20090719/making-of-twitter-bot-4/">Twitter ボットの作り方 Perl 編 (4)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090719/making-of-twitter-bot-4/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090719/making-of-twitter-bot-4/" /></a><br />
4～7 位は 1 位となった、Twitter ボットの作り方シリーズの記事がランクインしています。内容的にはシリーズ物なので、特筆すべき事は無いですが、アクセス数を計測すると、第 1 回から順に読み始めて、少しずつ脱落 (？) していく様子が分かります。<br />
連載記事はどれもそうですが、全ての人に最後まで読んでもらえるというのは残念ながらありえないので、最後まで脱落しない割合がどの程度か、というのが一つの指標だと思います。</p>
<p>[8]<a href="/20090519/frame-like-css-layout-for-ie6/">css による疑似フレーム IE6 標準準拠モード完全対応版 (CSS ハック / JavaScript未使用)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090519/frame-like-css-layout-for-ie6/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090519/frame-like-css-layout-for-ie6/" /></a><br />
当ブログは、プログラミングに関するネタが多いのですが、ここで Web デザイン寄りの記事がランクインです。Web デザインと言ってもまあ css のテクニックなのでかなり技術寄りの話ですね。<br />
ここで紹介しているテクニックには、同じような目的を達するための手法が色々とあるのですが、IE6 標準準拠モードに対応、CSS ハック / JavaScript 未使用のものは、他に無いのではないかと思います。</p>
<p>[9]<a href="/20090813/decode-english-test-by-excel/">「解読がとても難しい英語テストの解答用紙」を Excel で解読</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090813/decode-english-test-by-excel/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090813/decode-english-test-by-excel/" /></a><br />
タイトルまんまですが、<a href="http://gigazine.net/index.php?/news/comments/20090813_english_test/" target="_blank">GIGAZINE で紹介された</a>暗号っぽいものの解読です。<br />
GIGAZINE にトラックバックした直後から、多くのアクセスを集めてトップ 10 入りしました。</p>
<p>[10]<a href="/20090726/making-of-twitter-bot-5/">Twitter ボットの作り方 Perl 編 (5)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090726/making-of-twitter-bot-5/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090726/making-of-twitter-bot-5/" /></a><br />
ここで再び、Twitter ボットの作り方がランクイン。ランキング的にはもはやノイズですね…。</p>
<h4>トップ 11～20</h4>
<p>以下 20 位まではざっくりと紹介します。</p>
<p>[11]<a href="/20090413/twitmgr-published/">Twitter のスパムフォローを簡単にブロック &#8211; TwitMgr 公開</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090413/twitmgr-published/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090413/twitmgr-published/" /></a><br />
OTCHY.NET の一番人気コンテンツ <a href="/twitmgr/" target="_blank">TwitMgr</a> 公開時の紹介記事です。</p>
<p>[12]<a href="/20090923/send-post-method-to-cross-domain-only-use-javascript/">JavaScript だけでクロスドメインで POST メソッドを送る方法</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090923/send-post-method-to-cross-domain-only-use-javascript/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090923/send-post-method-to-cross-domain-only-use-javascript/" /></a><br />
意外と苦労するトピックらしく、検索からの流入が多い記事です。</p>
<p>[13]<a href="/20090319/twitter-api-js-published/">JavaScript から Twitter API を簡単操作―TwitterAPI.js 公開</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090319/twitter-api-js-published/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090319/twitter-api-js-published/" /></a><br />
おかげさまで、「<a href="http://www.google.co.jp/search?q=JavaScript+Twitter+API" target="_blank">JavaScript Twitter API</a>」検索では不動の１位となっています。そもそも TwitterAPI.js は、TwitMgr を作成する際の副産物なんですよ。</p>
<p>[14]<a href="/20090313/reboot-remote-service-from-local/">別の PC のサービスをリモートで再起動する方法</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090313/reboot-remote-service-from-local/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090313/reboot-remote-service-from-local/" /></a><br />
ちょっとした Windows の小技。当ブログの記事で、初めてまとまったはてブがついた記事でもありました。</p>
<p>[15]<a href="/20090419/google-app-engine-java-development-in-usb-memory-2/">Google App Engine for Java 開発環境を USB メモリで持ち歩く (2)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-2/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-2/" /></a><br />
GAE/j をいじり始めた時に、最初は開発環境を USB メモリ上に作ったので、そのときの記録です。なぜか連載第 2 回が一番のアクセスを集めています。</p>
<p>[16]<a href="/20090601/win-r-super-tips/">「ファイル名を指定して実行」超活用法</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090601/win-r-super-tips/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090601/win-r-super-tips/" /></a><br />
これは個人的にはイチオシのテクニック。試した事が無ければぜひお試しください。</p>
<p>[17]<a href="/20090128/php-chartype-judgment-in-utf8/">PHP で日本語のひらがなとカタカナと漢字を判別する方法 [UTF-8編]</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090128/php-chartype-judgment-in-utf8/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090128/php-chartype-judgment-in-utf8/" /></a><br />
このブログではめずらしい、PHP の記事。検索からの流入でじみ～にアクセスを稼いでいます。</p>
<p>[18]<a href="/20090419/google-app-engine-java-development-in-usb-memory-1/">Google App Engine for Java 開発環境を USB メモリで持ち歩く (1)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-1/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-1/" /></a><br />
15 位の記事とセットです。</p>
<p>[19]<a href="/20090219/bottom-image-floating/">右下または左下においた画像に文字列を回り込ませるHTML/CSS</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090219/bottom-image-floating/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090219/bottom-image-floating/" /></a><br />
css がらみの記事は、ニッチなニーズに応える記事が多いですね。</p>
<p>[20]<a href="/20090105/mysql-backup-gmail/">MySQL のダンプを Gmail でお手軽に定期バックアップ</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090105/mysql-backup-gmail/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090105/mysql-backup-gmail/" /></a><br />
MySQL に限らず、他にも色々と応用可能なのでオススメです。</p>
<h4>トップ 21～50</h4>
<p>これ以下は、ひたすらタイトルを羅列してみます。この辺にきて、ようやく読み物系の記事がランクインし始めますね。</p>
<p>[21]<a href="/20090416/post-utf8-charset-by-only-javascript/">JavaScript だけで Shift_JIS/EUC-JP のページから UTF-8 に変換して POST する方法</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090416/post-utf8-charset-by-only-javascript/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090416/post-utf8-charset-by-only-javascript/" /></a><br />
[22]<a href="/20090119/display-resolution-website-width/">PC ディスプレイの解像度とウェブサイトの横幅</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090119/display-resolution-website-width/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090119/display-resolution-website-width/" /></a><br />
[23]<a href="/20090509/chanto-yomechau-generator-list/">ちんゃと よゃちめう？系ジェネレータまとめ</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090509/chanto-yomechau-generator-list/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090509/chanto-yomechau-generator-list/" /></a><br />
[24]<a href="/20090131/2eco-of-seiyu-self-register/">西友のセルフレジを取り巻く２つのエコ</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090131/2eco-of-seiyu-self-register/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090131/2eco-of-seiyu-self-register/" /></a><br />
[25]<a href="/20090108/blank-icon-auto-addition/">外部リンクに自動でアイコンを付与</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090108/blank-icon-auto-addition/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090108/blank-icon-auto-addition/" /></a><br />
[26]<a href="/20090419/google-app-engine-java-development-in-usb-memory-3/">Google App Engine for Java 開発環境を USB メモリで持ち歩く (3)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-3/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090419/google-app-engine-java-development-in-usb-memory-3/" /></a><br />
[27]<a href="/20081226/windows-macosx-linux-ui/">Windows が Mac OS X よりも Linux よりも優れているたった 1 つのこと</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20081226/windows-macosx-linux-ui/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20081226/windows-macosx-linux-ui/" /></a><br />
[28]<a href="/20090414/webcomics-are-frontier/">Web漫画は未開拓のフロンティアだ</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090414/webcomics-are-frontier/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090414/webcomics-are-frontier/" /></a><br />
[29]<a href="/20090120/first-five-lines-of-greasemonkey/">Greasemonkey スクリプトの冒頭に書く 5 行</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090120/first-five-lines-of-greasemonkey/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090120/first-five-lines-of-greasemonkey/" /></a><br />
[30]<a href="/20090416/bookmarklet-for-twitter/">閲覧中のページについてそこから遷移せずTwitterでつぶやくためのブックマークレット</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090416/bookmarklet-for-twitter/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090416/bookmarklet-for-twitter/" /></a><br />
[31]<a href="/20090316/photoshop-tutorial-for-sakura/">パッとしない桜の写真を鮮やかにする Photoshop チュートリアル</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090316/photoshop-tutorial-for-sakura/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090316/photoshop-tutorial-for-sakura/" /></a><br />
[32]<a href="/20090804/total-hatebu-count-with-google-chart-api/">Google Chart API を使って自サイトの合計はてブ数をグラフ化する</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090804/total-hatebu-count-with-google-chart-api/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090804/total-hatebu-count-with-google-chart-api/" /></a><br />
[33]<a href="/20090225/view-nico-video-with-no-account/">ログインしないでニコ動を見るためのブックマークレット</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090225/view-nico-video-with-no-account/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090225/view-nico-video-with-no-account/" /></a><br />
[34]<a href="/20090115/huge-binary-versioning-system/">巨大なバイナリを扱えるバージョン管理システムを夢想してみる</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090115/huge-binary-versioning-system/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090115/huge-binary-versioning-system/" /></a><br />
[35]<a href="/20090330/server-side-editor-ecoder-installation/">サーバサイド高機能エディタ ecoder インストール方法</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090330/server-side-editor-ecoder-installation/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090330/server-side-editor-ecoder-installation/" /></a><br />
[36]<a href="/20090224/mobile-twitter-with-only-html/">HTML のみで携帯から Twitter する</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090224/mobile-twitter-with-only-html/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090224/mobile-twitter-with-only-html/" /></a><br />
[37]<a href="/20090304/copy-excel-data-by-synergy/">Synergy のクリップボード共有で Excel のデータを貼り付ける</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090304/copy-excel-data-by-synergy/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090304/copy-excel-data-by-synergy/" /></a><br />
[38]<a href="/20090403/ajaxplorer-and-ecoder-on-google-chrome/">Google Chrome × AjaXplorer / ecoder が快適すぎる件について</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090403/ajaxplorer-and-ecoder-on-google-chrome/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090403/ajaxplorer-and-ecoder-on-google-chrome/" /></a><br />
[39]<a href="/20090617/url-encode-one-liner-by-perl/">テキストファイルを URL エンコードして保存する perl のワンライナー</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090617/url-encode-one-liner-by-perl/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090617/url-encode-one-liner-by-perl/" /></a><br />
[40]<a href="/20090425/twitter-dm-error-cause/">Twitter ダイレクトメッセージ誤配送の原因を推測してみた</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090425/twitter-dm-error-cause/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090425/twitter-dm-error-cause/" /></a><br />
[41]<a href="/20090525/answer-of-greasemoneky-javascript-beginner/">「Greasemoneky(JavaScript)入門」への回答</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090525/answer-of-greasemoneky-javascript-beginner/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090525/answer-of-greasemoneky-javascript-beginner/" /></a><br />
[42]<a href="/20090218/ie-standard-javascript-library/">IE を標準準拠っぽく動作させる JavaScript ライブラリまとめ</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090218/ie-standard-javascript-library/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090218/ie-standard-javascript-library/" /></a><br />
[43]<a href="/20090604/dosei3-on-twitter-released/">Twitter 上のどせいさんの素敵なお言葉をいつものフォントで表示するグリモン</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090604/dosei3-on-twitter-released/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090604/dosei3-on-twitter-released/" /></a><br />
[44]<a href="/20091104/use-jquery-on-greasemonkey/">Greasemonkey で 超お手軽に jQuery を使うスニペット</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20091104/use-jquery-on-greasemonkey/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20091104/use-jquery-on-greasemonkey/" /></a><br />
[45]<a href="/20091204/is-google-ms-today/">Google は現代の MS か？独禁法で訴えられる日は来るのか？</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20091204/is-google-ms-today/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20091204/is-google-ms-today/" /></a><br />
[46]<a href="/20091113/small-change-technic/">お釣りの小銭を減らすように支払う裏ワザ(暗算不要)</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20091113/small-change-technic/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20091113/small-change-technic/" /></a><br />
[47]<a href="/20091102/twitterapijs-ver-093-had-released/">TwitterAPI.js Ver 0.9.3 リリース。大幅刷新。</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20091102/twitterapijs-ver-093-had-released/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20091102/twitterapijs-ver-093-had-released/" /></a><br />
[48]<a href="/20090227/firefox-extentions-for-web-developpers/">Web 開発者向けお勧め Firefox エクステンション</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090227/firefox-extentions-for-web-developpers/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090227/firefox-extentions-for-web-developpers/" /></a><br />
[49]<a href="/20090226/simple-timer-bookmarklet/">簡易タイマーとして利用できるブックマークレット</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20090226/simple-timer-bookmarklet/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20090226/simple-timer-bookmarklet/" /></a><br />
[50]<a href="/20081231/dio-the-world-1/">ディオはザ・ワールドを発動した瞬間に自滅する[前編]</a> <a href="http://b.hatena.ne.jp/entry/www.otchy.net/20081231/dio-the-world-1/"><img src="http://b.hatena.ne.jp/entry/image/http://www.otchy.net/20081231/dio-the-world-1/" /></a></p>
<h4>まとめ</h4>
<p>2008 年 12 月 23 日のブログ開設から約 1 年間で合計 71 本の記事をアップしました。その中で、アクセス数の多かった記事には 2 つのパターンがあります。</p>
<p>まず 1 つは、年間 1 位だった「Twitter ボットの作り方」のように純粋な技術系の記事です。こういう系の記事は検索エンジンからの流入が主で、瞬発力はないものの長期間に渡って一定のアクセスがあります。<br />
もともとこのブログはそういったロングテール的なアプローチを主として書いているので、そういう記事が 1 位になった事は嬉しかったですね。</p>
<p>もう 1 つは、瞬なネタを扱った記事です。2 位、3 位あたりがまさにそうで、検索からの流入はもとより、はてブやトラックバック、Twitter から記事に飛んでくる人が多いです。<br />
ヒットすると爆発的なアクセスになる一方、飽きられるのも早いのでロングテールにはなり得ません。<br />
例えば、先行していた 3 位の「ちんゃと よゃちめう？ジェネレータ。」と 1 位の「Twitter ボットの作り方」の総アクセス数を時系列でグラフに並べたら、ジェネレータは最初に急進した後、ほぼ横ばいの微増のグラフとなる一方、じわじわと Twitter ボットがアクセス数で追い抜いていく様子が見れると思います。</p>
<p>一方、アクセスが少なかったのは、技術系でもない、瞬なネタでもない、読み物系の記事です。<br />
個人的には結構な自信作も混ざっているのですが、閑古鳥が鳴くケースが多いです。<br />
これは、RSS リーダ等へ登録してもらっている数がまだまだ少ないからなのか、単に独りよがりで面白くない記事だからなのか、後者…ですかね？精進します。</p>
<p>そんなわけで、2010年も当ブログをよろしくお願いします。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20100103/blog-entry-ranking-2009/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
