SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

Eclipseを使用したFlex+PHP開発

 この記事では、Flash Builder 4とZend Studio for Eclipseのインストール方法に加えて、Flex+PHPのコンビネーションプロジェクトの作成方法や、Zend AMFを利用してFlexとPHP間のデータ通信を行うプロジェクトのデバッグ方法についても触れることにします。

はじめに

 FlexとPHPを利用するデベロッパーは、Flash BuilderとZend Studio for Eclipseの2つのツールを組み合わせることで作業生産性を高めることができます。この作業環境なら、FlexとPHPの特性を組み合わせてプロジェクトを開発できるだけでなく、コーディング時に両方の言語のメリットを享受できます(Eclipseでは「特性」によって、特定のビルダおよびその他の設定とプロジェクトの関連付けが行われます)。また、この環境では、FlexのコードとPHPのコードを同時にデバッグすることも可能です。

 この記事では、Flash Builder 4とZend Studio for Eclipseのインストール方法に加えて、Flex+PHPのコンビネーションプロジェクトの作成方法や、Zend AMFを利用してFlexとPHP間のデータ通信を行うプロジェクトのデバッグ方法についても触れることにします。

必要条件

 この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。

Flash Builder 4 Eclipseプラグイン
※編集部注

 Flash Builder 4のインストール方法などは、下記の記事で紹介しています。

Zend Studio 7.1 for Eclipse
Zend Framework 1.9以降

 Zend FrameworkはFlash Builder 4からインストールできるので、ダウンロードする必要はありません。自分でZend Frameworkをインストールしたい場合は、ここからコピーを入手できます。

Zend Studioブラウザツールバー
PHP5以降をサポートするWebサーバー
MySQLサーバー5以降
サンプルファイル
※メモ

 このアーカイブは、[Import(インポート)]-[Flash Builder]-[Flex Project(Flexプロジェクト)]を選択して読み込めます。

この記事に必要な予備知識

  • Flash Builder、ActionScript 3.0およびPHPに精通していること

 この記事は、Creative Commons Attribution-Noncommercial 3.0 Unported Licenseのもと提供しています。

Flash BuilderとZend Studio for Eclipseのインストール

 Flash Builderは、スタンドアローンバージョンのソフトウェアとEclipse用のプラグインバージョンの2種類で提供されています。筆者は、プロジェクトのPHPとFlexの両方のコードを、同一のIDEを使用して編集したいと考えています。従って、EclipseにはZend StudioとFlash Builderの両方をインストールする必要があります。

 最も簡単なインストール方法は、まずZend Studio for Eclipseをインストールし、その後、Flash Builder Eclipseプラグインインストーラを起動する方法です。インストールを行う際には、必ずZend Studioツールバーもインストールするようにします(PHPコードを手軽にデバッグできるようになります)。この方法は、Windowsではうまくいきます。

 Macの場合、まずFlash Builder 4をインストールしてから、ヘルプメニューの「新規ソフトウェアをインストール…」を選択します。表示されたインストールダイアログの追加ボタンを押して、サイトを追加します。ここでは、Zend Studio 7.1のアップデートサイトURL「http://downloads.zend.com/studio-eclipse/updates/7_1/」を使用して、Zend StudioをFlash Builder 4に追加します。これは、Flash Builder 4がCarbonベースであるのに対して、Zend StudioがCocoaだからです。

 Flash Builder 4をインストールする際には、Flash Builderを追加したいEclipseのインストールフォルダ位置(図1参照)を尋ねるメッセージが表示されます。

 インストール処理が終了したら、これで、これらのツールをFlexおよびPHPプロジェクトで使用する準備が整ったことになります。

図1. Zend Studioインストールフォルダの選択
図1. Zend Studioインストールフォルダの選択

 インストールが成功すると、次のような画面が表示されます。

図2. Zend StudioとFlash BuilderをWindowsにインストールしたところ
図2. Zend StudioとFlash BuilderをWindowsにインストールしたところ

Flex+PHPプロジェクトの作成

 FlexコードとPHPコードの両方に対応するプロジェクトを、Zend Studioで作成する準備が整いました。筆者がFlex+PHPプロジェクトでいつも使用するワークフローは、PHPとFlexの両方を1つのプロジェクトにまとめることです。筆者は通常クライアントサイドとサーバーサイドの両方で作業するからです。ただし、これが常に最善のワークフローというわけではなく、単なる個人的な好みです。人によっては、PHPファイル用とFlexアプリケーション用の2つのプロジェクトを作成する方法を好む場合もあります。

 Flash BuilderにはPHPという名前のFlexプロジェクトタイプがあります。このタイプのプロジェクトを作成した場合は、Flexの特性のみが適用され、PHPの特性は適用されません。つまり、Zend Studioが提供する一部のPHP機能は、当該プロジェクトで利用することができません。

 両方の特性を適用できるようにするには、まず、PHPプロジェクトを作成します。[File(ファイル)]-[New(新規)]-[Other(その他)]を選択します(図3を参照)。ウィザードが表示されたら、[PHP]-[PHP project(PHPプロジェクト)]の順に選択した後、[Next(次へ)]ボタンをクリックします(図4を参照)。PHPプロジェクトウィザードが開いたら、プロジェクト名を指定します(この例ではflex_projectを使用しています)。最後に[Finish(終了)]ボタンをクリックします(図5を参照)。

図3. 新規プロジェクトウィザードの開始
図3. 新規プロジェクトウィザードの開始
図4. PHPプロジェクトタイプの選択
図4. PHPプロジェクトタイプの選択
図5. PHPプロジェクトウィザード
図5. PHPプロジェクトウィザード

 プロジェクトの作成手続きが完了したら、表示されたプロジェクトを右クリックし、[プロジェクトタイプを追加または変更]-[Flexプロジェクトタイプを追加]を選択します(図6を参照)。このウィザードを使用することで、PHPプロジェクトにFlexの特性を追加できます。これにより、他のFlexプロジェクト同様に、Flexアプリケーションを作成・コンパイルできるようになります。

図6. Flexプロジェクトの特性を追加
図6. Flexプロジェクトの特性を追加

 [Add Flex Project Nature(Flexプロジェクトの特性を追加)]コマンドを選択すると、新規Flexプロジェクトウィザードに似たウィザードが表示されます。アプリケーションサーバーの種類で[PHP]を選択し、[Next(次へ)]ボタンをクリックします(図7を参照)。

図7. [Add Flex nature(プロジェクトにFlexの特性を追加します)]ウィザードの最初のページ
図7. [Add Flex nature(プロジェクトにFlexの特性を追加します)]ウィザードの最初のページ

 ウィザードの次のページ(図8を参照)では、Webルートフォルダのパスと、このパスに対応するURLを入力します。筆者のマシンの設定の場合、これらは「/Applications/MAMP/htdocs」と「http://localhost」になります。

図8. [Add Flex nature(プロジェクトにFlexの特性を追加します)]ウィザードの最終ページ
図8. [Add Flex nature(プロジェクトにFlexの特性を追加します)]ウィザードの最終ページ

 ここでは、ネットワークパスまたはWebサーバールート以下のフォルダを使用することも可能です。仮に、ルートサーバー直下に「tests」という名のフォルダがある場合は、この例の場合、値は「c:\htdocs\tests」および「http://localhost/tests」になります。値の入力が完了したら、[Validate Configuration(設定を検証)]ボタンをクリックします。サーバーが起動していない場合、またはURL、Webルート位置の入力内容に誤りがある場合は、警告が表示されます。

 設定が完了したら、[Finish(終了)]ボタンをクリックします。これで、図9に示すようなプロジェクトが用意されるはずです。

図9. Flex+PHPのコンビネーションプロジェクト
図9. Flex+PHPのコンビネーションプロジェクト
手順に関する補足事項1:AIR+PHPのプロジェクトを作成したい場合は?

 AIR+PHPのプロジェクトを作成したい場合は、幾分の追加作業が発生する別の手順を追う必要があります。これは、[Add/Change Project Type(プロジェクトタイプを追加または変更)]ウィザードが、Flex、Flexライブラリ、ActionScript、Flash Professionalプロジェクトのみをサポートし、AIRプロジェクトに対応していないためです。

 ただし、この問題は少しの作業で解決できます。まず、AIRプロジェクトを作成し、その後、PHPプロジェクトを作成します。Eclipseではプロジェクトの特性を管理するために、各プロジェクト内で「.project」という名の特殊ファイルが用いられます。そこで、PHPの.projectファイルにあるnatureノードとbuildCommandノードを、AIRプロジェクトの.projectファイルにコピーします。これで作業完了です。

手順に関する補足事項2:[Add Flex Nature(Flexの特性を追加)]ウィザードでアプリケーションサーバーの種類をPHPに設定した理由は?

 ウィザードでは、Webサーバーの位置とURLの指定が行われたことを思い出してください。Flex Builderはこの情報を利用して、コンパイル済みのFlexアプリケーションをユーザーが指定したパスに配置するとともに、所定のURLを利用して、このアプリケーションを起動します。つまりこれにより、デプロイの段階でswfファイルを手動コピー、ブラウザで開く、正確なURLを記憶するといった手間を省くことができ、デプロイ手順の効率化が可能になります。

手順に関する補足事項3:「HTMLラッパーを作成できません」というエラーの修正方法

 [Add/Change Project Type(プロジェクトタイプを追加または変更)]ウィザードを実行すると、問題ビューに「HTMLラッパーを作成できません」というエラーが表示されることがあります。これを修正するのは簡単で、単にエラーを右クリックして[Recreate(再作成)]オプションを選択します。

Flex+PHPアプリケーションの構築

 プロジェクトが適切に設定されたので、今度は、Zend AMFを利用してPHPスクリプトと通信する、小さなFlexアプリケーションを開発することにします。Zend AMFを使用することで、Flexデベロッパーは、FlexからPHPクラスへのリモートプロシージャーコールを実行できます。これはオープンソースプロジェクトであるZend Frameworkの一部です。

PHPコードの作成

 Zend AMFを利用すれば、FlexアプリケーションからPHPクラスのメソッドコールを行えます。ただし、呼び出すPHPクラスは、必ずサーバーのWebルートに配置されている必要があります。

 PHPコードを記述する際に、この作業をZend Studioから行えれば便利なのは言うまでもありません。しかしここで問題になるのは、開発対象のプロジェクトファイルがサーバーのルートフォルダに配置されていないことです(つまり、Webサーバールートフォルダ内にPHPクラスを作成した場合は、Flex PHPプロジェクト上で、このクラスを確認することができません)。

 幸運にも、この問題に対しては簡単な解決策があります。Eclipseでは、プロジェクトに外部フォルダをリンクできます。

 まず、Webサーバールート内にzendamf_remoteという名前のフォルダを作成します。Zend Studioの作業画面に戻り、表示がFlex開発パースペクティブになっていることを確認します。そして、プロジェクト名を右クリックし、メニューから[New(新規)]-[Other(その他)]を選択します。表示されたウィザード上の[Folder(フォルダ)]を選択し、[Next(次へ)]ボタンをクリックします。

 [New(新規)]ウィザードが開始されたら、[Advanced(拡張)]ボタンをクリックして、Webサーバールートフォルダを参照し、zendamf_remoteフォルダを選択します(図10を参照)。[Finish(終了)]ボタンをクリックすると、プロジェクト内にzendamf_remoteという名前のフォルダが新規作成されているはずです。

図10. リンクリソースの作成
図10. リンクリソースの作成

 次に、EclipseでPHPパースペクティブを選択し(図11を参照)、zendamf_remoteフォルダを右クリックして、[新規]-[その他...]を選択します。

図11. PHPパースペクティブの選択
図11. PHPパースペクティブの選択

 [New(新規)]ウィザードが開いたら、PHPノードからクラスエントリを選択し、[Next(次へ)]ボタンをクリックします。[New(新規)]ウィザードで、ファイル名(MyService.php)とクラス名(MyService)を入力した後、[Finish(終了)]ボタンをクリックします(図12を参照)。このステップを繰り返して、VOAuthorという名前の別のクラスを作成します。

 最初に、データがいくつか入ったテーブルをMySQLデータベースサーバーに追加します。次のコードが使用できます。

CREATE TABLE `authors_aut` (      `id_aut` int(11) NOT NULL 
auto_increment,      `fname_aut` varchar(255) NOT NULL, 
`lname_aut` varchar(255) default NULL,      
PRIMARY KEY  (`id_aut`),      
UNIQUE KEY `fname_aut` (`fname_aut`,`lname_aut`) ) 
ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; 
INSERT INTO `authors_aut` VALUES (1, 'Dantes', 'Alighierie');
INSERT INTO `authors_aut` VALUES (2, 'William', 'Shakespeare'); 
INSERT INTO `authors_aut` VALUES (3, 'Umberto', 'Eco'); 
INSERT INTO `authors_aut` VALUES (4, 'Niccolo', 'Machiavelli');

 ここでしようとしているのは、MySQLデータベースのテーブルからすべてのレコードを取得するPHPコードと、同じテーブルの1つのレコードを更新するコードを作成することです。このために、MyServiceというPHPクラスを作成し、このクラスをFlexから呼び出します。このクラスは、getData()とsaveData()の2つのメソッドを提供します。

 次に、テーブルの1つの行のデータモデルの役割を果たすVOAuthorというPHPクラスを作成します。そこで、これらのファイルすべてにコードを追加してみます。

図12. PHPクラスの作成
図12. PHPクラスの作成

 Eclipseによって新規ファイルが生成され、編集可能な状態で開かれます。次に示すのはMyServiceクラスのコードです(実際のデータベースの設定に応じて、接続情報を変更する必要があります。このためには、クラスの上部にある4つの定数を参照してください)。

<?php
require_once 'VOAuthor.php';

//conection info
define(":DATABASE_SERVER":, ":localhost":);
define(":DATABASE_USERNAME":, ":mihai":);
define(":DATABASE_PASSWORD":, ":mihai":);
define(":DATABASE_NAME":, ":flex360":);

class MyService {

  /**
   * Retrieve all the records from the table
   * @return an array of VOAuthor
   */
  public function getData() {
    //connect to the database.
    //we could have used an abstracting layer for connecting to the database.
    //for the sake of simplicity, I choose not to.
    $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
    mysql_select_db(DATABASE_NAME);
    //retrieve all rows
    $query = ":SELECT id_aut, fname_aut, lname_aut FROM authors_aut ORDER BY fname_aut":;
    $result = mysql_query($query);
    $ret = array();
    while ($row = mysql_fetch_object($result, ":VOAuthor":)) {
      $ret[] = $row;
    }
    mysql_free_result($result); 
    return $ret;
  }
  /**
   * Update one item in the table
   * @param VOAuthor to be updated 
   * @return NULL
   */
  public function saveData($author) {
    if ($author == NULL)
      return NULL;
    //logMe($author);
    //connect to the database.
    $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
    mysql_select_db(DATABASE_NAME);
    if ($author->id_aut > 0) {
      //save changes
      $query = ":UPDATE authors_aut SET fname_aut='":.$author->fname_aut.":', lname_aut='":.$author->lname_aut.":' WHERE id_aut=":.  $author->id_aut;
    } else {
      //add new record
      $query = ":INSERT INTO authors_aut (fname_aut, lname_aut) VALUES ('":.$author->fname_aut.":', '":.$author->lname_aut.":')":;
    }
    $result = mysql_query($query);
    return NULL;
  }
  
}
?>

 次に、データモデルであるValueオブジェクトのコードを作成します。ファイルVOAuthor.phpを選択し、次のコードを貼り付けます。

<?php class VOAuthor {      public $id_aut;      public $fname_aut;      
public $lname_aut; } ?>

 見ればわかるように、このクラスは非常に単純です。単にテーブルのフィールドと同じメンバーを提供するだけです。リモーティングを使用する場合、データが自動的に適切な型にキャストされます。例えば、MyService.getData()メソッドはVOAuthor PHPオブジェクトの配列を返します。ただし、後で見るように、Flexでは結果はVOAuthor ActionScriptオブジェクトの配列です。

Flexアプリケーションの作成

 PHPコードの準備が整ったので、次に、PHPクラスを呼び出すFlexコードを作成することにします。ここで作成するのは、データグリッドを使用して、データと1行編集用のフォームを表示するFlexアプリケーションです。

 まず、Eclipseの画面右上のアイコンをクリックし、画面がFlex開発パースペクティブになっていることを確認します。幸い、Flash Builder 4には、PHPサービスを利用する場合に便利な新しいウィザードがいくつか用意されています。これらのウィザードは、新しいデータとサービスビューからアクセスできます(図13を参照)。このビューが表示されていない場合、[Window(ウィンドウ)]-[Other Views...(他のビュー...)]を選択し、Flash Builderノードからデータとサービスエントリを選択します。

図13. データとサービスビュー
図13. データとサービスビュー

 次に、flex_php.mxmlファイルを開き、デザインビューを選択します。コンポーネントビューからDataGridをシーンにドラッグして、DataGridコンポーネントを追加します(図14を参照)。

図14. DataGridコンポーネントの追加
図14. DataGridコンポーネントの追加

 これで、MyService.phpクラスを利用するクライアントサイドサービスを作成するための最初のウィザードを使用する準備ができました。データとサービスビューから、データとサービスに接続リンクをクリックします。ウィザードが開いたら、PHPを選択し(図15を参照)[Next(次へ)]ボタンをクリックします。

図15. [Connect to Data/Service...(データとサービスに接続...)]ウィザードの1ページ目
図15. [Connect to Data/Service...(データとサービスに接続...)]ウィザードの1ページ目

 ウィザードの2ページ目で[Browse...(参照...)]ボタンを使用して、PHPサービス「MyService.php」を選択します(図16を参照)。[Next(次へ)]ボタンをクリックすると、警告ウィンドウがポップアップします(図17を参照)。

 [Data/Service(データとサービス)]ウィザードは、Zend FrameworkのZendAMF部分を使用して、PHPに対するリモーティングを使用可能にします。[OK]をクリックすると、ウィザードがフレームワークをインストールします。

 Zend Frameworkがインストールされると、ウィザードがPHPサービス(MyService.php)を分析し、PHPクラスのパブリックメソッドが表示されます(図18を参照)。[Finish(完了)]ボタンをクリックします。

図16. PHPサービスクラスの選択
図16. PHPサービスクラスの選択
図17. Zend Frameworkのインストール
図17. Zend Frameworkのインストール
図18. PHPサービスの分析
図18. PHPサービスの分析

 この時点で、データとサービスビューにクライアントサービス(MyServiceという名前)が表示されるはずです(図19を参照)。ウィザードは、services.myserviceパッケージに2つのクラスを生成しています。MyServiceは、アプリケーションでPHPサービスと接続するために使用するクラスです。これは_Super_MyServiceクラスを拡張しており、このクラスがほとんどの作業を行います。もし、クラスをカスタマイズする必要がある場合は、親クラスではなく必ず子クラスを変更するようにしてください。

図19. クライアントサイドのデータサービス
図19. クライアントサイドのデータサービス

 既に説明したように、PHP側では、PHPデータオブジェクト(VOAuthor)を使用して、データベースの1個のレコードを格納します。これに相当するActionScriptデータオブジェクトを作成するには、もう1つのウィザードを使用します。このためには、データとサービスビューでgetData()ノードを右クリックし[Configure Return Type...(戻り値の型を設定...)]を選択します(図20を参照)。

図20. getData()操作の戻り値の型の設定
図20. getData()操作の戻り値の型の設定

 ウィザードの1ページ目の設定はデフォルトのままにして、[Next(次へ)]ボタンをクリックします。Flash Builder 4は、getData()メソッドを呼び出してMyService PHPクラスへの要求を実行します。PHPスクリプトでエラーが発生せず、データベース資格情報が正しければ、ウィザードの2ページ目が表示されるので(図21を参照)、ここで[Finish(完了)]ボタンをクリックします。

図21. ActionScriptデータモデルの作成
図21. ActionScriptデータモデルの作成

 valueObjectsパッケージを開くと、2つの新しいクラスが見つかります。VOAuthorとそのスーパークラスの_Super_VOAuthorです。ここでも、データオブジェクトをカスタマイズする場合は、親クラスではなく子クラスにカスタムコードを追加してください。

 それでは、これらのクラスを使用してみましょう。getData()操作の結果をDataGridにバインドします。このためには、データとサービスビューからgetData()ノードをDataGridにドラッグ&ドロップします(必ずデザインビューで行います)。確認ウィンドウがポップアップします(図22を参照)。[OK]をクリックすると、ActionScriptデータオブジェクトのプロパティの名前がDataGridのヘッダーに表示されます(図23を参照)。

図22. getData()操作のDataGridへのバインド
図22. getData()操作のDataGridへのバインド
図23. getData()操作をDataGridにバインドした結果
図23. getData()操作をDataGridにバインドした結果

 ファイルを保存してソースビューに切り換えます。バインド操作によって生成されたActionScriptコマンドのブロックが見られます。dataGrid_creationCompleteHandler()関数は、DataGridがCreation Completeイベントを発生したときに呼び出されます。

protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = myService.getData();
}

 myService.getData()が呼び出されると、トークンが返されます。トークンは、CallResponderインスタンスのtokenプロパティに保存されます。DataGridは、このCallResponderインスタンスのlastResultプロパティからデータを取得します。

 それでは、アプリケーションを実行してデータを見てみましょう。変更をすべて保存したことを確認し、Flashパースペクティブにいる間に、[Run(実行)]アイコンをクリックするか、flex_project.mxmlファイルを右クリックして[Run(実行)]-[Web Application(Webアプリケーション)]を選択します。DataGridとデータがデフォルトのWebブラウザに表示されます。

図24. アプリケーションの動作検証
図24. アプリケーションの動作検証

 これで、PHPクラスに接続し、MySQLテーブルに記憶されているデータを表示するFlexアプリケーションができました。ここまでのところ、1行のコードも書かずにクライアントコードが完成しています。このアプリケーションに、編集機能があれば便利ではないでしょうか。

 次に、この作業を実行します。今度は、PHPクラスのもう1つのメソッド(saveData())を使用します。ただし、このメソッドを呼び出す前に、DataGridの隣にフォームを1つ追加します。もう一度デザインビューに入り、[Data(データ)]と[Services(サービス)ビュー]-[Data Types(データ型)]からVOAuthorエントリを選択します。このエントリを右クリックし、[Generate Form...(フォームを生成...)]オプションを選択します(図25を参照)。

図25. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの開始
図25. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの開始

 ウィザードの1ページ目では、デフォルトのオプションをそのままにして(図26を参照)、[Next(次へ)]ボタンをクリックします。2ページ目では、id_autプロパティの選択を解除します(図27を参照)。レコードのプライマリキーは変更させず、名と姓だけを変更可能にするためです。

 [Finish(完了)]ボタンをクリックすると、DataGridの上にフォームが配置されます。フォームを選択して、DataGridの右側に移動します(図28を参照)。

図26. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの1ページ目
図26. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの1ページ目
図27. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの2ページ目
図27. VOAuthorデータオブジェクトに対する[Generate Form(フォームを生成)]ウィザードの2ページ目
図28. フォームの生成
図28. フォームの生成

 ラベルと色は自由に変更できます。これが終わったら、ソースビューに切り替えて、DataGridの現在選択されている行を、フォームフィールドでデータソースとして使用されているVOAuthorインスタンスにバインドする作業を行います。ソースを見ると、fx:Declarationsセクションに、vOAuthorをidとするVOAuthorというタグが見られます。これがフォームで使用されるオブジェクトです。

 Declarationsタグの後にBindingタグを追加します。sourceプロパティに対して、DataGridの現在選択されているアイテムを、VOAuthorにキャストして設定します。宛先は、フォームで使用されるvOAuthorオブジェクトです。

<fx:Binding source="dataGrid.selectedItem as VOAuthor" destination="vOAuthor"/>

 アプリケーションを実行する前に、フォームの[Submit(送信)]ボタンのクリックイベントに対するリスナーを作成する必要があります。フォームのコードを見ると、ボタンにbutton_clickHandlerというリスナーが登録されているが、そのリスナーが定義されていないことがわかります。やりたいことは、このボタンがクリックされたら、フォームからvOAuthorインスタンスに値をコピーし、saveData()操作を呼び出して、vOAuthorオブジェクトを渡してデータベースに保存させることです。

 デザインビューに戻り、[Submit(送信)]ボタンを右クリックして、コンテキストメニューから[Generate Service Call(サービスの呼び出しを生成)]を選択します。開いたウィンドウで、saveData()操作を選択して、[OK]をクリックします(図29を参照)。

図29. [Submit(送信)]ボタンに対するサービスの呼び出しの生成
図29. [Submit(送信)]ボタンに対するサービスの呼び出しの生成

 ソースビューに戻り、[Submit(送信)]ボタンにclickイベントに対するリスナーが1つだけ登録されていることを確認して、button_clickHandler関数が定義されている場所(ActionScriptコードブロック内)に移動します。引数としてvOAuthor変数を追加し、サービス呼び出しの前に、フォームから得られたテキスト値をvOAuthorインスタンスに設定します。関数は次のようになります。

protected function button_clickHandler(event:MouseEvent):void
{
  vOAuthor.fname_aut = fname_autTextInput.text;
  vOAuthor.lname_aut = lname_autTextInput.text;
  saveDataResult.token = myService.saveData(vOAuthor);
}

 これで、最終的なアプリケーションの動作検証を行う準備が整いました。アプリケーションを実行し、選択を行い、フォームで名前を変更し、[Submit(送信)]ボタンをクリックします。データはMySQLデータベースに書き戻されるはずです。

図30. レコードの編集
図30. レコードの編集

 PHPのMyServiceクラスにdelete()メソッドを追加して、このメソッドをクライアントから使用することは簡単です。これは宿題にしておきます。

 いくつかヒントを出します。PHPコードでdelete()メソッドを作成したら(これはVOAuthorオブジェクトを引数として取ります)、Flexアプリケーションでボタンを新規作成します。次に、デザインビューでそのボタンを右クリックし、コンテキストメニューから[Generate Service Call(サービスの呼び出しを生成)]を選択します。ウィンドウが開き、ボタンが押されたときに呼び出す操作を選択できます。delete()メソッドを選択して[OK]をクリックします。新しいCallResponderインスタンスとイベントリスナーが生成されます。イベントリスナー内部で、適切な引数を渡す必要があります。このプロジェクトでは、データグリッドの現在選択されている行です。これは既にvOAuthorオブジェクトに格納されています。

 もう1つの役に立つヒントとしては、CallResponderオブジェクトのresultイベントリスナーを使用して、他のアクションを起動できます。例えば、レコードを削除する場合に、レコードが削除された後でgetData()操作を呼び出したいとします。これは、dataGrid_creationCompleteHandler()関数への呼び出しを追加することで、簡単に実現できます。これは、getData()メソッドへの要求を実行する関数です。

<s:CallResponder id="deleteDataResult" result="dataGrid_creationCompleteHandler()"/>

 dataGrid_creationCompleteHandler()関数は引数なしの呼び出しを受け入れる必要があります。このためには、引数がデフォルト値としてnullを持つように変更します。

protected function dataGrid_creationCompleteHandler(event:FlexEvent=null):void

コードのデバッグ

 コードをデバッグする場合、Flash Builder 4とZend Studioでは少なくとも3つの方法があります。

 Flash Builder 4には、コードのデバッグ用に、[Network Monitor(ネットワークモニター)]と[Test Operation(操作をテスト)]の2つの新しいビューが追加されています。これらのビューが表示されていない場合は、[Window(ウィンドウ)]-[Other Views...(他のビュー...)]を選択し、Flash Builderノードのビューを探すことで追加できます(ネットワークモニターはFlash Builder Premiumでのみ使用できます)。

 ネットワークモニタービューを使用すると、Flexクライアントとサーバーとの間でやりとりされるすべての通信を見ることができます。元データとオブジェクトの両方が見られます。この機能を使用したい場合、まずこれを有効にする必要があります。[Enable Monitor(モニターを有効にする)]アイコンをクリックします(図31を参照)。

図31. ネットワークモニターの有効化
図31. ネットワークモニターの有効化

 その後、アプリケーションを実行します(デバッグモードで実行する必要はありません)。アプリケーションの使用中にサーバーとの間でデータが交換されると、要求、所要時間、送受信データが表示されます(図32を参照)。

図32. ネットワークモニターの動作
図32. ネットワークモニターの動作

 [操作をテストビュー]は、名前からわかるように、使用可能な操作をテストするためのものです。[操作をテストビュー]を選択し、getData()操作を選択して、[Test(テスト)]ボタンをクリックします。4つのVOAuthorオブジェクトが表示されます(図33を参照)。操作に引数が必要な場合、このビューから引数の値を定義できます。

図33. [操作をテストビュー]の使用
図33. [操作をテストビュー]の使用

 バグを発見する最も強力な方法は、もちろんデバッグすることです。Flexのデバッガーは、バグをすばやく特定して解決するための強力なツールです。以下では、FlexとPHPのコードをデバッグする方法を説明します。

 まず、プロジェクトをデバッグモードで実行します(Flashパースペクティブにいることを確認し、ツールバーのデバッグボタンをクリックするか、flex_project.mxmlを右クリックして[Debug(デバッグ)]-[Web Application(Webアプリケーション)]を選択します。これにより、Flexデバッガーが開始されます。dataGrid_creationcompleteHandler()関数内部にブレークポイントを設定してデバッグモードで実行すると、Flexデバッガーの動作を確認できます(図34を参照)。

図34. Flexデバッガーの動作
図34. Flexデバッガーの動作

 次はPHPコードのデバッグ方法です。PHPデバッガーをZend Studioから使用することもできますが、現在FlexとPHPコードの両方をデバッグする場合に問題が発生します。Zend Frameworkによって動的にインクルードされるスクリプトを、PHPデバッガーが正しく認識できないようです。このため、例えばMyService.phpのgetData()メソッドに設定したブレークポイントに到達できません。この問題を解決できたら、この記事を更新してPHPデバッガーの使用法を説明します。

 この制限を回避するために、筆者は次のようなワークフローを使用しています。

  1. 最初に、作成したPHPクラスに構文エラーがないことと、使用するメソッドが期待する結果を返すことを確認します。これは、テストするサービスクラスをブラウザにロードすることで簡単に実行できます。そのクラスに初期化コードを追加して、テストしたいメソッドへの呼び出しを行えば、コードの実行もテストできます。具体的には、セットアップで次のURLをブラウザにロードします。
    • http://localhost/zendamf_remote/MyService.php(これはPHPサービスのURLです)
  2.  構文エラーがなければ、次のコードを(クラス定義の上に)追加することにより、getData()が期待した結果を返すことを確認できます。

    $service = new MyService();
    print_r($service->getData());
    
  3. もう1つ有効なワークフローとして、渡された変数をフラットファイルに記録する関数を使用する方法があります。例えば、次のような関数を使用します。
  4. function logMe($var) {
      $filename = dirname(__FILE__) . '/__log.txt';
      
      if (!$handle = fopen($filename, 'a')) {
        echo "Cannot open file ($filename)";
        return;
      }
      
      $toSave = var_export($var, true);
      fwrite($handle, "[" . date("y-m-d H:i:s") . "]");
      fwrite($handle, "\n");
      fwrite($handle, $toSave);
      fwrite($handle, "\n");
      fclose($handle);
    }
    

     そこで、saveData()メソッドが呼び出されたときにFlexが送信する引数を記録したい場合は、saveData()メソッド内部に次の行を追加して、Flexアプリケーションを実行し、画面上で行を編集します。

    logMe($author);
    

     ログファイルには次のような内容が記録されます。

    [10-02-18 14:20:01]
    stdClass::__set_state(array(
    'lname_aut' => 'Corlan',
    'fname_aut' => 'Mihai',
    'id_aut' => '15',
    ))     
    

 作業手順は以上です。思ったより簡単ではなかったでしょうか?

次のステップ

 Flash BuilderとZend Studio for Eclipseを組み合わせることで、Flex+PHPプロジェクトを作成し、このようなセットアップでFlexとPHPのファイルを編集する機能を利用できます。プロジェクトの範囲が拡がり、複雑さが増してきたら、FlexとPHPのコードを同時に簡単にデバッグできます。

 Flex、PHP、AMFについて詳しくは、Flexデベロッパーセンター – FlexとPHPについて学ぶのページを参照してください。

※告知:Adobe AIR Contest 2010今年も開催!

Adobe AIR Galleryに登録された優秀なAIRアプリケーションを決定するコンテスト、Adobe AIR Contest 2010が今年も開催されます。優秀作品には、Adobe MAX 2010(2010年10月/米国ロサンゼルス)への招待、Adobe Creative Suite製品のプレゼントが贈られます。登録締め切りは、2010年8月31日まで。【詳細はコチラ

「FlexではじめるRIA開発」特集、絶賛公開中!

この記事は参考になりましたか?

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5296 2010/08/09 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング