PHP と Sencha Ext.Direct
•
3 likes•2,051 views
PHPカンファレンス関西2014 でのセッションのスライドです。 JavaScript と PHP のやりとり、Ajax でリクエストして JSON を解釈してって、面倒くさくないですか？機能が増える度に、リクエスト先の URL の数、爆発的に増えていませんか？ Ext.Direct を使うと、単一の URL で、サーバー側の関数をダイレクトに呼び出せます。しかも… Ext.Direct のサーバーサイドのPHPでの実装方法と、ベネフィットについて解説します。
Recommended
More Related Content
Similar to PHP と Sencha Ext.Direct
Similar to PHP と Sencha Ext.Direct (20)
More from 久司 中村
PHP と Sencha Ext.Direct
- 2. 自己紹介 • 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー • 著書 • Sencha Touch 2 実践開発ガイド @martini3oz
- 3. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 • まとめ PHPとSencha Ext.Direct
- 4. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 • まとめ PHPとSencha Ext.Direct
- 5. Single Page App • シングルページアプリケーション • ページ遷移をなくして、HTML5 / JavaScript の仕組みを 使ってクライアント側で画面を書き換え • クライアントリッチな方向へ • かわりにサーバーサイドは Thin になる
- 6. サーバーAPI • HTML5 / JavaScript によるフロントの実装 • SPA (Single Page Application) の台頭 • PHP の主な役割はAPIでのJSONデータの提供に
- 7. APIの呼び出し 1 $.ajax({! 2 url: './hoge.php',! 3 type: 'POST',! 4 dataType: 'json',! 5 ! 6 data: {! 7 id: 10! 8 },! 9 ! 10 success: function(data) {! 11 // some process! 12 },! 13 ! 14 error: function(xhr, status, err) {! 15 // error! 16 }! 17 });!
- 8. JSONを返す 1 <?php! 2 $id = isset($_POST['id']) ? $_POST['id']: null;! 3 $result = getPersonData($id);! 4 echo json_encode($result);! 5 ! 6 function getPersonData($id) {! 7 //! 8 }!
- 9. • 一つひとつ作ると煩わしいAPIとその呼び出し •Sencha の Ext.Direct を使うとすっきりとします
- 10. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 • まとめ PHPとSencha Ext.Direct
- 11. ところで
- 13. • カリフォルニア州レッドウッドシティにある企業 • HTML5について先駆者として取り組み • フレームワーク／ツール／サービスを提供 Sencha 社
- 14. Sencha 製品 Sencha Ext JS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層
- 15. Sencha 製品 Sencha Ext JS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層Sencha Space については 来週土曜日の JAWS三都物語 でお話しします。
- 16. Sencha Ext JS 5 • 豊富なUIコンポーネント • 堅牢なクラスシステム • クロスブラウザ対応 • プラグイン不要のチャート • MVC / MVVM アーキテクチャ 全てのブラウザでリッチなアプリを作成するための HTML5 / JavaScript フレームワーク
- 17. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 • まとめ PHPとSencha Ext.Direct
- 18. Ext.Direct Ext Directは、クライアントサイドからリモートサー バサイド メソッドを呼び出す、プラットフォームや言語にとわられない 技術です。Ext Directは、クライア ントサイドのExt JSアプリ ケーションと、ポピュラーなサーバプラットフォームの間でシー ムレスな通信を可能にします。
- 19. Ext.Direct • Ext JS / Sencha Touch にひっそりと装備されている • RPC (Remote Procedure Call) を実現 • サーバーサイドのメソッドをクライアントのJavaScriptから 直接実行するしくみ
- 20. サーバー側ですること • API 情報を公開 • どんなクラスとメソッドが用意されているか • アクセスポイント (Router) はどこか • Router を設置
- 21. API • Ext Direct でコールできるサーバー側メソッドをクライアン トに教える。 • ここではAPI情報が入った JavaScript コードを返す。 • クライアント側では、この情報を RemotingProvider に渡 す。
- 23. クライアント側 • Direct Manager に API 情報を渡して RemotingProvider を追加 • RemotingProvider は JavaScript の関数オブジェクトを 生成する • 生成された関数をコールするとサーバーにリクエストが
- 24. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 PHPとSencha Ext.Direct
- 25. サーバー側を用意する • example に PHPでのサーバーサイドコードが用意されてい る • classes ディレクトリの下に公開メソッドを用意したクラス を配置 • 公開するメソッドのシーケンスを config.php に指定
- 26. 見てみましょう
- 27. 呼び出す • Ext.Direct を用意する • Ext.direct.Manager の addProvider メソッドで API を追 加 • 呼び出す
- 28. 呼び出す • 中身は Ajax リクエストなので、値を返すメソッドの場合は 非同期でコールバックで受け取る 30 onGetData: function(form, field, value) {! 31 Direct.rpc.Customer.getCustomer(value, function(ret) {! 32 form.getForm().setValues(ret);! 33 });! 34 },
- 29. 見てみましょう
- 30. こんなことされたら 36 onGetMultiData: function() {! 37 var me = this, i,! 38 store = me.getCustomersStore();! 39 ! 40 store.removeAll();! 41 for(i=1; i<=100; i++) {! 42 Direct.rpc.Customer.getCustomer(i, function(ret) {! 43 store.add(ret);! 44 });! 45 }! 46 }! ループの中でDirectを呼んでる
- 31. こんなことされたら • 100回のRPCをループの中で呼び出している • 100回のAjaxリクエストがサーバーへ? • んなことされたら困るわ (;´д｀)
- 32. こんなことされたら • でも大丈夫なんです。Direct では。 • 連続して実行されたRPC呼び出しは、Ext.Direct がバイン ドして処理してくれるのです
- 33. リクエストのバインド • 短時間の間に呼び出された関数コールはまとめられて一つの リクエストとして送信される • サーバー側の Router は、それらを分解してサーバーのメ ソッドをコールする • すべてのリザルトをまとめてクライアントに返す • RemotingProviderが順次コールバックを呼び出す
- 34. 見てみましょう
- 35. • Single Page Application への流れとAPI • Sencha について • Ext.Direct って何？ • Ext.Directの実際 • まとめ PHPとSencha Ext.Direct
- 36. • Single Page Application への潮流 • 複雑になりがちなAPIをひとつにまとめる • 無駄なリクエストをバインドして高性能に • Ext JS のデータモデルとの連携も可能 PHPとSencha Ext.Direct
- 37. • PHP との相性は抜群 • サーバー側実装もたくさんのものがある • これを機会に是非、Sencha Ext JS を触って見てください • モバイルには Sencha Touch もあります PHPとSencha Ext.Direct
- 38. 告知 • 2014/07/12 13:00より • 日本マイクロソフト関西支店 • http://atnd.org/events/51279 初心者向けJavaScript入門からテラ・コーディングまで！ JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用 しているKnockoutJSを堪能する！Sencha Ext JSのMVVMもやります！
- 39. ご清聴ありがとう ございました