SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

Yahoo! UI Library Ver.3 を使ってみよう

Yahoo! UI Library3(YUI3)データ処理に着目

Yahoo! UI Library Ver.3 を使ってみよう(5)

phpなど他のスクリプトで作成されたデータを扱う時の処理

 別ファイルの、スクリプト等で作成されたデータを扱う場合は、Y.DataSource.IO({source:ファイル名})を使用します。スクリプトは同じサーバーにあっても、他のサイトにあっても呼ぶことができます。他のサイトにある他の人が作成したスクリプトを使用したいときなど便利です。現在.GetはJSON形式をサポートしています。.IOは、JSON、XML、およびプレーンテキストを含む複数のデータ形式の検索をサポートします。

 今回も.Getの例題とおなじように、YUI3のダウンロードサイトの例題に使用されているスクリプトを使用します(http://developer.yahoo.com/yui/3/examples/datasource/datasource_io.html)。

 データはリスト4のようになっています。

[リスト4]例題に使用するJSON形式のデータの一部
    "ResultSet": {
        "type":"web",
        "totalResultsAvailable":391000000,
        "totalResultsReturned":10,
        "firstResultPosition":1,
        ...
        "Result":[
            {"Title":"Madonna","Summary":"Official site of pop diva
                Madonna, with news, music, media, and fan club.",
                "Url":"http:\/\/www.madonna.com\/", ...,
                "Size":"145030"}},
            {"Title":"YouTube - madonna's Channel",
                "Summary":"The Official Madonna YouTube Channel.
                Want to Subscribe? ... http:\/\/www.youtube.com\/Madonna.
                Sharing Options There are 3 ways to share this channel.",
                "Url":"http:\/\/youtube.com\/madonna", ...,
                "Size":"49955"}},
            ...
        ]
    }
}

 リスト4のデータを使ってグループ名「ResultSet.Result」、フィールド名「Title」のデータを読み込みます。例題の実行画面を図3に示します。

図3:リスト6の実行画面
図3:リスト6の実行画面

 リスト5をみてください。

[リスト5]スクリプトでデータ作成(DataSource_IO_JSON.html)
YUI().use("dump", "node", "datasource", function (Y) {
     var myDataSource = new Y.DataSource.IO({source:"http://developer.yahoo.com/yui/3/examples/datasource/assets/php/ysearch_json_madonna.php"});  //(1)
    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "ResultSet.Result",
            resultFields: ["Title"]
        }
    });
     var myCallback = {
            success: function(e){
                for (var i in e.response.results){
                    alert(Y.dump(e.response.results[i].Title));
                }
            },
            failure: function(e){
                alert("Could not retrieve data: " + e.error.message);
            }
        };
    Y.one('#button').on("click",  function(e) {
        myDataSource.sendRequest("?output=json", myCallback);
    });         //(2)
});
</script>
</head>
<body>
    IO(JSON)<br><br>
    <input type="button" id="button" value="Push!!">
</body>

 (1)でphpファイルを指定しています。(2)の引数requestでysearch_json_madonna.phpに文字列を渡しています。ysearch_json_madonna.phpの仕様に合わせての出力指定です。

次のページ
ページ内でデータを作成して行う処理

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

Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5172 2010/06/11 14:00

イベント

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

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

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

メールバックナンバー