Yahoo! UI Library3（YUI3）データ処理に着目

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

　今回はデータ処理用のモジュールをみて行きたいと思います。まずデータをYUI3で使用できる形に変換し各機能へ渡すモジュールdatasource、 次に違うサイトにある自分で作成したJavaScriptなどを実行中に取得するためのモジュールGet、Ajaxなどを行うための通信用のモジュール io、最後にテキストベースのデータフォーマットJSONに関する処理をサポートするモジュールjsonについて説明します。

はじめに

　今回はデータ処理用のモジュールをみて行きたいと思います。まずデータをYUI3で使用できる形に変換し各機能へ渡すモジュールdatasource、次に違うサイトにある自分で作成したJavaScriptなどを実行中に取得するためのモジュールGet、Ajaxなどを行うための通信用のモジュールio、最後にテキストベースのデータフォーマットJSONに関する処理をサポートするモジュールjsonについて説明します。

YUI3のバージョンアップ

　YUI3は3月31日に3.1.0にバージョンアップしました。以下の内容が更新されたようです。

• スライダーの表現の部分のバージョンアップなど、Widget関係のモジュールの追加された
• ローダーの改良でYUI2のモジュールも呼べるようになった

YUI().use("yui2-button", function(Y) {
    var V2 = Y.YUI2;
    var button = new V2.widget.button("mybutton");
});

• DOMイベントの定義の簡素化がなされた

対象読者

　Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。

必要な環境

　HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。

データ変換処理

　配列データやJSON形式のデータをYUI3で使用できる形に変換し、各機能へ渡してくれるモジュールdatasourceの説明を行います。現在Array／JSON／XML／Text形式をサポートしています。このモジュールはBeta版です。将来的に、サポートする変換形式が増えてゆくのではないかと思います。

モジュールdatasourceの書き方

　例題をみながら説明を行います。配列データをデータソースへ読み込んで、表示させます。実行結果を図1に示します。

図1：リスト1の実行画面

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

［リスト1］datasourceの書き方（DataSource_Local_Array.html）

YUI().use("dump", "node", "datasource", function (Y) {
    var myData= [
            {'id':111,'name':'赤坂','sei':'男性'},
            {'id':222,'name':'池田','sei':'女性'},
            {'id':333,'name':'上野','sei':'男性'},
            {'id':444,'name':'岡田','sei':'女性'}
        ];                      //（1）
    var myDataSource = new Y.DataSource.Local({source:myData});    //（2）
    myDataSource.plug(Y.Plugin.DataSourceArraySchema, {
        schema: {
            resultFields: ["id","name","sei"]
        }
    });                         //（3）
    var myCallback = {
        success: function(e){
            alert(Y.dump(e.response.results[1].name));
        },
        failure: function(e){
            alert("Could not retrieve data: " + e.error.message);
        }
    };                          //（4）
    Y.one('#button').on("click",  function(e) {
        myDataSource.sendRequest(null, myCallback);
    });                         //（5）
});
</script>
</head>
<body>
    Arrayデータ処理<br><br>
    <input type="button" id="button" value="Push!!">
</body>

　モジュールはdatasourceを指定します。他に、ボタンを使っているのでモジュールnodeを、alert表示するためにY.dump()を使用しているのでモジュールdumpを指定しています。モジュールdumpは指定した内容を文字列で取り出してくれます。

　（1）が配列データです。（2）でmyDataSourceに配列データを読み込んでいます。「.Local」はページ内で設定したデータを読み込む時に使用します。他に.Get／.io／.functionがあり、順次説明します。

　（3）は取り出すフィールド名の指定です。構文を示します。

［構文］plugメソッド

plug(fn,cfg)
    fn:Y.Plugin.DataSourceArraySchema,    //データの種類
       Y.Plugin.DataSourceJSONSchema,
       Y.Plugin.DataSourceXMLSchema
    cfg:
        schema:
            resultListLocator:    //グループ名
            resultFields:        //フィールド名

　配列データの場合はフィールド名のみ指定しています。

　（4）は（5）のsendRequestコマンドでのコールバック関数を指定しています。成功したときはsuccess:の処理、成功しなかったときはfailure;の処理を実行します。Y.dump(e.response)ですべてのデータをみることができます。.results[1].nameで2番目のnameデータを表示しています。

　ボタンを押したとき、（5）のsendRequestで表示させます。以下sendRequestの構文です。

［構文］sendRequestメソッド

sendRequest（ request , callback ）
    request： .Getや.ioで指定したuriへ渡す文字列、無い時はnull
    callback：
        success: function(e){} 成功したときの処理
        failure: function(e){} 成功しなかったときの処理

　sendRequestのrequestは.Getや.ioで指定したuriへ渡す文字列です。指定したuriの仕様に合わせた文字列を指定します。

　次に、.Get／.io／.functionについて説明します。