SHOEISHA iD

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

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

Zend Framework入門

Zend Framework入門(17):
ウィジェットDijitをPHPアプリで利用する - Zend_Dojo(中編)-

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


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

 本連載では、PHP上で動作するアプリケーションフレームワークであるZend Frameworkについて紹介していきます。今回はZend Framework 1.6から追加されたモジュールの一つであるZend_Dojoの紹介の中編で、高機能ウィジットのDijitをZend Frameworkから利用する方法について説明します。

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

はじめに

 本連載では、PHP上で動作するアプリケーションフレームワークであるZend Frameworkについて紹介していきます。今回はZend Framework 1.6から追加されたモジュールの一つであるZend_Dojoの紹介の中編で、高機能ウィジットのDijitをZend Frameworkから利用する方法について説明します。

 「Dijit」はDojo Widgitの略で、静的なHTMLだけでは実現できないような「動きのある」部品をいくつか提供しています。Zend_DojoにはこのDijitのうち、レイアウトに関するものとウェブフォームに関するものを作成するための機能が付属しています。今回はZend_DojoからDijitを利用する基本的な方法について説明します。

対象読者

 PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。

必要な環境

 Zend FrameworkはPHP 5.1.4以降とWebサーバがインストールされている環境で利用可能です。本稿ではWebサーバとしてApache 2.2を、OSにWindows XPを採用し、アプリケーションを作成していきます。

 以下に、今回アプリケーション作成/動作確認に用いた環境を示します(インストールにあたっては最新安定版の使用を推奨します)。各項目の詳細なインストール手順は、「サーバサイド技術の学び舎 - WINGS」より「サーバサイド環境構築設定手順」を参照ください。

  • Windows XP SP2
  • PHP 5.2.6
  • Apache 2.2.10

 LinuxやFreeBSDなどUNIX系OSをお使いの方もコマンドはほぼ一緒ですので、パスなどは適宜読み替えてください。

DijitとZend_Frameworkからの使い方

 最初にも述べたとおり、DijitはDojo Toolkitが提供するウェブ部品です。Dijit自体にはさまざまな機能のものが提供されていますが、その中でZend_Dojoから利用できるのはページ内で部品を配置するための「レイアウト機能」と、Dojo Toolkit独自の「フォーム要素」です。図1は、レイアウト機能の「Tabレイアウト」と、フォーム要素の「ComboBox要素」を使った例です。

図1:Dijitを利用した例(http://localhost/)
図1:Dijitを利用した例(http://localhost/)

 これらを含め、Zend_Dojoから利用できるレイアウトに関するDijitは4種類、ウェブフォームに関するDijitは18種類あります(正確にはSplitレイアウトもありますが、互換性のために残されているだけなので扱わないことにします)。

 Dijitレイアウトはページ内で描画される内容の配置や切り替えを行うための仕組みです。ページ内で描画される内容はペインと呼ばれる単位で管理されます。このペインを切り替えて表示したり、画面内で配置したりするわけです。

レイアウトに関係するDigitの一覧
クラス名 必要なモジュール 説明
Accordion dijit.layout.accordion 表示したいペイン以外のペインが上下に折り畳まれているようなレイアウト
Border dijit.layout.border ペインの配置を上下左右などで指定するレイアウト
Stack dijit.layout.stack ペインが重なって配置されていて、JavaScriptで表示したいペインを指定するレイアウト
Tab dijit.layout.tab ペインが重なって配置されていて、タブで表示するペインを切り替えるレイアウト

 Zend_Dojoから利用できるDijitウェブフォーム要素は、Spinnerのように通常のHTMLでは実現できないようなものや、NumberTextBoxのように入力のチェックをしてくれるものなどがあります。また、これらはZend_Formのウェブフォーム要素と互換性のあるように設計されているため、既存のウェブフォームと混ぜて使ったり、置き換えたりすることが可能です。

ウェブフォームに関係するDigitの一覧
クラス名 必要なモジュール 説明
Button dijit.form.Button 通常のHTMLのボタン
SubmitButton dijit.form.Button 送信ボタン
CheckBox dijit.form.CheckBox 選択されている・いないの二つの状態を持つボタン
RadioButton dijit.form.CheckBox 複数の選択肢から排他的に一つを選ぶためのボタン
Editor dijit.Editor リッチなテキストも編集できるテキストエリア
Textarea dijit.form.Textarea 入力された文章によって長さが伸びるテキストエリア
HorizontalSlider dijit.form.Slider 水平スライダー
VerticalSlider dijit.form.Slider 垂直スライダー
ComboBox dijit.form.ComboBox ユーザーからの任意の入力も受け付けるテキスト選択
FilteringSelect dijit.form.FilteringSelect 与えられた値以外の値はエラーにするテキスト選択
TextBox dijit.form.TextBox 基本的なテキストボックス
ValidationTextBox dijit.form.ValidationTextBox 入力が与えられた正規表現にマッチするか調べるテキストボックス
PasswordTextBox dijit.form.ValidationTextBox パスワード入力用テキストボックス
DateTextBox dijit.form.DateTextBox 日付入力用のテキストボックス
TimeTextBox dijit.form.TimeTextBox 時間入力用のテキストボックス
NumberSpinner dijit.form.NumberSpinner 数値入力用のテキストボックスで、数値増減用のボタンが付いている
NumberTextBox dijit.form.NumberTextBox 数値入力用のテキストボックス
CurrencyTextBox dijit.form.CurrencyTextBox 金額入力用のテキストボックス

 Zend_DojoからDijitを使えば、見栄えの良いページをあまり面倒な手間をかけずに作成することができます。今回は、図1のサンプルがどのように動作しているかについての説明を通じて、Zend_DojoからDijitをどのように使うかについての基本的な方法と、その動作の仕組みについて見ていきます。

 DijitもDojo Toolkitの一部ですので、基本的な使い方はDojo Toolkitの他の機能と同じになります。

  1. Zend_Dojoビューヘルパを有効にする
  2. Zend_Dojoの設定を行う
  3. Zend_Dojoに関係するヘッダを出力
  4. Dijitを作成(場合によっては(3)より前に行う必要がある:後述)
  5. Dijitの出力

 おさらいとなりますが、Zend_Controller経由でページを描画する際の処理の流れはフロントコントローラ(index.php)→アクションコントローラ(IndexController.php等)→ビュースクリプト(index.phtml等)となっています。このうち(1)と(2)はアクションコントローラで、(3)~(5)はビュースクリプトで処理することになります。

 では、まずアクションコントローラで行う処理について見ていきます。

次のページ
Dijitのための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/3589 2009/09/07 14:05

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング