Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 今回はデータ処理用のモジュールをみて行きたいと思います。まずデータを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の実行画面

 リスト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について説明します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

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

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5