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

» 2007年03月02日 08時00分 公開
[森川拓男,ITmedia]

 今回紹介する「EJDIC英和辞典」もその例と同じであり、「EJDIC.xml」「EJDIC.js」「EJDIC.css」のファイルから構成されている。

 「EJDIC英和辞典」のマニフェストとなる「EJDIC.xml」は次に挙げるリスト1の通りだが、まずはこのLiveガジェットの主な動作を、リスト(ソース)を見る前に覚えておこう。

調べたい英単語を入力し、「検索」ボタンをクリックするか、エンターキーを押下しよう
該当する単語の最初の10件までの候補リストが表示される
候補から調べたい単語をクリックする。下部に、単語の意味が表示される
リスト1■マニフェストファイル「EJDIC.xml」

<?xml version="1.0"?>
<rss version="2.0" xmlns:binding="http://live.com">
    <channel>
        <title>EJDIC英和辞典 検索</title>
        <link>http://www.btonic.com/ws/</link>
        <description>英和辞典の検索</description>
		<language>ja-jp</language>
		<pubDate>Sat, 12 Aug 2006 10:54:00 Tokyo</pubDate>
        <binding:type>EAST.Hayashi.EJDIC</binding:type>
        <item>
            <link>http://www.btonic.com/ws/Gadgets/EJDIC/EJDIC.js</link>
        </item>
        <item>
            <link binding:type="css">http://www.btonic.com/ws/Gadgets/EJDIC/EJDIC.css</link>
        </item>
        <icons>
            <icon height="20" width="17">http://www.btonic.com/ws/Gadgets/EJDIC/images/icon.gif</icon>
        </icons>
    </channel>
</rss>

 マニフェストファイルは、Liveガジェットの名前や説明、そして実際に使用するスクリプトとスタイルシート指定が定義されたものであることが分かると思う。つまり、これをテンプレートとして、要所を書き換えるだけで、そのままほかのLiveガジェットへと応用可能な点に注目だ。

 これを受けて、次にプログラム本体である「EJDIC.js」を見てみよう。

 リスト2に引用した冒頭部分では、「スペリングサジェスト」として、スペルミスがある単語の修正候補を表示する設定を行っている。修正候補があった場合、「もしかして」を追加する形で最初の候補を表示するようになっている。

リスト2■JavaScriptファイル「EJDIC.js」の冒頭部

    var keywords = "";
    var spellingSuggestion = "http://search.yahooapis.com/WebSearchService/V1/spellingSuggestion?appid=kanpan_yahoo_appid&query="
    var spell = null;
    /*****  スペリングサジェスト *****/
    function spellingSuggest()
    {
        var url = spellingSuggestion + encodeURI(keywords);
        var objRequest = Web.Network.createRequest(Web.Network.Type.XML,url,null,getSuggestResult);
        objRequest.execute();
        
    }
    
    function getSuggestResult(response)
    {
        if (response.status==200)
        {
            var root = response.responseXML.documentElement;
            var spells = root.getElementsByTagName('Result');
            if( !spells || spells.length < 1 ) { spell = null; return;}
            
            spell = spells[0].childNodes.item(0).nodeValue;
            titleList.innerHTML += "<br/>もしかして ";
            
            var link = document.createElement("a");
            link.setAttribute("href", "javascript:searchDict('" + spell + "');");
            link.appendChild(document.createTextNode(spell));
            
            titleList.appendChild(link);
        }    
    }
    

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ