分かんないってほどでもないんだけど、これまで真面目にJavaScriptを勉強する機会を持てなかったのと、いい加減JavaScriptのフレームワークを触っておこうということで、今携わってる案件の状況を見計らってprototype.jsを弄んでみたのだわ。

で、作ってみたのが公開中ニコニコ動画マイリストってなわけです。ニコニコ動画のマイリストって公開中でもニコニコ動画内だけでしか見られないっては、あんま意味ないと思ったんで。ちなみに(夏)になってから、非公開のマイリストでもRSSは公開状態になってたのは直ったらしい。

ともかく、やってることはラジオボタンをクリックしたら対応するニコニコ動画のマイリストのRSSをAjaxで拾ってきて、必要そうな項目だけ抜き取って表示させるだけです。難しいことは一切してません。びみょーなところで結構ハマったりはしましたが。

jsファイル見たら分かりますけど、マイリストのRSSは一旦CGIを経由してます。正攻法だとJavaScriptのセキュリティ的な問題で同一ドメインからしかWebページを読み込めないってのもあるんだけど、IEはインデントのためのタブやらスペースをテキストノードとして解釈しないのは……、一体どうなんだろう? 要は色々な面でIEとそれ以外のブラウザで解釈と実装が異なってハマったんで、その辺りを吸収するためにCGIで処理した後にJavaScriptに渡してるんですわ。

色々な面でIEとそれ以外のブラウザで解釈と実装が異なってハマったで思い出したんだけど、ニコニコ動画にはマイリストのRSSを取得させずに、テスト用にRSSファイルも含めてローカル上で開発→作業した場合、拡張子がxmlでないとresponseXMLが使えないって一体どういうことよ? IEの挙動、まぢめんどい。

そのほか、prototype.jsについて。簡単な処理しか書いてないんで、ぶっちゃけまだ何とも言いにくいんだけど、HTMLとJavaScriptを分離しやすくなってるのが一番大きなメリットかな。いちいちHTMLの方にonClick="..."とか書かなくて良いんで、HTMLもすっきりするし、機能を変える場合もJavaScript側の変更だけで対応できるし。

あとAjaxオブジェクトはすごい便利。Ajaxの処理は素で書くととっても冗長になりがちなんだけど、かなりすっきりと書けるのは大きい。ほかにも$()とか$$()とか、記述の簡素化を狙った拡張が一杯盛り込まれてるんだけど、今回はほとんど利用してないのでコメントは避けてみる。

Eventオブジェクトの拡張でイベントの制御をJavaScript側で設定できるのは大きいんだけど、eachを使って複数のイベントを設定する方法はちょっと難しいなぁ。

Event.observe($('mylist01'), "click", feed);

で済むなら、

Event.observe($('mylist01', 'mylist02', 'mylist03'), "click", feed);

って書きたくなるものなぁ。

ともあれ、もうしばらくprototype.jsを弄んでみて、その後にでもjQueryも試してみよう。

投稿時刻: 01:29 | カテゴリ: /cg | 固定リンク