はじめましてSilverlight!(プログラマ篇)

CO-CONV 最田ですtamu23

しおラボ Blog: はじめましてSilverlight! で発表しましたが、先週、デザイナの田村と共同で Silverlight 2 の開発を体験してみましたelectric2

20090202_sanmoku.jpg

いままでの開発

今まで、CO-CONV では Windows アプリケーション、Flex アプリケーション、ホームページなどをデザイナーと一緒に作ってきました。そういう場合の開発手順は…
  1. デザイナが全体の画面イメージを作る
  2. デザイナが画面のパーツを画像ファイルとして切り出す
  3. プログラマが 1. の完成イメージを参考に、画像ファイルを画面にあてはめていく
  4. プログラマが全体の動作を調整して仕上げる

といったものでした。

この 3. の作業は、プログラマにとってはストレスとなることが多かったです。

下絵を見ながら、なるべくデザイナの意向に近いものを組み上げなきゃいけないし、あとからデザイナからのちょっとした変更依頼にも応えなきゃいけませんでした。

Silverlight 2 で何が変わったのか

今回は Visual Studio と Expression Blend を使って、この作業フローがどれだけ改善できるのか試してみました。

作業を始めて驚いたのは、1.~3. が完全にデザイナ側の作業になっていたことですhand5
しかも、プログラマとデザイナの作業が完全に独立して進められたので、アプリケーションがほとんどできあがったあとでも、デザイナが見た目を向上したり改善できたのです。


もう1つ驚いたのはソースコードの短さです。今回の「4色三目並べ」で書いたソースコードは300行足らずなのです。

デザインに関する実装がソースコードに現れないので、ロジックのみの本当にシンプルなソースコードになりました。

完成までの流れ

私もこのゲームを作成した5日間を振り返ってみたいと思います。

pin11日目 Visual Studio 2008 SP1 と Silverlight ToolKit の導入。XAML の勉強。ドラッグして盤面に石を置けるようにする。
pin12日目 勝ち判定をいれる。
pin13日目 Visual State Manager の勉強を兼ねてリーチ判定の要素を入れる。
pin14日目 各種アニメーションを導入してみる。といっても、win_animation.Begin(); といったコードを各ポイントに入れていくだけ。
pin15日目 細かいバグをつぶし、何とか公開できる状態に!


なんと、4日目・5日目ではソースコードは10行程度しか修正していません。

それなのに、デザイナにまかせておくと、いつの間にか画面が整っていき、アニメーションが出来上がっていきました。自分の知らないところでアプリケーションの完成度が上がっていく様は今まで体験したことのないものでした。

(今までは、ここをこうしたい、ああしたいという要望がデザイナから周ってきて、他の実装も終わってないのに…、とプログラマの前にタスクがどんどん山積みになっていきました…)

これは今までは体験のしたことがなかったことで、非常にストレスフリーだったのですface1

今後も何か機会があれば Silverlight 2 で業務アプリを開発してみたくなりました。

はじめましてSilverlight!

こんにちは。CO-CONV 田村ですconstellation6


先週、プログラマと協業し、初めてSilverlightでの開発を行いました。

何もかも初めてのことだったので、
まずは、Silverlightを触ってみよう!symbol9
ということで、Silverlightを用いたWEBをチェック!electric2
なんてリッチなんだ!と、ストレスフリーな操作性に感動tamu7


果たしてこんなものが私に作れるのか!?
と思っていたのですが、Microsoft社の提供している、
デザイナ用のGUIツール「Expression Blend 2 」を使うと私にも何とかなりそうな予感...。

そして「えいやー」と、勢いで作っちゃいましたgoods10


その名も「三目並べ」

20090202_sanmoku.jpg


「五目並べ」をもじったゲームで、碁石を碁盤の上に並べていき、
縦横斜めのいずれか3つに同じ碁石の色が並ぶと勝ちhand5!という単純なようで奥が深いゲームです。

知識も何もないまま、一からの挑戦でしたが、何とか遊べる段階まで持っていくことができました。


このゲームを作成した5日間を振り返ってみたいと思います。

pin11日目 Silverlightって何だっけ... Blend? 調査。とにかくツールを触ってみる。素材作成。
pin12日目 わからないこと盛りだくさん。でも、なんとなく形になった。
pin13日目 見よう見まねでアニメーションを設定していく。遊べるようになった。
pin14日目 素材とアニメーションのブラッシュアップ。
pin15日目 細かいバグをつぶし、何とか公開できる状態に!


他の業務と並行しての作業でしたが、何とか5日間で形になりました。

自分にアニメーションの技術がないことを痛感。
一つ一つの動きを設定するのに苦戦しましたが、
手元で簡単に修正&ビルドができるので、作業は思いのほかサクサクと進んで行きました。

また、プログラマとデザイナの作業切り分けがはっきりしていたため、
協業も滞りなく進みました。


楽しんでいただけると幸いです。tamu2hand2
plant7plant7「三目並べ」plant7plant7


*おまけ*

碁盤全面に碁石を敷き詰めた社長いわく、
tamu25「バグ発見!引き分けにならないよ!」


すごいなぁ。バグってこういう発想からみつかるものなんですね。

Flex フレームワーク内部の初期化手順

MXML を利用した Flex アプリケーションを作成した際、コンパイル時および SWF ファイルを表示時にどのような処理を行われているかを調べてみました。Flex のバージョンは 2.0.1 を利用していますが、Flex 3 でもほとんど変わっていないようです。

続きを読む "Flex フレームワーク内部の初期化手順" »

Flex の Module 開発 (3) - 遅延ロード

前回まででの2回で、モジュールを使って Flex アプリケーションを細かなモジュールに分割する方法を説明ました。しかし、異なる SWF ファイルを扱うとなると、非同期処理も絡んできますし、同じライブラリが両方の SWF に含まれると全体のサイズも大きくなります。

そこで、今回は1つの SWF ファイルに複数モジュールを作成して、遅延ローディングする方法をご説明します。

続きを読む "Flex の Module 開発 (3) - 遅延ロード" »

Flex の Module 開発 (2) - ロード側

少し間が開いてしまいましたが、前回 作成したモジュールを利用するコード(シェル)を作成していきます。

続きを読む "Flex の Module 開発 (2) - ロード側" »

Flex の Module 開発 (1)

Flex SDK 2.0.1 以降からは Flex のモジュール開発がサポートされています。モジュール化することにより、初期ロードサイズを削減したり、開発時のカプセル化が促進されます。

モジュールを利用する側のアプリケーションのことを「シェル」と呼びます。シェルでは任意のタイミングでモジュールをロードすることができます。一度ロードしたモジュールはメモリ上にキャッシュされるため、2回目以降は高速にインスタンス化できます。いらなくなればキャッシュの削除を行うこともできます。

モジュール開発についての現時点での日本語の情報源は Flex 開発ガイド の「31章 モジュール化アプリケーションの作成」以外にはあまり見当たりません。

ここからは数回にわたり、Module を利用した開発手法について解説していきます。

続きを読む "Flex の Module 開発 (1)" »

JavaScriptとActionScriptのXML処理速度比較

XML のパース速度を環境を変えて測定してみたところ、面白い結果が出てきたので、まとめてみました。

XMLデータ

測定に使った XML は次のようなシンプルなものです。単純ですが、Web API の出力として、よく用いられる形です。

<root>
  <result>1</result>
  <items>
    <item>http://www.example.com/?e0fe16290dc90f4e929bb4f72973c4ce</item>
    <item>http://www.example.com/?150f9f8df8b51d7feb61999623f4ea0b</item>
       :
    <item>http://www.example.com/?a7d3bd66e2eb279d789f34efb6f8a9ac</item>
  </items>
</root>

JavaScript でのパース

まず、JavaScript の処理速度を測ってみました。

パースする部分は XMLHttpRequest を使って次のように書きました。

xmlhttp.open("GET", url, false);
// 計測スタート
xmlhttp.send(null);
// 計測(ダウンロード時間+XMLパース時間)

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var root = xmlhttp.responseXML.documentElement;

    var itemContainer = root.getElementsByTagName("items")[0];
    // 計測(getElementsByTagName の時間)
    var items = itemContainer.getElementsByTagName("item");
    // 計測(getElementsByTagName の時間)

    var len = items.length;
    for(var i = 0; i < len; i++){
        var s = items[i].firstChild.nodeValue;
    }
    // 計測(ループに要した時間)
}

XML の item タグの個数が増えるにしたがって、各ブラウザの処理速度にどのように違いが出てくるかを調べました。

JavaScriptのXMLパース能力

意外にも(?) Firefox が一番遅く、IE が一番速いという結果になりました。

試験を行った端末は Pentium 4 3.00GHz、メモリ 2.00GB です。サーバーは localhost に立てた Web サーバー AN HTTP Daemon を用いました。XML ファイルのサイズは、256ノードが19KB、512ノードが37KB、1024ノードが74KB、2048ノードが147KB、4096ノードが293KB、8192ノードが585KB、16384ノードが1,169KB、32768ノードが2,337KB です。

それぞれの特徴を分析してみます。

Internet Explorer
ダウンロードとパースに要した時間の短さが光ります。
Firefox
ループの部分には、かなりの時間を要しています。
Opera
ループの速さが際立ちます。ダウンロード+パースに時間がかかっていますが、後の検証でも分かるのですが、Opera のダウンロード性能はIEと同程度であるため、パースに時間がかかっていると想定できます。パースに時間がかかった分、DOM 操作は速いので、パース時に何らかのインデックス化を行っているのかもしれません。

その他の気づいたことをまとめます。

  • IE6・FF1.5 と1世代前のブラウザで測定していますが、IE7・FF2 で測定しても同じ傾向でした。
  • Firefox は safe mode で測定しました。通常起動するとエクステンションの影響なのか、処理速度は約2割増になりました。
  • Donut RAPT(IE コンポーネントを利用したブラウザ)では、ループの処理に IE の3倍の時間を要しました。それでも、Firefox の 2/3 程度の時間です。
  • どのブラウザでも getElementsByTagName に時間を要していないのが意外でした。XML パース時にタグ名でハッシュを作成しているのでしょうか。

ActionScript でのパース

次に、先ほどの JavaScript を ActionScript 3.0 に移植して、速度の変化を調べました。

getElementsByTagName に相当するところは、E4X の .. 演算子(getElementsByTagName に相当)を利用しています。

var loader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest(url);
// 計測スタート
loader.addEventListener(Event.COMPLETE, function(e:Event):void
{
    // 計測(ダウンロード時間)
    var root:XML = XML(loader.data);
    if(!root) return;
    // 計測(パース時間)

    var itemContainer:XML = root..items[0];
    // 計測(getElementsByTagName の時間)
    var items:XMLList = itemContainer..item;
    // 計測(getElementsByTagName の時間)

    var len:int = items.length();
    var arr:Array = [];
    for each(var x:XML in items){
        var s:String = x.text();
    }
    // 計測(ループに要した時間)
});

Flex SDK 2.0.1 の mxmlc でコンパイルし、item ノードの個数を変えてブラウザごとに測定しました。環境は JavaScript の試験と同じです。

ActionScriptのXMLパース能力

各ブラウザとも、かなり処理が速くなっています。(先ほどの縦軸最大値は1.5秒でしたが、今回は0.5秒である点に注意してください)

Flash プレイヤーが実行しているからでしょうか、パース以降の処理は、ほとんど処理速度に違いがありません。Flash プレイヤーはブラウザにダウンロード処理を任せているため、ダウンロードに要する時間はブラウザによって違いがあります。Firefox の遅さが際立っています。

XML のループ部分があまりに早かったので、コンパイル時に最適化されているのではないかと疑いましたが、item ノード中の文字列を加えていく処理を実装しても、処理時間は約1.5倍になる程度でした。

トータル時間の比較

3つのブラウザ、JS/AS それぞれで、ロードからループ処理までにかかった時間を比較しました。

XMLパース速度

まとめ

  • JavaScript より ActionScript のほうが速い(バイトコードなので当たり前といえば、当たり前)。
  • JavaScript の XML 処理は、実は Firefox が一番遅い
  • IE と Opera は処理が複雑になれば、Opera のほうが速くなると予想される

間違いの指摘や検証は大歓迎です。今回の試験に用いたファイルは こちらからダウンロード できます。また、ブラウザ上でテストしてみたい方は こちらから試してみてください (環境によっては数秒~数十秒間、ブラウザが応答しなくなるのでご注意ください)。

将来展望

大きな XML ファイルを扱う場合には、XML パーサーだけを ActionScript にしてみても面白いかもしれません。その場合、JavaScript と ActionScript の通信部分(ExternalInterface)のオーバーヘッドを調査する必要があります。

2007-2009 CO-CONV,Corp

ブログ内に記載されている社名および製品名は各社の商標または登録商標です。