にこにこランキングをいじくってみたでは ・1動画辺りの占有面積の削減 ・コードは短く、単純に！ というコンセプトの元いじくってみました。機能の豊富さとコードの短さは往々にして背反しますが、ここではコードの短さを優先しています。手抜きではありません！
全ソースコード
01: var ranking = function( category, target ) {
02: var onLoaded = function( response ) {
03: var div = document.createElement( "div" );
04: div.innerHTML = response.responseText;
05: var tables = div.getElementsByTagName( "table" );
06: var table;
07: for( var i = 0; i < tables.length; i++ ) {
08: if( tables[i].summary == "結果" ) {
09: table = tables[i];
10: break;
11: }
12: if( i == tables.length - 1 ) { return; }
13: }
14: target.innerHTML = "";
15: var images = table.getElementsByTagName( "img" );
16: var index = 0;
17: for( var j = 0; j < images.length; j++ ) {
18: if( j % 3 == 1 ) {
19: index++;
20: var block = document.createElement( "span" );
21: block.style.cssText = "width:130px; position:relative;";
22: var link = images[j].parentNode.cloneNode( true );
23: link.target += "_black";
24: block.appendChild( link );
25: target.appendChild( block );
26: if( index % 5 == 0 ) {
27: target.appendChild( document.createElement( "br" ) );
28: }
29: }
30: }
31: }
32: var url = "http://www.nicovideo.jp/ranking/mylist/daily/" + category;
33: var http = new ActiveXObject( "Msxml2.XMLHTTP" );
34: http.open( "GET", url, false );
35: http.onreadystatechange = function() {
36: if( /*http.status == 200 &&*/ http.readyState == 4 ) {
37: onLoaded( http );
38: }
39: }
40: http.send();
41: }
42: </script>
43: <form style="margin: 0px"><select onchange="ranking(this.options[selectedIndex].value,this.parentNode.nextSibling);">
44: <option value="" selected>-----</option><option value="all">全て</option> <option value="music">音楽</option><option value="game">ゲーム</option>
45: </select></form>
46: <div style="border: green 3px double; padding2px; overflow-y: scroll; padding: 2px; width: 700px; height: 500px; text-align: center"></div>
それでは、細かく見て参りましょう。 「にこにこランキングをいじくってみた」というくらいですから、まずにこにこランキングを開かないといけません。にこにこトップページの右上に次のようなガイドリンクがありますので、ランキングから入りましょう。
アドレスは http://www.nicovideo.jp/ranking/mylist/daily/all となっています。mylist daily all といった辺りがキーワードのようです。ここでは前2つは固定とし、最後のall、つまりカテゴリーを選択できるようにしましょう。43:～45:ではカテゴリ選択リストボックスを表示しています。
本当はトップページにあるカテゴリ一覧から「トップ」・「公式」を除いた総計25個のカテゴリがあるのですが、省きます。手抜きではありません！43:のonchange="～"で選択肢が変化したときranking();を呼び出しています。渡している引数は、選択されているカテゴリのvalueと、結果を表示したいタグですね。
続いて肝心のranking();ですが、ここはWebページの取得を試みる32:～40:と、取得した後の表示を行う02:～31:に分かれます。
new ActiveXObject( "Msxml2.XMLHTTP" );という表記はIE限定なので、もしFirefoxなどに対応したければnew XMLHttpRequest();としましょう。
＃javascriptの試し方では「javascriptは簡単だよ！」なんて無責任に言っていますが、それはバージョンまで含めてブラウザを1つに限定した場合です。IEやFirefox、Operaなど複数のブラウザ、さらにそれぞれのさまざまなバージョンに対応しようとすると、難易度がキュッと上がります。
03:～04:では、作業用に作成した<div>タグに読み込んだWebページのコードを流しこんでいます。データはテキスト形式で受け取るので、そのままだと扱いにくいからです。正規表現を駆使して解析 するのもオツではありますが、特に理由がないならばDOMを使った方がよいでしょう。手抜きがでｋ（ｒｙ。
05:～13:ではテーブルを探しています。何のテーブルかといいますと、赤枠で囲ったこの部分です。ページ全体から目標を絞り込んでいってもいいのですが、その前に一手間かけて範囲を狭めておくと、後で楽が出来ることが多いです。ランキングページのテーブルでsummaryが"結果"であるものはこのひとつだけなので、ここではそれを指標にしています。上から何番目のテーブル、なんていう方法でも大丈夫ですよ。
14:～30:ではテーブルに含まれる全ての画像をリストアップし、三つを1セットと数えたときの2番目を取り出してコピーしています。一つ目は「SMILEVIDE」のロゴ画像、三つ目は動画間を区切る破線画像で、それにはさまれた二つ目の画像はお目当ての動画サムネイルなのです。
＃ページ構成が少しでも変わってしまうと途端に破綻してしまいますが、そのことを認めてしまえばあっという間にほしい情報を取り出すことが出来ます。こういうプログラミングは、普段仕事でプログラムに触らないような方に向いていると思うのですけれど、どうでしょうかヾ(。･ω･｡)ﾉ便利だよー。