１からはじめる Flex コーダーへの道 - 第３回　第３回　Flex Builder を使ってみよう

１．Flex Builder トライアル版のダウンロード、インストール

Flex Builder とは

Flex Builder は Flex アプリケーションを開発するための統合開発ツール(IDE)です。 Flexアプリケーションはテキストエディターなどでも開発できますが、Flex Builder を用いることでより効率的に作業を行うことができます。 Flex Builder の代表的な機能としては、実行時の画面レイアウトを確認しながらコーディングができる、デザインビュー機能、標準タグをアイコンのクリックで行うことができる、インサートバー機能、コードを途中まで入力するとそこから示唆されるコードを自動的にリスト表示するコードヒント機能、などがあります。

Flex Builder トライアル版はインターネットからダウンロードできます。 Flex Builder は製品版も含め日本語版はありません。このため、メニューやヘルプなどはすべて英語の表示です。しかし作成するアプリケーションについては日本語も対応しますので、一度操作を覚えれば英語版を使っているということでの不便さを感じることはないと思います。

今回はトライアル版を利用することとします。製品版は Flex を購入したときに同梱で入ってきますので Flex 購入時の情報をご確認ください。トライアル版の有効期限は 60 日です。この期間を過ぎるとトライアル版は使用できなくなります。

Flex Builder トライアル版のダウンロード

Flex Builder トライアル版は Flex トライアル版をダウンロードしたのと同じ場所からダウンロードできます。すでにダウンロード済の方はここは読み飛ばしてください。なお、現時点(2005年1月7日)でダウンロードできる最新の Flex Builder のバージョンは 1.5 になっています。もしバージョン 1.0 のFlex Builder をダウンロードされているようでしたら、もう一度ダウンロードをしたほうがいいかもしれません（見分ける方法の一つとしてはファイルサイズがあります。バージョン 1.0 のとき Flex Builder のインストールファイルは 90MByte 程度でしたが、 1.5 になり 100.32MByte となりました）。

次がトライアル版をダウンロードするためのURLとなります。

http://www.macromedia.com/jp/software/flex/trial/

「Flex 1.5 英語版、Flex Builder トライアル版をダウンロード」をクリックしてください。

トライアルのダウンロードのためには Macromedia メンバーへの登録が必要です、すでにメンバーアカウントは Flex をダウンロードした際に登録済と思いますので、そちらをご利用ください。ダウンロード画面に移行します。ここで Flex Builder をダウンロードします。

Flex Builder のインストール

Flex Builder のインストールについては特別なものは何もありません。ダウンロードしたファイルを実行し、インストールプログラムを案内に従い進めていきます。シリアル番号は未入力とすることでトライアル版になります。

Flex Builderをインストールしたマシンには Flex もインストールすることをお勧めします。トライアル版でかまいません。 Flex Builder が導入されているマシンで Flex も動作させることで、Flex Builder で作成したアプリケーションをすぐさま Flex を使って動作確認させることができます。なお、Flex、Flex Builder 両方を起動した状態で快適に作業をするためには最低でも 512 MByte 程度の物理メモリが必要だと思います。

Flex Builder の設定 - サイト設定

サイト設定とは

サイト設定とは、Flex Builder を使って編集をするための作業領域の設定のことです。Flex Builder では複数の作業領域、つまりサイトを設定することができます。

Flex Builder の機能を最大限活用するためには正しくサイト設定をすることが必要です。サイト設定が正しく行われていることで、開発したアプリケーションを Flex Builder 内部で実行したり、デバッグしたりすることができるようになります。

サイト設定を行う

Flex Builder を導入したマシンに Flex も導入されていることを前提に説明します。もし Flex が導入されていないようでしたら、まず Flex を導入することを推奨します。ここで利用する Flex はローカルのテスト用サーバーとしての使用を目的としていますので、Flex はトライアル版で問題ありません。

まず、Flex Builder を起動します。（スタート -> すべてのプログラム -> Macromdia -> Macromdia Flex Builder 1.5 )、起動したらウィンドウメニューより Site -> New Flex Site... を選択します。「Flex Server Site Setup」ウィンドウが開かれます。（ Site -> Manage Sites...、開かれた「Manage Site」ウィンドウの [New] ボタン、-> Flex Site でも同じウィンドウを開くことができます）

New Flex Site.. の選択

「Flex Server Site Setup」ウィンドウ

「Flex Server Site Setup」ウィンドウが開かれたら、それぞれの入力域に情報を入力します。それぞれの入力域に入力する内容は次の通りです。

Site name:: 現在の設定を識別するための名前、任意で設定します。（例: Flex site)
Local root folder:: Flex アプリケーションディレクトリを指定します。JRun 統合インストールの場合、{flexインストールディレクトリ}\jrun\servers\Macromedia\Flex\jrun4\default\flex になります。
Flex server root folder:: Local root folder と同じ場所を指定します。
URL prefix:: Local root folder で設定した Flex アプリケーションにアクセスすすための、URLの固定値の部分を設定します。JRun 統合インストールで、ここに示した設定を行った場合、ここは http://localhost:8700/flex/ と入力します。

入力を確認し、[Ok] ボタンを押します。キャッシュを再構築するかと聞いてきますのでこれは [Yes]　で答えます。

ウィンドウ右側の Files パネルを確認してください。サイトとして設定したディレクトリの内容が表示されています。

サイト設定後の Files パネル

基本操作と設定確認

設定が正しく行われているかを確認する意味も含め、一つ簡単なアプリケーションを作ってみます。

ファイルの作成

メニューより File -> New を選びます。「New Document」ウィンドウが開かれます。どのタイプのファイルを作成するかを入力しますので、Category: Flex development、Flex development: MXML Application を選択します。

[Create] ボタンを押します。新規ファイルが作成されます。今の時点ではファイル名が決まっていませんので、まずはファイル名を設定し、ファイルシステムに保存しておきたいと思います。メニューから File -> Save As ... を選択します。「Save As」ウィンドウが開かれます。ファイル名を適当に決めて [Save] ボタンを押します。こちらの例では FirstFlex2.mxml としました。（拡張子 .mxml は省略したとき自動的にファイル名に付けられます）

現在の画面を確認します。

一番大きい表示領域のことを「ドキュメントエリア」といいます。ここで編集作業を行います。

ドキュメントエリアの上にある [Code]、[Split]、[Design] のボタンでドキュメントエリアの表示方法を切り替えます。[Code] ボタンを押したとき、ドキュメントエリアには開発コードだけが表示されます（コードビュー）。[Design]を押したとき、アプリケーションを実行したときのデザインが表示されます（デザインビュー）。[Split] を押したとき、上半分にコードビュー、下半分にデザインビューが表示されます。今回は [Split] で作業を行います。

[Code]、[Split]、[Design] のボタンの上にはタブが表示されています。今回は１つしかファイルを開いていないので、表示されているタブは一つだけですが、複数のファイルを開いているとき、こちらのタブでどのファイルを編集するか切り替えます。また、タグの中に表示されているファイル名の後に * マークが表示されることがあります、このマークは、ファイルが変更されてから、まだ保存されていないことを意味しています。編集内容のファイルへの保存は [Ctrl] + s を押します。

編集

Label タグを使って「Hello Flex」と表示したいと思います。また文字のフォントサイズは 20　とし、色を青色に、背景の色は白色にします。　

Label タグの追加にはインサートバーの機能を使ってみたいと思います。インサートバーはFlex標準コンポーネントを、マウスクリックだけでコードに追加する機能です。
インサートバーから controls -> [A] ボタンを押します。

コードビューに <mx:Label> タグが追加されていることを確認してください。またデザインビューには Label という文字が表示されています。（もしデザインビューの表示が変わらないようであれば一度 [Ctrl] + s で変更を保存し、デザインビューの中の適当な領域をマウスでクリックしてみてください）
コードビューのコードヒント機能を使ってフォントサイズを変更したいと思います。コードビューで <mx:Label text="Label" の後ろにマウスカーソルを移動し、マウスをクリックします。スペースキーを押します。ポップアップでリストが開かれると思います。これがコードヒントです、現在の場所に入力可能な候補をリスト出力しています。さらにキー入力をしていくと候補がそれにあわせて絞り込まれるのがわかります。フォントサイズの変更は fontSize スタイルプロパティーで行います。 fontSize="20" と入力してください。これで表示されるラベルのフォントサイズは 20 になります。
次にデザインビューのタグ編集機能を使って表示文字を変更したいと思います。デザインビューの中で表示されている Label という文字をダブルクリックします。タグ編集のポップアップが開かれます。ポップアップの中で text="Hello Flex" と入力します。
タブインスペクターパネルの機能を使ってフォントの色を変更したいと思います。まずタブインスペクターパネルを開きたいと思います。メニュー Window -> Tab Inspector を選択します。
画面の右を確認してください、"Tab Inspector" というパネルが追加されていると思います。これはデザインビューで選択されているコンポーネントに関する設定情報を表示しています。このパネルの中で設定値を変更することも可能です。デザインビューでは追加した Label タグが選択されていることを確認し、Tab Inspector パネルで color という項目を探してください。設定をクリックすると色選択パネルが開かれますので、青色を選択します。
Tab Inspector を使ってアプリケーションの背景色を白色に変更したいと思います。デザインパネルにマウスカーソルを移動し、Labelタグが表示されているところ以外の領域をクリックします。 Tab Inspector パネルの表示が Application タグに対する表示に切り替わります。項目 backgroundColor を見つけ設定をクリックし、色選択パネルで白色を選択します。
ここまで終わると画面は次のようになっています。[Ctrl] + s を押して変更を保存します。

テスト実行　　　　　　　

サイト設定が正しくできていれば作成したアプリケーションを Flex Builder 内で実行することができます。

テスト実行はドキュメントエリアの上野 [Run] ボタンを押して行います。 Flex Builder 内で Webブラウザーが開始され、アプリケーションが実行されます。

（エラー画面が表示される？　
Flex プレゼンテーションは起動されていますか？　Flex Builder はブラウザーを起動してサイト設定に従い、編集中のアプリケーションを呼び出すためのURLを設定し、サーバーにアクセスに行きます。サイト設定が正しくない、またはサイトで設定したFlex プレゼンテーションサーバーが起動していないとき、テスト実行は正しくはたらきません。）

７．まとめ

ここでは Flex Builder のきわめて基本的な部分の説明しかできませんでしたが、テキストエディターで編集するときと比べてはるかに作業効率が上がることはご確認いただけたのではないかと思います。

Flex Builder の基本操作、デバッグ機能などの説明を次のURLよりビデオで確認することができます。英語ですが操作画面が順を追って説明されますので、画面操作だけ確認するだけでも十分理解できるのではないかと思います。

http://www.macromedia.com/software/flex/flexbuilder/video/

また Flex Builder は　Macromedia ホームページ作成ツール Dreamweaver をベースに作られています。ですから基本的な操作の部分は、Dreamweaver と同じになっています。また Flex Builder の製品マニュアルは次よりダウンロードできます。

http://www.macromedia.com/support/documentation/jp/flex/index.html#buildermanuals

８．さらに Flex の知識をつけるために

次のURLにあるチュートリアルをお勧めします。 Flex ベース知識を身につけることができます。

http://www.macromedia.com/jp/devnet/flex/articles/first_flexapp.html

ご意見・ご感想

「１からはじめる Flex コーダーへの道」一覧へ

トップページ

作成日：2005年1月10日
更新日：2005年3月7日

１からはじめる Flex コーダーへの道「第３回　Flex Builder を使ってみよう」
Flex Builder のセットアップと基本機能
連載「１から始める Flex コーダーへの道」の第３回目です。 Flex Builder をセットアップし、基本的な機能を確認します。
目次 Flex Builder トライアル版のダウンロード、インストール Flex Builder の設定 - サイト設定基本操作と設定確認まとめ１．Flex Builder トライアル版のダウンロード、インストール Flex Builder とは Flex Builder は Flex アプリケーションを開発するための統合開発ツール(IDE)です。 Flexアプリケーションはテキストエディターなどでも開発できますが、Flex Builder を用いることでより効率的に作業を行うことができます。 Flex Builder の代表的な機能としては、実行時の画面レイアウトを確認しながらコーディングができる、デザインビュー機能、標準タグをアイコンのクリックで行うことができる、インサートバー機能、コードを途中まで入力するとそこから示唆されるコードを自動的にリスト表示するコードヒント機能、などがあります。 Flex Builder トライアル版はインターネットからダウンロードできます。 Flex Builder は製品版も含め日本語版はありません。このため、メニューやヘルプなどはすべて英語の表示です。しかし作成するアプリケーションについては日本語も対応しますので、一度操作を覚えれば英語版を使っているということでの不便さを感じることはないと思います。今回はトライアル版を利用することとします。製品版は Flex を購入したときに同梱で入ってきますので Flex 購入時の情報をご確認ください。トライアル版の有効期限は 60 日です。この期間を過ぎるとトライアル版は使用できなくなります。 Flex Builder トライアル版のダウンロード Flex Builder トライアル版は Flex トライアル版をダウンロードしたのと同じ場所からダウンロードできます。すでにダウンロード済の方はここは読み飛ばしてください。なお、現時点(2005年1月7日)でダウンロードできる最新の Flex Builder のバージョンは 1.5 になっています。もしバージョン 1.0 のFlex Builder をダウンロードされているようでしたら、もう一度ダウンロードをしたほうがいいかもしれません（見分ける方法の一つとしてはファイルサイズがあります。バージョン 1.0 のとき Flex Builder のインストールファイルは 90MByte 程度でしたが、 1.5 になり 100.32MByte となりました）。次がトライアル版をダウンロードするためのURLとなります。 http://www.macromedia.com/jp/software/flex/trial/ 「Flex 1.5 英語版、Flex Builder トライアル版をダウンロード」をクリックしてください。トライアルのダウンロードのためには Macromedia メンバーへの登録が必要です、すでにメンバーアカウントは Flex をダウンロードした際に登録済と思いますので、そちらをご利用ください。ダウンロード画面に移行します。ここで Flex Builder をダウンロードします。 Flex Builder のインストール Flex Builder のインストールについては特別なものは何もありません。ダウンロードしたファイルを実行し、インストールプログラムを案内に従い進めていきます。シリアル番号は未入力とすることでトライアル版になります。 Flex Builderをインストールしたマシンには Flex もインストールすることをお勧めします。トライアル版でかまいません。 Flex Builder が導入されているマシンで Flex も動作させることで、Flex Builder で作成したアプリケーションをすぐさま Flex を使って動作確認させることができます。なお、Flex、Flex Builder 両方を起動した状態で快適に作業をするためには最低でも 512 MByte 程度の物理メモリが必要だと思います。 Flex Builder の設定 - サイト設定サイト設定とはサイト設定とは、Flex Builder を使って編集をするための作業領域の設定のことです。Flex Builder では複数の作業領域、つまりサイトを設定することができます。 Flex Builder の機能を最大限活用するためには正しくサイト設定をすることが必要です。サイト設定が正しく行われていることで、開発したアプリケーションを Flex Builder 内部で実行したり、デバッグしたりすることができるようになります。サイト設定を行う Flex Builder を導入したマシンに Flex も導入されていることを前提に説明します。もし Flex が導入されていないようでしたら、まず Flex を導入することを推奨します。ここで利用する Flex はローカルのテスト用サーバーとしての使用を目的としていますので、Flex はトライアル版で問題ありません。まず、Flex Builder を起動します。（スタート -> すべてのプログラム -> Macromdia -> Macromdia Flex Builder 1.5 )、起動したらウィンドウメニューより Site -> New Flex Site... を選択します。「Flex Server Site Setup」ウィンドウが開かれます。（ Site -> Manage Sites...、開かれた「Manage Site」ウィンドウの [New] ボタン、-> Flex Site でも同じウィンドウを開くことができます） New Flex Site.. の選択「Flex Server Site Setup」ウィンドウ「Flex Server Site Setup」ウィンドウが開かれたら、それぞれの入力域に情報を入力します。それぞれの入力域に入力する内容は次の通りです。 Site name: 現在の設定を識別するための名前、任意で設定します。（例: Flex site) Local root folder: Flex アプリケーションディレクトリを指定します。JRun 統合インストールの場合、{flexインストールディレクトリ}\jrun\servers\Macromedia\Flex\jrun4\default\flex になります。 Flex server root folder: Local root folder と同じ場所を指定します。 URL prefix: Local root folder で設定した Flex アプリケーションにアクセスすすための、URLの固定値の部分を設定します。JRun 統合インストールで、ここに示した設定を行った場合、ここは http://localhost:8700/flex/ と入力します。入力を確認し、[Ok] ボタンを押します。キャッシュを再構築するかと聞いてきますのでこれは [Yes]　で答えます。ウィンドウ右側の Files パネルを確認してください。サイトとして設定したディレクトリの内容が表示されています。サイト設定後の Files パネル基本操作と設定確認設定が正しく行われているかを確認する意味も含め、一つ簡単なアプリケーションを作ってみます。ファイルの作成メニューより File -> New を選びます。「New Document」ウィンドウが開かれます。どのタイプのファイルを作成するかを入力しますので、Category: Flex development、Flex development: MXML Application を選択します。 [Create] ボタンを押します。新規ファイルが作成されます。今の時点ではファイル名が決まっていませんので、まずはファイル名を設定し、ファイルシステムに保存しておきたいと思います。メニューから File -> Save As ... を選択します。「Save As」ウィンドウが開かれます。ファイル名を適当に決めて [Save] ボタンを押します。こちらの例では FirstFlex2.mxml としました。（拡張子 .mxml は省略したとき自動的にファイル名に付けられます）現在の画面を確認します。一番大きい表示領域のことを「ドキュメントエリア」といいます。ここで編集作業を行います。ドキュメントエリアの上にある [Code]、[Split]、[Design] のボタンでドキュメントエリアの表示方法を切り替えます。[Code] ボタンを押したとき、ドキュメントエリアには開発コードだけが表示されます（コードビュー）。[Design]を押したとき、アプリケーションを実行したときのデザインが表示されます（デザインビュー）。[Split] を押したとき、上半分にコードビュー、下半分にデザインビューが表示されます。今回は [Split] で作業を行います。 [Code]、[Split]、[Design] のボタンの上にはタブが表示されています。今回は１つしかファイルを開いていないので、表示されているタブは一つだけですが、複数のファイルを開いているとき、こちらのタブでどのファイルを編集するか切り替えます。また、タグの中に表示されているファイル名の後に * マークが表示されることがあります、このマークは、ファイルが変更されてから、まだ保存されていないことを意味しています。編集内容のファイルへの保存は [Ctrl] + s を押します。編集 Label タグを使って「Hello Flex」と表示したいと思います。また文字のフォントサイズは 20　とし、色を青色に、背景の色は白色にします。　 Label タグの追加にはインサートバーの機能を使ってみたいと思います。インサートバーはFlex標準コンポーネントを、マウスクリックだけでコードに追加する機能です。インサートバーから controls -> [A] ボタンを押します。コードビューに <mx:Label> タグが追加されていることを確認してください。またデザインビューには Label という文字が表示されています。（もしデザインビューの表示が変わらないようであれば一度 [Ctrl] + s で変更を保存し、デザインビューの中の適当な領域をマウスでクリックしてみてください）コードビューのコードヒント機能を使ってフォントサイズを変更したいと思います。コードビューで <mx:Label text="Label" の後ろにマウスカーソルを移動し、マウスをクリックします。スペースキーを押します。ポップアップでリストが開かれると思います。これがコードヒントです、現在の場所に入力可能な候補をリスト出力しています。さらにキー入力をしていくと候補がそれにあわせて絞り込まれるのがわかります。フォントサイズの変更は fontSize スタイルプロパティーで行います。 fontSize="20" と入力してください。これで表示されるラベルのフォントサイズは 20 になります。次にデザインビューのタグ編集機能を使って表示文字を変更したいと思います。デザインビューの中で表示されている Label という文字をダブルクリックします。タグ編集のポップアップが開かれます。ポップアップの中で text="Hello Flex" と入力します。タブインスペクターパネルの機能を使ってフォントの色を変更したいと思います。まずタブインスペクターパネルを開きたいと思います。メニュー Window -> Tab Inspector を選択します。画面の右を確認してください、"Tab Inspector" というパネルが追加されていると思います。これはデザインビューで選択されているコンポーネントに関する設定情報を表示しています。このパネルの中で設定値を変更することも可能です。デザインビューでは追加した Label タグが選択されていることを確認し、Tab Inspector パネルで color という項目を探してください。設定をクリックすると色選択パネルが開かれますので、青色を選択します。 Tab Inspector を使ってアプリケーションの背景色を白色に変更したいと思います。デザインパネルにマウスカーソルを移動し、Labelタグが表示されているところ以外の領域をクリックします。 Tab Inspector パネルの表示が Application タグに対する表示に切り替わります。項目 backgroundColor を見つけ設定をクリックし、色選択パネルで白色を選択します。ここまで終わると画面は次のようになっています。[Ctrl] + s を押して変更を保存します。テスト実行　　　　　　　サイト設定が正しくできていれば作成したアプリケーションを Flex Builder 内で実行することができます。テスト実行はドキュメントエリアの上野 [Run] ボタンを押して行います。 Flex Builder 内で Webブラウザーが開始され、アプリケーションが実行されます。（エラー画面が表示される？　 Flex プレゼンテーションは起動されていますか？　Flex Builder はブラウザーを起動してサイト設定に従い、編集中のアプリケーションを呼び出すためのURLを設定し、サーバーにアクセスに行きます。サイト設定が正しくない、またはサイトで設定したFlex プレゼンテーションサーバーが起動していないとき、テスト実行は正しくはたらきません。）７．まとめここでは Flex Builder のきわめて基本的な部分の説明しかできませんでしたが、テキストエディターで編集するときと比べてはるかに作業効率が上がることはご確認いただけたのではないかと思います。 Flex Builder の基本操作、デバッグ機能などの説明を次のURLよりビデオで確認することができます。英語ですが操作画面が順を追って説明されますので、画面操作だけ確認するだけでも十分理解できるのではないかと思います。 http://www.macromedia.com/software/flex/flexbuilder/video/ また Flex Builder は　Macromedia ホームページ作成ツール Dreamweaver をベースに作られています。ですから基本的な操作の部分は、Dreamweaver と同じになっています。また Flex Builder の製品マニュアルは次よりダウンロードできます。 http://www.macromedia.com/support/documentation/jp/flex/index.html#buildermanuals ８．さらに Flex の知識をつけるために次のURLにあるチュートリアルをお勧めします。 Flex ベース知識を身につけることができます。 http://www.macromedia.com/jp/devnet/flex/articles/first_flexapp.html ご意見・ご感想「１からはじめる Flex コーダーへの道」一覧へトップページ作成日：2005年1月10日更新日：2005年3月7日

１からはじめる Flex コーダーへの道 「第３回 Flex Builder を使ってみよう」

Flex Builder のセットアップと基本機能

目次

１．Flex Builder トライアル版のダウンロード、インストール

Flex Builder の設定 - サイト設定

基本操作と設定確認

７．まとめ

８．さらに Flex の知識をつけるために

１からはじめる Flex コーダーへの道
「第３回　Flex Builder を使ってみよう」