第4回　chumbyのwidgetを作ってみよう

shibuya.chumbiesのoverlastです。お久しぶりです！

ようやく国内でのchumbyの販売が始まりますね！
これから発売されるchumbyはインターナショナル版と呼ばれるもので、アップデートを経て日本語フォントを利用できるようになるみたいです。

僕らが買ったchumbyでも日本語フォントを使えたら、さらにいろいろできて楽しいとはず。何とかなって欲しいです。

今回のテーマは「最も簡単な方法でchumbyのwidgetを作ってみる」です。

前回は、簡単な操作を繰り返すことでchumbyをハックしましたが、いよいよwidgetを作ります。chumbyはユーザが作成したwidgetが動くのですから、試さないと損です。

widgetはActionScript 2.0で実装していきます。ActionScriptと聞いただけで難しそうに感じる知れませんが、その心配はいりません。この記事を読みながら順番に作業を進め、サンプルをもとにwidgetを作成すれば、いつのまにかwidgetが動いているはずです。

今回も、前半を私が担当し、後半を私と同じくshibuya.chumbiesのAsamaさんが担当します。

前半ではActionScriptなど、chumbyのwidget開発に関するキーワードに触れたあと、MacOSX上でmtascというフリーのActionScript 2.0用コンパイラを使いwidgetを作成します。

後半はAsamaさんが、Flash DevelopというActionScript用の統合開発環境を使って、Windows XP上でのwidget作成について解説します。

1．chumby widget作成の基礎知識

chumbyのwidgetはActionScript 2.0で作れる

widgetを作り始める前に、必要な知識を確認します。

widgetは「ウィジェット」と読みます。 widgetは特定の機能を実現するための、GUI（グラフィカルユーザーインターフェイス）を備えた簡易アプリケーションのことです。

Windows VistaやiGoogleやYahoo Widgetなど、 widgetを利用できるさまざまなプラットフォームがあります。chumbyはそのようなwidgetを利用できるプラットフォームの一つです。

しかし、widgetの仕様はプラットフォームごとに異なるため、 chumbyで動くwidgetが欲しい場合には自分でchumby用のコードを書く必要があります。

自分でソースコードを書くことは、とても素晴らしいことです。chumbyのように音が出たり、タッチパネルやセンサーを備えたデバイスを触っていると、色々なアイディアが生まれます。

誰もまだ実現していないアイディアを形にするためには、自分がwidgetをつくる必要があるでしょう。

chumbyのwidgetはActionScript 2.0というプログラミング言語で記述します。2.0はActionScriptのバージョンです。ActionScript 2.0はFlash 8で作成したコンテンツ相当の動作を実現することができます。ActionScriptの最新バージョンは3.0で、Flash 9相当の動作を実現できます。そのため、chumbyのwidgetでは、最近Web上で見かけるFlashアプリケーションでできることがすべてできるわけではありません。

chumbyは、ActionScript 2.0アプリケーションを動かすために、Adobe Flash Lite 3.0を使います。Adobe Flash Liteはアドビシステムズが携帯機器向けに開発したFlash Playerです。Flash Lite 3.0はFlash 8がベースになっています。

と、ここまで分かると、「⁠chumbyではFlash Lite 3.0が使える。よって、chumbyのwidgetはAction Script 2.0で記述できる」という呪文みたいな一文も理解できてしまうと思います。

それでは、widgetをつくる第一歩として、Action Script 2.0で簡単なアプリケーションを作成してみましょう。

chumby widget作成の流れ

chumby widgetの作成手順は大きく分けて、以下の3ステップです。

ActionScript 2.0でアプリケーションのASファイルを記述しコンパイルする。
PCのブラウザなどで、SWFファイルの動作を確認する。
chumbyで動作を確認する。

まずは、上記ステップ1、2を2つの異なる開発環境で実践します。2ページ目では、オープンソースでフリーのFlashコンパイラMTASC（Motion-Twin ActionScript2 Compiler）を使います。3ページ目では、同じくフリーの統合開発環境FlashDevelopを使います。自分で作ったwidgetをchumby上で動作確認する方法については、5ページ目で解説します。

2．フリーのFlashコンパイラMTASCを使ってwidget作成

ここではMacOSX上でMTASC（Motion-Twin ActionScript2 Compiler）を使ってchubyのwidgetを作ります。MTASCはMacOSXで実行できるパッケージだけでなく、WindowsやLinuxで利用可能なバイナリも用意されています。

MTASCを用意

公式サイトのダウンロードページから、自分の環境で利用できるパッケージをダウンロードして、解凍するだけで、準備が終わります。

以下に、MTASCの準備の例を示します。

図2-1　MTASCのMacOSXパッケージダウンロードと解凍の例

$ wget http://www.mtasc.org/zip/mtasc-1.12-osx.zip # ダウンロード
$ unzip ./mtasc-1.12-osx.zip                # 解凍
$ cd ./mtasc-1.12-osx         # 解凍したファイルの中身に移動
$ ls            #いま見ているディレクトリ内の内容を表示
CHANGES.txt  Future.txt  Readme.txt  mtasc*  std/  std8/

パッケージに含まれるmtascはコンパイラの本体で、このファイルを実行することでActionScript 2.0をコンパイルできます。

ActionScript 2.0でwidgetを記述する

早速ActionScriptでコードを書いて、コンパイルできるかどうか確認します。

よくある「Hello World」を表示するだけのFlashファイルでは面白くないので、クリックするたびに画像が入れ替わるFlashファイルを作ってみましょう。

コードの内容がよく分からない場合は、ファイル名の大文字小文字に気をつけて、コードをコピペしてください。

以下に記述した「ClickImageChange.as」のコードの中の「imageArr」と名付けた配列に、ローカルに置いた画像への相対パスを書けば好きな画像を好きなだけ追加できますよ。

リスト1　ClickImageChange.as

class ClickImageChange {
  function ClickImageChange (path) {
    path.createEmptyMovieClip("image", path.getNextHighestDepth());
    var image:MovieClip = path.image;


    //http://ec2.images-amazon.com/images/I/51m8phYZbyL._SL500_AA240_.jpg、と
    //http://ecx.images-amazon.com/images/I/51uK4ACymiL._SL500_AA240_.jpg、を
    //あらかじめダウンロードして、名前を短くしておきます。
    var imageArr:Array = [ "./51m8phYZbyL.jpg", "./51uK4ACymiL.jpg" ];

    image._xscale= 150;
    image._yscale= 150;

    // 0番目の画像を表示
    image.loadMovie(imageArr[0]);

    var isMouseDown:Boolean = false;
    var counter:Number = 0;

    // マウスボタンを押した時
    path.onMouseDown = function () {
      // とくに何もしない
      isMouseDown = true;
    }
    // マウスボタンを離した時
    path.onMouseUp = function () {
      // 画像を入れ替えるよ
      isMouseDown = false;
      image.unloadMovie();
      counter++;
      // カウント回数が偶数回と奇数回の時で画像が変わるように
      image.loadMovie(imageArr[counter % 2]);
    }
    // マウスボタンを動かした時
    path.onMouseMove = function () {
      // 何もしない
      if (!isMouseDown) { return; }
    }

  }

  static function main() : Void{
    var base :ClickImageChange = new ClickImageChange(_root);
  }

}

上記のようなソースコードを書いたら、コンパイルして動作を確認してみます。

mtascでActionScript 2.0をコンパイルし、ブラウザで動作確認

mtrscを使った、ASファイルのコンパイル例を下記に示します。

図2-2　mtascを使ったASファイルのコンパイル例

$ ./mtasc -swf ClickImageChange.swf -main ClickImageChange.as -header 400:400:30

細かいことは省きますが、上記の例では引数には先ほどのActionScriptファイルや、出力したいSWFファイル名、SWFファイルの解像度を指定します。

正常にコンパイルできた場合には、指定した名前でswfファイルができあがります。

出来上がったSWFファイルはブラウザにドラッグ&ドロップすれば、動作確認ができます。以下の動作例のようにクリックする度に、画像が入れ替わります。簡単にできましたね。

chumby本体での動作確認については、5ページ目を見てください。

3．フリーの統合開発環境FlashDevelopを使ってwidget作成

ここからはAsamaが、FlashDevelopというWindows用のフリーソフトを使って、chumbyのwidgetを作る流れを説明します。主にChumbyWiki（chumby情報が集積しているオフィシャルのWiki）の「FlashDevelop/Example」というページの内容をベースに順を追って解説していきます。

FlashDevelopのインストール

FlashDevelopはWindows用のフリーソフトで、Flash向けの統合開発環境（IDE）です。

FlashDevelopのページで「Releases」をクリックすると、現在リリースされているいろんなバージョンのパッケージの一覧が表示されます。新しめのバージョンのを選んでインストールしましょう。私は原稿執筆時の最新版3.0.0 Beta7にしました。

FlashDevelopをインストールするためには、.NET Frameworkなどが必要です。もしそれらが入っていなければ、FlashDevelopのインストール時に警告を発してくれるので、別途インストールしてください。

インストールの流れをキャプチャ画像で簡単に説明します。ダウンロードしてきたexeファイル（今回はFlashDevelop-3.3.0-Beta7.exe）を起動します（図3-1⁠）⁠。あとは、ウィザードにそって進みます（図3-2⁠）⁠。何をインストールするかのオプションを選択したり（図3-3⁠）⁠、インストール先フォルダを選んだり（図3-4）したのち、実際のインストールが行われ（図3-5⁠）⁠、無事完了しました（図3-6⁠）⁠。

図3-7は、インストールされた FlashDevelop を起動した様子です。 3つのペインから構成されるスタンダードなIDEのインタフェースです。

プロジェクトを作成してコードを書きコンパイルする

さて、さっそくwidgetを作ってみましょう。以下、ChumbyWikiの流れにそって説明していきます。

まず、FlashDevelopを起動します。そして、メインメニューの「Project」から「New Project」を選択します（図3-8⁠）⁠。するとプロジェクト設定画面が現れますので、[ActionScript 2]の[Default Project]を選択し、適当なプロジェクト名（例えば「HelloWorld⁠」⁠）をつけます（図3-9⁠）⁠。

右側にあるツリー表示部分から、Main.asを選びます。図3-10のようにあらかじめ用意されている雛形が左側に表示されます。ActionScriptのコードです。

ChumbyWikiのサンプルコードをmain関数の中に書き込みます（リスト3-1⁠）⁠。IDEなので関数の情報なんかもリアルタイムで表示されます（図3-11⁠）⁠。ActionScriptをよく知らない私みたいな人でも大丈夫です（と、思ったのですが、やはり基礎は分かってないとだめですね…⁠）⁠。

リスト3-1　サンプルコード

class Main
{
  public static function main():Void
  {       
    _root.createTextField("t",2,20,20,100,30);
    _root.t.text = "Hello, world!!!";
  }
}

サンプルコードを書いたら（図3-12⁠）⁠、おもむろに、F5キーを押すと、コンパイルの上（SWFファイルが生成され⁠）⁠、実行されます。実行結果は、FlashDevelop内の左ペインの別タブで表示してくれます（図3-13⁠）⁠。細かい調整・デバグをしながらの開発には便利ですね。IDEの強みです。もちろん、生成されたSWFファイル（プロジェクトのフォルダにある*.swf）をブラウザで確認してもOKです（図3-14⁠）⁠。

ということで、FlashDevelopで簡単なwidgetができました。

4．chumbyで動かしてみる

自作swfをchumby本体へ持っていって動かしてみましょう。まず、SWFファイル（FlashDevelopの場合はプロジェクトのフォルダにある）をUSBメモリにコピーし、それをchumbyに差し、PCからSSH接続します（SSH接続については前回解説したので割愛します⁠）⁠。図4-1～図4-3は、私（Asama）がやったときのログです。IPやUSBメモリのフォルダは私の環境でのものです。

図4-1では、chumbyへSSH接続し、USBメモリ内のSWFファイルが見えるか確認しています。図4-2では、「⁠stop_control_panel」コマンドで、chumbyのFlash Playerを一旦停止しています。そして、図4-3で、4ページ目で作ったSWFファイルを引数に指定してFlash Playerを起動しています。

図4-1

% slogin 192.168.3.4 -l root
...
chumby:~# ls /mnt/usb/fd/NewProject.swf
chumby:~# ls /mnt/usb/fd/NewProject.swf 
/mnt/usb/fd/NewProject.swf

図4-2

chumby:~# stop_control_panel
*** stopping control panel
*** killing registered flashplayer pid: 1966
Adobe FlashLite 3.0.4 Release (Version 8,1,55,0)- Chumby
Industries (version 7 build 85-733 [GCC 4.1.2   Microcross
GNU X-Tools(tm)])
Built for: ironforge; Features: Video ALSA DMA ARM-optimizations
Build time: Thu 17Jul2008 1235
chumbyflashplayer.x: sending signal 15 (SIGTERM) to running instance 1966
...
*** killing btplayd (SIGKILL): 3184
*** killing btplayd (SIGKILL): 1412
chumby:~#

図4-3

chumby:~# chumbyflashplayer.x -i /mnt/usb/fd/NewProject.swf
Adobe FlashLite 3.0.4 Release (Version 8,1,55,0)- Chumby
Industries (version 7 build 85-733 [GCC 4.1.2   Microcross
GNU X-Tools(tm)])
Built for: ironforge; Features: Video ALSA DMA ARM-optimizations
Build time: Thu 17Jul2008 1235
...

フォントサイズが小さすぎてほとんど読めないのですが、ちゃんと「Hello World!!!」が表示されました！（図4-4）

さて、動作確認ができたのでChumbyを元に戻します。まず、Ctrl-c（コントロールキーを押しながら「c」キーを押す）で図4-4のchumby flashplayerを停止します。あとは電源切り入りでの再起動。これで戻ります。

5．落ち穂拾い

ここからは、再度overlastが担当いたします。

まずは、以前に一読しておくと良いことがあるかもしれない資料や文献を簡単にご紹介します。chumbyを楽しく使う助けになれば嬉しいです。

ActionScript 2.0 リファレンスガイド: アドビシステムズが提供している、Flash Ver.8の日本語公式マニュアル。マニュアルの中には、リファレンスガイドの他に、チュートリアルなど有用な資料が含まれていて、必見です。Web上のさまざまなドキュメントの中には頼りにならない情報も多いですよね。ActionScript初心者な私たちは一番最初にググるのではなく、リファレンスガイドを頼った方が、諸々良く分かったりしました。
Chumbysphere Forum: chumbyに関する情報満載のフォーラム。英語版ですが、chumbyを買ったあとの疑問に対する答えが書いてある可能性が高い情報源だと思います。
ChumbyWiki: こちらも英語ですが、chumbyをハックするためのTips満載です。ハックしたくなったらまずは、ここを熟読するのが良いと思います。もちろん、書いてあることをそのまま実行しても上手くいかないことが多いのですが。。。
bunnie’s blog >> chumby: chumbyの開発者Bunnieさんのブログ。最新の情報や次世代chumbyに関する情報が満載で目が離せません。

最後に

今回はchumby widgetを実際に作ってみました。

私たちがwidgetを作ってみて感じたことは、真剣に役立つwidgetを作るため、chumby widgetだけでなくWebサーバ上で動作するアプリケーションもつくる必要があるということです。

ActionScript 2.0は制約が多く複雑な処理を実装するために記述するためのコード量が増えてしまいがちです。また、そもそもchumbyは携帯端末なので、CPUやメモリの性能が家庭用のパソコンと比べると見劣りします。

そこで、chumby widgetは無線LANを使った情報取得と表示を行なうために作り、複雑な処理はすべてサーバ上のアプリケーションに担当してもらうのです。chumby widgetで何か複雑なことをやってみたいと感じた方は、AcrionScriptだけでなく、Perlなどのスクリプト言語で実装した、サーバサイドアプリケーションとの組み合わせを考えてみてください。

サーバサイドで動作するアプリケーションを考慮に入れれば、プロットフォームごとに同じ機能を実現するwidgetやWebページを書くことで、chumbyだけでなく、家庭用のパソコンや携帯電話や他の携帯端末など様々なプラットフォームを相互に接続するwidgetも実現できると思います。

全4回に渡って連載をさせていただいた「たのしいchumby」の連載は、今回で完結です。連載の機会をいただき、本当にどうもありがとうございました。

chumbyの国内販売が始まりましたが、みなさんの手にchumbyが届いたころに、またお会いできるといいですね。

開催日	2008年10月21日（火）
開催時間	19：30～22：00（受付開始19：00）入退場自由
場所	赤坂ブロガーズ・ラウンジ
住所	〒107-0052 港区赤坂4-15-1赤坂GC18F
地図	http://www.vectorinc.co.jp/corporate-map.html
詳細案内	http://alphabloggers.com/whatsnew/post_71.html