Vistaで注目される辞典マッシュアップ――事例で知るLiveガジェット：Windows Liveが魅せる次世代マッシュアップ（3/4 ページ）

[森川拓男，ITmedia]

　続くリスト3で挙げた部分では、キーワードを入力して辞書検索APIを呼び出している。なお、呼び出すurl設定にある「Word=" + encodeURI(keywords) 」設定で、キーワードと前方一致、「PageSize=10」設定で、検索結果の最初の10件のみを取得して表示するよう指定されている。

リスト3■JavaScriptファイル「EJDIC.js」の辞書検索API呼び出し個所

    /*****  辞書検索API(REST)呼び出し *****/
    searchDict = function(keywords) {
        if (keywords.length <= 0)
            return;
        var url = "http://btonic.est.co.jp/NetDic/NetDicv09.asmx/SearchDicItemLite?Dic=EJdict&Word=" + encodeURI(keywords) + "&Scope=HEADWORD&Match=STARTWITH&Merge=AND&Prof=XHTML&PageSize=10&PageIndex=0";
        var objRequest = Web.Network.createRequest(Web.Network.Type.XML,url,null,callback);
        objRequest.execute();
    }
    /***** 辞書検索のコールバック *****/
    function callback(response)
    {
        if (response.status==200)
        {
            var data = parseResult(response);
            if (data) {
                displayResult(data);
            } else {
                 out.appendChild(document.createTextNode("no result found for keywords: " + keywords));
            }
        }
    }

　リスト4に挙げた部分では、検索結果から項目のタイトル（単語名）と、その解説ページと紐付けるためのIDのみを取得している。この引用した個所に続いて、検索結果一覧として、検索された用語の最初10件までを表示させる指定が見られる。

リスト4■JavaScriptファイル「EJDIC.js」で検索表示を制御している個所

    /*****  検索結果取得 *****/
    function parseResult(response) {
        var ret = [];
        var root = response.responseXML.documentElement;
		    
         if (!root)
              return null;
         var items = root.getElementsByTagName('DicItemTitle');
         for (var i = 0; i < items.length; ++i) {
             var data = {};
             var node = items.item(i);
             var done = 0;
             for (var j = 0; j < node.childNodes.length; ++j) {
                 if (node.childNodes.item(j).nodeName == "ItemID") {  // ID取得
                     data["ItemID"] = node.childNodes.item(j).childNodes.item(0).nodeValue;
                     ++done;
                 }else if (node.childNodes.item(j).nodeName == "Title") {  // 項目タイトル取得
                     var span = node.childNodes.item(j).getElementsByTagName('span')[0];
                     data["Title"] = span;
                     ++done;
                 }
                 if (done == 2)
                     break;
             }
           ret.push(data);
         }
         return ret;
    }

　ここまでくれば、後は分かるだろう。

　リスト5として挙げた部分で辞書項目の本文を取得する処理を行い、続くパートで取得した本文を表示させているのだ。

リスト5■JavaScriptファイル「EJDIC.js」で本文表示を制御している個所

    /****** 辞書項目本文取得API(REST)呼び出し ******/
    itemTitle_OnClick = function(url){
         var objRequest = Web.Network.createRequest(Web.Network.Type.XML,url,null,getDicItemCallBack);
         objRequest.execute();
    }
    /****** 辞書項目本文取得のコールバック *****/
    function getDicItemCallBack(response){
        if (response.status==200)
        {
            var data = parseItem(response);
            if (data) {
                displayItem(data);
            } else {
                out.appendChild(document.createTextNode("meaning not found...."));
            }
        }
    }

　ここまでのリスト2〜5で見てきたメインプログラムは、前述のようにマニフェストファイル「EJDIC.xml」から呼び出される関係だ。そして、「EJDIC.css」によって表示スタイルを定義されるが、ほかのガジェットと違い「EJDIC英和辞典」では、表示位置やフォントなどの設定のみというシンプルなものになっているのが特徴だ。辞書ガジェットということもあって、見た目の派手さよりも、操作の軽快性を重視したといえるだろう。

「EJDIC英和辞典」の仕組みは簡単に発展させることができる

　世の中にはいろいろなブームがあるが、いま密かに起きているのは「辞書ブーム」。それも紙の辞書ではなく、電子辞書だ。しかし、誰もが電子辞書を持っているわけでもないし、パソコンを使っていて、ふとした拍子に言葉を調べるときどうするかといえば、インターネットのトレンドとしてオンライン辞書ではないだろうか。