ようやくActionScript3を始める事となりました。Flexと、その開発環境など。
2008年05月01日 18時54分
Flex…何年か前にOpenLaszloをかじっていた時、ちょろっと目にしたくらいで、あまり興味がありませんでした。でも最近、ActionScript3の記事やコンポーネントのサンプルとか見て、ちょっといいな～なんて思ったので、自分もFlexをやってみることに。
正直、遅すぎる感もありますけど(汗)。もし挫折しないでいけたなら、SWFView4RSSのFlex版でも作ってみたいな。
できれば今まで使ってきて慣れている、AMESと同じような感じで開発がしたいですね。
Flexで検索してみると“Flex SDK”が絶対必要ってことなので、まずはこれを取ってこなければ。なんと、いつの間にかオープンソース(MPL)になっていました。
また、ファイルも2種類あるので今回は、オープンソースなものだけで構成されている“Open Source Flex SDK”をダウンロードしてきました。
SDKと名のつくものを使うのはDirectX以来ですが、名前の通り、開発に必要なものがまとまっているようですね。
さっそく解凍してみると、中にはファイルがたくさん。しかし何はともあれ、まずはコンパイラです。どうやらbinフォルダにあるmxmlc.exeがそのようです。
まずはヘルプでも出してみるか～とコマンドラインからやってみるも、“JREがありません”的なエラーがでてきてしまいました。Eclipseに内蔵されているAntを使って呼び出しても同じです。
調べてみるとmxmlc.exeはJavaで作られている(？)ので、動かすにはJavaのランタイムが必要とのこと。
これは事件です。とても個人的な事なんですが自分は、極力インストールはしたくない、持ち運びアプリ大好きなタイプの人間です。AMESでは全部のツールが持ち運び可能なんですが…む、困りました。
でも始める前からこんな事で立ち止まっていてアホだな～という感もあるし(笑)。そんなこんなでリファレンスを眺めていると、一筋の光明なのか、libフォルダの中にはJava版(？)のMXMLCであるmxmlc.jarがありました。
というのは、EclipseもJREが必要なのですが、本体と同じ場所にjreと名づけたフォルダを置き、そこにランタイムを持ってきてやればEclipseはそれを使って起動するので、これなら完全に単体で動いて持ち運びOK、という自分にとってはとても嬉しい機能があるんです。
なので、Eclipseが使っているJREのjavaコマンドで、このmxmlc.jarを呼び出せば、わざわざJREをインストールしてなくても動くはずです。さっそくAntでやってみました。
<target name="mxmlc-jar">
<exec executable="/bin/eclipse3.2/jre/bin/javaw.exe">
<arg line="
-jar /usr/eclipse/share/flash/flex/flex_sdk_3.0.0.477_mpl/lib/mxmlc.jar
" />
</exec>
</target>さっきのようなエラーはでないので問題はないようです。それからAntには、Javaを起動するための専用の要素もあったので、これもやってみました。
<target name="mxmlc-jar-ant">
<java jar="/usr/eclipse/share/flash/flex/flex_sdk_3.0.0.477_mpl/lib/mxmlc.jar" fork="true">
</java>
</target>自分の環境ではfork属性をtrueにしないと怒られますが、こっちも大丈夫です。
なんというか、JavaやFlexに慣れている人なら当たり前の事なのかもしれませんが、これで一応、Flexの開発環境が持ち運び可能だということが分かったので、自分にとってはありがたい事です。
次はリファレンスのサンプルでも入れてみようかな。
2008年05月01日 18時54分
前回、コンパイラが動いたので実際にコンパイルできるか、リファレンスにあったMXMLのサンプルをやってみます。
日本語も大丈夫なのか確認するため、表示される文字を変更しました。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Application" width="240" height="240">
<mx:Label text="Flexにようこそ！" mouseDownEffect="WipeRight" />
</mx:Panel>
</mx:Application>frameworksフォルダにあったflex-config.xmlを少し修正して使いました。オリジナルはパス関連の要素が相対パスになっていたので、コンパイル時に「そのファイル見つかりません」的なエラーがでてしまいます。なので全部絶対パスに置き換えましたが、もっと正しいやり方があるような気もします(苦笑)。あとは、一応actionscript-file-encoding要素をUTF-8にしたり、benchmarkなどのレポート系要素を入れてみました。
サイズやフレームレートなどの、よく変更しそうなオプションは引数で渡すことにしました。
<property name="dirSrc" value="${basedir}/src" />
<property name="dirDst" value="${basedir}/bin" />
<property name="pathMXMLC" value="${dirShare}/flash/flex/flex_sdk_3.0.0.477_mpl/lib/mxmlc.jar" />
<property name="optMXMLC" value="
-default-size=320,240
-default-frame-rate=15
-default-background-color=0x000000
-incremental=false
" />
<target name="compile">
<java jar="${pathMXMLC}" fork="true">
<arg line="
-load-config=${basedir}/flex-config.xml
-output=${dirDst}/${ant.project.name}.swf
${optMXMLC}
${dirSrc}/Application.mxml
" />
</java>
</target>エラーとその修正を何回か繰り返した後、コンパイルは成功。そしてHTMLに埋め込んで表示してみると…あれ？ちゃんと表示されるものの、サイズが違っているのかスクロールバーが出てきてしまいました。
オプションの-default-size=320,240にあわせて、HTMLも同じにしたんですが違うようです。
とはいえ、とりあえず動くところまでいって嬉しいので、今回はこれでOKにします(汗笑)。
2008年05月29日 20時00分
前回、FlexのMXMLに触れてみたので今回は、ActionScript3(以下AS3)もできるか試してみることにしました。検索すると記事がたくさんでてくるので安心です(笑)。
やっぱり最初は通過儀礼の文字表示からですね。上記リンク先のサンプルを参考に、日本語も表示できるかやってみました。
package{
import flash.display. * ;
import flash.text. * ;
//
public class Application extends Sprite{
//
public function Application() {
var self : Sprite = this;
//
var textField : TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.text = "これはActionScript3ですよ～";
self.addChild(textField);
}
}
}パッと見、MTASCとswfmillを使ったNatural Entry Pointの書き方にどことなく似ています。ちなみにthisを変数にとっているのは、MTASC開発の頃の名残というか癖です(苦笑)。
目新しいものといえばMovieClipの代わりに使われているSprite。これはタイムライン等の機能がない分スリムで、スクリプトがメインの開発にはSpriteのほうが向いているようです。
それからcreateTextFieldではなく、newで作ってaddChildで表示するというのもActionScript2(以下AS2)にはなかったですが、深度を指定しなくてもいいのは非常にありがたいですね。
コンパイラへ渡すオプションについては、MXMLを試した時のMXMLファイルの部分を単にASファイルへ置き換えただけで変更はありません。
コンパイルも問題なく終わり、できあがったSWFファイルは日本語も表示できているので、どうやらうまくいったようです。
でもよかった～。書き方の細かな違いはありますが、AS2の時とやり方が変わりすぎてたらどうしようかと思いました。これなら続けられそうです。
2008年06月03日 19時05分
MXMLやAS3をほんの少しだけ触れてみて、なんとなく自分でもできそうかなと感じました。次はデバッグをどうするかです。
検索してみると、AS3でもtrace関数が使えるのですが、デバッグ用のFlashPlayerのみログファイルに吐き出すことができるらしく、これがないとダメなようです。でも“Open Source Flex SDK”の中には入ってませんでした。
ダウンロードサイトにあった追加パッケージの“Adobe Add-ons”には入ってたので試しに使ってみると、確かにファイルへ書き出されることを確認。
ログファイルを便利に表示してくれるツールもあるみたいですが、む…できれば“Open Source Flex SDK”のみの環境でいきたいです。というわけで内蔵のtrace関数は断念することに。
さらに検索していると内蔵のtrace関数以外にも方法は何種類かあって、個人的にはFirefoxのFirebugを使うのが一番楽かな～と思っていたんですが一応、OSFlashのプロジェクトも覗いてみると…なんかありました。
関数の出力を専用ビューアで表示するタイプで、ビューアはEXE、SWF形式が用意されています。画面を見る限り、デバッグ用FlashPlayerが吐き出すログファイルも表示できそうです。
専用の関数は色々あって、trace関数(日本語表示OK)はもちろん、ダンプ表示、オブジェクトの中をツリー表示、FPS計測、ストップウォッチなど。また、disable関数で出力を切ることもできます。
このAlcon、AS2の時に使っていたLuminicBoxより強力そうなので、これは思わぬ収穫でした。探せばもっと良いのがあるかもしれませんが、とりあえずAS3のデバッグにはAlconを使っていきます。
あと自分はこういった頻繁に使うライブラリは別の場所にまとめています。こんな時は、MXMLCへ-source-path+=でパスを追加しないとダメでした。MTASCの-cpと同じ意味合いのオプションでしょうか。
2008年08月19日 20時21分
最近、Eclipseを3.2から3.3Europaへバージョンアップました。
現在なら3.4Ganymedeもでていたのですが、試しに使ってみたところ、環境のせいか分かりませんが更新作業でつまづいてしまい、結局3.3で落ち着くことに(苦笑)。
それからいつもどおりPleiadesやEPIC等のプラグインをいれ、ASDTもいれようとサイトにアクセスしたところ、“AXDT”なる、ASDTのAS3対応版(？)がでていました。
今まではAS3でもASDTの色付け機能を大丈夫そうなので使っていました。とはいえ、正式にAS3対応したとなると使ってみたくなります。
さっそくいれてみようとするも別のプラグインが必要らしく、依存関係を解消するのに手こずりました。
一応動くようになりましたけど、Eclipseって、スキルの無い自分には意味不明なエラーがよく出るので、環境ができあがったら、なるだけそっとしておきたいソフトです(笑)。
現時点でのAXDTは0.0.4ベータ版、まだこれからって感じなので、この先ASDTみたいに成長していってほしいですね。たぶんASDTと同じように、自分は色付け機能しか使わなさそうですけど(汗笑)。
2008年08月19日 20時52分
AXDTをいれてから2週間くらいたち、その存在を忘れかけていた頃。自分はいつものようにボケェ～っとネットの海をさまよっていると、ある一つのページが。
AIRアプリ開発用Eclipseプラグイン。自分はFlexの環境ができたばかりで、AIRなんてぜんぜん分からないのですが、機能のところを見ると自分にも使えそうなものがあります。
# WYSIWYGなMXMLエディタを搭載 # 強調表示、簡単なコード補完機能を備えたActionScriptエディタhttp://sourceforge.jp/forum/forum.php?forum_id=15304より引用、2008-08-19T16:28:00+09:00取得。
さっそくいれて、以前作ったサンプルを表示してみると、特に問題もなく良い感じです。
まだ表示してみただけですが、これは思わぬ収穫でした。他にも色々機能があるようですが、これからはコードの色付けに“AIR GEAR”を使うことにします。
2008年09月15日 21時36分
あれからちょこちょこやっていたのですが、MXMLファイルにはmx:Script要素でActionScriptを使えることがわかったので試してみました。
各コンポーネントのイベント発生時に関数を呼んだりid属性で目印をつけておけば、ActionScript側でそこのプロパティ等を変更できました…ってか、できなきゃそもそも意味ないか(笑)。
これは数年前にかじっていたことのあるOpenLaszloと同じような感じですね。なんというか…OpenLaszloもこのFlexも表面と中身を分けるのは自分の場合苦手というか、逆に面倒に感じてしまいます(苦笑)。
でもFlexの場合、付属のコンポーネントを使わなければ今まで通りActionScript3だけで作れるので、そんなに問題でもないのかもしれません。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain" applicationComplete="app_complete();" error="app_error();"
>
<mx:Script source="Application.as" />
<mx:Panel id="hoge_panel" title="Application" width="240" height="240">
<mx:Label id="hoge_label" mouseDownEffect="WipeRight" text="ほげほげ" />
</mx:Panel>
</mx:Application>import com.hexagonstar.util.debug. * ;
//
public function app_complete() : void{
//Debug.disable();
Debug.clear();
//
Debug.trace("app_complete");
//
hoge_label.text += "ぴよぴよ";
hoge_panel.width = 120;
}
public function app_error() : void{
Debug.trace("app_error");
}2008年09月27日 06時42分
Flexの開発環境も一応でき、MXMLとAS3も動くことがわかったので、 当初の目的であるFlex版SWFView4RSSをそろそろ作り始められるかな～と感じていたある日。 なにげなくmxmlcのオプション一覧を眺めていると、そこに気になるオプションを見つけます。
これをつけることでSWFファイル生成時、途中のASファイルを残しておいてくれるようです。 ふと、MXMLファイルで書いたやつは一体中で何をやっているのか、単純な好奇心からさっそく使ってみました。 使うのは簡単で、今までのコマンドにこのオプションを追加しただけです。
コンパイルするMXMLファイルは、一番最初に作った、文字を表示するだけのものでやりました。 特に問題なくコンパイルが終わり見てみると、ASファイルは40個以上(！)も生成されています。
それで色々中を見ていたのですが、今の自分にはよく分かりません(苦笑)。 が、「む、ひょっとするとこのコードを使えばMXMLを使わずにコンポーネントを使えるようになるのでは？」 といった思いが芽生えてきました。
それから、あーだこーだしながら分からないなりに重要そうな部分をくっつけて、 やっとコンパイルは通るようになったのですが、 実行してみても何も表示されません…自分にスキルがないので当然です(汗笑)。
そこで、もしかしたら他の人も同じ事を考えているかもしれないと思い検索してみると、 やっぱりそういう記事がチラホラあって中には参考になるものもありました。
記事自体は少し前のものですが、 どうやらコンポーネントのスタイルを設定することが重要みたいです。 上記サイトにあるリンク先のサンプルを試してみると、 確かにApplicationとImageのコンポーネントが動きました。
でもコンポーネントごとにsetStyle関数を使うのが面倒すぎますね。 さらに検索し、いろいろ工夫して対処されている記事もありました。
再度、生成されたASファイルを見てみると、 CSSStyleDeclarationクラスのdefaultFactoryプロパティにある匿名関数の中で、 各スタイルのプロパティに値を入れていることに気づきます。
そこで試しに、サンプルにあるsetStyle関数のかわりにdefaultFactoryプロパティを使って、スタイルをセットしてみると同じように動くことを確認。
ここで「ひょっとしてdefaultFactoryがnullじゃなければ何もセットしなくても動くのでは？」という面倒くさがりやの思考パターンが(笑)。 実際に、中身が空の匿名関数をdefaultFactoryに指定してサンプルを動かしてみると…あっけなく動きました。
これは楽だと思い、調子に乗って今度はButtonクラスで試してみるも結果はダメ(笑)。 どうやら、たまたまApplicationとImageが空でもよかっただけのようです…残念。
困りました。でもコンポーネントごとに必要なスタイルを手動でやるのは絶対にイヤです。 素直にMXML使えばいいのに…でもここまでくると、 もう自分なりに何とかしてみないと気が済まなくなってきました(苦笑)。
そんなこんなでムキになって、リファレンスのスタイル関連を眺めていると。
どうやらコンポーネントが普段利用するスタイルシートが用意されているようです。 さっそくframework.swcのdefaults.cssを見てみると、確かに生成されたASファイルで使われているスタイル情報と同じです。 CSSなのでそのまま使うことはできませんが、コンポーネントごとに必要なスタイルがわかっただけでも収穫です。
これを読み込む関数があるのかなと探してみましたが…どうもなさそうです。 しかし、MXMLにはmx:Style要素があることを思い出し、 mx:Style要素のsource属性にdefaults.cssを指定して、生成されるASファイルがどうなっているのか確認してみることに。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style source="defaults.css" />
</mx:Application>生成されたASファイルを見ると、CSSファイルを関数で読み込んでいるような部分はなく、 mxmlcが展開しているのか、CSSStyleDeclarationクラスのfactoryプロパティにある匿名関数内で個別にスタイルがセットされていました。
他にもmx_internal名前空間があったり、Embedメタタグでframework.swcのAssets.swfを使っていたり、 と今の自分には敷居が高そうですが、すべてのコンポーネントスタイルが記述されているので参考になります。
さらにスタイル絡みで検索していると。
上記リンク先で触れられている“Runtime CSS”なるものが、なんか期待できそうです。 もしかしたらこれで一挙解決かもと思ったので、 さっそくframework.swcのdefaults.cssをmxmlcでコンパイル、 それをStyleManager.loadStyleDeclarationsで読み込んでみるもダメです。
それから色々とやりましたが結局、 コンポーネントのスタイルを簡単にセットするような方法は、 自分には見つけられませんでした。
とりあえず、mx:Style要素を使ったMXMLから生成したASファイルを参考にして、 スタイルをセットするだけのクラスを作り、コンポーネント使用前にそれを呼び出すようにしました。 これならButtonも問題なく表示されますが、なんだか少し不安です(汗笑)。
こんな感じで、ちょっとした好奇心から深みにはまることは自分にはよくあります(笑)。 とはいえ今回は、RuntimeCSSだとか収穫もあったので結果的に、やって良かったですね。
途中、オープンソースでコンポーネント群を自作されているかたのページもありました。
2008年10月05日 01時45分
ある日、いつものごとくネットの海を漂っていたところ、意外な収穫がありました。
自分は英語がわからないのですが、この記事を機械翻訳にかけて脳内補完してみると。
このサイト主である Mark Walters さん、このかたもAS2とLuminicBox.Log(以下、LB.Log)の組み合わせを使われていたようですが、だんだんとAS3で作ることが多くなってきて、やっぱりLB.LogがAS3にも必要だ、ということで対応版を作ってしまった。
と、わかるのは大まかな内容ですが(苦笑)、これはとても素晴らしいことです。心の中で「グッジョブ！」と叫びました。
すでにAS3のロガーはAlconがあって、機能もLB.Logより多いです。でも今まで使ってきて慣れ親しんでいるものが、AS3で使えるようになったのは素直に嬉しいですね。
2014年05月25日 01時26分
ActionScript全然さわってない(汗)。でも最近PexJSのことを知って、またちょっとやってみたくなりました。
マイナビニュース(@mn_all)「ActionScript 20位入り - 5月プログラミング言語人気」http://news.mynavi.jp/news/2014/05/09/031/ @dotHTML5 さん経由。