Emacs 上につくる AS3 の開発環境まとめ

AS3 対応の「actionscript-mode」を導入したのでメモを残しておこうと思ったら
以前書いたものだとばかり思っていた「Flex SDK」や「rascut」の記事が見当たらないので
ついでにそれらについてもまとめて書いておく。
あとデバッグに便利な「log 関数」についても書いておく。
これで Emacs(Emacsen) 上に AS3 の開発環境が一通り揃うはず。

Flex SDK 3 の導入

Download Flex 3 - Flex SDK - Confluenceから「Adobe Flex SDK」をダウンロードする。
- バージョンは「3.0.0.477」で、「79MB」のやつ。
解凍してできたディレクトリを「C:\flex_sdk_3」に置く。
環境変数「PATH」に「C:\flex_sdk_3\bin」を追加する。
- これをやらないと後述する「rascut」でコンパイルするときに「chr」が「NoMethodError」になる。
拡張子「.swf」を「FlashPlayer.exe」に関連付ける。
- パスは「C:\flex_sdk_3\runtimes\player\win\FlashPlayer.exe」
「C:\flex_sdk_3\bin\jvm.config」を開き、「java.args=」の末尾に「-Duser.language=en」を追加する。
- これをやらないと後述する「rascut」がうまく動かない。メッセージが日本語で出力されることが原因らしい。

# Arguments to VM

java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en

# Environment variables we care about, whitespace-separated

rascut の導入

「gem install rascut --include-dependencies」を実行する。これで一発。
- Ruby が入ってない場合はRubyForge: One-Click Rubyをインストールするのが早い。

actionscript-mode for AS3 の導入

Casual Game Development ? Blog Archive ? Emacs mode for AS3から「actionscript-mode.el」と「as-config.el」をダウンロードする。
ここから「cc-mode」の「5.28」をダウンロードする。
- 「actionscript-mode.el」が古い「cc-mode」に依存しているため必要。
「actionscript-mode.el」に以下のように「load-path に cc-mode のディレクトリを追加する設定」を加える。
- 40 行目付近の「(require 'cc-mode)」の直前に書くのが分かりやすいのでお勧め。

(require 'font-lock)
(setq load-path (cons (expand-file-name "~/site-lisp/cc-mode-5.28/") load-path))
(require 'cc-mode)
(eval-when-compile
  (require 'regexp-opt))

「as-config.el」の先頭行にある「(require as-profiler)」をコメントアウトする。

;; (require 'as-profiler)

(defvar *working-directory* (concat (getenv "PWD") "/")
	"String. The directory where we launched emacs and from which all of our files will be located.")

こんな感じで色付けされる。この配色だと黒背景の方が見やすいかもなぁ。

log 関数の導入

log 関数についてはlog関数を使ってFireBugでデバッグする - gan2 の Ruby 勉強日記でも書いたのだけど
そのときは「Flex SDK 2」を使っていたので今回新しく書き直す。

WEB+DB PRESS Vol.41：サポートページ｜gihyo.jp … 技術評論社から「log 関数」をダウンロードする。
解凍してできたディレクトリを「C:\flex_sdk_3\frameworks\log」に置く。
「C:\flex_sdk_3\frameworks\flex-config.xml」を開き、「source-path」を以下のように編集する。

編集前

      <!--
      <source-path>
         <path-element>string</path-element>
      </source-path>
      -->

編集後

      <source-path>
         <path-element>log</path-element>
      </source-path>

使ってみる

以下のコードを rascut にサーバオプションをつけて実行する。

> rascut -s HelloWorld.as

HelloWorld.as

package {
  import flash.display.*;
  import flash.text.*;

  public class HelloWorld extends Sprite {
    public function HelloWorld() {
      var textField:TextField = new TextField();
      textField.text = "Hello World!";
      addChild(textField);
      log("hoge");
      log(textField.text);
    }
  }
}

http://localhost:3001/ にアクセスして Firebug の Console を見ると
log 関数の出力が確認できる。