CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/03 14:00
目次

Dojo ToolkitとZend_Dojo

  最初に、Dojo Toolkitを使えるように設定し、さらにZend_Dojoを利用した例を見てみることにします。

Dojo Toolkitの設置

 それではまず、Dojo Toolkitに添付されているDojo Toolkitのファイルを利用できるように設定します。これらのファイルはJavaScriptの格納されたファイルから構成されていて、Zend Frameworkのextrasの下のdojoフォルダに置かれています。

 これらのJavaScriptは、最終的にはクライアントのブラウザから読み込まれる必要があるため、ウェブ上からアクセス可能な位置に置いておく必要があります。今回は、ウェブのルートディレクトリの下にJavaScriptを置いておくためのフォルダ「js」を作成し、ここ(つまり「C:\codezine\htdocs\js」)の下にdojoフォルダを置くことにします。

 今回利用するファイルの配置は次のようになります。

[リスト1]ファイルの配置
C:\
  codezine/
    htdocs/
      .htaccess
      index.php              フロントコントローラ
     js/
        dojo/
          ...                Dojo Toolkit関係のファイル
    zendapps/
      controls/
        IndexController.php  標準で使われるアクションコントローラ
        ErrorController.php  エラー処理の際に使われるアクションコントローラ
      models/
      views/
       scripts/
         index/
           dojo.phtml        Zend_Dojoを使わない例で利用するビュースクリプト
           index.phtml       ビュースクリプト
         error/
           error.phtml       エラー処理の際に使われるビュースクリプト

  なお、添付のサンプルからはdojoフォルダは削除してあります。サンプルを利用される場合には上にあるとおり、Dojo Toolkitのextrasフォルダからdojoフォルダをコピーしてください。

添付されているDojo Toolkit

 実は今回のサンプルの一部はZend Frameworkに付属のDojo Toolkitをローカルで利用した場合、Internet Explorerでの表示に問題が発生することがありました。

 もしZend Framework添付のDojo Toolkitを利用して問題が発生する場合でも、最新のDojo Toolkit(執筆の時点では1.2.1)を別途ダウンロードするなり、後述のCDNを利用する方法するとうまくいく場合がありますので、ぜひお試しください。

  次に、まずZend_DojoなしでDojo Toolkitを利用する例を見てみましょう。

Dojo Toolkitの利用

 Dojo Toolkitを利用するための記述は、大きくページのヘッダの部分(headタグで囲まれた部分)に行うものと、ページの本文(bodyタグで囲まれた部分)のところに行うものとに分かれます。ヘッダにはまずDojo Toolkitの読み込みを宣言した後、Dojo Toolkitに関係するJavaScriptの記述を行います。

 ページの本文には、Dojo Toolkitで操作する部品の記述を行います。Dojo Toolkitで操作したい部品を指定する方法にはIDやセレクタ構文を利用する方法と、独自の属性を利用して指定する方法と2通りありますが、今回はIDやセレクタ構文で指定する方法を利用することにします。

 ここで、簡単な例を見てみましょう(リスト2)。

[リスト2]Dojo Toolkitを利用した簡単な例(dojo.phtml)
<html>
<head>
 <title>Dojo Test</title>
 <!-- (1)Dojo Toolkitの読み込み  -->
 <script type="text/javascript"
         src="/js/dojo/dojo/dojo.js"
         djConfig="isDebug:true"></script>

 <script type="text/javascript">
  var init = function() {
    <!-- (2)ボタンの設定と関連づけ  -->
    var button = dojo.byId("button");
    dojo.connect(button, "onclick", function() {
     var name = dojo.byId("name");
     alert("こんにちは、" + name.value + "さん!");
    });
  };

 <!-- (3)初期化関数の登録  -->
  dojo.addOnLoad(init);
 </script>
</head>

<body>
 <h1>Dojo Test</h1>
 <p>
  名前:<input type="text" id="name">
  <!-- (4)Dojoで操作する部品 -->
  <input type="button" id="button" value="こんにちは!">
 </p>
</body>

  この例ではボタンを押すとメッセージボックスを表示するようになっています。順を追って見ていくと、リスト2の(1)で、Dojo Toolkitの読み込みと、パラメータの受け渡しを行っています。ここではデバッグ機能を有効にする「isDebug:true」を指定しています。次に(2)で本文にあるボタンが押された時の動作の設定を行う関数の定義を行っています。まずdojo.byIDメソッドでボタンをIdで検索しています。次に、dojo.connectメソッドでこのボタンがクリックされた際(onClick)の動作を与えています。(3)でdojo.addOnLoadメソッドを利用して関数initがページがロードされた際に呼び出されるよう登録しています。そして、対象となるボタンは(4)で設定されています。

 これを表示すると図1のようになります。

図1:リスト2の結果
図1:リスト2の結果

 なお、図1の下の方に表示されている枠はデバッグ出力用の枠で、リスト2の(1)で初期化のパラメータ「djConfig="isDebug:true"」を渡したために表示されているものです。この例では利用していませんが、Dojo Toolkitのconsole.logメソッドを利用することで、ここにデバッグ時用のメッセージを表示することができます。

 ここで行っている動作は非常に単純で、素のJavaScriptで書いてもそれ程大変ではないと思われる方もいるかもしれません。しかし、実際にはページの描画が一段落してページ内の要素の操作を行なって良いタイミングや、ページ内の要素を指定する方法などはブラウザごとに挙動か微妙に異なります。そこの差をDojo Toolkitのdojo.byIddojo.addOnLoadが吸収してくれているわけです。

 次に、この例をZend_Dojoを利用して書く方法について説明します。

Zend_Dojoの利用

 先程のリスト2ではZend_Dojoの(正確にはZend Framework)機能を利用せず、Dojo Toolkitに必要な記述はすべて直接行いました。これをZend_Dojoを利用すると、次のリスト3とリスト4のようになります。リスト3はアクションコントローラ内での記述、リスト4はビュースクリプトでの記述です。

[リスト3]Zend_Dojoを利用した簡単な例 - アクションコントローラ(IndexController.php)
...
class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        $view = $this->view;

        //Zend_Dojoのビューヘルパを有効にする (1)
        Zend_Dojo::enableView($view);
...
        //Zend_Dojoを設定する (2)
        $dojo = $view->dojo();
        $dojo->setLocalPath('/js/dojo/dojo/dojo.js');
        $dojo->setDjConfigOption('isDebug', true);
...
    }

 アクションコントローラでは、Zend_Dojoを利用するための下準備をします。まず最初にリスト3の(1)でZend_Dojoのビューヘルパを登録し、(2)でそれの設定を行っています。ここの詳細については、また後で説明します。

 これをどのように表示するかは、ビュースクリプトに記述します(リスト4)。

[リスト4]Zend_Dojoを利用した簡単な例 - ビュースクリプト(index.phtml)
<html>
<head>
 <title>Zend Dojo Test</title>
 <!-- (1)Dojo Toolkitの読み込み  -->
 <?php echo $this->dojo() ?>
 <script type="text/javascript">
  var init = function() {
    <!-- (2)ボタンの設定と関連づけ  -->
    var button = dojo.byId("button");
    dojo.connect(button, "onclick", function() {
     var name = dojo.byId("name");
     alert("こんにちは、" + name.value + "さん!");
    });
  };

 <!-- (3)初期化関数の登録  -->
  dojo.addOnLoad(init);
 </script>
</head>
<body>
 <h1>Zend Dojo Test</h1>
 <p>
  名前:<input type="text" id="name">
  <!-- (4)Dojoで操作する部品 -->
  <?php echo $this->button('button', 'こんにちは!') ?>
 </p>
</body>
</html>

 リスト4の(1)で、ヘッダ内にDojo Toolkitの読み込み/設定を行うための出力をします。(2)と(3)は通常のJavaScriptで、リスト2と同じです。(4)はZend_Dojoの機能を利用してボタンを作成しています。

 このように、Dojo Toolkitの初期化やDojo Toolkitで操作するウェブフォーム部品の生成などをZend_Dojoで行うことができます。これで、ページのデザインにかかわる基本的な部分については、JavaScriptをあまり意識せず、PHPのみで記述することができます。

 この例で利用したのは単純なボタンでしたが、Zend_Dojoには標準のHTMLに準備されていないさまざまな部品(Dijit)を利用したり、フォームが実際に送信される前にチェックしたりするための機能が準備されています。

 それでは、Zend_Dojoの各機能について説明していきます。


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

バックナンバー

連載:Zend Framework入門

もっと読む

著者プロフィール

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

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

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

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

あなたにオススメ

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