jQueryを使ったweb widgetの作り方

How to build a web widget (using jQuery)
http://alexmarandon.com/articles/web_widget_jquery/

非常にわかりやすいTutorial。
これの通りに実装すれば、きれいに、安全に、Web widgetを
実装できる。以下、かなりオレオレ意訳。

まず、ウィジェットって何か、っていうと、
「ウェブページの固まり」
とか
「ウェブページのきれっぱし」
といってます。

あるページの中に、別のウェブページの情報を（細切れにして？）
表示させる、っていうこと。よくあるインターネットの広告とかも
あるページに紛れ込ませて表示させているので、
Web widgetと言える（と思う）

で、Web widgetを作るときの３つの原則。

• ページにまぎれさせて表示するので、元ページを汚さないように、不測の事態で表示が崩れないように気をつける（具体的なTipsは後述）
• CSSとJavascriptは動的に読み込む
• widgetの内容であるデータは、JSONPにより外部から読み込む。（データのみをJSONPで返すAPIを用意するべし）

これをふまえた上で、具体的には、以下のような手順で作る。

1. 以下のHTMLをページ側に導入する。divのidはページ内でかぶらないようにする

<script src="http://example.com/widget/script.js" type="text/javascript"></script>
<div id="example-widget-container"></div>

2. script.jsを以下のように記述(一部オリジナルから変更してます)

(function() {
    // jQuery ローカル変数
    var jQuery;
    var jQuery_version='1.4.2';
    var widget_html_id='#example-widget-container';

    // jQuery がloadされていなかったらgoogle CDNからloadする
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== jQuery_version) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/"+jQuery_version+"/jquery.min.js");
        script_tag.onload = scriptLoadHandler;
        script_tag.onreadystatechange = function () {
            // IE対策 
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                scriptLoadHandler();
            }
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // すでにloadされているjQueryのバージョンが使いたいバージョンと一致している           
        jQuery = window.jQuery;
        main();
    }

    // jQueryがloadされたら1回だけ呼び出される
    function scriptLoadHandler() {
        // 安全に$変数を呼び出せるようにするためにローカル変数のjQueryに
        // noConflictをtrueにセットする
        jQuery = window.jQuery.noConflict(true);
        // 自分で実装したいメインロジックを呼び出す 
        main();
    }

    // ここからがようやくメインロジック
    function main() {
        jQuery(document).ready(function($) {
            // 外部CSSファイルを読み込む
            var css_link = $("<link>", {
                rel:  "stylesheet",
                type: "text/css",
                href: "style.css"
            });
            css_link.appendTo('head');

            // 外部JSONP APIからデータを読み込む
            var jsonp_url = "http://alpage.org/cgi-bin/webwidget_tutorial.py?callback=?";

            $.getJSON(jsonp_url, function(data) {
                // データの読み込みが完了したらここが実行される
                $(widget_html_id).html("This data comes from another server: " + data.html);
            });
        });
    }
})(); // 無名関数を実行しているので変数名汚染などは無し

これとブックマークレットを組み合わせると面白そうなものができそう。
今度もっと調べてみよう。