BanchaでCakePHPとSenchaフレームワークを統合する

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “How to Integrate CakePHP and Sencha Frameworks with Bancha”を翻訳したものです。

序

沢山のデータを扱うExt JSアプリケーションを開発する時には、バックエンドのシステムとの多分back-endシステムとのデータ変換や同期たくさんの開発時間がかかったことでしょう。データ転送の方法は沢山ありますが、我々のシステムではExt.Directを使うことにしました。Ext.DirectはSenchaの技術でExt JS及びSencha Touchライブラリーに実装されています。

初めに

私たちは軽量なPHP MVCフレームワークであるCakePHPの大ファンです。 Ext.Directのフォーマットで全てのデータを提供するようにCakePHPを拡張するBanchaを作る事にしました。 Banchaは全ての必要なデータ転送、整理、ディスパッチャーの拡張を行います。 CakePHPの中ではCakeスタイルでフロントエンドではExt JS形式でデータを提供します。

phpdocsのコメントで@banchaRemotableとつけるだけでコントローラーの関数をJavaScriptに公開することができます。

モデルのマッピング

上記の拡張は本当に便利で大切な時間も省けます。しかし、まだモデル構造やリレーションシップ、バリデーションルールの定義といったタスクををPHPとJavaScriptの両方でしていたので私たちはまだ満足していませんでした。システムをチーム環境で最新にしておくために人間のフォロースルーに頼って実装することは、人為的ミスを犯す危険性が増します。

Banchでは、Cake PHPのモデルを自動的に解析しExt JSやSencha Touchに対応したスキーマを生成することでこの問題を解決します。

自動的CRUDのサポート

我々の次の段階は自動化を進める為に、BanchaBehaviorが有効な全てのモデルに自動的にCRUDのフルサポートを提供することです。 CakePHPのコンソールで自動的にControllerを作れますし、または現在あるcontrollerのクラスに５行のコードを追加すれば自動的にCRUDサポートが可能になります。この強化で、どのCakePHPのモデルでも、JavaScriptに実装を追加せずに自動的なCRUDサポートを実現することができます。

Bancha.Scaffold

CakePHPの大きい強みは、迅速なアプリケーション開発にフォーカスしている点です。その考えを取り込んでBanchaの中にもスカッフォルディングを実装し、そのお陰で全体的な開発とテスティングの時間を削減できました。

注: このライブラリはMITのライセンスのもとにスタンドアロンでも利用できます。
http://scaffold.banchaproject.org/ をご覧ください。

例:

それでは、CakePHPを使った典型的な迅速な開発プロセスを見てみましょう。最初はブックストアのデータベースのテーブルを作って、データの構成を定義します。

CREATE TABLE `books` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `title` VARCHAR(32) NOT NULL,
    `author` VARCHAR(32) NOT NULL,
    `publish_date` DATE NOT NULL,
    PRIMARY KEY (`id`)
  )

次はアプリケーションの最初のプロトタイプを作る為にプロセスをCakePHPの中で初める。CakePHPではデータベースの図式を元にしてコントローラーズ、Viewsやモデルを「焼く」（Bake）するコマンドラインのツールが与えられている。BakeコンソールはどのCakePHPの根本的な材料を作れる：モデル、Views、コントローラーズ。骨組みの足場だけに限らせることもできるつつ、CakePHPのBakeは全ての機能が使えるアプリケーションを数分で作れる。Banchaと一緒に、その行動を延ばしてCRUDサポートを自動化する

ブックステーブルのMVC全体をスカッフォルディングするためにBakeを使います。 Shellで、コンソールにcake bake all;とタイプし、templateでは「Bancha」を選択します。

そうすると次の行をモデルに入れることで、 Banchaがモデルを公開するように設定できます：public $actsAs = array(“Bancha.BanchaRemotable”);

それで終わりですーまあ、CakePHP Bake側ではですが。バックエンドは設定および生成され、コントローラーにログインする作業を追加してテスト、修正する準備ができました。

JavaScript側

次にブック管理のページをスカッフォルディングします。

Banchaはモデルを作る為に簡単なインターフェースを備えています。このモデルはサーバーから全てのフィールド、バリデーション、アソシエーションと完全にコンフィグされたProxyを取得します。

onModelReadyメソッドで Banchaに（もしまだ使用可能ではなかったら）モデル定義をサーバーからロードするように指示できますし、 Ext JSでは、次のコマンド（二番目の引数はコールバックになっています）でCakePHPのBookモデルを作れます。

Bancha.onModelReady(‘Book’, function() {...})

あとはBanchaがやってくれます。これが終わったら、追加のExt JSコードをを書き始めることができます。

Bancha.Scaffoldは最小限の入力で迅速にGridとFormを作ることができます。新しいアプリケーションのメインページに全ての部分を組み合わせます。

Bancha.onModelReady(‘Book’ function() {
    Ext.create('Ext.grid.Panel', {
        scaffold: Bancha.model.Book, // Bancha.Scaffold will take all information from the model
        title: 'Book Management Grid with full CRUD support',
        renderTo: Ext.getBody(),
        frame: true
    });
  });

これはBanchaのちょっとした紹介です。 Banchaについてもっと詳しい情報は banchaproject.org をご覧ください。そこにもっと長いチュートリアルやその他色々がのっています。

BanchaはOpen Sourceとコマーシャルライセンスのデュアルライセンスで使えます。

楽しいコーディングを！

Ext JS

BanchaでCakePHPとSenchaフレームワークを統合する

カテゴリ

アーカイブ