Falconjsの始め方 (share)

2012.12.13
第177回 FxUG勉強会@東京

12年12月19日水曜日

今日の話し手

舩倉純

株式会社ニークシステムテクノロジー所属
@nod_japan_19xx
http://facebook.com/jun.funakura


今日のお題


Flexerがhtml5(w)/JSの
時流に乗るには？


2012.11.11 Adobe Says

“In the long-term, we believe
HTML5 will be the best
technology for enterprise
application development.”


Workﬂow？


Falconとは
• 新しいAS/(MXML)コンパイラ
• 高速/Simple/Scalability
• Action Script Compiler2.0としてリリース
– Flash Builder 4.7 /AIR SDKに同梱


FalconJSとは？
• as/mxmlアプリ->js/htmlアプリにする技術
• 2012/11/23にapacheのsvnにコミット
• FlexSDK + Falcon Compiler + Compiler.js
=Falcon JS

JS

テキスト
テキスト

Flashテクノロジーの今後とあなたの人生とのかかわりについて
http://www.slideshare.net/otachan/flash-14113527


FalconJSのはじめ方


• Apache Flex SDK
• Falcon
• FalconJS
• Publisher JS

■repository
http://svn.apache.org/repos/asf/incubator/flex/sdk/
http://svn.apache.org/repos/asf/incubator/flex/falcon/trunk
http://svn.apache.org/repos/asf/incubator/flex/asjs/branches/develop/

■checkout
flex/sdk/branches/develop
flex/falcon/trunk/
compiler
compiler.js
compiler.tests

■必要なものたち
◎flex sdk branches
pixcelbender_toolkit_2.5.dmg
playerglobal11_1.swc

◎compiler / compiler.js
jflex-1.4.3.zip

Apache Flex SDKのコンパイル
• 必要なもののdownloads
– playerGlobal.swc
– Pixel Bender Toolkit2
• env.properties
– env.AIR_HOME
– env.PIXEL_BENDER_HOME
– env.PLAYER_GLOBAL_HOME
• antの実行
※Flextras: - Blog: How to Build Apache Flex 4.8 from the Source
https://www.flextras.com/blog/index.cfm/2012/8/1/How-to-Build-Apache-
Flex-48-from-the-Source


Falconのコンパイル
• JFlex1.4.3の配置
• build.xmlの編集
• env.FLEX_HOME
• env.JFLEX_JAR
• env.ANT_HOME
• env.PLAYERGLOBAL_HOME
• antの実行 (ant main copy.sdk) = apache Flex + Falcon 完成

• 特産の「もっさみな」第43回「Apache Flex – Falcon コンパイ
ラ（ビルド）」の巻
• http://mossamina.blog99.fc2.com/blog-entry-49.html


FalconJSのコンパイル
• checkoutしたらant実行でOK
• ディレクトリ構成は重要
– FALCON_HOME
– FLEX_HOME
– デフォルト指定がsvnのパスを想定


asjs
• Alex Haruiさんの構想とプロトタイプ
• Non GoalsとGoalsの設定
• https://cwiki.apache.org/FLEX/alexs-flexjs-
prototype.html
•


Publisher
• Falcon JSで生成したjsファイルを
closureToolsでhtml/js-framework生成
• ant -Dapp.name=<app.name>
• JS-Frameworkをgoogle closureに指定して
生成したjsが対象
• 今は..まだ
• http://svn.apache.org/repos/asf/incubator/
flex/asjs/trunk/asjs/

いまできること

• ASファイルからjsファイルの出力。
• mxmljsc Main.as -output Main.js


いま(は)できないこと

• mxmlからのコンパイル

• size 0のファイルが出来上がる。

• JS-frameworkの選択

• option指定しても変化なし


js関連のオプション
-js-builtin <name>
-js-closure-compilation-level <value>
-js-closure-create-source-map <value>
-js-closure-externs [path-element] [...]
-js-closure-formatting <value>
-js-closure-js [path-element] [...]
-js-extend-dom <value>
-js-framework <name>
-js-generate-test-case <value>
-js-isolated <value>
-js-keep-generated-javascript <value>
-js-main <name>
-js-no-exports <value>
-js-no-timestamps <value>
-js-warn-class-init <value>
-js-warn-performance-loss <value>
-js-warn-runtime-name-lookup <value>


いまいち
• 日本語含むasを変換するとエラーが起こ
る。(@tokufxug)


Tips
• Mac OS X on Java 7
• CommandLineを変更(FLEX-33290)

• swcdepends
• ant taskにtarget追加してfalcon-
swcdepends.jarを生成

• targetname="dist"
• build.xmlのﬂex-tasks.jarのパスを修正


アプリケーションの
展開


• Windows Store
• BrightCove AppCloud
• PhoneGap
• Adobe DPS

Windows Storeへの展開

http://bit.ly/TOUjzD

BrightcoveのAppCLOUD


Digital Publishing Suiteでの展開

ContentViewer経
InDesignで作成し
由でアプリ展開
HTMLをリンク


まとめ
• Falconからの派生でFalconJS登場
• 今はAS->JSのみ可能
• 既存FlexAppの変換はゴールではないかも
• 別のツールという選択肢
– Dart/Hexe/CoffeeScript/Jangarooなどなど


さあどうしますか？


こうなるかも...


そのリスクをわかった
上で選ぶことは..


それはあなたの
自由です


Happy cross-compiling!


contact:
@nod_japan_19xx


Falconjsの始め方 (share)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Falconjsの始め方 (share)

Similar a Falconjsの始め方 (share) (20)

Último

Último (9)

Falconjsの始め方 (share)