SHOEISHA iD

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

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

Zend Framework入門

Zend Framework入門(16):
JavaScriptフレームワークDojoとの連携 - Zend_Dojo(前編)-

Zend Frameworkによる実践的なPHPアプリケーション開発 16

  • X ポスト
  • このエントリーをはてなブックマークに追加

dojo.dataの作成と操作:Zend_Dojo_Data

 動的なウェブページを作成する際の醍醐味の一つに、動的なデータのやりとりが挙げられます。リストとして表示する内容をあらかじめ(静的)にページに埋め込んでおくのではなく、必要に応じてサーバから取得することで、ウェブページのデザインに柔軟性を持たせることができます。

 Dojo Toolkitの一部であるDigitには、サーバとデータのやり取りを行う機能を持つものがあります。このデータのやり取りを行う際に利用するのがDojo Toolkitのdojo.data形式です。Zend_Dojo_Dataクラスはdojo.data形式の情報を作成/操作するためのクラスです。ここでは、Zend_Dojo_Dataクラスを利用して、サーバからDigitへデータを送る方法について紹介します(なお、ここで取り上げたDigit以外での利用については次回取り上げる予定です)。

 では、まずデータを受け取る方のクライアント側の記述について見てみましょう。ここではDigitの一つであるコンボボックスを利用しています。コンボボックスは基本的にはリストなのですが、新規に値を入力することもできる点が通常のリストと異なります。

[リスト7]dojo.dataを利用するDigit(data.phtmlの一部)
...
   //コンボボックス
   $url = $this->url(array('action'=>'datapost'));
   echo $this->combobox('cbox',
                        'b',
                        //データの受け取りに関する設定(1)
                        array('store' => 'cboxStore',
                              'storeType' => 'dojo.data.ItemFileReadStore',
                              'storeParams' => array(
                               'url' => $url,
                               ),
                        //データのどの列を表示するか(2)
                              'searchAttr' => 'name'
                             )
                       );
...

 このうち「$this->combobox」の部分は次のようなHTMLとして出力されます。

[リスト8]ComboBoxがどのようなHTMLに変換されるか
<div dojoType="dojo.data.ItemFileReadStore"
     jsId="cboxStore"
     url="/index/datapost"></div> (1)
<input id="cbox"
       name="cbox"
       value="b"
       type="text"
       store="cboxStore"
       searchAttr="name"
       dojoType="dijit.form.ComboBox">(2)

 リスト7の(1)がリスト8の(1)に対応しており、サーバからデータをどのように受け取るかを指定しています。データを取得する方法にはいくかあるのですが、ここではURLを指定してJSON形式でデータを取得することにします。リスト7でのstoreType「dojo.data.ItemFileReadStore」はデータをURLを指定し取得することを、storeParamsのurlはそのURLをそれぞれ設定しています。

 リスト7の(2)では、取得したデータのどの部分を表示するかについてを指定しています。コンボボックスについての情報を指定しています。サーバから送られて来る情報はリストの各要素が入った配列のような形になっています。その各要素がさらに、複数の要素を持つ配列になっていると考えてください(例えばPHP風に書くとリスト9のようになります)。

[リスト9]コンボボックス が受け取るデータの例(PHPの配列風)
array(
 array('name'=>'a', 'label'=>'alpha'),
 array('name'=>'b', 'label'=>'beta')
)

 このうち、どの要素を表示に利用するかを指定しているのがsearchAttrだと考えてください。ここではsearchAttrに「name」を指定していますので、コンボボックスの要素としては「a」と「b」があることになります。

 リスト8の(1)と(2)とを関連づけているのがリスト7(1)のstoreオプションで、リスト8(1)のjsId、(2)のstoreの値を指定しています。描画の際の手順としては、リスト8の(2)のComboBoxがまず描画され、必要に応じてComboBoxのstoreの値からリスト8の(1)を利用して情報をサーバから取得するようになっています。

 では、実際にやりとりされるデータはどのような形になっているのでしょうか? このコンボボックスで利用されるデータはリスト10のようなJSON形式でやりとりされることになっています。

[リスト10]コンボボックス が受け取るデータの例(JSON形式)
{"identifier":"name",
 "items":[
  {"name":"a","label":"alpha"},
  {"name":"b","label":"beta"}
 ]
}

 さて、このデータを作成するのにZend_Dojo_Dataを利用します。サーバ側のデータを送る流れは(1)データの作成、(2)jsonに変換/クライアントへの送信、となります。

[リスト11]Zend_Dojo_Dataの作成方法(IndexController.php)
class IndexController extends Zend_Controller_Action
{
...
    public function datapostAction()
    {
        //識別用IDを指定して、Zend_Dojo_Dataを作成 (1)
        $data = new Zend_Dojo_Data('name');

        //データの追加 (2)
        $data->addItem(array('name'=>'a', 'label'=>'alpha'));
        $data->addItem(array('name'=>'b', 'label'=>'beta'));


        //ビュースクリプトへの受け渡し
        $this->view->assign('data', $data);
    }
...

 まずリスト11の(1)のようにコンストラクタでZend_Dojo_Dataのインスタンスを作成し、必要に応じて(2)のように情報の追加を行います。このように作成したZend_Dojo_Dataを出力します(リスト12)。

[リスト12]Zend_Dojo_Dataの出力(datapost.phtml)
<?php
echo $this->data->toJson();

 これを利用した結果は図2のようになります。

図2:Zend_Dojo_Dataを使った例
図2:Zend_Dojo_Dataを使った例

 ここでZend_Dojo_Dataの主なメソッドを紹介します:

Zend_Dojo_Dataの主なメソッド
メソッド名 引数 説明
(コンストラクタ) $identifier, $items, $label コンストラクタには識別用ID、データ、ラベルを引数として与えられる。引数はすべて省略可能で、省略時はnull。
addItem $item, $id データを登録する。$idは省略可能で、省略時はnull。
addItems $items 複数のデータをまとめて登録する。
setIdentifier $identifier 識別用IDを設定する。
setLabel $label ラベルを設定する。
setMetadata $spec, $value メタデータ$specの値を$valueに設定する。
fromArray $data 配列から情報を登録する。
toArray (なし) 格納されている情報を配列として返す。
fromJson $json JSON形式になっている情報からZend_Dojo_Dataを作成する。
toJson (なし) 格納されている情報をJSON形式で返す。

 このうち、setMetadataはメタデータを設定する必要のあるDigitで利用するもので、利用するDigitの説明と共に取り上げます。

おわりに

 今回はDojo ToolkitとZend Frameworkの連携を行うZend_Dojoの基本的な使い方について説明しました。次回も引き続きZend_Dojoについて扱っていく予定です。Dojo Toolkitが提供する部品DigitをZend_Dojoから使う方法について説明していきます。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Zend Framework入門連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト 風田 伸之(カゼタ ノブユキ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3450 2009/02/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング