Flash CS3とRoRで構築する業務アプリケーション 第1回

Flashによる生産管理系アプリケーション - 品目マスタメンテナンスの作成

Flashは見栄えが良く動きのあるウェブサイトの構築によく使われます。本稿ではFlashを利用して、生産管理の業務アプリケーションを構築してみます。まず第1回では、生産管理システムの中核となる品目マスタをメンテナンスするアプリケーションを作成部分を解説します。

はじめに

　Flashは見栄えが良く動きのあるウェブサイトの構築によく使われます。

　本稿では、Flashを生産管理の業務アプリケーション構築に適用し、生産管理システムの中核となる「品目マスタのメンテナンスアプリケーション」を作成してみます。画面はFlash、ビジネスロジックの部分はRuby on Rails 2.0で作成し、画面とビジネスロジックの連携はWebサービスで行います。

　今回は、品目情報と品目区分の入力部を画面上に配置し、フォーカスイン／アウト時の背景の表示／非表示、および画面ロード時におけるコンボボックスへのデータロードまでを作成します。

　本稿を通じて、Flash CS3による画面作成の初歩、FlashとRuby on Rails 2.0の連携方法を説明します。

完成イメージ

対象読者

• ActionScriptやAdobe AIR、Rubyのプログラマー
• RIAのシステム構築を担当するSE
• 生産管理のシステム構築を担当するSE

必要な環境

　本稿が対象とする開発環境は、次のとおりです。

• Ruby 1.86 以降
• Ruby on Rails 2.0.0 以降
• ActionScript 2.0 以降
• Adobe Flash CS3 Professional 以降

Flashによる画面の作成

　Adobe Flash CS3 Professionalを起動し、新規作成で［Flashファイル（AS2.0）］を選択し、新しいファイルを作成します。ページ下部の［プロパティ］パネルで、ドキュメントのサイズを「1024x768」に変更します。

図1 - ドキュメントサイズの変更

　［レイヤー1］を右クリックして［フォルダの挿入］を選択し、フォルダを挿入します。同様に、［レイヤー1］を右クリックして［レイヤーを挿入］を選択し、レイヤーを挿入します。

　ここで2つのレイヤー名を「品目情報」と「全体」にしておきます（レイヤー名をダブルクリックすると編集可能な状態になります）。

図2 - フォルダとレイヤーの追加

　次に、2つのレイヤーをそれぞれドラッグし、フォルダの下へ移動します。

図3 - レイヤーの移動

　同様の手順で、下図のようなレイヤー構成にしてください。

図4 - レイヤー構成（第1段階）