最近、いろんなサービスのJavaScriptなりその実装の仕方なりを、
Firebugを通してよく見ているんですが、ニコニコ動画もその中の1つです。

JavaScriptでやりたいこと。の中でこんなことを書いたんですが、

ただ僕がJavaScriptでやりたいこと、と言うのが1つ明確にあります。

それは、「機能追加をscriptタグ一個で行う」ってヤツです。

これは、WEB+DBのvol.42のニコニコ動画特集の中で、
ニコニコ市場実装時の作業について書かれていた中で出てきた言葉です。以下引用します。

動画再生ページにニコニコ市場の商品情報を埋め込むには、ニコニコ市場を埋め込みたいページに、scriptタグを書いてもらうだけで実現できます。ニコニコ市場のサービスイン時には、ニコニコ動画の開発者に「このscriptタグを埋め込んどいて」と連絡しただけで、ニコニコ動画にニコニコ市場の機能がつきました。(P.71)
 

書いたはいいものの、実際のHTML上での記述がどうなっているかは見ていませんでした。
JavaScriptの方ばっかり追ってました。

というわけで、少し抜き出してみます。本当にちょっとです。
<!--↓ニコニコ市場↓-->
<div style="padding:4px;">
<p><img src="http://res.nicovideo.jp/img/watch/ichiba/frm_top.gif" alt="ニコニコ市場" usemap="#ichiba_TOP"></p>
<map name="ichiba_TOP"><area shape="rect" coords="432,0,520,24" href="http://ichiba.nicovideo.jp/" target="_blank"></map>
<table width="952" border="0" cellpadding="0" cellspacing="0"><tr><td class="ichiba_frm">

<script type="text/javascript"><!--
var user_id  = 'ユーザーID';
var video_id = '動画ID';
--></script>
<script type="text/javascript" charset="utf-8" defer="defer" src="http://res.nicovideo.jp/js/ichiba.js?rev=20090122"></script>

<div id="ichiba_placeholder">
</div>

</td></tr></table>
<p><img src="http://res.nicovideo.jp/img/watch/ichiba/frm_btm.gif" alt="" usemap="#ichiba_BTM"></p>
<map name="ichiba_BTM"><area shape="rect" coords="684,2,762,14" href="ranking/all/weekly/ichiba"></map>
</div>
<!--↑ニコニコ市場↑-->

関連する場所はこれだけです。うち、装飾部分(枠など)もあるのでそれを除いて考えてみると、
実際の機能の部分はこれだけ。

<script type="text/javascript"><!--
var user_id  = 'ユーザーID';
var video_id = '動画ID';
--></script>
<script type="text/javascript" charset="utf-8" defer="defer" src="http://res.nicovideo.jp/js/ichiba.js?rev=20090122"></script>
<div id="ichiba_placeholder"></div>


おお、わかりやすい!ichiba.jsってのが配置してるんですね!
そのためにユーザーIDと動画IDを使ってるんですね!
って、話はそんなにわかりやすいわけはなくて、このichiba.jsの中身はこんな感じ。

var balance=(user_id)?1+parseInt(user_id)%5:1+Math.floor(Math.random()*100)%5;var iconf_baseurl='http://ichiba'+balance+'.nicovideo.jp/embed/';var rev='20090122';function ichiba_bootstrap(){var el=document.createElement('script');el.setAttribute('src',iconf_baseurl+'ichiba.js?rev='+rev);el.setAttribute('type','text/javascript');el.setAttribute('charset','utf-8');el=Element.extend(el);var dl=(window.ie)?50:0;setTimeout(function(){document.getElementsByTagName('head')[0].appendChild(el);},dl);}
Event.observe(window,'load',ichiba_bootstrap,false);

Oh! Obfuscated!!!ってほどではないけど、
こちらのサービスで見やすくしてみるとこんな感じに。

var balance = (user_id) ? 1 + parseInt(user_id) % 5 : 1 + Math.floor(Math.random() * 100) % 5;
var iconf_baseurl = 'http://ichiba' + balance + '.nicovideo.jp/embed/';
var rev = '20090122';
function ichiba_bootstrap()
{
    var el = document.createElement('script');
    el.setAttribute('src', iconf_baseurl + 'ichiba.js?rev=' + rev);
    el.setAttribute('type', 'text/javascript');
    el.setAttribute('charset', 'utf-8');
    el = Element.extend(el);
    var dl = (window.ie) ? 50 : 0;
    setTimeout(function ()
    {
        document.getElementsByTagName('head')[0].appendChild(el);
    }, dl);
}
Event.observe(window, 'load', ichiba_bootstrap, false);


つまり簡単に言うと、ユーザIDを元にさらにJavaScriptを呼び出しています。
Firebugsで見ると、headタグ内の一番最後に追加されています。
(多分、負荷分散ってことかなー)

で、その呼び出されるJavaScriptの方では(かなり簡単に言うと)、
動画IDや国コードなどを元にさらに別のプログラム(PHP)を呼び出し、
その結果をichiba_placeholderに放り込んでいる、という感じ。
放り込まれている結果自体は、普通のHTMLです。



JavaScriptの処理もかなり色々やってるけど、結構面白い。
てか、こういうきちんと構造化されたプログラム(一般的なルール)を
書いてない僕は使えないヤツだなぁと、
人のプログラム見るたびに思うわ…精進したい。

もちっと、定型的なルールを身につけるべきなんだよな…