"スタンドアロン・WEB アプリ" をコマンド・ラインでコンパイル／実行する

【概要】

有償の Flash Builder を用いないで、無償の Flash SDK (または、Flash Develop) を用いて、コマンド・ラインで、WEB アプリをコンパイルして、実行する手順を紹介します。

 

1) コンパイルの準備

• 以下のWEB-サイトから評価版 (３０日) をダウンロードできます。
  ≪yFiles FLEX ／Clientモジュール≫
  
  　　 ダウンロードされるモジュール
  　　 yfilesflex-layout-1.2.0.1-eval.zip ... 28.5 MB
  
  
  
• yfilesflex-layout-1.2.0.1-eval.zip を展開して下さい。
  
  yfilesflex-layout-1.2.0.1-eval と言うフォルダーが生成されます。
  以下の説明では、このフォルダーを <yFiles-FLEX> と記述します。
  
  
• 以下のフォルダーがあります。
  
  ４つのクライアント用モジュールが格納されています。
  
  <yFiles-FLEX>\src-demo\air-layout-flex3 ... AIR アプリ用
  <yFiles-FLEX>\src-demo\air-layout-flex4 ... AIR アプリ用
  <yFiles-FLEX>\src-demo\client-layout-flex3 ... WEB アプリ用
  <yFiles-FLEX>\src-demo\client-layout-flex4 ... WEB アプリ用 ※ 今回使用する

 

2) Flashライブラリーと 関連する ライセンス をコピーする

• "<yFiles-FLEX>\lib" フォルダーに以下の Flash ライブラリーをコピーする
  Client\yfilesflex-1.6.0.1-eval\lib\client\yfiles-flex-Flex4.swc
  
  
• "<yFiles-FLEX>" フォルダーに以下のライセンスをコピーする
  Client\yfilesflex-1.6.0.1-eval\license.xml
  
  ※ "Client\yfilesflex-1.6.0.1-eval" は、【４.２. "Clientモジュール ／WEB アプリ" の動作確認】で使用された yfilesflex-1.6.0.1-eval.zip を展開したフォルダーを示します

 

3) 特定のアプリをコンパイルする

• "<yFiles-FLEX>\build.xml" の　259行目に、以下の 5行を追加する
  
  この例は、"LayoutModuleDemo" をコンパイルする場合です。その他のアプリの場合は、アプリの名前に置き換えて下さい。
  
  build.xml の部分
  

  254: 255: 256: 257: 258: 259: 260: 261: 262: 263:

  <!-- ****************************************************** --> <!--          Client/AIR demos: compile          --> <!--          webapp/Web Site: copy              --> <!-- ****************************************************** --> <!-- Modify by **USER** --> <target description="compile WEB/LayoutModuleDemo" depends="check-client-license,copy-license-client,check-sdk,bail" name="web_LayoutModuleDemo"> <compile name="LayoutModuleDemo" usenetwork="false"/> </target> <!-- Modify by **USER** -->

  
  
• コンパイルを実行する
  
  コマンンド・プロンプトにて、<yFiles-FLEX> の作業場所に移動して、以下のコマンドを実行する
  

  % ant -Dflex.sdk.dir="C:\Program Files\FlashDevelop\Tools\flexsdk" web_LayoutModuleDemo

  
  --> "<yFiles-FLEX>\bin\client\" フォルダに以下の６つが作成される
  
  　　　　　 swfobject.js
  　　　　　 playerProductInstall.swf
  　　　　　 LayoutModuleDemo.html .... 設定ファイル
  　　　　　 LayoutModuleDemo.swf .... Flash ファイル
  　　　　　 demo\ .... リソース用フォルダー
  　　　　　 history
  
  実行される時の様子はログ (ant_webLayout.log) を参照下さい
  
  ※ flex.sdk.dir は、"Flash Develop" をインストールしたフォルダーを指定する
  
  　　 "Flash Develop" のインストールについては、以下のページを参照下さい。
  　　 ●FlashDevelop 3.X のインストール
  
  ※ Windows 用 ANTのインストールは、以下の WEB-サイトを参考にして下さい。
  • Ant 1.8.0のダウンロード http://www.javadrive.jp/ant/install/index1.html
  • Ant 1.8.0のインストール http://www.javadrive.jp/ant/install/index2.html
  • ANT_HOMEの設定 http://www.javadrive.jp/ant/install/index3.html
  • PATHの設定 http://www.javadrive.jp/ant/install/index4.html
  • 動作確認 http://www.javadrive.jp/ant/install/index5.html
  • ドキュメント http://www.javadrive.jp/ant/install/index6.html

 

4) 全てのサンプル・アプリをコンパイルする

• 上記と同様の手順で、次のコマンドを実行して下さい
  

  % ant -Dflex.sdk.dir="C:\Program Files\FlashDevelop\Tools\flexsdk" all-client-demos

  
  --> "<yFiles-FLEX>\bin\client\" フォルダにサンプル・アプリが生成される

 

5) 特定のアプリを起動する

• "<yFiles-FLEX>\bin\client\" フォルダにある LayoutModuleDemo.html を WEB-ブラウザ(Internet Explorer や Firefox) に、ドラッグ＆ドロップする
  
  --> 図に示すように WEB-アプリが起動する
  

 

6) カテゴリーを指定して、アプリを起動する

• "<yFiles-FLEX>" フォルダにある demos.html を WEB-ブラウザ (Internet Explorer や Firefox) に、ドラッグ＆ドロップする
  
  　 --> 図に示すようなカテゴリー・リストが現れる
  　　 ・"Layout" を選び、ページをスクロール・アップして、下の方へ移動する
  　　 ・"The Layout Module Demo" が現れたら、その画像をクリックする
  
  　 --> LayoutModuleDemo のWEB-アプリが起動する
  

 

7) カテゴリー・メニューを日本語化する

• "<yFiles-FLEX>" フォルダに以下の HTML ファイルをコピーする
  

  demosJP.html

  
  
• "<yFiles-FLEX>" フォルダにある demosJP.html を WEB-ブラウザ (Internet Explorer や Firefox) に、ドラッグ＆ドロップする
  
  --> 図に示すようなカテゴリー・リストが現れる
  
  
  ※ 但し、カテゴリーの１番目にある「日本語」は、以下の WEB-ページに記述があるように、該当するアプリを日本語化した時に有効となります。
  
  ●"yFiles FLEX Client / AIR アプリ" の日本語化