|
||||||
|
|
【要約】 Flash MXによるリッチなインターフェースを用いて勤怠管理システムを構築していくために、Flash MXではユーザインターフェースをどのように制御するのか、サーバーサイドとの連携プログラミングを行うのかなどFlash MXでの開発手法を習得していただきたい。 【概要】 いよいよ、Flash MXによるリッチなインターフェースを用いて勤怠管理システムを構築していくが、今回は簡単なサンプルを通してFlash MXではユーザインターフェースをどのように制御するのか、サーバーサイドとの連携をどのように行うのかを学んでいく。 まず初めに、Flash MXのスクリプト言語であるActionScriptによる簡単なプログラミング、次に、効率の良い開発には不可欠なクラスを用いたコーディング方法、そして、リッチインターネットアプリケーションの開発に必要となるサーバーとの連携方法について、サンプルプログラムにて解説していくこととする。 なお、今回はプログラミングのオーサリング環境に、前回クライアントマシンにインストールしたMacromedia Flash MXを使用する。 |
| １． | Flash MX 概要 | ||||||||||||||||||||||||||
| 連載第1回でも触れたが、Flash MXでは、グラフィカルなユーザインターフェースの制作から、本格的な開発言語を使用したアプリケーションの開発まで行える。また、Flash
Remoting※注1を利用することで、サーバーとの連携も可能となる。 開発言語としては、オブジェクト指向を取り入れたActionScriptを使用する。オブジェクト指向プログラミングが行えることで、効率の良い開発が可能となる。ActionScriptは ECMAScript※注2というJavaScriptと同一の規格に準拠しているため、JavaScriptを理解しているユーザであれば、比較的容易に扱えるだろう。
|
|||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||
| ２． | Flash MXでのプログラミング | ||||||||||||||||||||||||||
| 実際にFlash MXによるプログラミングを行う前に、まず、Flash MXを起動してみよう。起動すると図1-0のような画面が表示される。 （図1-0：Flash MX オーサリングツール）  Flash MXではこの画面上で、ユーザインターフェースとなるグラフィックやテキスト、またリストボックスやラジオボタンなどの各種コンポーネントの作成、レイアウトを行う。 画面の主な構成要素を簡単に紹介すると以下のようになる。
なお、本連載では、リッチインターネット開発におけるプログラミング部分に主にフォーカスをあて紹介する。Flash MX オーサリングツールの詳細な操作方法や、グラフィックの作成方法等はFlash MXのマニュアルを参考にしていただきたい。 |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
| Step1. | 簡単なプログラミング | ||||||||||||||||||||||||||
| それでは、まず初めに最もシンプルな例を通してFlash MXでのプログラミングを紹介する。 付録のCD-ROMにサンプルファイルを含めているので、そちらを参照してほしい。 付録のCD-ROMに含まれている「sample1.fla」を、クライアントマシンの任意のディレクトリへコピーした後、Flash MXのメニューバーより「ファイル」-「開く」を選択し、「sample1.fla」を開くと、図1-1のような画面が表示される。 （図1-1：sample1.fla を開いた状態のFlash MX オーサリングツール）  |
|||||||||||||||||||||||||||
| 1-1. | まずは実行 | ||||||||||||||||||||||||||
| まずはどのようなアプリケーションであるか試しに実行してみよう。 メニューバーより「ファイル」-「パブリッシュ」を選択すると、 「sample1.fla」と同じフォルダに「sample1.swf」と「sample1.html」というファイルが作成されているはずだ。パブリッシュすることで、Flash MXの再生ファイル（拡張子がswfのファイル）とそれを表示するためのHTMLファイルが自動生成される。 生成されたFlash MXファイルを再生するには、通常のHTMLファイルを表示するのと同様、ブラウザで「sample1.html」を開くだけだ。 さて、「sample1.html」をブラウザに表示すると、図1-2のような画面が表示される。 個数テキストフィールドへ値を入力し、「計算」ボタンをクリックすると合計金額が計算され、合計欄に表示される。 （図1-2：ブラウザ表示したsample1.html）  なお、先程は、Flash MXを再生するためにパブリッシュを行ったが、オーサリングツール上で一時的に動作を確認したいだけであれば、メニューバーより、「制御」-「ムービープレビュー」を選択することで、Flashムービーのプレビューを行うこともできる。 |
|||||||||||||||||||||||||||
| 1-2. | ユーザインターフェースの構成 | ||||||||||||||||||||||||||
| それでは、早速中身を見ていこう。再度Flash MXの画面を表示すると（図1-1）、 ステージには、以下のアイテムが配置されている。 ・単価表示テキストフィールド ・個数入力テキストフィールド ・合計金額表示テキストフィールド ・計算ボタン ツールボックスの矢印ツールを選択した後、「個数入力テキストフィールド」をクリックすると、アイテムを選択した状態となり、プロパティインスペクタに図1-3の情報が表示される。プロパティインスペクタが表示されていない場合は、メニューバーより「ウィンドウ」-「プロパティ」を選択することで表示される。 プロパティインスペクタには、選択したオブジェクトのプロパティが表示される。ここではインスタンス名が「amount_txt」、種類が「テキスト入力」となっている。インスタンス名とは、アイテム（インスタンス）につけられた名前のことで、後程説明するActionScriptで使用する。 （図1-3）  各アイテムのプロパティは以下のようになっている。 （表1）
なお、（表1）の「オブジェクトの種類」に記載した「TextField」、「MovieClip」とは共にFlash MX標準で用意されたオブジェクトであり、表示や動きを制御する様々なプロパティ（オブジェクトの属性）とメソッド（オブジェクトに割り当てられた関数）を持っている。プロパティ、メソッドは、ActionScriptで利用可能だ。 Flash MXでは様々なオブジェクトや、プロパティ、メソッドが標準で用意されている。各オブジェクトの詳細については、Flash MXのオンラインリファレンスを参照していただきたい。 |
|||||||||||||||||||||||||||
| 1-3. | プログラミング | ||||||||||||||||||||||||||
| では、次にActionScriptによるプログラミング部分をみていく。 タイムラインの1フレーム目をクリックし、メニューより「ウィンドウ」-「アクション」を選択して、「アクション」パネルを表示する。 （図1-4 アクションパネル表示状態 タイムライン囲み）  なお、「アクション」パネルには表示モードの種類として、ノーマルモードとエキスパートモードがある。Flash MXをインストールした直後はノーマルモードになっているが、ノーマルモードは基本的にActionScriptを直接記述せずにメニュー選択しながら行う操作を定義していくモードとなっている。一方エキスパートモードは、ActionScriptを直接自由に入力していくモードだ。本連載ではActionScriptの開発手法について解説していくので、エキスパートモードを選択しておいていただきたい。 表示モードは「アクション」パネル内の表示オプションボタンで切り替えられる。 「アクション」パネルには、以下のActionScriptコードが記述されている。 （ソース：1-1）
ここでのポイントは以下のとおりだ。
|
|||||||||||||||||||||||||||
| １・２ |  |
 |