1からはじめる Flex コーダーへの道
「第1回 Flex ってなに?」

Flex とは何をするもか、どのような仕組みになっているのか、だれがこれを使うのか?

連載「1から始める Flex コーダーへの道」の第一回目です。 Flex ってなに? というところを説明します。

目次

  1. Flexが可能にすること、そして目指すもの
  2. RIAとは
  3. Flexの仕組み
  4. Flex に興味が沸いてきたあなたが今すぐできること
  5. まとめ

1.Flexが可能にすること、そして目指すもの

「Flex ってなに?」という質問に答えるために、まず Flex を使うと何ができるかということを知って欲しい。多分それが Flex を理解する一番の近道だと思うからです。 次のリンクをクリックしてください。

Flex Store デモ

(※1リンクがうまく開かないときは次のURLを開き、さらに開かれたページの中の「Experience the Flex Store」のリンクを開いてください。 http://www.macromedia.com/devnet/flex/example_apps.html
 ※2 サンプルサイトのため、回線があまり太くないようです。ダウンロードに少し時間がかかるかもしれません)

Web の世界に新しい "体験" をもたらすもの、それが Flexです 。そして Web の世界に新しい"体験" をもたらすこと、それが Flex のめざすことです。

2.RIA とは

リッチインターネットアプリケーション、略して RIA 呼ばれるカテゴリーがあります。インターネットに、より高機能なユーザーインターフェースを提供するアプリケーションのカテゴリーです。インターネットは、追加のソフトを導入する必要がなく、ネットワークにつながっていさえすれば、オンラインショッピングから、週末のレストランの予約まで気軽に行うことができるという簡単さがうけ、急速にその利用者を増やしました。 現在インターネットの世界にいる最先端のエンジニアたちはその先をめざしています。 Webでアクセスをするアプリケーションの中で、ドラッグ&ドロップや、ダイナミックな画面の変化を実現し、あたかも OS 上の 一つのアプリケーションのように Webのサイトを動作させようとしています。 Mazda の Web Tune Factory はこれを実現したわかりやすい例の一つだと思います。

RIAを実現する方法はいくつかあります。 そして Flex はそれを実現する方法の一つなのです。

3.Flexの仕組み

Flash Playerについて

Flexの仕組みを理解するためには、まず Flash Player を知っておく必要があります。 Flash Player はウェブブラウザーにインストールされて動作するプラグインソフトです。 Flash Player はもともとアニメーションを Web上で表示するときに使われるソフトウェアーでした。 その後、その高い性能と応用範囲の広さがうけて、いろいろな形で使われるようになりました。 FlashPlayer は無償ダウンロードソフトウェアーとして配布され、また特別な設定無く導入ができることから、今日ではほとんどのPCに導入されています。ですから、Flash Player をこれまで知らなかった人も、無意識のうちに Flash Player 上で動いているものを見ているはずです。Web 画面上でアニメーションが表示されたら、その上にマウスボタンを持っていき、右ボタンをクリックしてください。 「About Macromedia Flash Player ..」 と出てきたら、そのアニメーションは Flash Player の上で動作しています。

Flash Player は Flex とおなじ Macromedia により開発され、配布されています。 RIA を実現するためには、クライアント(ウェブブラウザー)側にそれを実現するためのソフトウェアーが必要になります。 Flex はこれに Flash Player を使用します。

swf 形式ファイルについて

Flexの仕組みを理解するためにもう一つ知っておかなければならないのが swf 形式ファイルです。一般に「スイフファイル」とか、単純に「エスダブルファイル」と呼ばれています。これは Flash Player 上で実行されるアニメーション/ソフトのデータ形式です。 swf というデータ形式に基づいて作成されたファイルを Flash Player に読み込ませることで、Flash Player はそれを解釈し、実行します。 この swf 形式ファイルを作成するための標準ソフトは Macromedia Flash といいます。 Macromedia Flash の2004年11月現在の最新版は Flash MX 2004 になります。 swf 形式ファイルはバイナリー形式ファイルであるため、テキストエディターで内容を確認したり、編集したりすることはできません。 swf 形式ファイルを作るためには、必ずそのための専用ソフトが必要になります。

Flexの仕組み

Flex はウェブサイトの利用者から見るとインターネットの「向こう側」にある、サーバー上で動作します。 Flex の一番重要な仕事は mxml という形式で書かれたファイルを swf 形式ファイルに変換し、これをクライアントであるウェブブラウザーに返すということです。 mxml とは Flex 独自のタグ言語です。 mxml ファイルはテキストファイルなのでテキストエディターなどで編集できます。 mxml は独自のタグ言語ですが、多くの標準仕様が取り入れられています。まずタグの記述方法は XML の規格に準拠します。 プログラム処理の記述には ActionScript 2.0 という Flash MX 2004 で用いられるプログラミング言語を使います。 ActionScript 2.0 はヨーロッパの標準化規格 ECMA をクリアしており、JavaScript と非常に親和性の高い言語仕様になっています。 標準タグ、およびクラスの使用方法を説明したドキュメンテーションは ASDOC といいます。これは javadoc と非常に似た編集形式となっています。(ASDOC はインターネットから閲覧することも可能です。) 

Flex のコンパイル機能

以上が、Flex の機能の最も重要な部分です。 細かいところを見ていけば、「Flex は mxml だけでなく、as ファイルという ActionScript ファイルもアプリケーションの構成要素とすることができる」であるとか、「Flex は J2EE サーバー上で動作する」、「Flex のもう一つの重要な機能としてRuntime サービスというものがある」となど、ほかにも知っておくべき重要なポイントはいくつかありますが、それらについてはもう少し後になってから詳しく説明する予定です。

まずは、「Flexはサーバーサイドで動くもので、mxml という形式で書かれたファイルを swf に変換(コンパイル)し、クライアントに返す」という点をおさえてください。

Flex は一度 mxml を swf に変換したら、その変換結果をメモリー上に記録しています。ですから、mxml から swf への変換は要求があった最初の一回目だけになります。また、ブラウザーは同じ mxml を要求する場合、自分の中で持っている以前ダウンロードした swf の内容がその後サーバー側で更新されているのかをまず確認します。もし更新されていない場合、再度サーバーからファイルをダウンロードするのではなく、以前ダウンロードした swf を使います。 これらのキャッシュのメカニズムは余分な処理時間を最小限にし、アプリケーション起動の短縮化に貢献しています。

4.Flex に興味が沸いてきたあなたが今すぐできること

Flex Explorer というサンプルアプリケーションがあります。 Flex を導入すると付いてくるサンプルですが、インターネットでも確認することができます。次のリンクをクリックしてください。

Flex Explorer

「Flexはサーバーサイドで動くもので、mxml という形式で書かれたファイルを swf に変換(コンパイル)し、クライアントに返す」ものです。ここで mxml は自分で作らなければなりません。 サンプル Flex Explorer はどのように書けばどのような結果を得られるかを簡単に確認することができます。左側のナビゲーションビューからサンプルを一つ選択します。ウィンドウ右側でそのサンプルが実行されます。 xxx.mxml というラベルのついたタブをクリックします。ここで表示されるのが、そのサンプルのソースコードになります。

Flex は、トライアル版をインターネットからダウンロードすることができます。トライアル期間は 60日間で、これが過ぎるとデベロッパー版という状態に自動的に切り替わります。 運用サーバー上で Flex を稼動させない限り、Flex はこの状態で使い続けることができます。 実際に Flex を試してみたくなりましたら、まずはトライアル版をダウンロードしてください。トライアルダウンロードのための URL は次の通りです。

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

次の回では、Flexのトライアル版を実際にダウンロード、インストールしてみようと思います。お楽しみに!

5.まとめ

Flex は一言でいうと、「RIAを実現するためのサーバーサイドのソリューション(実現手法)」です。 Flex で開発をするアプリケーションは mxml という新しい開発言語で記述する必要があります。 新しい開発言語を一から習得するのは大変です。Flexでは多くの標準規格を取り入れ、既存のアプリケーション開発エンジニアが簡単にこれに取り組めるように考慮しました。 Flex の習得は一般に、多くいるアプリケーション開発エンジニアの中で、J2EE エンジニアが最も容易に取り組むことが可能であろうと考えられています。

  習得の容易さ 備考
J2EE エンジニア
Flexコンポーネントは完全なオブジェクト指向で設計されています。 mxml は XML 形式で記述します。 ActionScript 2.0 はJavaScript 言語に非常に近く、また Java言語とも似た言語使用となっています。 また Flex アプリケーションのサーバーサイドコンポーネントを理解し、開発していく上でも、J2EEエンジニアは最も有利な立場にあります。
XML エンジニア
mxml はXML形式で記述しますので。XMLエンジニアにとって、ここへの取り組みは容易だと思われます。 複雑なアプリケーション処理は ActionScript 2.0 の文法に基づきプログラムコードを記述する必要がありますので、プログラミング言語の知識が要求されます。
Java / JavaScript エンジニア
Java もしくは JavaScript のエンジニアは比較的簡単に Flex に取り組むことができるはずです。 Java、JavaScript と Flex がプログラミング言語として用いる ActionScript 2.0 は非常に似た文法ルールを取っています。 また Java / JavaScript エンジニアにとって、XML の記法はそれほど違和感無く理解できるはずです。 さらに Java で開発されたコンポーネントは Flex アプリケーションのサーバーサイドコンポーネントとしても利用可能であるということから。 Java エンジニアは Flex アプリケーションのサーバーサイドコンポーネント開発という方向性も持っています。
Macrimedia Flash エンジニア
Flash エンジニアでもアニメーション寄りの仕事をしてきた方は Flex の習得には少し苦労すると言われています。 また、Flash MX 2004 は ActionScript 2.0 と ActionScript 1.0 の文法ルールをサポートしていますが、Flex は基本的に ActionScript 2.0 の記法のみをサポートしています。アニメーションの作成において必須であったタイムラインの概念も Flex にはありません。 いずれにしても ActionScript でのプログラミング経験は大きな資産になります。
Macromedia ColdFusion エンジニア
ColdFusionエンジニアにとって、Flexを習得するために新たに学ばなければならないエリアは広範囲にわたるといわざる得ません。しかしながら、一方で、ColdFusionで開発されたColdFusionコンポーネントは、Flexのサーバーサイドコンポーネントとして何の変更もなく利用することが可能です。ColdFusionエンジニアには既存知識をそのまま用いて Flex のサーバーサイドコンポーネントを開発するという機会が考えられます。またFlexの開発言語を習得するにしても、プログラミングの考え方、タグベースの開発手法、そのいずれも理解がされていることから、新しく身に着けなければならない知識は広範囲ですが、それを理解するためのベース知識は十分に備わっていると考えられます。
HTML デザイナ

(画面デザインに特化した場合○)

HTMLデザイナにとって、カバーしなければならない範囲は広大です。何らかのプログラミング言語を経験したことがある方であれば、比較的取り組みやすいと思いますが、まったくプログラミング知識の無い方にとっては新たなチャレンジとなるでしょう。 Flex が採用する mxml は HTML より厳密な XML をベースとしたタグ言語です。しかしタグコードとにらめっこをしながらHTMLページのレイアウトに四苦八苦した経験のあるHTMLデザイナであれば、mxml の要領を得ることはそれほど難しくないと思います。mxml はある側面でみると HTML と同じように、"タグ" があり、この "タグ" を書くことで画面構成ができるということです。 Flex の "タグ" は HTML のそれ以上に強力で、かつ独自に拡張したカスタムタグを作ることも簡単にできます。 HTML デザイナはこの点に注力をし、Flexアプリケーションの画面デザインを担当するという方向性が考えられます。

次回は、トライアルをダウンロードし、実際にFlexをインストールしてみたいと思います。お楽しみに!


ご意見・ご感想

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

トップページ


作成日:2004年11月28日
更新日:2004年11月28日