はじめに
前回は、Flash技術を使ってRIA（Rich Internet Application）開発を行うための「Flexフレームワーク」の概要について解説しました。今回は、統合開発である「Adobe Flex Builder 3」を紹介し、さらに「Adobe LiveCycle」に収録されているFlexフレームワークを利用したサンプルアプリケーションの実行とソースコードの内部を確認してみましょう。また、これからFlexを学習したいという人向けに厳選したWebサイトも紹介します。
対象読者
- RIA開発をこれからはじめようと思っている方
- Flexフレームワークに触れてみたいと思っている方
まずは体験版から開発をスタート
前回も解説しましたが、現在Adobeからダウンロードして実際に試すことができる開発環境として、現行の「Adobe Flex Builder 3」の体験版とベータ版の「Adobe Flash Builder 4」の2つがあります。これからFlexに触れようという方なら、Adobe Flex Builder 3をダウンロードすることをお勧めします。
Adobe Flex Builder 3は、現在多くのPCにインストールされているAdobe Flash Player 9を最大限に活用することが可能です。さらに、日本語でのさまざまな情報がWebサイトなどで公開されているというメリットがあります。
Adobe Flex Builder 3の体験版は、AdobeのWebサイトのダウンロードページを表示し、画面中央のプルダウンメニューから「Flex 3」を選択してダウンロードします。なお、ダウンロードにはAdobe IDが必要です。取得していない場合はWeb画面から無償で申し込むことができます。体験版は60日間、チャートコンポーネントなど一部のコンポーネントに体験版であることを意味する透かしが入る以外は、すべての機能を制限なく利用することが可能です。
1からはじめる人は「Adobe Flex Builder 3」スタンドアローン版で
「Adobe Flex Builder 3.0.2 Professionalのダウンロード」ページでは、インストールする環境に合わせて英語／日本語版や対象OSを選択できます。
前回解説したように、Adobe Flex Builder 3にはスタンドアローン版とEclipseプラグイン版の2つがあります。このページからダウンロードできるのはスタンドアローン版なので、既に利用しているEclipseにプラグインを追加したい場合は、Webページの指示に従って「Flex Builder 3 Professional Eclipseプラグイン」をダウンロードしてください。
スタンドアローン版とプラグイン版のどちらをダウンロードするかは、ユーザーの環境に合わせて選択します。なお、既にEclipseを使っていてもプラグインの追加によって起動が遅くなることから敢えてスタンドアローン版を使って環境を分けるという場合もあります。また大規模なSIerなどでは開発する箇所が細かく分割されていることからスタンドアローン版を、小規模な環境ではすべてを一括管理するためにプラグイン版をそれぞれ選ぶことが多いようです。
「Adobe LiveCycle」でFlexアプリケーションのデモを体験
Adobe Flex Builder 3をインストールしてすぐに開発をはじめてもよいですが、その前にサーバサイドの環境を用意して実際にFlexフレームワークを使ったRIAを試してみましょう。Adobeのサーバサイドのソリューションの1つに「Adobe LiveCycle」があります。このAdobe LiveCycleの体験版には、Flexフレームワークを使ったサンプルアプリケーションが納められています。Adobe LiveCycleの体験版もAdobe Flex Builder 3と同じくAdobeのWebサイトのダウンロードページからダウンロード可能です。こちらも60日間、すべての機能を利用できます。
ここではWindows版について解説します。Windows版のインストーラでは、インストール中に実行環境としてTomcatまたはJava EEを選択する画面が表示されます。今回紹介するデモンストレーションはTomcatを利用するため「LiveCycle Data Services with Tomcat」を選択してください。
インストールが終了したら「C:\lcds\tomcat\bin」にある「startup.bat」をダブルクリックしてTomcatを起動します。続いて［スタートメニュー］－［プログラム］－［Adobe］－［LiveCycle Data Services ES 2.6.1］にある［Start Samples Database］を選択します。2つのコマンドライン画面が表示され、サンプルアプリケーションを利用できる状態になりました。
この状態でWebブラウザを立ち上げて「http://localhost:8400/lcds-samples/」リンクを開きます。するといくつかのFlexアプリケーションを利用できるWebページが表示されます。その中から［30 Minute Test Drive］項目にある［Take the test drive］リンクをクリックしてみます。
表示されたページの「Run the sample:」項目に従って［here］リンクを押してアプリケーションを起動します。画面下部に［Get Data］ボタンのあるページが表示されます。ボタンをクリックするとデータがグリッドに読み込まれ、ソートやカラムの並べ替えといった機能を実際に体験できます。
なお、Tomcatおよびサンプルアプリケーションについては、それぞれのコマンドライン画面で［Ctrl］＋［C］を押すことで終了できます。
サンプルアプリケーションのソースを「Adobe Flex Builder 3」で開く
LiveCycleに用意されたサンプルアプリケーションにはソースも付属されており、実際にAdobe Flex Builder 3で開いて内容を確認できます。「http://localhost:8400/lcds-samples/」で表示されたページの［Source Code］欄の内容に沿って作業を行うことで、Adobe Flex Builder 3の新規プロジェクトとしてアプリケーションのソースを開くことができます。
実際に前のページで表示したサンプルアプリケーションが、リッチなインターフェースを実装していながら、ごくシンプルなコードによって構成されていることが分かるでしょう。
なお、ソースを開く際には、Adobe Flex Builder 3のワークスペースの場所（ドキュメントフォルダ内の「Flex Builder 3」）と、サンプルを動作させているコードが納められたフォルダやサーバの位置を指定する点に注意してください。解説は英語で書かれているため、一部機能については日本語への読み替えが必要になります。
BtoBだけでなくBtoCの分野でも使われるRIA
Flex開発者の情報源として、有志によって運営されている「Flex User Group」があります。Adobeが公式サポートを行っており、現在3,500名以上がメンバー登録しています。このWebサイトでは常にFlexフレームワークを使った開発に関する質問や、それに対する回答などが日々何十件も書き込まれ、盛り上がりを見せています。
一方で、現在RIAを利用している現場はBtoCではなくBtoBの分野が多く、これまでFlexフレームワークに興味を持てなかった人は、FlexフレームワークとRIAの盛り上がりに気付いていないかもしれません。
実際にFlexユーザーの方々に活用ポイントをヒアリングさせていただくと、そのほとんどから社内向け、BtoBで利用されているという答えが返ってきます。また海外の例では、業務システムの管理画面としてFlexフレームワークによるRIAを利用するケースが多いとのことです。
さらにユーザー事例は増加しており、今後はユーザー数がある程度限られたBtoBの分野だけでなく、より多数のユーザーがアクセスするBtoCの環境下でもFlash技術とFlexフレームワークによってRIAを実現した例が登場していく予定です。
WebサイトからFlexフレームワークの情報を入手
Flexフレームワークについての情報を扱っている主なWebサイトを紹介します。
- １週間で学ぶFlex
- flexapps.com.au showcase
- Flex Examples
- Adobe Flex 3 Component Explorer
- Adobe Flexリソース
- Flex Box
Flexデベロッパーセンター内にあるビデオラーニングと練習素材をまとめた「１週間で学ぶFlex」です。まずはこのページのコンテンツを体験して、Flexフレームワーク開発の基礎を学ぶとよいでしょう。
さまざまなアプリケーションを実際に体験できるショーケースです。Flexフレームワークでどんな機能を実現できるかを試してみたい人にお勧めです。
名前の通り、Flexフレームワークを使ったアプリケーションの例が集められたブログです。環境を用意してあれば、コピー＆ペーストしただけで実際にすべてのサンプルを試すことができます。
Adobe Flex Builder 3に標準で用意されているさまざまなコンポーネントの動作をWebページ上で試すことができるサイトです。動的に試せることから、コンポーネントの理解を進めることができます。
Flexフレームワークに関してAdobeが提供しているドキュメントすべてがこのWebページからダウンロードできます。またこのページのドキュメントにはAIRアプリケーション「Adobe Developer Box」からもアクセスすることが可能です。
Flexフレームワークのキホンをマスターして、カスタムコンポーネントも使ってみたいという人にお勧めのサイトです。100個を超えるカスタムコンポーネントが用意されており、それぞれ動作サンプルやソースを閲覧できます。中でも、ドリルダウンできるチャート「Chart DrillDown Animations」やマインドマップ風コンポーネント「SpringGraph」などがお勧めです。
まとめ
2回に渡って駆け足で、Flexフレームワークで開発をはじめるための基礎について解説しました。ぜひAdobe Flex Builder 3の体験版をダウンロードして、実際に試しながらFlexフレームワークの世界に飛び込んで欲しいと思います。
