１からはじめる Flex コーダーへの道 - 第２回　Flex をインストールしよう

１．トライアルのダウンロード

Flex トライアル版はインターネットからダウンロードできます。トライアル版は英語版となっていますが、基本機能は日本語版と変わりありません。トライアル版で開発したアプリケーションはそのまま製品版の Flex でも動作させることができますので Flex をとりあえず試してみたいということであれば、まずトライアル版をダウンロードして下さい。トライアル版は 60日の使用期限が過ぎると、デベロッパー版という外部からのアクセスに制限がかかる状態となりますが、引き続き利用することができます。ですからアプリケーションデベロッパーのマシンにはトライアル版をインストールし、各自のマシンでアプリケーションのテスト実行ができるようにしておくという利用の仕方もあります。要はFlexアプリケーションを運用環境で稼動させるためには製品版が必要になりますが、それ以外の目的ではトライアル版でほとんどの機能をまかなうことができます。

Flex トライアル版は次からダウンロードします。

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

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

トライアルのダウンロードのためには Macromedia メンバーへの登録が必要です、すでにメンバーアカウントをお持ちの方は、そちらをご利用ください。それ以外の方は、まずメンバー登録を行います。　メンバーログインをするとトライアル版の利用目的などいくつかの質問をたずねられますから、これに答えます。するとダウンロード画面に移行します。

ここでは Windows 版の Flex について説明します。これ以外にも Linux、Solaris、AIX 版があります。必要に応じてこれらもトライしてください。今回は Windows 版 Macromedia Flex をサイトよりダウンロードします。また次の回では Flex Builder について説明する予定ですので、ここであらかじめ Flex Builder Windows 版もダウンロードしておくと良いでしょう。

２．Flex のインストール

トライアル版 Flex のインストールの方法には大きく分けて、「JRun 統合インストール」と「J2EEインストール」の２通りの方法があります。製品版としての使用では「J2EE インストール」しかサポートしていないため、Flexの完全なインストールを理解するためには「J2EEインストール」を理解する必要があります。しかし「J2EEインストール」を行うためには J2EE サーバの知識も必要であり、取り掛かりとしては少し面倒です。ここでは導入が簡単で面倒な作業の少ない「JRun統合インストール」でのインストール方法について説明します。

（「JRun 統合インストール」とする場合、Flex のベースとなる J2EE サーバーが JRun 4.0 に固定されます。もしターゲット J2EE サーバが決まっており、ここで Flex を稼動させたいということであれば、「J2EE インストール」を選択します）

まずはダウンロードしたファイル、Flex-15-win.exe を実行してください。

[Next] ボタンを押してインストールを進めます。「Serial Number」を入力する画面に来ます。入力フィールドは未入力のまま [Next] ボタンを押します。これにより Flex はトライアル版としてインストールされます。（ここで購入した製品シリアル番号を入力すると製品版として導入されます。）

インストール先は適当に決定してください。説明ではデフォルトの設定 "C:\Program Files\Macromedia\Flex" をそのまま受け入れたこととします。

今回のインストールで唯一気をつけなければならないのが、インストールタイプの選択「Install Options」です。ここはデフォルトの「Macromdia Flex」ではなく「Macromedia Flex with integrated Jrun 4 」を選択します。これが前に説明した「JRun 統合インストール」になります。

下の図はインストール設定の確認画面です。設定内容が間違いないことを確認し、[Install] ボタンを押します。これでインストールは完了です。

３．Flexプレゼンテーションサーバーの開始・停止

Flexプレゼンテーションサーバーの開始

Flex のインスールが完了しましたので、早速起動して動作を確認しましょう。Flexの起動およびその後の様々な操作は基本的にコマンドプロンプトを使って行います。（コマンドプロンプトの起動の仕方、基本的な使い方についてはWindows ヘルプやインターネットで確認ください。このサイトは結構わかりやすくまとめられているようです）

「統合インストール」において、Flex (Flex プレゼンテーションサーバー）を起動するとは、Flexに統合してインストールされている JRun を起動する、ということになります。まずはコマンドプロンプトを開始し、JRun の操作コマンドが収められている {Flex インストールディレクトリ}\jrun\bin ディレクトリに移動します。

次に以下のようにjrun サーバーの起動コマンドを入力し、[Enter] キーを押します。

jrun -start default

JRun サーバーコマンドディレクトリへの移動と JRun サーバーの実行

[Enter] キーを押すと何か文字がたくさん出てくると思います。まず JRun が起動し、JRun が Flex プレゼンテーションサーバー機能を読み込み、実行する過程がログメッセージとして出力されています。

「Server default ready」の文字が確認できたら、Flex プレゼンテーションサーバーは起動されました。

以後この画面で作業をする必要は特にはありませんが、常に動作している必要がありますので、右上の[X] ボタンを押して終了してはなりません。もし気になるようであれば、最小化ボタンを押して、このコマンドプロンプトをディスクトップから隠します。

Flexプレゼンテーションサーバの停止

今回はFlexを運用で動かすわけではないので、停止方法について、あまり神経質になる必要はありません。 Flex を起動したコマンドプロンプトを選択し、[Ctrl] + C を押して、強制終了しても問題はありません。もし最も正しい方法で停止したいということであれば、停止のためにもう一つコマンドプロンプトを開き、起動時に移動したのと同じJRun サーバコマンドディレクトリに移動し、次のコマンドを実行します。

jrun -stop default

４．サンプルアプリケーションの実行

まずは Flex 同梱のサンプルアプリケーションを実行したいと思います。もし前の手順の、「Flex プレゼンテーションサーバの停止」で Flex を停止された方は、再度 Flex を開始しておいてください。

Webブラウザーを開いてください。 Flex サンプルアプリケーションのトップ画面の URL は

http://localhost:8700/samples

です。こちらのURLを入力しアクセスします。次のような表示が現れると思います。

第一回で紹介した Flex Store、Flex Explorer、もこのサンプルの中に含まれています。一通り実行し、動作を確認してください。

５．ディレクトリ構造とアクセス方法

サンプルを一通り確認したところで、次は Flexインストールディレクトリ配下のディレクトリ構造を理解しましょう。 Flex プレゼンテーションサーバーは、インストールした段階ではリッチインターネットアプリケーションを開発し、配布するための"入れ物"(フレームワーク) が用意されているだけです。この"入れ物" に実際にアプリケーションコードを保存していくのが開発者の仕事です。

「JRun 統合インストール」を選択した場合、ユーザー開発コードを入れる場所は {Flex インストールディレクトリ}\jrun4\servers\default\flex になります。また先ほど確認したサンプルコードのソースコートはすべて {Flex インストールディレクトリ}\jrun4\servers\default\samples の下に収められています。

Flexの開発コードは {Flex インストールディレクトリ}\jrun4\servers\default\flex の下に保存します。拡張子が .mxml または .as と記述されているとき、これは Flex アプリケーションコードであるとみなされます。　{Flex インストールディレクトリ}\jrun4\servers\default\flex　は実は Web アプリケーションを配置する領域でもあります。ですから、このディレクトリ配下に html　ファイルや gif 画像ファイルを置くことも可能ですし、また JSP ページを配置し、JRun でこれを処理させることも可能です。

配置したファイルへのブラウザーからのアクセス方法は。

http://localhost:8700/flex/配置したファイルの名前

となります。ここで localhost はホスト名として自分自身を指す特別なキーワードです。別のマシンの flex アプリケーションにアクセスしたい場合、そのホスト名、または IP アドレスをここで指定します。

次の :8700 はポート番号。：記号に続くポート番号は 80 番の場合省略可能ですが、「JRun 統合インストール」でFlexを導入した場合、ポート番号 8700 番がサーバにアクセスするためのデフォルトポートになりますので、これを明示的に指定します。 Flex を運用環境で稼動する場合、フロントに IIS や Apach などの Webサーバーを設置するのが通常ですので、運用環境ではこのポート番号の指定は必要なくなります。また JRun の設定ファイルで 8700 番を別の番号に変更することも可能です。今回はデフォルト値の 8700 をそのまま利用するとことします。

その次の /flex は「コンテキストルートパス」、と呼ばれるものです。 /flex というコンテキストルートパスが flex ディレクトリと関連付けられているため、/flex/... とアクセスに来たとき、常にこのディレクトリ配下が実行されます。コンテキストルートパスは JRun の設定ファイルにより、別の名前を設定することも（例えば /myapp/... をコンテキストルートパスとして flex ディレクトリに関連付けるなど）可能ですが、これには J2EE サーバの知識が必要となりますので、ここではデフォルトの /flex を利用することとします。

その次に来るのがあなたが flex ディレクトリの配下に保存したファイルの名前になります。拡張子が .html や .gif などのファイルはそのままその内容がブラウザーに返されます。 .jsp　のファイルは JRun により実行され結果がブラウザーに返されます。そして拡張子が .mxml や .as のファイルは Flex アプリケーションとしてコンパイルされ、swf 化されたコードがブラウザーに返されます。

６．簡単なアプリケーションの作成と実行

習うより慣れろということで、とにかく一つアプリケーションを作ってみましょう。 .mxml や .as ファイルはテキスト形式ファイルとなりますので、テキストエディタで作成可能です。今回は Windows 標準のテキストエディター notepad を使って簡単な Flex アプリケーションを作ってみます。

１．.mxml の最も基本的な構造

MXMLは XML 形式ファイルとなります。 MXML はタグベースで開発します。 XML のルールによりルート要素は一つだけです。ブラウザーから直接呼び出し、実行することが可能な MXML のルート要素は必ず <mx:Application> となります。以下は "何もしない" 最も基本的な構造を持つ Flex アプリケーションです。

<?xml version="1.0" encoding="Shift_JIS"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>

早速このアプリケーションを作ります。まずコマンドプロンプトを開き、flex ディレクトリに移動します。次に notepad.exe を実行し .mxml となるテキストファイルを作成します。今回ファイル名は myflex.mxml とします。

コマンドプロンプトを開いてから MXML ファイル myflex.mxml の編集を開始するまで

ノートパッドでソースコードを入力

（短いですが、記号の羅列なのでタイプミスをしがちです。コピー＆ペーストで上のテキストをテキストエディターに貼り付ければ間違いありません。）

編集が完了したら、ファイルを保存します。

実行しましょう。ブラウザーを起動し次のURLを入力します。

http://localhost:8700/flex/myflex.mxml

しばらく待ってから、一瞬プログレスバーが表示され、その後、グレーのスクリーンが表示されます。何も処理を組み込んでいないので、Flexアプリケーションのデフォルトのバックグラウンドカラーが表示されている状態です。

（表示されるまでしばらく待たされたのはこの間コンパイルが動いていたからです。２回目移行の実行ではコンパイル済のキャッシュが利用されますので、レスポンスは早くなります）

２．Label コントロールを使って画面に文字を表示

先ほど編集した myflex.mxml に以下の赤字の部分を追加します。

<?xml version="1.0" encoding="Shift_JIS"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF" >
    <mx:Label text="ハローマイファースト Flex アプリケーション" fontSize="20"/>
</mx:Application>

再度ブラウザーで呼び出すと次のようになります。

７．まとめ

今回は Flex をインストールし、実際にアプリケーションを作成し動かしてみました。

Fleｘサンプル（http://localhost:8700/samples）にある Flex Explorer は Flex のプログラミングを勉強する上で非常に便利なサンプルアプリケーションです。 Flex Explorer では、左のツリーから選択したアプリケーションの実行結果とソースコードを確認することができます（実行結果ビュー上のタブで切り替え）。まずは Flex Explorer にあるサンプルアプリケーションのソースコードをコピー＆ペーストで自分の .mxml ファイルに貼り付けて部分的に書き換えて実行結果の変化を確認するなどすることで徐々にプログラミングの感覚がつかめてくるのではないかと思います。

次回は Flex Builder をインストールする予定です！

ご意見・ご感想

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

トップページ

作成日：2004年12月13日
更新日：2004年12月13日

１からはじめる Flex コーダーへの道「第２回　Flexをインストールしよう」
Flex トライアル版をダウンロード、インストール
連載「１から始める Flex コーダーへの道」の第２回目です。 Flex をインストールし、簡単なアプリケーションを作ります。
目次トライアルのダウンロード Flex のインストール Flexプレゼンテーションサーバーの開始・停止サンプルアプリケーションの実行ディレクトリ構造とアクセス方法簡単なアプリケーションの作成と実行まとめ１．トライアルのダウンロード Flex トライアル版はインターネットからダウンロードできます。トライアル版は英語版となっていますが、基本機能は日本語版と変わりありません。トライアル版で開発したアプリケーションはそのまま製品版の Flex でも動作させることができますので Flex をとりあえず試してみたいということであれば、まずトライアル版をダウンロードして下さい。トライアル版は 60日の使用期限が過ぎると、デベロッパー版という外部からのアクセスに制限がかかる状態となりますが、引き続き利用することができます。ですからアプリケーションデベロッパーのマシンにはトライアル版をインストールし、各自のマシンでアプリケーションのテスト実行ができるようにしておくという利用の仕方もあります。要はFlexアプリケーションを運用環境で稼動させるためには製品版が必要になりますが、それ以外の目的ではトライアル版でほとんどの機能をまかなうことができます。 Flex トライアル版は次からダウンロードします。 http://www.macromedia.com/jp/software/flex/trial/ 「Flex 1.5 英語版、Flex Builder トライアル版をダウンロード」をクリックしてください。トライアルのダウンロードのためには Macromedia メンバーへの登録が必要です、すでにメンバーアカウントをお持ちの方は、そちらをご利用ください。それ以外の方は、まずメンバー登録を行います。　メンバーログインをするとトライアル版の利用目的などいくつかの質問をたずねられますから、これに答えます。するとダウンロード画面に移行します。ここでは Windows 版の Flex について説明します。これ以外にも Linux、Solaris、AIX 版があります。必要に応じてこれらもトライしてください。今回は Windows 版 Macromedia Flex をサイトよりダウンロードします。また次の回では Flex Builder について説明する予定ですので、ここであらかじめ Flex Builder Windows 版もダウンロードしておくと良いでしょう。２．Flex のインストールトライアル版 Flex のインストールの方法には大きく分けて、「JRun 統合インストール」と「J2EEインストール」の２通りの方法があります。製品版としての使用では「J2EE インストール」しかサポートしていないため、Flexの完全なインストールを理解するためには「J2EEインストール」を理解する必要があります。しかし「J2EEインストール」を行うためには J2EE サーバの知識も必要であり、取り掛かりとしては少し面倒です。ここでは導入が簡単で面倒な作業の少ない「JRun統合インストール」でのインストール方法について説明します。（「JRun 統合インストール」とする場合、Flex のベースとなる J2EE サーバーが JRun 4.0 に固定されます。もしターゲット J2EE サーバが決まっており、ここで Flex を稼動させたいということであれば、「J2EE インストール」を選択します）まずはダウンロードしたファイル、Flex-15-win.exe を実行してください。 [Next] ボタンを押してインストールを進めます。「Serial Number」を入力する画面に来ます。入力フィールドは未入力のまま [Next] ボタンを押します。これにより Flex はトライアル版としてインストールされます。（ここで購入した製品シリアル番号を入力すると製品版として導入されます。）インストール先は適当に決定してください。説明ではデフォルトの設定 "C:\Program Files\Macromedia\Flex" をそのまま受け入れたこととします。今回のインストールで唯一気をつけなければならないのが、インストールタイプの選択「Install Options」です。ここはデフォルトの「Macromdia Flex」ではなく「Macromedia Flex with integrated Jrun 4 」を選択します。これが前に説明した「JRun 統合インストール」になります。下の図はインストール設定の確認画面です。設定内容が間違いないことを確認し、[Install] ボタンを押します。これでインストールは完了です。３．Flexプレゼンテーションサーバーの開始・停止 Flexプレゼンテーションサーバーの開始 Flex のインスールが完了しましたので、早速起動して動作を確認しましょう。Flexの起動およびその後の様々な操作は基本的にコマンドプロンプトを使って行います。（コマンドプロンプトの起動の仕方、基本的な使い方についてはWindows ヘルプやインターネットで確認ください。このサイトは結構わかりやすくまとめられているようです）「統合インストール」において、Flex (Flex プレゼンテーションサーバー）を起動するとは、Flexに統合してインストールされている JRun を起動する、ということになります。まずはコマンドプロンプトを開始し、JRun の操作コマンドが収められている {Flex インストールディレクトリ}\jrun\bin ディレクトリに移動します。次に以下のようにjrun サーバーの起動コマンドを入力し、[Enter] キーを押します。 jrun -start default JRun サーバーコマンドディレクトリへの移動と JRun サーバーの実行 [Enter] キーを押すと何か文字がたくさん出てくると思います。まず JRun が起動し、JRun が Flex プレゼンテーションサーバー機能を読み込み、実行する過程がログメッセージとして出力されています。「Server default ready」の文字が確認できたら、Flex プレゼンテーションサーバーは起動されました。以後この画面で作業をする必要は特にはありませんが、常に動作している必要がありますので、右上の[X] ボタンを押して終了してはなりません。もし気になるようであれば、最小化ボタンを押して、このコマンドプロンプトをディスクトップから隠します。 Flexプレゼンテーションサーバの停止今回はFlexを運用で動かすわけではないので、停止方法について、あまり神経質になる必要はありません。 Flex を起動したコマンドプロンプトを選択し、[Ctrl] + C を押して、強制終了しても問題はありません。もし最も正しい方法で停止したいということであれば、停止のためにもう一つコマンドプロンプトを開き、起動時に移動したのと同じJRun サーバコマンドディレクトリに移動し、次のコマンドを実行します。 jrun -stop default ４．サンプルアプリケーションの実行まずは Flex 同梱のサンプルアプリケーションを実行したいと思います。もし前の手順の、「Flex プレゼンテーションサーバの停止」で Flex を停止された方は、再度 Flex を開始しておいてください。 Webブラウザーを開いてください。 Flex サンプルアプリケーションのトップ画面の URL は http://localhost:8700/samples です。こちらのURLを入力しアクセスします。次のような表示が現れると思います。第一回で紹介した Flex Store、Flex Explorer、もこのサンプルの中に含まれています。一通り実行し、動作を確認してください。５．ディレクトリ構造とアクセス方法サンプルを一通り確認したところで、次は Flexインストールディレクトリ配下のディレクトリ構造を理解しましょう。 Flex プレゼンテーションサーバーは、インストールした段階ではリッチインターネットアプリケーションを開発し、配布するための"入れ物"(フレームワーク) が用意されているだけです。この"入れ物" に実際にアプリケーションコードを保存していくのが開発者の仕事です。「JRun 統合インストール」を選択した場合、ユーザー開発コードを入れる場所は {Flex インストールディレクトリ}\jrun4\servers\default\flex になります。また先ほど確認したサンプルコードのソースコートはすべて {Flex インストールディレクトリ}\jrun4\servers\default\samples の下に収められています。 Flexの開発コードは {Flex インストールディレクトリ}\jrun4\servers\default\flex の下に保存します。拡張子が .mxml または .as と記述されているとき、これは Flex アプリケーションコードであるとみなされます。　{Flex インストールディレクトリ}\jrun4\servers\default\flex　は実は Web アプリケーションを配置する領域でもあります。ですから、このディレクトリ配下に html　ファイルや gif 画像ファイルを置くことも可能ですし、また JSP ページを配置し、JRun でこれを処理させることも可能です。配置したファイルへのブラウザーからのアクセス方法は。 http://localhost:8700/flex/配置したファイルの名前となります。ここで localhost はホスト名として自分自身を指す特別なキーワードです。別のマシンの flex アプリケーションにアクセスしたい場合、そのホスト名、または IP アドレスをここで指定します。次の :8700 はポート番号。：記号に続くポート番号は 80 番の場合省略可能ですが、「JRun 統合インストール」でFlexを導入した場合、ポート番号 8700 番がサーバにアクセスするためのデフォルトポートになりますので、これを明示的に指定します。 Flex を運用環境で稼動する場合、フロントに IIS や Apach などの Webサーバーを設置するのが通常ですので、運用環境ではこのポート番号の指定は必要なくなります。また JRun の設定ファイルで 8700 番を別の番号に変更することも可能です。今回はデフォルト値の 8700 をそのまま利用するとことします。その次の /flex は「コンテキストルートパス」、と呼ばれるものです。 /flex というコンテキストルートパスが flex ディレクトリと関連付けられているため、/flex/... とアクセスに来たとき、常にこのディレクトリ配下が実行されます。コンテキストルートパスは JRun の設定ファイルにより、別の名前を設定することも（例えば /myapp/... をコンテキストルートパスとして flex ディレクトリに関連付けるなど）可能ですが、これには J2EE サーバの知識が必要となりますので、ここではデフォルトの /flex を利用することとします。その次に来るのがあなたが flex ディレクトリの配下に保存したファイルの名前になります。拡張子が .html や .gif などのファイルはそのままその内容がブラウザーに返されます。 .jsp　のファイルは JRun により実行され結果がブラウザーに返されます。そして拡張子が .mxml や .as のファイルは Flex アプリケーションとしてコンパイルされ、swf 化されたコードがブラウザーに返されます。６．簡単なアプリケーションの作成と実行習うより慣れろということで、とにかく一つアプリケーションを作ってみましょう。 .mxml や .as ファイルはテキスト形式ファイルとなりますので、テキストエディタで作成可能です。今回は Windows 標準のテキストエディター notepad を使って簡単な Flex アプリケーションを作ってみます。１．.mxml の最も基本的な構造 MXMLは XML 形式ファイルとなります。 MXML はタグベースで開発します。 XML のルールによりルート要素は一つだけです。ブラウザーから直接呼び出し、実行することが可能な MXML のルート要素は必ず <mx:Application> となります。以下は "何もしない" 最も基本的な構造を持つ Flex アプリケーションです。 <?xml version="1.0" encoding="Shift_JIS"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> </mx:Application> 早速このアプリケーションを作ります。まずコマンドプロンプトを開き、flex ディレクトリに移動します。次に notepad.exe を実行し .mxml となるテキストファイルを作成します。今回ファイル名は myflex.mxml とします。コマンドプロンプトを開いてから MXML ファイル myflex.mxml の編集を開始するまでノートパッドでソースコードを入力（短いですが、記号の羅列なのでタイプミスをしがちです。コピー＆ペーストで上のテキストをテキストエディターに貼り付ければ間違いありません。）編集が完了したら、ファイルを保存します。実行しましょう。ブラウザーを起動し次のURLを入力します。 http://localhost:8700/flex/myflex.mxml しばらく待ってから、一瞬プログレスバーが表示され、その後、グレーのスクリーンが表示されます。何も処理を組み込んでいないので、Flexアプリケーションのデフォルトのバックグラウンドカラーが表示されている状態です。（表示されるまでしばらく待たされたのはこの間コンパイルが動いていたからです。２回目移行の実行ではコンパイル済のキャッシュが利用されますので、レスポンスは早くなります）２．Label コントロールを使って画面に文字を表示先ほど編集した myflex.mxml に以下の赤字の部分を追加します。 <?xml version="1.0" encoding="Shift_JIS"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF" > <mx:Label text="ハローマイファースト Flex アプリケーション" fontSize="20"/> </mx:Application> 再度ブラウザーで呼び出すと次のようになります。７．まとめ今回は Flex をインストールし、実際にアプリケーションを作成し動かしてみました。 Fleｘサンプル（http://localhost:8700/samples）にある Flex Explorer は Flex のプログラミングを勉強する上で非常に便利なサンプルアプリケーションです。 Flex Explorer では、左のツリーから選択したアプリケーションの実行結果とソースコードを確認することができます（実行結果ビュー上のタブで切り替え）。まずは Flex Explorer にあるサンプルアプリケーションのソースコードをコピー＆ペーストで自分の .mxml ファイルに貼り付けて部分的に書き換えて実行結果の変化を確認するなどすることで徐々にプログラミングの感覚がつかめてくるのではないかと思います。次回は Flex Builder をインストールする予定です！ご意見・ご感想「１からはじめる Flex コーダーへの道」一覧へトップページ作成日：2004年12月13日更新日：2004年12月13日