Download pdf - PHP と Sencha Ext.Direct

PHPとSencha Ext.DirectHisashi Nakamura

自己紹介• 中村久司

• Sencha UG Co-Organizer

• 株式会社ゼノフィ関西事業所事業所長

• Sencha オフィシャルトレーナー

• 著書

• Sencha Touch 2 実践開発ガイド

@martini3oz

• Single Page Application への流れとAPI

• Sencha について

• Ext.Direct って何？

• Ext.Directの実際

• まとめ PHPとSencha Ext.Direct






Single Page App• シングルページアプリケーション

• ページ遷移をなくして、HTML5 / JavaScript の仕組みを

使ってクライアント側で画面を書き換え

• クライアントリッチな方向へ

• かわりにサーバーサイドは Thin になる

サーバーAPI

• HTML5 / JavaScript によるフロントの実装

• SPA (Single Page Application) の台頭

• PHP の主な役割はAPIでのJSONデータの提供に

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 });!

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 }!

• 一つひとつ作ると煩わしいAPIとその呼び出し

• Sencha の Ext.Direct を使うとすっきりとします






ところで

ところで

Sencha って何よ？

• カリフォルニア州レッドウッドシティにある企業

• HTML5について先駆者として取り組み

• フレームワーク／ツール／サービスを提供

Sencha 社

Sencha 製品

Sencha Ext JS Sencha Touch Sencha GXT

Sencha Architect Sencha Cmd

Sencha Animator

Support Training

Sencha Space

フレームワーク層ツール層サービス層

Sencha 製品

Sencha Ext JS Sencha Touch Sencha GXT

Sencha Architect Sencha Cmd

Sencha Animator

Support Training

Sencha Space

フレームワーク層ツール層サービス層Sencha Space については来週土曜日の JAWS三都物語

でお話しします。

Sencha Ext JS 5

• 豊富なUIコンポーネント

• 堅牢なクラスシステム

• クロスブラウザ対応

• プラグイン不要のチャート

• MVC / MVVM アーキテクチャ

全てのブラウザでリッチなアプリを作成するためのHTML5 / JavaScript フレームワーク






Ext.Direct

Ext Directは、クライアントサイドからリモートサーバサイドメソッドを呼び出す、プラットフォームや言語にとわられない技術です。Ext Directは、クライアントサイドのExt JSアプリケーションと、ポピュラーなサーバプラットフォームの間でシームレスな通信を可能にします。

Ext.Direct

• Ext JS / Sencha Touch にひっそりと装備されている

• RPC (Remote Procedure Call) を実現

• サーバーサイドのメソッドをクライアントのJavaScriptから

直接実行するしくみ

サーバー側ですること

• API 情報を公開

• どんなクラスとメソッドが用意されているか

• アクセスポイント (Router) はどこか

• Router を設置

API• Ext Direct でコールできるサーバー側メソッドをクライアン

トに教える。

• ここではAPI情報が入った JavaScript コードを返す。

• クライアント側では、この情報を RemotingProvider に渡

す。

Router

• クライアントがメソッドをコールした時にリクエストを受け

付ける

• リクエストの中を解析してサーバーサイドのメソッドをコー

ルする

クライアント側• Direct Manager に API 情報を渡して RemotingProvider

を追加

• RemotingProvider は JavaScript の関数オブジェクトを

生成する

• 生成された関数をコールするとサーバーにリクエストが





PHPとSencha Ext.Direct

サーバー側を用意する• example に PHPでのサーバーサイドコードが用意されてい

る

• classes ディレクトリの下に公開メソッドを用意したクラス

を配置

• 公開するメソッドのシーケンスを config.php に指定

見てみましょう

呼び出す

• Ext.Direct を用意する

• Ext.direct.Manager の addProvider メソッドで API を追

加

• 呼び出す

呼び出す

• 中身は Ajax リクエストなので、値を返すメソッドの場合は

非同期でコールバックで受け取る

30 onGetData: function(form, field, value) {!31 Direct.rpc.Customer.getCustomer(value, function(ret) {!32 form.getForm().setValues(ret);!33 });!34 },


こんなことされたら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を呼んでる

こんなことされたら

• 100回のRPCをループの中で呼び出している

• 100回のAjaxリクエストがサーバーへ?

• んなことされたら困るわ (;´д｀)

こんなことされたら

• でも大丈夫なんです。Direct では。

• 連続して実行されたRPC呼び出しは、Ext.Direct がバイン

ドして処理してくれるのです

リクエストのバインド• 短時間の間に呼び出された関数コールはまとめられて一つの

リクエストとして送信される

• サーバー側の Router は、それらを分解してサーバーのメ

ソッドをコールする

• すべてのリザルトをまとめてクライアントに返す

• RemotingProviderが順次コールバックを呼び出す







• Single Page Application への潮流

• 複雑になりがちなAPIをひとつにまとめる

• 無駄なリクエストをバインドして高性能に

• Ext JS のデータモデルとの連携も可能


• PHP との相性は抜群

• サーバー側実装もたくさんのものがある

• これを機会に是非、Sencha Ext JS を触って見てください

• モバイルには Sencha Touch もあります


告知

• 2014/07/12 13:00より

• 日本マイクロソフト関西支店

• http://atnd.org/events/51279

初心者向けJavaScript入門からテラ・コーディングまで！ JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する！Sencha Ext JSのMVVMもやります！

http://atnd.org/events/51279

ご清聴ありがとう

ございました