帰ってきたHolyGrailとHoryGrailの区別がつかない日記

はてなブログに帰って来ました

nicovideo.js with YAHOO UI Library

LDR読んでてこんな記事見つけた。

Page not found | 10coin.comより

ニコ動のサムネをはるときにiframeでしかはれないのがいやだ。全然Strict厨を考慮していない。lintたんにまたおこられちゃうじゃないか!

というわけでそれYUIシリーズ(いや、シリーズ化の予定はないけども)

yahoo-dom-eventのインクルードをなんとなく前提で

  • nicovideo.js
// nicovideoっていうオブジェクトの準備
YAHOO.util.nicovideo = function(){
    this.sWidth = '312px';
    this.sHeight = '176px';
    this.sBorderWidth = '1px';
    this.sBorderStyle = 'solid';
    this.sBorderColor = '#ccc';
};

// startUpっていうプロトタイプ関数用意する
YAHOO.util.nicovideo.prototype.startUp = function(){

    var aTags = document.getElementsByTagName('a');

    for( var i = 0; i < aTags.length; i ++ ) {
        var sHref = aTags[i].getAttribute('href');

        if( sHref.match(/^http:\/\/(www\.)?nicovideo.jp\/watch\/sm/) ) {
            var sVideoId = sHref.replace(/^http:\/\/(www\.)?nicovideo.jp\/watch\//,"");
            var oIframe = document.createElement('iframe');

            YAHOO.util.Dom.setStyle(oIframe, "width", this.sWidth);
            YAHOO.util.Dom.setStyle(oIframe, "height", this.sHeight);
            YAHOO.util.Dom.setStyle(oIframe, "border-width", this.sBorderWidth);
            YAHOO.util.Dom.setStyle(oIframe, "border-style", this.sBorderStyle);
            YAHOO.util.Dom.setStyle(oIframe, "border-color", this.sBorderColor);

            oIframe.setAttribute('scrolling', 'no');
            oIframe.setAttribute('frameborder', 0);
            oIframe.setAttribute('src', 'http://www.nicovideo.jp/thumb/' + sVideoId );

            aTags[i].parentNode.insertBefore(oIframe, aTags[i]);

            YAHOO.util.Dom.setStyle(aTags[i], "display", "none");
        }
    }
};

上記のスクリプトをインクルードでも適当にしてやって最後に

var nicoVideo = new YAHOO.util.nicovideo();
nicoVideo.startUp();

ってな感じで実行してやると

こんな感じの動作になります
IE7、Firefox2.0、Opera9、Safari2.0あたりで動作確認しますた。

で、書き終わっておいてなんなんですが

パフォーマンス厨の俺は
</html>
の後に
<script>
とか書いたりするのでよく考えたら最初の主旨にそってないw
わざわざJSでやる意味ないじゃんw
どうもサーセンwww
まぁonload時に実行するようにしてやるだけだから別にできなくはないけどね。

あ、そうだ、JSに突っ込もうと思ってたんだった・・・

ここから言及(というかつっこみ)

var bodyObj = document.getElementsByTagName('body')[0];
var node      = anchors[i].nodeValue;

↑この2行いらなくね?

for(var i = 0, l = anchors.length; i < l; i++)

実は(var i = 0; i < anchors.length; i++)って書いた方が早い

他にも

  • s/使い捨て/匿名/g;

ぐらいかなー?

なんでいちいちオブジェクトにしてんの?

そういう書き方しかしらないんです、サーセン><
でもこれだといろいろと拡張できそうじゃない?
この間のスライドとかもこんな感じで書いてます。

というわけで・・・

素敵なニコニコライフをエンジョイしましょう><