みなさん、「Progression」というFlash用フレームワークをご存じでしょうか。Progressionを使えば、Flashサイトであっても、HTMLサイトのようなページ構成や画面遷移といったサイト基本機能を簡単に実装することができます。すでに多くのクリエイターが利用しており、個人サイトだけでなく、企業サイトでもProgressionが採用されています。

Progressionには豊富な機能が用意されていますが、さらにProgression用拡張機能を使って様々な機能を追加することができます。そして、先頃、Progressionをもっと便利に、もっと楽しくしようと「extends Progression 拡張機能コンテスト」が開催されました。受賞作品をみると、グランプリ作品「CaptureSheetMaker」をはじめ、みなさんのFlash開発に役立つ作品ばかり。ぜひ、Progressionとともに利用していただきたい！　そこで本記事では、技術賞を授賞した「PRGEAIR」の開発者である青木大輔さんに、その機能と使い方を解説していただきます。

PRGEAIRの機能

PRGEAIR（Progression + Google App Engine + AIR）は、ProgressionからGoogle App Engineのサービスを利用するために必要なコードを自動生成するAIRアプリケーションです。

Google App Engineというのは、Googleが一般に公開しているWebアプリケーション用のインフラストラクチャです。従来は開発言語としてPythonしか使えませんでしたが（PRGEAIRもPythonを使用します）、新たにJavaのランタイム環境がサポートされたことは記憶に新しいところです。これにより、Java自身はもちろんのこと、JRubyやJavaScript（Rhino）、ScalaなどJVM上で動作するコンパイラやインタープリタ言語での開発も可能となり、初期投資が極めて少なく、スケーラビリティの高いWebアプリケーションを公開できるプラットフォームとして、現在注目を集めています。詳しくは、Google App Engineの公式サイトをご参照ください。

通常、FlashコンテンツとGoogle App Engineを連携させる場合、サーバサイドのpythonスクリプトやActionScriptアクセスライブラリを用意する必要があります。PRGEAIRは、このようなコードを自動で生成してくれるのです。Progression開発者は、PRGEAIR上で設定するだけです。サーバサイドのコードを一切記述することなく、Google App Engineの各サービスを利用したサイトを公開することができます。

PRGEAIRの仕組み

サンプルとして、以下のようなアプリケーションを作ってみました。

PRGEAIR-Sample：このサンプルでは、アプリ上からメールを送信したり（サンプルではGoogle Accountでのログインが必要です）、ローカルにある写真をアップロードすることができます。また、Google Accountを利用したユーザー認証機能も実装しています。

PRGEAIRを使用すれば、Google App Engineをクラウド上のストレージサービスとして利用することもできるので、アプリケーションロジックは完全にクライアントサイド（Flash）で完結できます。サーバ側は単なるデータストレージとして使用したい場合に威力を発揮します。しかも、通信にはAMF（PyAMF）通信を使用するので、HTTPのPOST／GETメソッドを使用する場合よりも高速な通信が期待できます。

PRGEAIRのインストール方法

以下は、Mac OSXでターミナルを使用した場合の例です。Windowsの場合は、TortoiseSVNを利用するといいでしょう。

• STEP1　PRGEAIRをprogression.jpのSubversionサーバからチェックアウトします。
  

  $ svn co http://trac.progression.jp/svn/experiments/daoki2/PRGEAIR

• STEP2　PRGEAIRはzipで圧縮しているので、解凍します。
  

  $ unzip PRGEAIR.zip

• STEP3　PRGEAIR.airをダブルクリックしてインストール。

• STEP4　インストール後は通常のアプリケーションと同様にダブルクリックで起動します。

  

PRGEAIRの使い方

STEP1　Progression関連の設定

PRGEAIRを起動し、まず、Google App Engine用の各種ファイルを付加するProgressionのプロジェクトのフォルダを指定します。右側のフォルダ選択アイコンをクリックして、Progressionプロジェクトを選択してください。この時点でFlashを起動する必要はありません。

STEP2　GAEアプリ一般の設定

次にGoogle App Engineアプリケーションの一般設定を行います。 アプリケーション名にはGoogle App Engine上にデプロイする場合の アプリケーション名を指定します。 Google Accountによる認証を行いたい場合、また、Progressionで作成したサイトからメールの送信を行いたい場合には、必要に応じてチェックボックスを選択しておきます。

STEP3　GAEデータストアの設定

続いて、Google App Engineのデータストアの設定を行います。モデルを追加し、それぞれのモデルにデータ要素とデータ型を追加してください。モデルとは、リレーショナルデータベースで言うところの「テーブル」に相当し、データ要素は「カラム」に相当します。

作成したモデルの定義は保存ボタンで保存を行なうことができ、別のプロジェクトでも使い回したい場合は、開くボタンで該当のファイルを選択すると追加できます。ただし、使い回せるのはモデルの定義だけで、別のGoogle App Engineアプリケーション間でデータそのものは共有できるわけではありません。　

STEP4　Google App Engineファイルを生成

最後に「Google App Engineファイルを生成」をクリックします。PRGEAIRは、プロジェクトルート下（以下の例ではyourproject）の下記フォルダに必要なファイルを生成します。

yourproject/deploy　GAE用設定ファイルとpythonスクリプト
yourproject/src/libs 　GAE用ActionScriptアクセスライブラリ

ActionScriptアクセスライブラリの使い方

PRGEAIRで自動生成されるActionScriptアクセスライブラリの使用方法を解説します。

アプリケーションサーバとの接続

ActionScriptアクセスライブラリの使用には、はじめにアプリケーションサーバとの接続を確立します。下記コード中の"<google-app-engine-application-name>"の部分は、前項の「PRGEAIRの使い方：STEP2」で設定したアプリケーション名を指定します。

import flash.net.NetConnection;

var netConnection:NetConnection;

function connectToApplicationServer():void {
    netConnection = new NetConnection();
    netConnection.connect("http://<google-app-engine-application-name>.appspot.com/services");
}

以降、ここで確立したnetConnectionを用いて、各ActionScriptアクセスライブラリを使用します。

Google Accountアクセスライブラリ

Google Accountサービスを利用すれば、ユーザーにGoogle Accountを使用したログイン／ログアウトを促したり、ログイン中かどうかの判定を行なうことができます。

import flash.net.*;

var account:GAEAccount;
var accountInfoRes:Responder = new Responder(getAccountInfoComplete, onFail);

// Account情報の取得関数
function check_account():void {
    account = new GAEAccount(netConnection);

    // returnURLはログイン／ログアウト処理実行後に遷移するURL
    account.getInfo(accountInfoResponder, returnURL);
}

// Account情報の取得完了ハンドラ
function getAccountInfoComplete(account:Ubject):void {
    if (account["login"]) {
        // Accountはログイン中
        email = account.email; // アカウントのメールアドレス
        nickname = account.nickname; // アカウント名
        logoutURL = account.url; // ログアウト用のURL
    } else {
        // Accountはログインしていない
        loginURL = account.url; // ログイン用のURL
    }
}

// エラー発生時のハンドラ
function onFail(results:*):void {
    // エラー処理
}

また、ログイン／ログアウトを処理させるには、上記で取得したURLに対してナビゲーションを行ないます。

// ログインページに遷移
function gotoLoginPage():void {
    navigateToURL(new URLRequest(loginURL));
}

// ログアウトページに遷移
function gotoLogoutPage():void {
    navigateToURL(new URLRequest(logoutURL));
}

Google Mailアクセスライブラリ

Google App Engineを経由してメールを送ることができます。その際、一つ注意が必要です。ここで送信するメールは、ユーザー自身のGoogle Mailのアカウントとは全く無関係だということです。つまり、送信元や返信先のアドレスを自由に設定することができます。また、送信できるメール数には制限があります（別途有償プランで送信数を増やすことは可能）。

冒頭で紹介したサンプルアプリケーションでは、セキュリティを考慮して、Google Accountでのログインを行なわないとメールを送れないように設計してますが、これはアプリケーション側での制約であり、APIレベルではこのような制限はありません。なお、現時点のPRGEAIRでは、メールに書類を添付する機能には対応していません。

var mailSendResponder:Responder = new Responder(mailSendComplete, onFail);

// メールの送信関数
function sendMail():void {
    var msg:Object = {from: 送信元, to: 宛先, cc: cc先, bcc: bcc先, reply_to: 返信先,
                      subject: 表題, body: テキスト本文, html: HTML形式本文};
    var mail:GAEMail = new GAEMail(netConnection);
    mail.send(mailSendResponder, msg);
}

// メール送信完了ハンドラ
function mailSendComplete(result:Object):void {
    if (result.status) {
        // メール送信成功
    } else {
        // メール送信失敗
        trace(result.message);
    }
}

データストアアクセスライブラリ

データストアへのアクセスライブラリは、PRGEAIRでの設定内容に依存します。例えば、「Sample」というモデル名でデータストアの設定を行なった場合、PRGEAIRはSampleというクラスを定義した、データストアへのアクセス用のクラスファイル（Sample.as）を生成します。Sampleクラスでは、それぞれ以下のメンバー関数が提供されます。結果は、それぞれResponderオブジェクトで指定した関数内で受け取ります。

var sample:Sample = new Sample(netConnection);

// モデルの定義を得ます
sample.getTableInfo(responder:Responder);

// 全データを得ます
sample.selectAll(responder:Responder, ...);

// フィルタで絞り込んだデータを得ます
// columnName : フィルターで絞り込むデータ要素
// columnValue: フィルターの値
sample.selectByFilter(responder:Responder, columnName:String, columnValue:*, ...);

// id指定でデータを得ます
// id: ID値
sample.selectById(responder:Responder, id:int);

// データの挿入
// data: 挿入するデータ配列
sample.insert(responder:Responder, data:Array);

// 全てのデータを削除
sample.deleteAll(responder:Responder);

// id指定でデータを削除
// id: ID値
sample.deleteById(responder:Responder, id:int);

// id指定でデータの更新
// id: ID値
// data: 更新データ
sample.updateById(responder:Responder, id:int, data:Object);

ASDocに関して

PRGEAIRで自動生成されるActionScriptアクセスライブラリはASDoc形式のコメントに対応してます。クラスの詳細などに関しては、以下のコマンドでASDocを生成して見てみてください。

$ asdoc -doc-sources <path-to-yourproject>/src/libs

ただし、上記ディレクトリ上にある、Progressionが標準で組み込むライブラリがエラーを吐くので、ASDocを生成する際は、一時的にPRGEAIRで生成されるファイルだけを置くなどの工夫が必要です。

サンプルサイトのソースに関して

ProgressionのサイトからダウンロードできるPRGEAIRのアーカイブには、冒頭で紹介したサンプルサイトのソースコードが含まれています。Progressionでの具体的なアクセスライブラリの使い方に関しては、ソースコードを参考にしてください。

PRGEAIRを使う上での制約事項

現在のPRGEAIRは、yourproject/deployフォルダ下に以下の2つのSWFファイルしか存在しないことを前提にしてあります。

• index.swf
• preloader.swf

これ以外のSWFファイルが存在する場合は、yourproject/deployフォルダ下のapp.yamlファイルの編集が必要となります。例えば、sample.swfを追加する場合は、以下を追加します。

- url: /sample.swf
  static_files: sample.swf
  upload: sample.swf

次のバージョンでは、個別に記述しないで済むように自動生成するapp.yamlの内容を改善する予定です。app.yamlの編集が面倒な場合は、yourproject/deploy/contents/swfフォルダに上記以外のSWFファイルを配置し、アプリケーションが動作するように設計してください。

今後の予定

現状は、サーバサイドをあまり意識しないで簡単にGoogle App Engineに公開できることにフォーカスしていますが、今後は、Pythonスクリプトでサーバーサイドのロジックを記述できる方を対象にサーバサイドのサービスを拡張できるようにしていく予定です。

著者について