なぜかFlex - 遠い海

初めてのFlex

もともとはこの記事。
イマドキのIDE事情（オープンソースのFlash開発環境）
http://journal.mycom.co.jp/column/ide/018/index.html

.NET開発なんてやってると、Flashな世界がものすごく遠い。
正直よくわからん。
でも、.NetでWindowsFormばかりやってると、自分が取り残されていくような気がする。
いまどきwindowsアプリなんてはやんないでしょ？（極端に言えば）
で、触って見るか、と思ったのですよ。

- - - - -

プログラム暦でいえば8年。もう8年か。

●やったことのあること
Java、C、VB、VB.NET、C#、C++、CommonLisp、Scheme、SQL、XSLT、HTML、Haskell（ちょっとだけ）、VBScript、JavaScript
昔Webアプリやってた。主にASPとJava（JSP＋Servlet、J2EEも少しやってた）
そのころはAjaxなんて言葉はなくて、JavaScriptはそんなにはやってなかったんだけど、http://www.tokumaru.org/でJavaScriptの言語としての面白さをしった。が、周りには放置されてた過去がある。
ここ4、5年.Net開発にまわされてて仕事ではC#ばかり。正直飽きてきたので、Lispで遊ぶ。

●前提知識
Flashは聞いたことある程度。言語はActionScriptで≒JavaScriptらしい、と聞いている。
Flexはなんのことだかよくわかっていない。
以前FlexだかFlashで遊ぼうかと思ったときかなんかにJDKかJREのインストールを求められた記憶がある。
なんでJavaがいるのかよくわからない。

★「FlashDevelop」のインストール
「イマドキのIDE事情」で一番最初に乗ってたから、FlashDevelopを入れてみた。
.Netのランタイムは入ってるし一番最初に乗ってんのはきっと一番いいからだ。

http://www.flashdevelop.org/community/
ここからFlashDevelop 3.0.0 Beta4 releasedを落とす。
Releasesにあるんだけど最初どこからダウンロードすればいいのかわかんなかったのは内緒。

インストールするとJava入れろだとか、FlashPlayer9入れろだとかいろいろ言われた。

★「FlashDevelop」で開発
インストールはすぐにすんだ。
なにはともあれHalloWorldでも作ろう。とNewProjectを選ぶ。
がプロジェクトの種類が多すぎて何が何やらわからん。

新しい方がきっといいんだろうから、ActionScript3のどれかにするとして、どれ選べばいいのか？？
適当に選んでF5（testmove）してみても、何も画面がでない。
これはいかん。Googleで調べる。
あちこちウロウロした後で↓を見つける
http://weekbuild.sakura.ne.jp/trac/wiki/as3/FlashDevelop3

SDKおとさなアカンのか。SDK落とすにはAdobeに登録せなアカンのか。
メンドくさ・・・。と思ったけど登録してダウンロード。
登録するときに郵便番号から住所のチェックをしててビビる。このチェックって意味あんのか？
で、上記サイトのとおりに設定。

改めて、newProjectを選ぶんだけど、やっぱりどうしたらいいのかわからない。
が、ここで光明が。
Flex２プロジェクトを作成すると、簡単なサンプルを含んだプロジェクトが出てきた！

動かすと、計算するヤツ。
F5で実行したらちゃんと動くよー。まだ一行もプログラムを書いてないけど感動。
コンパイルもされてswfができてる。これがFlashのファイルなのだろう。
これをHtmlに貼り付ける。。。なんて書けばいいんだっけ？？
これもGoogleか。
なんかこれでいいみたい。場所は忘れたけどたしかAdobeのサイトで見つけた。

<embed src="HelloWorld.swf" play="true" loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
</embed>

で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<embed src="HelloWorld.swf" play="true" loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
</embed>
</object>
</body>
</html>

な感じのHTMLを用意してブラウザでみるとちゃんと動いてる。
いいねー。楽しいね。

★IDEやめ
ふむ。一通り動かしかたはわかった。「FlashDevelop」からだけだけど。
IDEないと何もできない開発者ってヤだな・・・（偏見？）。第一、家のメインマシンはUbuntuだから「FlashDevelop」は動かんぞ。
というわけでコンソールだけでの開発を目指す。

参考にしたのはここ
http://d.hatena.ne.jp/nemu90kWw/20060716/p1

ともかくもう一度、こんどはコマンドとMeadowでHelloWorldを作る

★HelloWorld
まずHelloWorld.as

import mx.controls.Alert;

// public var showMessage = function(name:String)
// {
//     Alert.show("hello " + name,"hello");
// }

// public var showMessage:Number = function(name:String)
// {
//     Alert.show("hello " + name,"hello");
//     return 0;
// }

public function showMessage(name:String):void
{
    Alert.show("Hello " + name,"hello");
}
>||
>|javascript|
import mx.controls.Alert;

しないとAlertがでないのを知らず、ダイアログがでないと悩む。

あと、JavaScriptで

xxx = function(){...}

みたいな書き方できなかったっけ？
ActionScriptはダメなの？

で、HelloWorld.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script source="HelloWorld.as" />
        <mx:TextInput id="txt1" />
        <mx:Button id="btn" label="execute" click="showMessage(txt1.text);" />
</mx:Application>

こちらは特に問題なし。

次はHelloWorld-config.xml

<flex-config>
  <output>bin/HelloWorld.swf</output>
  <default-size>
    <width>400</width>
    <height>300</height>
  </default-size>
  <default-frame-rate>60</default-frame-rate>
  <default-background-color>0x000000</default-background-color>
</flex-config>

これも特に問題なし。

で、コンパイルはFlexSDKを展開したディレクトリのbinにあるmxmlcをたたく。

x:\xxx\bin>mxmlc "x:\xxx\HelloWorld.mxml

mxmlファイルを渡せばよろしくやってくれるみたい。

で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<embed src="HelloWorld.swf" play="true" loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
</embed>
</object>
</body>
</html>

から呼び出すとちゃんと呼び出せた。ふー。

リンク
http://www.atmarkit.co.jp/fwcr/rensai/flex201/01.html
http://d.hatena.ne.jp/nemu90kWw/20060716/p1
http://www.thinkit.co.jp/free/article/0611/11/1/
http://clouder.jp/yoshiki/mt/archives/000839.html
http://itpro.nikkeibp.co.jp/article/COLUMN/20061012/250481/
http://livedocs.adobe.com/flex/2_jp/langref/index.html
http://ikutirin.jp.land.to/blog/flex2/