Born Neet

Fastladder(or livedoor Reader）を使ってる人にはおなじみの棒人間ローダ。
かわいいですよねー。

で、せっかくオープンソースなんだから、ということでやってみました。

これです↓

[やったこと]

ダウンロード

まずは、Fastladderのソースを取ってきます。

Subversion(svn)が必要です。（※）
Trac Lightningなら、pythonまでついて来ていいですよ。
（これでハッカーの仲間入り！？）

svnさえ入れちゃえばあとは簡単です。

コマンドプロンプトを起動して、保存したいディレクトリに移動。

cd ディレクトリパス

ですね。（知ってるって？いや、一応ね…）

そして、fastladder - Google Codeにしたがって、

svn checkout http://fastladder.googlecode.com/svn/trunk/ fastladder-read-only 

と入力&Enterすれば、自動的にダウンロード（チェックアウト）されます。
（-read-onlyは書かなくてもいいっぽいですね）

※ と思ってたらFastladder Open Source / Free DownloadからUnix版をダウンロードすればいいだけでした^^;
　　まぁ最新のソースはsvnがないとダメってことで（笑）

ソースを見る

ソースは無事手に入れましたが、どうやって棒人間を操ってるのかイマイチわかりません…ということにします。
ここで役に立つのがWeb Developer。
「枠表示」→「マウスカーソルの個所を枠で囲う」とやれば、棒人間の情報を教えてくれます。

こんな風に。


というわけで、棒人間はloadiconというid(#)を持つらしいことがわかりました。

ここまでくれば楽勝です。

Devas等で、*.jsファイル内の"loadicon"を検索すれば、わんさかヒットします。

とまぁ、なんだかんだで見つけ出して、ごにょごにょしたソースがこちら。

/**
 * original: http://fastladder.org/
 *
 * fastladder/public/js/reader_main.js
 * 3272～
 */

var LoadEffect = {
//	ICON_PATH : "/img/icon/",
	ICON_PATH : "http://file.blog.bornneet.com/",
	LOADICON_NUM : 1,
	RESTICON_NUM : 3,
	Start : function(){
		var L = LoadEffect;
		var path = L.ICON_PATH;
		if(L.LOADICON_NUM > 1){
//			var n = 1 + Math.floor(Math.rand(L.LOADICON_NUM));
			var n = 1 + Math.floor(Math.random() * L.LOADICON_NUM);
			path += "loading" + n + ".gif";
		} else {
			path += "loading.gif";
		}
//		$("loadicon").src = path;
		document.getElementById("loadicon").src = path;
//		setStyle("loading",{visibility:"visible"})
//		document.getElementById("loadicon").style.visibility = 'Visible';
	},
	Stop : function(){
		var L = LoadEffect;
		var path = L.ICON_PATH;
		if(L.RESTICON_NUM > 1){
//			var n = 1 + Math.floor(Math.rand(L.RESTICON_NUM));
			var n = 1 + Math.floor(Math.random() * L.RESTICON_NUM);
			path += "rest" + n + ".gif";
		} else {
			path += "rest.gif";
		}
//		$("loadicon").src = path;
		document.getElementById("loadicon").src = path;
	}
};

fastladder/public/js/reader_main.jsの3272行目～ほぼそのままです。
(fl_aio.jsにもありますが、そっちは全ソースをまとめてあるだけのファイルっぽいのでreader_main.jsから引用してます)

Fastladder内の関数に依存する部分は変更しました。
（$、setStyle、Math.randの3つです。setStyle部分は特に（僕は）いらなかったので変更後のソースもコメントアウトしてます）

あと、pathは自分が画像ファイルを置くパスに変更する必要があります。

画像を探す

最後に、画像をどうにかすれば完了です。

Firefoxなら画像上で右クリックすると、「画像の表示」とか「URLのコピー」があるので、URLを知ることができます。
その方法でバテている棒人間（上の画面キャプチャで表示されています）を調べると、「rest1.gif」という画像名でした。

そして、fastladderフォルダ内を"rest1.gif"で検索すると、public/img/iconに格納されていることがわかりました。

さらに、ソースと見比べつつ画像を物色した結果、どうやら、



の4種類が使われているようです。

これらを、pathに設定したところに置けば無事動くはずです。

お疲れ様でした！

[ブログに使う]

…これだけで終わるとホントに「抜き出し」ただけなのでなんかやってみましょう。

ということで、このブログに張ってみました。
（右上のキーボードアイコンの左横です。わかりにくい説明…）

これまでの手順よりさらに簡単ですので、皆さんのブログにもどうですか？
やり方は以下のとおりです。

予め、上の4種類の画像をアップロードしておきます。

次に、

<img id="loadicon" src="http://file.blog.bornneet.com/loading.gif" />

とかいうimgタグをiconを表示したいところに書きます。

そして、下のような手抜きスクリプト

var stopLoadIcon = function(id) {
	var path = 'http://file.blog.bornneet.com/';
	var RESTICON_NUM = 3
	var n = Math.ceil(Math.random() * RESTICON_NUM);
	var src = path + "rest" + n + ".gif";
	document.getElementById(id).src = src;
}

をどこかで読み込んで or 書いておきます。

さらに、ページで実行されるjsの最後っぽいところで、

stopLoadIcon('loadicon');

と呼び出せばOKです。

これでローディング中の読者のイライラが少しは軽減されるかもしれません。
いつも重くてすいませんm(_ _)m

[心配ごと]

いくらオープンソースとはいえ、画像のみ（ほぼそう言えるでしょう）を抽出して使っちゃっていいものか。
まぁ、OSSライセンスの中でも特に緩い部類に入る（と僕は理解している）MITだし、大丈夫！
…なはず(>_<)

[忘れたこと]

あっ！吹き出し系の処理も一緒に抜き出そうと思って忘れてた…。
えーと…いつかやるかもです。