Adobe Flex SDK超入門 (treasuring misc.)

最近の毎週火曜の昼は、輪講と称して、エンジニアで集まってオフィスでお昼ご飯を食べながら、よそのサイトを研究してみたり新しいものをみんなで試してみたりしています。

ここ数回はFlex SDKについて挑戦しています。
自分もまったく知らないところから初めて触ってみたんですが、最初のハードルこそちょっと高く感じたものの、触り始めるとたのしー！ということで、最初にやったことを備忘録がてら「Flex SDK超入門」としてまとめておきます。

　

Flexとは

Flashをベースにした、見た目がかっこいい（＝リッチなインタフェースの）webアプリケーションが開発できるフレームワーク、です。（自分も全て理解し切れていないのでこの表現は正確ではないかも。。）
Flexを使うとこんなものが作れます、というサンプルがadobeのサイトにあります。たとえばこんなの。

●Tシャツのデザインをカスタマイズできるもの

●Dashboard。グラフ表示のパーツを並べたもの。こういったGUIコンポーネントが多数用意されている。

　

現在の最新バージョンはFlex 3。web上の情報を探すと古いバージョンを元にした記事が多数ありますが、試した範囲では互換性保たれている模様。

　

Flexで開発するには

方法がいくつかあります。

●Flex Builderを使う
Flex開発するためのIDE（統合開発環境）ソフトです。もっとも標準的な方法。有償（60日間の無料体験版あり）。

●Flex SDKを使う
mxmlファイルをテキストエディタで編集して、コンパイルしてswfを吐き出すやり方。無償。
mxmlファイルとは、ActionScriptのプログラムコードやGUIパーツの配置座標情報などを含んだ、xml形式のファイルです。ActionScriptコードは、xmlのCDATA要素の中に記述します。

　

今回は、Flex SDKをつかって開発を試してみます。

　

Flex SDKのセットアップ

SDKをアドビのサイトからダウンロードすればいいわけなんですが、これがとてもわかりづらいところにあります。（たぶんここがハードル一番高い、と思う。。）

■Flex 3 SDKのダウンロード
Adobe - Download Adobe Flex 3

このページの上半分は有償版 Flex Builderのダウンロードなのでここはスルーして、下半分を見ましょう。「ライセンスに同意」のチェックボックスをONにすると初めて、ダウンロードのテキストリンクがアクティブになります。

　

　

ダウンロードが終わったら、解凍してどこか好きなディレクトリにおいておきます。

　

あと、Flex実行にはJava実行環境が必要です。まだインストールされていない場合はこちらからダウンロード＆インストールしておきます。

http://java.sun.com/javase/ja/6/download.html
※このページの「JDK 6 Update 6」で。（2008.04.17時点）

　

Flex SDKでHello World

まずは手始めに、mxmlファイルをテキストエディタで作って、それをコンパイルしてswfファイルを作って、表示を確認してみましょう。

＃こちらのサイトにあるチュートリアルにのっとった内容です。

　

●テキストエディタでこのような内容のファイルを作ります。保存名はMyFirst.mxmlとでも。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center" verticalAlign="center">

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

●これをコンパイル

コンパイラは、ダウンロードしたSDKを解凍した中にある、bin/mxmlc.exe です。 Windowsのコマンドプロンプト上で

mxmlc --strict=true --file-specs MyFirst.mxml

こんな感じで実行します。

☆オプションは指定しなくてもコンパイルは可能。下記でもOK。

mxmlc MyFirst.mxml

☆コマンドプロンプトでパスを通す。
みんなでやってたら「パスが通らない」っつって詰まる人がちらほらいたんですが、エクスプローラ上のファイルをコマンドプロンプトへドラッグすると、フルパス文字列でプロンプト上に持ってこれます。（常識かと思っていたが意外とそうでもない？）

　

コンパイルが終わると（数秒ほどかかります）、MyFirst.mxml ファイルがあった同じディレクトリに MyFirst.swf が生成されているはずです。これをブラウザウインドウにドラッグなどすると、内容が表示されます。ボタンが表示されるだけ、のものです。

　

　

と、ここまで、超入門編でした。
アドビのチュートリアルページにはこのあと、ボタンにonclickアクションを定義したり、GUI部品を配置するときの座標系の話、他の画像ファイルやswfファイルなどを埋め込むやり方、などが解説されているのでどうぞー。

　

Flexクイックスタート - Adobe デベロッパーセンター

　