はじめに
今回はデータ処理用のモジュールをみて行きたいと思います。まずデータをYUI3で使用できる形に変換し各機能へ渡すモジュールdatasource、次に違うサイトにある自分で作成したJavaScriptなどを実行中に取得するためのモジュールGet、Ajaxなどを行うための通信用のモジュールio、最後にテキストベースのデータフォーマットJSONに関する処理をサポートするモジュールjsonについて説明します。
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をみてください。
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(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（ request , callback ）
request： .Getや.ioで指定したuriへ渡す文字列、無い時はnull
callback：
success: function(e){} 成功したときの処理
failure: function(e){} 成功しなかったときの処理
sendRequestのrequestは.Getや.ioで指定したuriへ渡す文字列です。指定したuriの仕様に合わせた文字列を指定します。
次に、.Get／.io／.functionについて説明します。
