忍者ブログ

Home > > 最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた

[PR]

  • 2017-12-16

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > 最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた

Home > JavaScript > 最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた

最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた

Share on Tumblr このエントリーをはてなブックマークに追加

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だし、大丈夫!
…なはず(>_<)

[忘れたこと]

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

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた from Born Neet

Home > JavaScript > 最高のローディングアイコン!?Fastladderの棒人間だけを抜き出してみた

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top