July 2007

Flex SDK は

1. 無料 で使えて、
2. 馴染みのテキストエディタを使ってActionScipt の編集ができて
3. .swf か .air がコンパイル出来る

というよいものです。２週間ほど触ってみて理解した事などをまとめてみます。

大事なのは以下の三点。

1. mxmlc は .as を .swf へ変換する、（java で書かかれた）コンパイラ
   • その中で、画面への描画をしたいなら、DisplayObject を extends したクラスを作る必要がある。
   • これは予想だけれども、Display Object と全く同じ signature をもつ別のクラスを作れば、Display Object を extends する必要はないと思う。そのかわり Display Object Container やらいろいろ自分で実装せねばならないけれども。でもこのクラス図が提供する世界観がきらいとか、それではどうにもならない、という人が新しい世界を作れる、というのはすばらしい。
2. amxmlc は、mxmlc に Air 用のプリプロセスを含めたコンパイラ。Air 用のプリプロセス、とは
   • いくつかの Air 専用メタデータ（アノテーション）を ActionScript 3 の文法内で再現できるようにすること（マクロ展開みたいなもの。でも java のアノテーションも同じように、コンパイル前のプリプロセスでやってるんだよね？）
   • mxml を .as ファイルへ変換する事
3. 以上の事より、amxmlc が展開する .mxml という xml ファイルは無名パッケージで同名の public class に変換される、ということ。

例えば、Hoge.mxml というファイルで、以下のような内容だったとする

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  backgroundColor="0xFFCC00"
  >
  <mx:Script source="bootstrap.as"/> 
</mx:WindowedApplication> 

これは、

package
{
  import mx.core.WindowedApplication
  public class Hoge extends WindowedApplication
  {
    public var layout:String = "absolute";
    public var backgroundColor:uint = "0xFFCC00";
    /* bootstrap.as の内容がここに挿入される */
    public function Hoge ():void 
    {
    }
  }
}

という内容の Hoge.as ファイルが作成される事。

当初の目的

僕がしたかったのは、mxml を作る人（DreamWeaver なり Flex Builder なり、何らかの Visual Editing Software を使う人。）と、.as のコードを書く人を分けたかった。で、そのために一番簡単なのは、.mxml の root content （上の例で云えば mx:WindowedApplication ）に何らかの event トリガを仕込む事。creationComplete を使うのが一般的かしらん。

でも、それだと、コード側が全権掌握できない。というか、creationComplete の前に何かしたい時どうする、とか、creationComplete で発動させたい関数の名前が変わる時いちいち mxml 作る人に話さなきゃいけないとか、そもそも静的にはアクセスできない関数をトリガしたい、とかいろいろ問題がある。で、どうするのか考えて、僕なりに出した結論が以下のような bootstrap.as で、上の Hoge.mxml から呼び出されている内容です。

// this code works as a bootstrap
import mx.core.Application;
import mx.events.FlexEvent;
import mx.controls.Alert;

public var myvar:int = 0;

public function initilizer (ev:Event):void
{
  //trace("init: Start"); 
  Alert.show(this);
  trace(this.myvar);
  //trace("init: End");
}

Shell.shell.addEventListener(InvokeEvent.INVOKE, function(ev:InvokeEvent):void {
  // because Application.application is not set yet this moment.
  Application.application.addEventListener(FlexEvent.CREATION_COMPLETE, Application.application.initilizer);
});

一番大きなポイントは、イヴェントの発動が２段構えなところでしょうか。何故こんな面倒な事をしているかというと、上で一度説明していますが、amxmlc がコンパイルする時、この bootstrap.as は変換された Hoge.as の一部に挿入されるだけ、だからなんですね。もし

• Application.application.addEventListener の行を一番外側に持ってこようとすると動かない→実行時にまだその Object は出来てないから。
• Application.application.addEventListener でリスンさせている関数が Application.application.initilizer という見慣れない完全修飾型になっているのは、呼び出し元によって、default の名前空間（端的に言えば this ）が変わるから。これは Javascript をやってる人にはなじみが深いと思うのだけれど、instance method 内で this を使うと、普段はちゃんと動くのだけれど、Event からトリガされると this が切り替わってしまって動かないとか。それと同じ。
• Shell.shell の InvokeEvent.INVOKE には、closure をあてているのは、意味のない関数に名前のあてるが癪だから。

これがわかるまで、グローバルに配置しておきたい変数宣言を何処におくかとか、名前空間とか、めちゃくちゃ悩みました。もう遅いので後で、自分が使うプロトタイプなどをアップしておきます。

なんで元ルームメイト（未だにメールをやり取りしたり、ご飯食べに行ったりしますが、社会的には何の関係もないよ!?）とか、昔好きだった人（かれこれ４年近くメールのやり取りすらないよ？？）とか、People You May Know にでてくんの!? どんな魔法使いですか!?

『最近LinkedInがまた熱くなってきた』 on On Off and Beyondで、そうらしい事は聞いていたけれど、あまりに衝撃を受けたので、無内容ですがエントリしてみました。

………

よくよく考えると、もしかして名前の検索履歴を使ってんのかな？その履歴だけじゃ膨大な名前がマッチングしそうだけど、それらと地域やら、年代やらをマッチングさせれば不可能でもないかもね。それだったら mixi でもやればできそうだけど、むしろ mixi の方が、その、元カノ／カレな繋がりばかり push されそうで、それはそれは楽しそうかも…

オールドスクール開発で、print debug はかかせません。そして php で育った僕には、print_r みたいな、データ構造ダンプ関数がかかせません。というわけで作りました。

使い方

import Utils;


trace( Utils.print_r( [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ) );

などとすると、

[trace] ---------------------------------------------------------------------
[trace] :Array =>
[trace]   [0]:int => 0
[trace]   [1]:int => 1
[trace]   [2]:int => 2
[trace]   [3]:int => 3
[trace]   [4]:int => 4
[trace]   [5]:int => 5
[trace]   [6]:int => 6
[trace]   [7]:int => 7
[trace]   [8]:int => 8
[trace]   [9]:int => 9
[trace] ---------------------------------------------------------------------

と、帰ってきます。他に toCamelCase / capitalize ができます。

既存の問題

• コンストラクタ、イヴェントそれにスコープチェインなどは、まずどうやって表示するのがわかりやすいのか、わからない。取得の方法はわかっていて、ソースを見ればだいたいわかると思います。

コード

package
{
  import flash.utils.describeType;

  public class Utils
  {

    public static function print_r (o:*, name:String = "", recur:int = 0):String 
    {
      var result:String = "";
      var type:String   = typeof(o);
      var desc:XML      = describeType(o);

      // meta data of object
      if (recur == 0)
      {
        result += "---------------------------------------------------------------------\n";
      }
      else
      {
        for (var i:int = 0; i < recur; ++i)
        {
          result += "  ";
        }
      }
      if (name)
      {
        result += '[' + name + ']';
      }
      result += ':' + desc.@name + ' => ';

      // content of object
      switch (type)
      {
        case "boolean":
        case "number":
        case "string":
          result += String(o);
          break;
        case "xml":
            result += o.toXMLString();
            break;0
        case "object":
          if (desc.@name == "Object" || desc.@name == "Array")
          {
            for (var key:String in o)
            {
              result += "\n";
              result += print_r(o[key], key, (recur + 1));
            }
          }
          else
          {
            var prop:XML;
            //trace("UTIL: " + typeof(o));
            //trace("UTIL: " + desc.toXMLString());
            // -- properties
            for each (prop in desc.variable)
            {
              result += "\n";
              result += print_r(o[prop.@name], prop.@name, (recur + 1));
            }
            // -- methods
            for each (prop in desc.method)
            {
              //trace("UTIL: " + prop.toXMLString());
              result += "\n";
              result += print_r(o[prop.@name], prop.@name, (recur + 1));
            }
            // -- constructor
            //<constructor>
            //  <parameter index="1" type="flash.net::URLRequest" optional="true"/>
            //</constructor>
            // -- inheritance and implements
            //<implementsInterface type="flash.events::IEventDispatcher"/>
            //<extendsClass type="flash.events::EventDispatcher"/>
            //<extendsClass type="Object"/>
            // -- events and others..
            //<metadata name="Event">
            //  <arg key="name" value="httpStatus"/>
            //  <arg key="type" value="flash.events.HTTPStatusEvent"/>
            //</metadata>
          }
          break;
        case "function":
          //trace("UTIL: " + typeof(o));
          //trace("UTIL: " + desc.toXMLString());
          result += String(o);
          break;
      }

      if (recur == 0)
      {
        result += "\n---------------------------------------------------------------------";
      }
      return result;
    }

    public static function toCamelCase (str:String):String 
    {
      var r:String = "";
      var a:Array = str.split(' ');
      for (var s:String in a)
      {
        r += Utils.capitalize(a[s]);
      }
      return r;
    }

    public static function capitalize (str:String):String 
    {
      var r:String = "";
      r += (str.slice(0, 1)).toUpperCase();
      r += str.slice(1);
      return r;
    }

  }
}

毎日酷く疲れているので箇条書きにて。

1. Dreamhost で php.ini を設定する方法 に従って、php.ini を設定。
   • 今回のポイントは、pear 用とその他 PHP ライブラリ用とで、別の includes dir を作った事。
2. 環境変数（.bash_profile や .cshrc とか）を編集する。
   • デフォルトでは /usr/local/bin が含まれているけれど、使うものがなかったので削除。
   • php5 用の pear へ symbolic link を張る。
   • pear の実行ファイルを確認すると、PHP_PEAR_PHP_BIN と PHP_PEAR_INSTALL_DIR という環境変数に意味がありそうな感じがするが、設定するとうまく動かない！
   • 現段階での .bash_profile はこんな感じ

     export PATH="$HOME/bin:/usr/bin:/bin"
     alias mypear="/usr/local/php5/bin/pear"

3. Dreamhost で PEAR ローカルコピーを作る を参考に PEAR のローカルコピーを作る。
   • 普通の pear ではなく、上で設定した mypear を使う。
   • 以前と違い、dreamhost は /tmp への書き込みを禁止したようなので、temp_dir と download_dir を設定しないと動かない。
   • コマンドをまとめると

     mypear config-create /home/USER/php .pearrc
     mypear config-set temp_dir /home/USER/tmp/pear
     mypear config-set download_dir /home/USER/tmp/pear
     mypear install --alldeps PEAR
     mypear channel-discover pear.symfony-project.com
     mypear install symfony/symfony

4. PEAR dir 内にある、実行可能ファイルへ path を通す。現段階では mypear はもう使わなくてよくなったので削除。以下サンプル
   

   $HOME/php/pear:$HOME/bin:/usr/bin:/bin

こんな所でしょうか。

最近 ActionScript をすこし真面目にやるようになりました。もうほとんど Java で、まぁ覚えやすいような、みんなそこまで Java 好きなのか… Design Pattern をやったので、それも近いうちにまとめたいです。

さて、今回は小ネタで。Flash では伝統的に trace という標準出力関数があり、皆よく print debug などに使いまくってるはずですが、最新の Flash Player.app でどうやるかを解説します。

僕の記憶では、昔のバージョンの Debug 版 Flash Player.app （昔は Projector とか呼ばれてたような…）では、フローティングパネルが開いて、そこに出ていたりしたような気がします（嘘かも）。もちろん、Flash CS3 の IDE 内ではそのように動作するし、coding から、build、debug まで一貫した環境で出来て便利そうではあります。

僕のやり方は、Flex SDK を使った OLD SKOOL!! 開発なので（emacs まではまだたどり着いてない）、無料で手に入るものでやりましょう。ActionScript 3 なので最新バージョンの Flash Player が必要です。以下のページよりダウンロード。

Adobe Flash Player - Downloads

種類がありすぎて confusing ですが、Projector content debugger と書いてあるものを platform 毎に選んでください。ちなみに Flex3 SDK に同梱の Flash Player.app は debug ビルドではありません。（っつぅか何処見ても Debug と Release ビルドの違いがわからないのはどうかと思う。）

さてようやく本題です。

そのまま debug ビルドな Flash Player.app を立ち上げて、trace 文を含む swf ファイルを開こうとすると、debug host は何処だとか聞いてきます。どうやら debug 用に別の server daemon が必要なんですね？ Projects Open Source Flash をみるといくつか興味深いプロジェクトがいくつかあります。試しましたけど、なんというか、ソースコードに手を加えなきゃ行けなかったり、それは納得いきません。

で、どうするか。実は Flex3 SDK には fdb という超本格的な debugger が付属しています。これと Flash Player を連携させると、trace を拾えます。というか連携させないと拾えません。しかも致命的に使いにくい点もいくつかあります。以下使い方を。

• fdb の中から、Flash Player を起動させる必要があります。
• fdb が Flash Player.app を起動するためにのファイルパスを渡してやる必要がありますが、fdb は空白を含むパスを理解しません。
• ので、まず最初に Debug built Flash Player.app を適当な名前に rename して、空白文字列を含まないパスに copy します。僕は /usr/local/flash/debug.app とかしました。
• fdb とタイプすると、interactive shell のようなものが立ち上がります。次に run /usr/local/flash/debug.app などとすると、Flash Player が立ち上がるので、その dock アイコンに swf ファイルをドロップするもよし、メニューからファイルを開くもよし。
• 通常の terminal shell から、fdb run /usr/local/flash/debug.app などとすると、Debug built Flash Player が立ち上がる所まで行くので、僕はそれを Shell の Alias に登録しました。
• そしてその開いた Flash Player で swf ファイルを開くと、fdb が最初に実行を休止します。fdb シェルにて continue あるいは c とタイプすると、実行が再開されます。
• fdb シェル上にて help または h とタイプすると、コマンド一覧が表示されます。
• 一度 swf ファイルを Flash Player から閉じると、fdb と Debug built Flash Player のコネクションは途絶えます。というわけで最初からやり直し！なのです。
• また開いたままでしばらくほっとくと、やはりコネクションタイムアウト、とかいって勝手に切られます。

こんな所でしょうか。

最近 TextMate に TextEditor を鞍替えしようかと思っています。Skeleton （App-config.xmlとかの）作成ができて、one key stroke でbuild → debug player の起動まで云ったりしたら便利そう？あぁ、それにしても１行で終わらせるつもりのエントリに１時間もかけてしまった。。

最近 Symfony framework で開発するようになりました。まだ使いこなしていない部分も数多くありますが、とても便利です。

中でも今日は Askeet チュートリアル 4 日目: リファクタリング などで紹介されている routing.yml についてすこし解説しておきたいと思います。

基本

routing.yml はアプリケーション内での URL の規約を設定するファイルです。以下のような特徴があります。

• まず mod_rewrite かまたはそれに準ずるものがホストとなる HTTP Server にインストールされていて、正しく設定されている事が必要です。dev 環境では動いても、prod 環境では動かない、（というか HTTP Server 独自の 404 File Not Found がでる）と言う場合は RewriteBase を設定してうまくいくことが多いようです（Apache の場合）。例えば、httpd.conf の Alias をつかって http://example.com/askeet/ みたいな形で site root でないところを Symfony の web directory につないだ時には、当たり前かもしれませんが RewriteBase の設定が必要です。
• routing.yml 抜きのまっさらな状態では、Symfony の frontend controller は Symfony web root 以下の URL 文字列を /（forward slash）で区切ります。それの奇数番目を key に、偶数番目を value にした array を作って、それを以降のアクションなどに Request Parameters として渡します。
  つまり、もし http://example.com/askeet に Symfony web directory が map してあって、ユーザが http://example.com/askeet/foo/bar/hoge/huga/123/456 とリクエストしてきた場合は、[ foo => bar, hoge => huga, 123 => 456 ] という風なリクエストが出来るわけです。
• デフォルトで、4つ、ルールが書かれています。これらは、したければ自分で変更したってかまいません。そしてこれらには順番には意味があります（順番は後述）。
• Symfony の frontend controller は、引数（つまり directory 区切り記号）の数をかぞえているようです。数とパターンが両方一致した、上から数えて一番最初のルールを適用するようです。
• パターンにおいて、文字列はそのままの一致。:label のように : (colon) で始めると、"label" を key とし、ユーザの送った内容を value とする array をつくり request parameter に保持されます。* (asterisk) はワイルドカードで、それのあるエントリでは、引数の数は関係なく、* 以降はあってもなくても関係なくなります。また * 以降の値は基本通り、奇数番目が key に、偶数番目が value になる request parameters を作ります。
  例えばでフォルトエントリの一つの以下を参考にすると…

  default_symfony:
    url:   /symfony/:action/*
    param: { module: default }

  1. Symfony web root より最初の引数が symfony という値で、
  2. 第二の奇数をアクションとして
  3. それ以降の値は奇数/偶数→key/value
  という風に解釈されます。例えば先ほどの例と同じ設定のサイトに http://example.com/askeet/symfony/admin/foo/bar/123/456 というリクエストを出すと、module: default, action: admin に [ foo => bar, 123 => 456 ] というリクエストパラメータを投げます。
• :module と :action だけは特殊なラベルで、他には使えないようです。

応用

リクエストの時、

1. 何も値がなかったら、全ての値を返し、
2. 引数が２つ以上あったら、最初の２つをキーにした値を返し、
3. それ以外は 404

とかはよくありそうな話です。先ほどの例と同じく、http://example.com/askeet に symfony web directory がmap されているとしましょう。まずは正解から

part:
 url:    /api/list/:id1/:id2/*
 param:  { module: api, action: list }

error:
 url:    /api/list/:id1/*
 param:  { module: api, action: list }

all:
 url:    /api/list/*
 param:  { module: api, action: list }

大事なのは api_list_error の項目が api_list よりも後に定義されているという事ですね。あと error と all の両方のエントリの最後が * で終わっている事。そうしないと、例えば http://example.com/askeet で来たのは拾えても、 http://example.com/askeet/ で来たのは拾えません。

そして受け取るアクションでは、以下のようなコードを書くといいかもしれません。

$req1 = $this->getRequestParameter('id1');
$req2 = $this->getRequestParameter('id2');

switch (true) 
{
  case (is_null($req1) && is_null($req2)):
    $result = "all";
    break;

  case (isset($req1) && isset($req2)):
    $result = "partial select";
    break;

  default:
    $this->forward404();
    break;
}

まとめ

routing.yml について解説しました。順番が大事であるという事、* をつける事の有無などの考察は何となくわかっていても、書き出してみる事で自分中でもすっきりまとまりました。

参考

• The Definitive Guide to symfony Chapter 9 - Links And The Routing System
• branches/1.0/lib/controller/sfRouting.class.php
  しっかり読み込んでないけれど、504 行目から始まる parse という method がここで解説している処理部分の様子。

傲慢ですが、お気に入りの quote なので、出展などを調べてみた。日本史などでは鉄血宰相などと称される、Otto von Bismarck の言葉らしいです。

Wikiquotes には見当たらず、探し出したのが、Google Book Search. それでも US Army の航空機関誌？とか、認知学の本？などにしか載ってませんなぁ。。でもこの米国陸軍の方は Book Search が凄い事になってる。

United States Army Aviation Digest on Google Book Search

Google Map と Mash-up ってどうなんでしょ？pin をクリックすると、登場ページまで。。

ドイツ語に翻訳して、後でもう一度再挑戦してみます。

Mac OS X Server の次期リリース、Leopard Server の目玉機能の一つに iCal Server というのがあります。その実はオープンな技術を実装する Darwin Calendar Server というものなのです。たぶん。Server はオープンで、設定とかパッケージングな部分は Leopard Server 凄いよ、となるんじゃないでしょうか。フリーで使いたい人は Server Daemon だけどうぞ、と。

暫く前から dev の mailing list を subscribe しているのですが、最近あった面白い話。

Guillaume さんは書きました。

Wilfredo さんがお返事。

Matt さんは書きました。

ヤバいぞ Wilfredo! どうする!!

サーバー自体は結構行けてると思うな。CalDAV 使ってまともかつ軽量に動くオープンソースの Calendar とかまだ見た事ないし。Outlook との接続にも期待大です。

暫く間があきました。６月の後半から先週まで、プロジェクト３つが並列に走っていたので、ちょっと時間が取れませんでした。忘れてしまう前に Google Gears の Workerpool について少しまとめておきたいと思います。

• 以前のエントリにも書きましたが、PC のメモリが無限でないように、Workerpool も無限に作る事は出来ません。
• エラーがあるときは、基本的に無言で Firefox ごと落ちます。それが精神的にも良くないし、問題の特定を難しくしていますが、理不尽な仕様やバグなど、僕はまだ聞いていません。つまり無言で落ちるような状況では、おそらく自身のコードを疑うべきでしょう。
• Worker が他の object とメッセージ交換する方法は、worker の id を指定してメッセージを送るだけ、それのみです。String や Number 以外のものをやり取りしようと思ったら、Object を JSON にシリアライズして、それを eval するしかないようです。ここでメモリが共有できたりすればスピードアップでも出来そうだけれども。
• Worker を作る時に、その Worker がすべき作業書のようなものをスクリプトとして渡さなければいけません。mycom の "重たいJavaScript処理"もこれで解決! - Google Gearsのワーカプールを試す や本家 Google の Google Gears WorkerPool Demo では オブジェクトをStringのコンストラクタとして渡して、JSON シリアライズをやっていますが、まず僕にとってその方法が直感的でないし、将来 Safari なんかで動くようになった時にそれでは動かないでしょう。それにメインで使わない関数で object の名前空間を汚染するのもやだし。 そこで別の方法を考えました。Here Document が使えれば一番いいんだけれどもブラウザ上の Javascript 実装にはそんな機能は存在しません。結局 HTML の pre タグ内にコードを書き込んでおいて、それを取得する、という形にしました。その時ただ読み込むだけだと、Browser が勝手に挿入する WBR 要素と、大なり／小なり記号が実体参照に変換されてしまうのでそれだけ変換するようにしました。コードは以下。

  Union.prototype.initScript = function (elm_id) {
    // workscript holder should be <pre> tag or
    // you have to set white-space: pre on CSS property.
    var elm_pre = $(elm_id);
    var script  = "";
    var len     = elm_pre.childNodes.length;
    for (var i = 0; i < len; ++i) {
      switch (elm_pre.childNodes[i].nodeName) {
        case '#text':
          script += elm_pre.childNodes[i].nodeValue;
        case 'WBR':
        default:
          // do nothing;
      }
    }
    return script.replace(new RegExp(/\&lt\;/), '<').replace(new RegExp(/\&gt\;/), '>'); 
  }

• Main Thread から Worker にメッセージを送る場合、Workerpool オブジェクトのインスタンスを使っての sendMessage メソッドを使ってメッセージを送ります。
• 逆に各 Worker から、メッセージを送り返す場合は google.gears.workerPool.sendMessage という static メソッドを使います。しかしこの static method は Firefox の DOM Inspector には出てきません。あと、Google の例では gearsWorkerPool.sendMessage という別のメソッドを使っています。興味深いですね…

そんな所でしょうか。あとまた気がついたら追記します。

いつも技術のネタばかり書いているので、たまには違う話でも。

Once

Landmark's Sunshine Cinema で、Once という映画を見ました。どんな映画かは全く知らなかったし、劇場もかなり空いていましたがとてもいい映画でした。

歌の映画です。路上ミュージシャンの男と女を全編手持ちカメラで追います。その色遣いや手ぶれな感じがドキュメンタリー風ではあるのだけれど、１発撮りしていそうな所でも別アングルのカットが挿入されたりしているので、全編とおしてドキュメンタリーな感じはしません。

出てくる人達は、みんな貧乏で不器用です。ある部分では諦めている部分はあるのだけれど、それでも這い上がろうとしている。でもサクセスストーリーとかではなくて…若者たちが何かをしようとしている瞬間を、少しみすぼらしくてカッコ良くもないんけど、力強いその数日間を切り取ったような作品。安易に色恋とかそういう話にまとめあげない姿勢にもとても好感が持てました。

Glen Hansard と Marketa Irglova の歌もとてもすばらしいと思いサントラも買ってしまいました。ただ家に帰ってきてじっくり腰を据えて聞いてみると、実は結構センチメンタルなメロディが濃いかなぁとも思ったけれど。Glen Hansard がやっている band の Frames ってのも今度聞いてみようと思います。

日本で公開されるかどうかは知りませんが…とか思ったらシネ・アミューズでやるみたいですね。

Once ダブリンの街角で

似ている映画とかは全然思いつきませんが、Richard Linklator とか好きな人には、お勧めだと思います。