javascript Archive

Last.FM から再生履歴を取得して表示するツールです。このページの左のツールバーで動いています。本家にインスパイアして作成したのですが、次の点で拡張しています。

1. 一定時間たつと自動で表示内容を更新する。
2. アルバムアートが見つからない場合、アーティストの画像で代替する。
3. 各曲の情報を順番にフェイド・インして表示する。
4. strftime.js を使って Last.FM プロフィールページのように再生時刻を表示する。

サンプルページを開く

そしてついでに github デビュー。

delphinus35/lastfm - GitHub
https://github.com/delphinus35/lastfm

設置方法などは README.md と付属の sample.html に書いているのでそちらを見てください。

Last.FM の API Key の取り方など、細かいことは前回の記事参照。でもまあ、特別なことしない限り付属の API Key をそのまま使って問題ないっぽいです。

ホントは何ヶ月も前にできてたんだけど、ドキュメント書いたりするのが面倒でほったらかしてました。何とか今年中に公開できて良かった。

では、良いお年を！

Continue reading

今更ながら、Prototype.js でクラスの継承とオーバーライドをやってみた記録。

しばらく使ってなかったら、$super() という便利なものができていた。

コード例

メソッドを定義するとき第一引数に $super を与えると、親クラスの同名のメソッドへの参照が与えられる。これを使ってメソッドのオーバーライドが簡単にできるのだ。

第二引数以降は親クラスから順に与えられる。これを使って引数の数すら変えることができる。上の例で言えば、Parent クラスの say() メソッドは引数を一つ採るが、Child クラスの say() メソッドは二つ採る。

Continue reading

とある Web アプリケーションを作っていたときのこと、Firefox ではまともに動くのに、IE ではバージョンを問わず機能しないことがあった。調べてみると、（珍しいことに）IE の方が仕様に則った正しい動作をしていたためであった。

最初に結論を言うと、毎回違う結果が欲しいのなら、$.getJSON() よりも $.post() を使えって話。

GET メソッドによるサーバーアクセスはブラウザにキャッシュされる。同じパラメータでのアクセスを繰り返そうとしても、ブラウザによっては、ローカルキャッシュを返すことでサーバーへのアクセスを行わない。これは GET メソッドの冪等性を考えれば自明のことだ。

冪等 - Wikipedia

冪等性は、大雑把に言って、ある操作を1回行っても複数回行っても結果が同じであることをいう概念である。

（中略）

HTTP の GET 要求は冪等とみなされる。Webの機構は基本的にその前提で要求結果をキャッシュに保持する。HTTP の POST 要求（フォーム送信に使われる）は冪等とはみなされないため、POST 要求はキャッシュされない。

Continue reading

このサイトでは画像の表示に slimbox を使っているのだが、いつの頃からか IE でバグって使えなくなっていたようだ。……そう、そもそも IE ではサイトの検証を全然してなかったのだorz

画像をクリックすると、謎のエラー「オブジェクトでサポートされていないプロパティまたはメソッドです。」が出てしまう。

IE8 の開発者ツールでデバッグしてみると、6289 行目（v1.4.4）、或いは、7284 行目（v1.5）が原因のようだ ^*1 。このエントリーによると、Colorbox、Fancybox といったライブラリも使用不能になっていた模様。

Kawaz - 2010/12/17に書かれた日記一覧
http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fwww.kawaz.org%2Fblogs%2F2010%2F12%2F17%2F&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a

var elemdisplay = {},
	rfxtypes = /^(?:toggle|show|hide)$/,
	rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
	timerId,
	fxAttrs = [
（以下略）

これを以下のように書き換えると直る。

var elemdisplay = {},
	rfxtypes = /^(?:toggle|show|hide)$/,
	rfxnum = new RegExp( '^([+\-]=)?([\d+.\-]+)([a-z%]*)$', 'i' ),
	timerId,
	fxAttrs = [
（以下略）

jQuery-1.x.x.min.js を使っている場合は簡単に書き直せないので Perl を使った。

$ perl -i.orig -ple "s:bT=/([^/]*)/i:bT=new RegExp('\1','i'):" jquery-1.5.min.js

Vim 7.3 の新機能“conceal”の使い道がよくわからなかったのだが、こんな使用例があるようだ。

js-mask - More concise JavaScript using Vim's "conceal" feature : vim online
http://www.vim.org/scripts/script.php?script_id=3324

Javascript では“function(){}”をひたすら重ねていくのでコードが冗長になりがち。それを見た目なりときれいにしてしまおうというのがこのプラグイン。

例えばこんなコードが、

// 1～5の合計「15」と表示する
(function(){
    alert(
        (function( ary ){
            function sum( a ) {
                var s = 0;
                a.forEach( function( i ){ s += i } );
                return s;
            }
            return sum( ary );
        })( [ 1, 2, 3, 4, 5 ] );
    );
})();

Continue reading

ものすごく車輪の再発明な気もするが、備忘録としておいておく。

Perl クックブックのレシピ 2.16 によると、表題のことを行う関数は次のように表せる。

sub commify {
    my $text = reverse $_[0];
    $text =~ s/(\d\d\d)(?=\d)(?!\d*\.)/$1,/g;
    return scalar reverse $text;
}

これを Javascript で表すと次のようになる。

String.prototype.reverse=function(){return this.split('').reverse().join('')};
Number.prototype.commify=function(){return this.toString().reverse().replace(/(\d\d\d)(?=\d)(?!\d*\.)/g,'$1,').reverse()};

// 使用例
alert( (123456789).commify() );     // 「123,456,789」
alert( (-123456789).commify() );    // 「-123,456,789」
alert( (1234.56789).commify() );    // 「1,234.56789」

Continue reading

Last.FM は、PC や iPhone などの DAP で音楽を聴く人にとって必携のツールだ。SNS 的な機能を抜きにしても、自分の音楽嗜好に合わせて似たアーティスト・楽曲を提案してくれる機能は非常に便利。

Flash 版 Last.FM ウィジェット

以前の記事で、Last.FM の情報を表示してくれるウィジェットについて書いた。

このウィジェットは Flash を使っており、いまいち好みでなかったこと、また、いつの間にか公式サイトでも非推奨になってしまったことから使用を止めていた ^*1 。

jQuery 版 Last.FM ウィジェット

そこでググってみると、Last.FM API を利用したウィジェットを発見。早速利用してみた。

Last.FM for jQuery
http://labs.engageinteractive.co.uk/lastfm/

上記サイトにも導入方法は書いてあるのだが、改めて纏めてみる。

Continue reading

Javascript でオブジェクトを new するとき、プロトタイプのプロパティは単にコピーされるだけで、初期化はされない。これに気づかずに一日無駄にしたorz 例を挙げると、

var MyObj = function(){};
MyObj.prototype = {
    a: function(){
        alert( this.b.join( " : " ) );
    }
    ,b: [ 1, 2 ]
};

var obj1 = new MyObj();
obj1.a();    // 「1 : 2」と表示される

var obj2 = new MyObj();
obj2.b.push( 3 );
obj2.a();    // 「1 : 2 : 3」と表示される

var obj3 = new MyObj();
obj3.b.push( 4 );
obj3.a();    // ？？？？

18 行目で表示されるのは次のどちらだろうか。

• 1 : 2 : 4
• 1 : 2 : 3 : 4

答えは後者、“1 : 2 : 3 : 4”である。

Continue reading

前回の記事「【MovableType】Twitter のつぶやきをサイドバーに表示する」で使ったソースコードを見ると、次のような不可思議な構文が含まれている。

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var minmax_elements;

（中略）

minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
window.attachEvent('onload', minmax_stop);

@end @*/

この不思議な“@”付きの構文は“条件付コンパイル”と呼ばれ、Javascript と JScript の間の数少ない差異の一つだ。これを使うとスクリプトを IE にだけ適用することができるので様々な方面で活用されている ^*1 。

@cc_on ってなに？ - Clouder::Blogger
http://blog.clouder.jp/archives/001005.html

一行で IE の JavaScript を高速化する方法 - IT戦記
http://d.hatena.ne.jp/amachang/20071010/1192012056

JavaScriptでIEかどうかをたったの1行で判別する方法:phpspot開発日誌
http://phpspot.org/blog/archives/2007/04/javascriptie1.html

Continue reading

Twitter のログをブログに表示してみた記録。基本的には簡単。ジェネレータで生成した HTML を貼り付けるだけだ。

[Movable Type] Twitterウィジェットをサイドバーに追加してみた - No Second Life
http://www.ttcbn.net/no_second_life/2009/02/movable-type-twitter.html

だけどそのままでは味も素っ気もない。読み込みが終わるまで空欄のままだし、表示も白黒になってしまう。ある程度整形して表示するようにしてみた。

Continue reading