SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第2回「データAPI(dojo.data)を使いこなす」

「Dojo道場」~実用アプリ構築のためのベストプラクティス

  • X ポスト
  • このエントリーをはてなブックマークに追加

5.2. WikipediaStore

 WikipediaStoreはWikipediaのAPIを利用してデータストアを作成します。以下ではWikipediaStoreを利用して、キーワードに該当するページのコンテンツを取得し、それを表示するサンプルを作成します。

 WikipediaStoreを利用するには、dojo.require()でdojox.data.WikipediaStoreを読み込んでインスタンスを作成します。

    dojo.require("dojox.data.WikipediaStore");
    var wikipediaStore = new dojox.data.WikipediaStore();

 WikipediaのAPIにアクセスするにはfetch()メソッドを利用します。

    var request = {
        query: {
            title: "Dojo Toolkit"
        },
        onItem: function(item, request){
            var title = wikipediaStore.getValue(item, "title");
            var text = wikipediaStore.getValue(item, "text")["*"];
            ...
        }
    };
    wikipediaStore.fetch(request);

 Wikipediaのページを検索するには、fetch()メソッドの引数requestのquery.titleにキーワードをセットします。例えば、"Dojo Toolkit"を検索するにはquery.titleに"Dojo Toolkit"をセットします。onItem()では、検索結果に対する処理を行います。ここでは、itemからtitle属性とtext属性の値を取得しています。query.titleに"Dojo Toolkit"と指定した場合の、title属性とtext属性の値をHTMLで表示すると以下のようになります。

実行結果:
実行結果:
注)

 サンプルでは、英語サイトのWikipediaの情報が表示されます。dojox/rpc/SMDLibrary/wikipedia.SMDを編集して、targetの値を"http://ja.wikipedia.org/w/api.php"に変更すると、日本語のWikipediaの情報を表示することができます。また、表示されたWikipediaのコンテンツ中のリンクはWikipediaのサイト用に最適化されているため、サンプル上では正しく動作しないことがあります。

5.3. GoogleSearchStore

 GoogleSearchStoreを利用すると、キーワードに対するGoogleでの検索結果を得ることができます。以下では、キーワードを送信しそれに対する検索結果を表示するサンプルを作成します。

 まず、GoogleSearchStoreを利用するにはdojo.require()でdojox.data.GoogleSearchStoreを読み込み、インスタンスを生成します。

    dojo.require("dojox.data.GoogleSearchStore");
    var googleStore = new dojox.data.GoogleSearchStore();

 検索結果を得るにはfetch()メソッドを使います。fetch()メソッドの引数には、queryプロパティとコールバック関数onComplete()をセットします。query.titleには検索キーワードをセットします。

    var requestParam = {
        query: {
            text: keyword // 検索キーワード
        },
        onComplete: function(items, request) {
            var searchResultPane = dojo.byId("searchResultPane");
            searchResultPane.innerHTML = "";
            for(var i=0; i<items.length; i++) {
                var item = items[i];
                var title = googleStore.getValue(item, "title");
                var summary = googleStore.getValue(item, "content");
                var url = googleStore.getValue(item, "url");
                ...
            }
        }
    };
    googleStore.fetch(requestParam);

 検索が成功すると、コールバック関数onComplete()が実行されます。サンプルでは、itemsに格納された各検索結果の"title"属性, "contenet"属性, "url"属性をgetValue()を使って取得します。titleとurlからリンクを作成し、それらをcontentと一緒にリスト形式で表示します。"Dojo グラフ"というキーワードで検索した時の実行結果は以下のようになります。

6. まとめ

 この記事ではdojo.dataの概要、特にデータ操作の基本となるオブジェクトであるデータストアとそのインターフェースについて解説しました。また各インターフェースを実装した具体的なデータストアについて例を用いて実際の使い方を示しました。

 dojo.dataのデータストアはDojoが用意するさまざまなウィジェット、またDojo Toolkitのユーザーが開発したカスタム・ウィジェットの中で使われており統一された操作がコンポーネントの保守性・再利用性を高めます。ぜひ積極的に使ってみてください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

仁田 圭祐(ニッタ ケイスケ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所にて日々Webアプリケーションに関わる製品開発をしています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

三浦 圭司(ミウラ ケイジ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所に勤務。現在は、エンタープライズ向け製品のWebアプリケーションのユーザー・インターフェース開発に従事。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5608 2010/12/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング