CakePHPのHelperを使う

Transcript

1. 1 Copyright © YusukeAndo. 2007. All rights reserved. CakePHPのHelperを使う Helperの使用法とかんたんAJAX 2007年7月25日 安藤祐介
2. Copyright © YusukeAndo. 2007. All rights reserved. 2 アジェンダ CakePHPの近況 Helperとは 各種Helperの紹介 AJAXを利用した実装例 バージョンによる違い まとめ
3. 3 Copyright © YusukeAndo. 2007. All rights reserved. CakePHPの近況
4. Copyright © YusukeAndo. 2007. All rights reserved. 4 近況 出版物での露出が出てきた WEB上での露出が増えてきた 実務で使ってる人が増えてきた 開発は順調に進行中 安定版 Stable 1.1.16.5421 開発版 Development 1.2.0.5427alpha →昨年とはあきらかに違う状況になってきた
5. Copyright © YusukeAndo. 2007. All rights reserved. 5 出版物 →それぞれの書籍内の章としてCakePHPの詳しい紹介あり 書籍の中でCakePHPを取り上げたものがでてきた 「PHPによるJavaScriptを書かないAjax」 佐久嶋ひろみ(九天社) 3000円 「Web2.0 ビギナーズバイブル」 まえだひさこ, 伊藤浩一, 大津真, 岸田健一郎, 安井力 (毎日コミュニケーションズ) 3990円
6. Copyright © YusukeAndo. 2007. All rights reserved. 6 WEB情報 →秋田真宏氏の連載記事 http://gihyo.jp/dev/serial/01/cakephp gihyo.jp 「CakePHPで高速Webアプリ開発」
7. Copyright © YusukeAndo. 2007. All rights reserved. 7 WEB情報 →百式管理人の田口元氏のCakePHP開発日誌 http://www.ideaxidea.com/archives/cakephp/ idea * idea 「CakePHP修行」
8. Copyright © YusukeAndo. 2007. All rights reserved. 8 Googleのトレンド情報 →日本語での検索トレンド２位(2007/7現在) 各フレームワーク間でのバランスはあまり変化なし 直近のデータの絞込みが出来るように 2007/3 2007/7
9. Copyright © YusukeAndo. 2007. All rights reserved. 9 CakePHPの利用実績 →@nifty内のコミュニティサイト CakePHPを使用の模様 http://topic.nifty.com/ トピックイット @nifty
10. Copyright © YusukeAndo. 2007. All rights reserved. 10 CakePHP1.2の新機能 →さらに便利な機能が追加されているが、基本的には1.1 系と変わっていない。1.2の機能を1,1に持ってくる事も可能 新しいvalidation機構 組込みのページング処理 コマンドラインタスクを実現するcakeコマンド キャッシュ機能の強化(memcache APC) EmailComponentの追加 一部クラスの統廃合
11. 11 Copyright © YusukeAndo. 2007. All rights reserved. Helperとは
12. Copyright © YusukeAndo. 2007. All rights reserved. 12 Helperとは →CakePHPのViewは単純なPHPの記法なので、タグの出力 なども自力で行えばHelperは不要。あくまで補助するのが Helperの役割。 CakePHPのMVCモデルにおいてViewに近い役割 動的なタグなどの出力を補助するクラス群 フォーム関連のタグの出力を簡略化 AJAXを利用した動きを簡略化 利用しなくても開発は可能だが、便利な仕組み
13. Copyright © YusukeAndo. 2007. All rights reserved. 13 Controllerの実装 class MembersController extends AppController{ var $name = "Members"; var $scaffold; function search(){ $sex_list = array("男"=>"男","女"=>"女"); $blood_list = array("A"=>"A","B"=>"B","O"=>"O","AB"=>"AB"); $pref_list = $this->Member->generateList( "GROUP BY Member.pref",null,null, "{n}.Member.pref","{n}.Member.pref"); $this->set("sex_list",$sex_list); $this->set("blood_list",$blood_list); $this->set("pref_list",$pref_list); } } app/controllers/members_controller.php データの取得・生成 Viewへのデータ受け渡し
14. Copyright © YusukeAndo. 2007. All rights reserved. 14 Modelの実装 class Member extends AppModel { var $name = 'Member'; } app/models/member.php テーブル設定 CREATE TABLE members ( id int(11) NOT NULL auto_increment, `name` varchar(255) NOT NULL, sex varchar(2) NOT NULL, age int(11) NOT NULL, pref varchar(255) NOT NULL, blood varchar(2) NOT NULL, PRIMARY KEY (id) )
15. Copyright © YusukeAndo. 2007. All rights reserved. 15 Viewの実装（Helperを使わない場合） <h3>都道府県</h3> <select name="Member/pref"> <?php foreach ($pref_list as $row): ?> <option value="<?php echo $row; ?>"><?php echo $row; ?></option> <?php endforeach; ?> </select> app/views/members/search.thtml Controllerでセットしたデータ を使って自由に処理 →ここで行っているような出力の為の「処理」を補助するの がHelperの役割
16. Copyright © YusukeAndo. 2007. All rights reserved. 16 実行例 →Helperを使っていなくても期待した動作を実装は可能
17. 17 Copyright © YusukeAndo. 2007. All rights reserved. 各種Helperの紹介
18. Copyright © YusukeAndo. 2007. All rights reserved. 18 CakePHPの代表的なHelper とくに頻繁に使うと思われるもの HtmlHelper FormHelper JavascriptHelper AjaxHelper TextHelper NumberHelper TimeHelper →出力時にありがちなさまざまな処理をデータセットやオプション を元に解決するクラス群が用意されている
19. Copyright © YusukeAndo. 2007. All rights reserved. 19 Helper利用時の注意 使用するHelperをControllerで宣言する必要あり 特に設定していない場合は Htmlが設定済 Helperを継承したクラスによりHelperの自作も可能 class MembersController extends AppController{ var $name = "Members"; var $scaffold; var $helpers = array("Html","Javascript","Ajax","Form"); } app/controllers/members_controller.php 使用するHelperの指定
20. Copyright © YusukeAndo. 2007. All rights reserved. 20 HtmlHelper 動的なHTMLの出力を補助するHelper フォームやテーブルの出力、フォームの初期値やリンクの制 御などのありがちなロジックを代替 Charsetなどの出力の面倒なタグの出力 ツリー型メニュー、パンくずリストを生成する処理も用意さ れている 全ての機能の一覧はAPIリファレンスを参照 http://api.cakephp.org/class_html_helper.html
21. Copyright © YusukeAndo. 2007. All rights reserved. 21 HtmlHelperの使用例 <?php echo $html->link("CakePHP","http://cakephp.org/");?> <?php $arr = array( array("body" => "Java"), array("body" => "PHP","children" => array( array("body" => "PHP4"), array("body" => "PHP5"), ) ), ); echo $html->guiListTree($arr); ?> app/views/pages/menu.thtml →その他フォームやテーブルの出力用の処理も リンクの出力 ツリーの出力
22. Copyright © YusukeAndo. 2007. All rights reserved. 22 実行例 →View内に判定やループ処理を作らずに動的な出力が可能 リンクの出力 ツリーの出力
23. Copyright © YusukeAndo. 2007. All rights reserved. 23 AjaxHelper Ajaxに必要なスクリプトを出力する 使用時にはprototype scriptaculous が必要 JavaScriptライブラリは app/webroot/js に配置 JavaScriptの呼び出しにはJavaScriptHelperを使用する と良い フォームの送受信を伴うAjaxを作成する場合はUTF-8を 利用するのがベター →非常に簡単にAjaxを利用した動きを実装する事が可能
24. Copyright © YusukeAndo. 2007. All rights reserved. 24 AjaxHelperの使用例 <?php echo $javascript->link("prototype");?> <?php echo $javascript->link("scriptaculous");?> <?php $opt = array( "url" => "/pages/menu", "update" => "div_menu", "loaded" => 'new Effect.SlideDown("div_menu")' ); echo $ajax->link("メニュー","#",$opt); ?> <div id="div_menu"></div> app/views/members/search.thtml ライブラリ読み込み 呼び出しページ設定 結果反映用のdiv AJAX起動用のリンク
25. Copyright © YusukeAndo. 2007. All rights reserved. 25 実行例 →ライブラリとの連携によりスクリプトを書かずにDOMを操作 リンククリックで別ページが同一ページに読み込まれる
26. 26 Copyright © YusukeAndo. 2007. All rights reserved. AJAXを利用した実装の例
27. Copyright © YusukeAndo. 2007. All rights reserved. 27 今回実装する動き 検索条件を指定し、データを検索する 検索結果を同一ページ内に非同期に更新する ボタンなどを使わずに入力内容に応じて自動更新 入力欄などを効率的に出力する
28. Copyright © YusukeAndo. 2007. All rights reserved. 28 実装後の画面イメージ 検索結果 検索フォーム
29. Copyright © YusukeAndo. 2007. All rights reserved. 29 検索フォームの実装 HtmlHelperを利用してデータから動的に出力 selectTag radioTags などのメソッドを利用する フィールド名は モデル名/フィールド名 の形で指定する $html->radioTags(項目名,項目データ) $html->selectTag(項目名,項目データ)
30. Copyright © YusukeAndo. 2007. All rights reserved. 30 Viewの実装内容 <h2>すいすい検索</h2> <table> <tr><td width="50%"> <form name="searchForm" id="searchForm"> <h3>性別</h3> <?php echo $html->radioTags("Member/sex",$sex_list);?> <h3>血液型</h3> <?php echo $html->selectTag("Member/blood", $blood_list,null,array("multiple"=>"multiple","size"=>"4"),false);?> <h3>都道府県</h3> <?php echo $html->selectTag("Member/pref",$pref_list,null);?> </form> </td><td> <div id="resultArea"></div> </td></tr></table> app/views/members/search.thtml radioの出力 selectの出力
31. Copyright © YusukeAndo. 2007. All rights reserved. 31 実行例 →動的にフォームが出力されている
32. Copyright © YusukeAndo. 2007. All rights reserved. 32 検索結果の実装 データを取得して表示する AJAXからPOSTされたデータの取り扱いは後回し 余分なヘッダ・フッタを出力しないようにlayoutを切り替える ループしながらセルに納めるだけであれば tableCellsメソッ ドが利用可能 $html->tableCells(データ,[奇数行属性],[偶数行属性])
33. Copyright © YusukeAndo. 2007. All rights reserved. 33 Controllerの実装内容（追加分） class MembersController extends AppController{ function result(){ $this->layout = "ajax"; $data = $this->Member->findAll(null,null,null,20); $row_data = array(); foreach ($data as $row) { $row_data[] = $row['Member']; } $this->set("row_data",$row_data); } } app/controllers/members_controller.php layoutの設定 取得したデータのセット
34. Copyright © YusukeAndo. 2007. All rights reserved. 34 Viewの実装内容 <table> <?php echo $html->tableCells($row_data,array("bgcolor" => "#CCCCCC"));?> </table> app/views/members/result.thtml
35. Copyright © YusukeAndo. 2007. All rights reserved. 35 実行例 →スマートな表示を実現(確認の為、ajax layoutではない)
36. Copyright © YusukeAndo. 2007. All rights reserved. 36 検索結果をAJAXで更新 AjaxHelperのobserveFormメソッドを利用 取得したドキュメントの反映先のidと取得元を設定 Ajaxから送信されたフォームを受信する場合は RequestHandlerコンポーネントを設定する必要あり 上記の設定がされていればフォームのデータは通常と同じ 方法で扱う事が可能
37. Copyright © YusukeAndo. 2007. All rights reserved. 37 Controllerの実装内容（追加分） class MembersController extends AppController{ var $components = array('RequestHandler'); function result(){ $this->layout = "ajax"; $data = $this->Member->findAll($this->data,null,null,20); $row_data = array(); foreach ($data as $row) { $row_data[] = $row['Member']; } $this->set("row_data",$row_data); } } app/controllers/members_controller.php コンポーネントの設定 送信データの取得
38. Copyright © YusukeAndo. 2007. All rights reserved. 38 Viewの実装内容 <?php echo $javascript->link("prototype");?> <?php echo $javascript->link("scriptaculous");?> <h2>すいすい検索</h2> <form name="searchForm" id="searchForm"> ～省略～ </form> <div id="resultArea"></div> </td></tr></table> <?php $opt = array( "url" => "/members/result", //取得するドキュメント "update" => "resultArea", //反映先 "frequency" => "1", "with" => "document.searchForm.serialize()"); //送信するフォーム echo $ajax->observeForm("searchForm",$opt); ?> app/views/members/search.thtml
39. Copyright © YusukeAndo. 2007. All rights reserved. 39 実行例 自動的に更新 検索条件を変更すると
40. 40 Copyright © YusukeAndo. 2007. All rights reserved. バージョンによる違い
41. Copyright © YusukeAndo. 2007. All rights reserved. 41 バージョンによる違い ここまでの内容を1.2で実行した場合は若干変更あり HtmlHelperのフォーム関連のメソッドがFormHelperに移動 となっている デフォルトのCSSが変わり、また独特なデザインに scaffoldのページに対してPagenationが適用済み まだalpha版ですが、いずれ1.2に移行していくと思われる 上記の様な差分しかない為、コードの移行も楽
42. Copyright © YusukeAndo. 2007. All rights reserved. 42 実行例 ページ分けが実装済み
43. Copyright © YusukeAndo. 2007. All rights reserved. 43 実行例 AJAXもそのまま動作
44. Copyright © YusukeAndo. 2007. All rights reserved. 44 まとめ Helperの活用により出力関連の処理を軽減 やや独特の関数を学ぶ必要はあるが、利便性は高い フォームの部品はvalidationやModelと自動的に連携し、初 期値の代入や条件への指定が可能 Ajaxを枠組みの中であれば手軽に実装する事ができる テンプレート用の記法ではなくあくまでPHPの文法 ViewにはSmartyを使いたいという人も多いと思いますが、 Helperでも大抵の事は解決します （Smartyを使う事も可能、またSmarty内でHelperを使う事も可能です）
45. Copyright © YusukeAndo. 2007. All rights reserved. 45 謝辞 参考サイト CakePHPのおいしい食べ方 http://cakephp.seesaa.net/ CakePHP APIドキュメント http://api.cakephp.org/ CakePHPプログラマーズリファレンスガイド http://cakephp.jp/doc/
46. Copyright © YusukeAndo. 2007. All rights reserved. 46 質疑応答 ご静聴ありがとうございました。