構築2 †
フロント・エンド・プログラムの製作に取りかかりましょう。
WebアプリケーションのUI部分を実現するには、 いくつかの選択肢があります。
- CGIを用いて、ページ遷移にしたがってプログラムの状態を遷移させる
- AJAXを使って、非同期にサーバーと通信をおこなう
- Java Applet, Flash/Flexなどを使って、非同期にサーバーと通信をおこなう
- AppletやFlashをクライアントサイドですべての機能を動作させてしまう
上記の方法は、それぞれ特徴があります。1.については、もっともシンプルな方法で、 分析のフェーズで作ったプログラムを発展させやすいのですが、 ゲームアプリケーションとしては、少々味気ない演出しかできません。 4.はサーバーと通信しないので、Webアプリケーションの中でもブラウザアプリケーション といったものです。この手法は、当館のKalah (マンカラ)で用いているものです。
ここでは、Adobe社がオープンソースとして公開しているFlex3を使って、RIAであり、 サーバー上のAIと通信しながら対戦できる方式を採用することにしましょう。
Flex3の準備 †
Flex3は、Adobe社から提供されている、オープンソースなプログラミング環境です。
開発環境には、Flex BuilderというEclipse*1に統合したものがAdobe社から提供されています。この環境は、60日間無料で使うことができますが、本システムではFlex Builderを使わずに開発を試みることにします。
Flex3は、同じくFlashアプリケーションの実行ファイルと同じswfを生成するコンパイラとデバッグ環境です。ほとんどの部分がJavaによって記述されているため、Windowsだけでなく、LinuxなどさまざまなOS上でFlex3を使うことができます。
Flex3のプログラムは、Flashのスクリプト言語である、ActionScript 3.0と、 UI記述を容易にするMXMLというXMLを用いた記述言語でプログラムを記述できます。 プログラムを作成する上での、ソースファイルの拡張子はそれぞれ、".as"と".mxml"です。 MXMLの中には、ActionScriptを記述することができます。
開発するには、Flex SDK 3 を入手しなければなりません。 Adobeのサイト から取得してください。
先述のように、IDEを使わずプログラムを作成しますので、お好みのエディタを用意してください。ActionScriptのSyntaxをハイライトしてくれるエディタや、エディタのSyntaxファイルをネット上で見つけることもできると思います。*2
デバックおよび、動作を確認するために、上記SDKの他に、Stand Aloneで動作する Flash Player も Adbobe からダウンロードしておくと便利です。
インストール方法は、複雑ではないので、こちらでは説明いたしません。 各自ドキュメントを参照して、導入してください。
Nimboard ClassをActionScriptで記述する †
プロトタイプで作成した、nim_board.rbを発展させて、 ActionScript上に実現します。UI仕様の粗い設計は、 前回おこないましたので、それにしたがってプログラムを 書いてみました。
-
Nimboard.as
- 当面、nimのUIの中核になるクラス
-
Stone.as
- 画面上に複数の石を配置するために、石を独立したクラスとして定義
Flex3プログラムは、ソースコード(as, mxmlファイル)をコンパイルして、swfを作ります。いずれのソースコードも、mxmlcコマンドでコンパイルします。ここで掲載したプログラムは、ソースコードを同じディレクトリ内にいれて、(mxmlcコマンドにpathが通っているとして)次のように指定すればOKです。Stone.asは指定する必要はありません。
mxmlc Nimboard.as
プログラムの開発過程であるなら、以下のようにすると、デバッグしやすく、複数ソースファイルを編集しているなら、編集したファイルだけを再コンパイルの対象にしてくれるためコンパイル時間も短く成ります。
mxmlc -debug=true -incremental=true Nimboard.as
プログラム中、ゲームを演出するアートワークは、作成していません。ボード上の石や、 ハイライトも、すべてプログラムによって描画しています。
文字の周囲には、表示位置を後に調整しやすくするため、表示領域領域確認用の枠を記述しています。
以前作成した、Rubyのnim_board.rbとNimboard.as+Stone.asを比較してみてください。 イベント駆動でプログラムを記述するための状態遷移を管理するためのフラグや、 イベントリスナーから呼ばれるコントローラーメソッドなどで、プログラムが 大きくなっています。
勝敗判定は、バックエンドの役割なのでおこないませんが、石の選択、プレーヤーの手番の表示など、基本的な機能は実現できました。 後は、インゲームメッセージの表示部分を実装することになります。
プログラムの動作は、下で確認することができます。 ボード上の石を選択すると、その右側にある石全部が選択されます。 もう一度同じ石を選択すれば、選択を"Submit"してサーバーに (ここでは、実際に送りませんが)情報を送ります。選択状態で、 別の石を選べば、選択がキャンセルされます。 また、手番のプレーヤー名の下に、ハイライトのための長方形を表示しています。
Flash廃止により、サービス終了...つづく (2009/5/18)