はじめに
FlexとPHPを利用するデベロッパーは、Flex BuilderとZend Studio for Eclipseの2つのツールを組み合わせることで作業生産性を高めることができます。この作業環境なら、FlexとPHPの特性を組み合わせてプロジェクトを開発できるだけでなく、コーディング時に両方の言語のメリットを享受できます（Eclipseでは「特性」によって、特定のビルダおよびその他の設定とプロジェクトの関連付けが行われます）。また、この環境では、FlexのコードとPHPのコードを同時にデバッグすることも可能です。
この記事では、Flex Builder 3とZend Studio for Eclipseのインストール方法に加えて、Flex＋PHPのコンビネーションプロジェクトの作成方法や、AMFPHPを利用してFlexとPHP間のデータ通信を行うプロジェクトのデバッグ方法についても触れることにします。
必要条件
この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。
- Flex Builder 3 Eclipseプラグイン
- Zend Studio for Eclipse
- AMFPHP
- PHP 5以降をサポートするWebサーバ
PHPのダウンロード または
WampServerのダウンロード（Apache、PHP、MySQL、Windows版Phpmyadmin）
- サンプルファイル：
flex_php.zip（ZIP、445KB）
このアーカイブは、インポート／Flex Builder／Flexプロジェクトを選択して読み込めます。
この記事に必要な予備知識
- Flex Builder、ActionScript 3.0およびPHPに精通していること。
この記事は、Creative Commons Attribution-Noncommercial 3.0 Unported Licenseのもと提供しています。
Flex BuilderとZend Studio for Eclipseのインストール
Flex Builderは、スタンドアローンバージョンのソフトウェアとEclipse用のプラグインバージョンの2種類で提供されています。筆者は、プロジェクトのPHPとFlexの両方のコードを、同一のIDEを使用して編集したいと考えています。したがって、EclipseにはZend StudioとFlex Builderの両方をインストールする必要があります。
最も簡単なインストール方法は、まずZend Studio for Eclipseをインストールし、その後、Flex Builder Eclipseプラグインインストーラを起動する方法です。インストールを行う際には、必ずZend Studioツールバーもインストールするようにします（PHPコードを手軽にデバッグできるようになります）。Flex Builder 3をインストールする際には、Flex Builderを追加したいEclipseのインストールフォルダ位置（図1参照）を尋ねるメッセージが表示されます。
インストール処理が終了したら、これで、これらのツールをFlexおよびPHPプロジェクトで使用する準備が整ったことになります。
Flex＋PHPプロジェクトの作成
FlexコードとPHPコードの両方に対応するプロジェクトを、Zend Studioで作成する準備が整いました。なお、Flex Builderにも、PHPの名が付いたFlexプロジェクトタイプが用意されていますが、このタイプのプロジェクトを作成した場合は、Flexの特性のみが適用され、PHPの特性は適用されません。つまり、Zend Studioが提供する一部のPHP機能は、当該プロジェクトで利用することができません。
両方の特性を適用できるようにするには、まず、PHPプロジェクトを作成します。メニューからファイル／新規／プロジェクトを選択します（図2参照）。ウィザードが表示されたら、PHP／PHPプロジェクトの順に選択（図3参照）した後、「次へ」ボタンをクリックします。PHPプロジェクトウィザードが表示されたら、プロジェクト名を指定（筆者は「flex_project」という名前を使用）し、「プロジェクトの特定の設定を可能にします」にチェックを入れます。最後に「終了」ボタンをクリックします（図4参照）。
プロジェクトの作成手続きが完了したら、表示されたプロジェクトを右クリックし、メニューからFlexプロジェクトの特性／Flexプロジェクトの特性を追加を選択します（図5参照）。このウィザードを使用することで、PHPプロジェクトにFlexの特性を追加できます。これにより、他のFlexプロジェクト同様に、Flexアプリケーションを作成・コンパイルできるようになります。
「Flexプロジェクトの特性を追加」コマンドを選択すると、新規Flexプロジェクトウィザードに似たウィザードが表示されます。アプリケーションサーバの種類を「PHP」に設定し、「次へ」ボタンをクリックします（図6参照）。
ウィザードの次のページ（図7参照）では、Webルートフォルダのパスと、このパスに対応するURLを入力します。筆者のマシンの設定の場合、これらはc:\htdocsとhttp://localhostになります。
ここでは、ネットワークパスまたはWebサーバルート以下のフォルダを使用することも可能です。仮に、ルートサーバ直下に「tests」という名のフォルダがある場合は、値としてc:\htdocs\tests、http://localhost/testsをそれぞれ入力します。値の入力が完了したら、「設定を検証」ボタンをクリックします。サーバが起動していない場合、またはURL、Webルート位置の入力内容に誤りがある場合は、警告が表示されます。設定が完了したら、「終了」ボタンをクリックします。これで、図8に示すようなプロジェクトが用意されるはずです。
- AIR＋PHPのプロジェクトを作成したい場合は、幾分の追加作業が発生する別の手順を追う必要があります。これは、「Flexの特性を追加」ウィザードがFlex、Flexライブラリ、ActionScriptプロジェクトのみをサポートし、AIRプロジェクトに対応していないためです。ただし、この問題は少しの作業で解決できます。まず、AIRプロジェクトを作成し、その後、PHPプロジェクトを作成します。Eclipseではプロジェクトの特性を管理するために、各プロジェクト内で「.project」という名の特殊ファイルが用いられます。そこで、PHPの.projectファイルにあるnatureノードとbuildCommandノードを、AIRプロジェクトの.projectファイルにコピーします。これで作業完了です。
- 「Flexの特性を追加」ウィザードでアプリケーションサーバの種類をPHPに設定した理由は？ ウィザードでは、Webサーバの位置とURLの指定が行われたことを思い出してください。Flex Builderはこの情報を利用して、コンパイル済みのFlexアプリケーションをユーザが指定したパスに配置するとともに、所定のURLを利用して、このアプリケーションを起動します。つまりこれにより、デプロイの段階でSWFファイルを手動コピー、ブラウザで開く、正確なURLを記憶するといった手間を省くことができ、デプロイ手順の効率化が可能になります。
Flex＋PHPアプリケーションの構築
プロジェクトを適切に設定できるようになったので、ここでは、AMFPHPを利用してPHPスクリプトと通信する、小さなFlexアプリケーションを開発することにします。オープンソースプロジェクトのAMFPHPを利用すれば、Flexデベロッパーは、FlexからPHPのクラスにリモートプロシージャコールをかけられるようになります。
AMFPHPライブラリのインストール
AMFPHPのアーカイブをダウンロード・解凍します。そして、解凍したファイルを、flex_php-debugフォルダと同じ階層にあたる、Webサーバルートのamfphpフォルダ内に配置します。これでAMFPHPのインストールが完了したことになります。AMFPHPの動作を検証するために、ブラウザを起動し、amfphp/browserフォルダのURLを入力します。筆者のマシン環境では、http://localhost/amfphp/browserがこのURLに相当します。動作が正常であれば、図9のようなページが表示されるはずです。このページでは、AMFが利用できるサービスの検出と、それらの動作検証が行えます。
PHPクラスの作成
AMFPHPを利用すれば、FlexアプリケーションからPHPクラスのメソッドコールを行えます。ただし、呼び出すPHPクラスは、必ずamfphp/servicesフォルダに配置されている必要があります。
PHPコードを記述するにあたり、このフォルダをZend Studioで使用できれば便利だということは言うまでもありません。しかしここで問題になるのは、開発対象のプロジェクトファイルがサーバのルートフォルダに配置されていないことです（つまり、amfphp/servicesフォルダ内にPHPクラスを作成した場合は、FlexPHPプロジェクト上で、このクラスを確認することができません）。幸運にも、この問題に対しては簡単な解決策があります。Eclipseでは、プロジェクトに外部フォルダをリンクできます。Zend Studioの作業画面に戻り、表示がFlex開発パースペクティブになっていることを確認します。そして、プロジェクト名を右クリックし、メニューから新規／その他を選択します。表示されたウィザード上の「フォルダ」を選択し、「次へ」ボタンをクリックします。「新規フォルダ」ウィザードが表示されたら「拡張」ボタンをクリックし、amfphpフォルダを参照します（図10参照）。「終了」ボタンをクリックすると、プロジェクト内に「amfphp」という名のフォルダが新規作成されていることを確認できます。
「新規PHPクラス」ウィザードを起動し、ファイル名（MyService.php）とクラス名（MyService）を入力した後、「終了」ボタンをクリックします（図12参照）。
Eclipseによって新規ファイルが生成され、このファイルが編集可能な状態で開かれます。このクラスはリモートプロシージャコールに用いられるものであることから、少なくとも1つ、メソッドを作成しておく必要があります。ここでは例として、引数を文字列に代入してその結果を返す、以下のコードを使用すると良いでしょう。
<?php
class MyService {
public function helloWorld($name=NULL) {
$ret = 'Hello World, says ' . $name . '!';
return $ret;
}
}
?>
ブラウザを起動し、amfphp/browserのURLを開きます。右側の列に、新たなクラスが表示されていることを確認できるはずです。このクラスを選択すると、helloWorldメソッドの動作検証が行え、何が返されるかを確認することができます。
Flexアプリケーションの作成
PHPコードの準備が整ったので、次に、PHPクラスを呼び出すFlexコードを作成することにします。まず、Eclipseの画面右上のアイコンをクリックし、画面がFlex開発パースペクティブになっていることを確認します。そして、flex_php.mxmlファイルを開きます。
ここではサーバと通信するためにRemoteObjectを使用するので、mx:RemoteObjectタグを追加します。destination属性とsource属性の値を「MyService」に設定します（これがPHPのクラス名です）。endpoint属性の値としては、amfphp/gateway.phpファイルのURLを設定します。筆者のマシン環境では、このURLはhttp://localhost/amfphp/gateway.phpになります。また、id属性の値として「myRPC」を入力し、このオブジェクトに名前を付けておきます。完成したコードは次のようになります。
<mx:RemoteObject id="myRPC"
destination="MyService"
source="MyService"
endpoint="http://localhost/amfphp/gateway.php"/>
次に、MyServiceのhelloWorld()メソッドを呼び出し、そして、所定の引数に値を設定するためのコンポーネントが必要となります。ラベル、テキスト入力ボックス、ボタンのレイアウトを整えるために、アプリケーションにmx:HBoxコンポーネントを追加します。ここでは、 TextInputのidを「myText」とし、ボタンのclickイベントから所定のserviceメソッドが呼び出されるように設定します。完成したコードは次のようになります。
<mx:HBox top="10" left="10">
<mx:Label text="Name value:"/>
<mx:TextInput id="myText" width="150"/>
<mx:Button label="Call MyService->helloWorld()" click="myRPC.helloWorld(myText.text)"/>
</mx:HBox>
最後に、結果およびエラーを処理するために、RemotesObjectに何らかのイベントリスナを定義します。MXMLアプリケーションにmx:Scriptタグを追加し、この中にRemoteObjectが結果を返す際に呼び出される関数と、エラーが発生した際に呼び出される関数の2つを定義します。これらの関数は、単にそれぞれの旨を伝えるメッセージを表示するだけです。
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private function resultListener(event:ResultEvent):void {
Alert.show(event.result as String, "Result");
}
private function faultListener(event:FaultEvent):void {
Alert.show(event.fault.faultString as String, "Error");
}
]]>
</mx:Script>
関数が作成できたら、それぞれが所定のイベントを処理できるように設定し、これらをRemoteObjectにリンクさせる必要があります。次に示すタグの最終行を参考にしてください。
<mx:RemoteObject id="myRPC"
destination="MyService"
source="MyService"
endpoint="http://localhost/amfphp/gateway.php"
result="resultListener(event)" fault="faultListener(event)"/>
これでコードの動作検証を行う準備が整いました。ツールバーの「実行」アイコンをクリックし、Flexアプリケーションを起動してみます。アプリケーションがデフォルトのブラウザで開いたら、テキスト入力ボックスに任意の名前を入力し、そのそばのボタンをクリックします。図13に示すような応答が表示されるはずです。
コードのデバッグ
FlexとPHPのコードが用意できたので、両方のデバッグを行う準備が整いました。まずは、コードにブレークポイントを追加する必要があります。FlexアプリケーションのresultListener関数1行目と、MyService PHPクラスのhelloWorld()メソッドの1行目にそれぞれブレークポイントを追加してみます。
次に、Flexアプリケーションをデバッグモードで実行することにします。Eclipse上でflex_php.mxmlファイルを選択し、ツールバーのデバッグボタンをクリックします。そしてブラウザを開き、Zend Studioツールバーの「Debug」ボタンをクリックします。その後、「Debug」ボタンの右側にあるボタンをクリックし、メニューから「All pages on this site」を選択します（図14参照）。
PHPデバッガの起動とセットアップ
ここで、いったんブラウザを閉じます（この一連の手順は不可解かもしれませんが、Eclipseにバグがあると思われるため、筆者はこのような回避策をとっています）。次に、Eclipseの作業環境に戻り、Flexアプリケーションを再度デバッグモードで実行します。ブラウザ上でテキストフィールドに任意のテキストを入力し、そばのボタンをクリックします。
これでEclipseのPHPデバッガが起動するはずです。amfphp/service.phpのソースを選択するよう促される場合は、ウィザード上で当該ファイルを選択し、「終了」ボタンをクリックします。ここにも些細なバグがあり、アプリケーションは停止されるものの、この停止はブレークポイントの前で起こります。この問題を回避するには、ツールバーの「再開」アイコン（図15参照）を数回クリックし、helloWorld()メソッドのブレークポイントに到達するようにします（図16参照）。
この時点で、$name変数の値が確認できます。この際、「ステップオーバー」ボタン（「再開」アイコンの右側に配置されたボタン）をクリックすると、$returnの値も確認できます。状況が確認できたら、再度「再開」ボタンをクリックします。Flexデバッガが起動し、Flexアプリケーションに配置したブレークポイントに達するまで処理が行われます（図17参照）。ここでは、event.resultメンバーを含む、さまざまなイベントオブジェクトの値を確認することができます。状況が確認できたら、再び「再開」ボタンをクリックします。最後に、アプリケーションによって結果メッセージが表示されます。
作業手順は以上です。思ったより簡単ではなかったでしょうか？
