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の実行画面

　リスト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の仕様に合わせての出力指定です。