Are you ready for AIR?
はじめての“AIRアプリ開発記”

株式会社サイバーエージェントがサービス提供をスタートした「Skimee」は、AmebaVision や YouTube に投稿された動画を自動で連続再生できる機能をもつ、Adobe® AIR™(Adobe Integrated Runtime)ベータ版で作ら れたデスクトップアプリケーションです。この記事では、Skimee が開発された経緯と、Adobe AIR で開発するに あたって経験したノウハウを皆さんにお伝えしていきます。

AIRで開発されたデスクトップ動画プレーヤー「Skimee」

筆者が在籍している株式会社サイバーエージェントでは 「AmebaVision」という動画共有サービスを提供しており、このサービスを提供する中で、どうしたらユーザが自分の観たい動画をもっと快適に楽しめるかを日々検討しています。その中で、「自分の興味のある動画を連続再生」「モニターの片隅で動画を流しっぱなしにしておける」アプリケーションがあると皆が動画配信をもっと楽しめるのではないか。そのようなアイデアが開発チームの中から自然発生的に出てきて、半ばノリ一発で「よし作ろう!」という流れになりました。

Ameba Visionドウガ10万本!!
Skimee
http://vision.ameba.jp/labs/skimee.html
YouTube や AmeabaVision にアップされている動画を自動的に連続再生できるデスクトップアプリケーション。「動画」を利用した新しいアイディアを実験的に投入していく「AmeabaVision ラボ」で Ver.1.01 が配布中。

そうとはいえ、Web アプリケーションにするかデスクトップアプリケーションにするか、具体的な実現方法に決め手が無く、どう開発しようか悩んでいました。そんな中、ちょうど良いタイミングでアドビから AIR(当時はコードネームで Apollo と呼ばれていました)のアルファ版が公開されたため、Skimee では AIR での開発を行うことに決めました。

AIR を採用する決め手となった理由は、大きく以下の4点が挙げられます。

Skimee は実験的なプロジェクトのため、AmebaVision 内のラボで開発を行うことになり、既存のサービスになるべく手を加えず、開発投資もなるべく行わないという制約があったことから、Flash デベロッパーがデスクトップア プリケーションを開発できる AIR プラットフォームは大変魅力的でした。

Flex Builder と MVC モデルによる開発の効率化

Skimee の開発は 2007年5月後半からおおよそ1ヶ月をかけて、Flash デベロッパーである筆者と、グラフィックデザイナーというわずか2名の体制で開発を行いました。開発の途中で、Apollo という名称だったアルファリリース版が、AIR に改名されてベータ版にバージョンアップされるという大きな転換もありましたが、比較的スムーズに開発を行うことができました。

開発ツールは当初、Apollo の SDK と FlashDevelop というフリーの Flash 開発用 IDE を組み合わせて使っていましたが、開発の途中で Flex Builder に切り替えました。Flex Builder はさすがに商用ツールということもあり、インストールするだけで AIR による開発に必要な環境がすべて整えられますし、開発を進めるにあたってとても便利な機能も備わっています。コードジャンプ機能などのコード入力支援機能をはじめ、見やすい Trace 出力、ブレークポイントが設定できるデバッグの容易さなどが相まって、テストが実に行いやすかったです。あと、デフォルトフォントが目にやさしく見やすいのも助かりました。

Skimeeのクラス図Skimee のクラス図。
MVCモデルを採用し、それぞれのクラ スの独立性を高めている

加えて、開発言語である ActionScript 3.0 では、よりプログラマブルな開発が行えるようになったため、今回は MVC モデルにて設計を行いました。MVC とは簡単にいうと、データ構造(M:Model)と画面の表示(V:View)、それらをコントロールする部分(C:Controler)を別々のクラスで構成するようシステム設計をする方法で、Java や Perl、Ruby などの Web アプリケーション開発の世界では一般的に採用されています。これにより、たとえば画面の表示部分だけを直したい場合は、View に関連するクラスを直すだけで他のクラスには影響を及びません。このため修正箇所を極所化することができます。今回はプログラマーが筆者のみでしたが、複数人で開発をするような大きなプロジェクトの場合、MVC モデルを採用することで作業分担が容易になります。

筆者は Java から Flash に転身したということもあり、ActionScript をよりプログラマチックに書きたいという思いが常々ありましたので、今回の AIR による開発はその良い機会ということで、MVC モデルにチャレンジしてみました。Flex による開発における画面とインタフェースデザイン部分は、通常 Flash で作成して MXML(Macromedia Flex Markup Language。Flex でのプレゼンテーション部分を記述する XML 言語)にて記述することになるわけですが、今回は各要素の細かい部分に至るまで ActionScript でコントロールしたいという思いが強かったので、インタフェース部分もすべて ActionScriipt 3.0 で記述しています。

従来のスライドバーの長さ。横幅が余った部分はマスクをかけて非表示にしている

たとえば、Skimee のスライダー部分はスキンに応じて花柄などの絵柄がついているため、スライダーの中の width を伸び縮みさせるような処理では絵が崩れるため採用できませんでした。そこでビットマップインスタンスとして画像を読み込み、再生状況に応じて ActionScript で画像を右にずらしていくという手法を採用しています。この手法だと ビットマップ素材を AIR アプリに組み込んでいくのが少々手間になりますが、非常に細かい制御を ActionScript で行うことができるため、ユーザインタフェースを構築するひとつの手法として有効だと考えています。

来るべきAIRの正式リリースに向けて

AIR にバージョンアップされたのが Skimee の開発の真っ最中だったため、AIR が 1.01 になってから提供された魅力的な機能 ── アプリケーション外からのドラッグ&ドロップ機能、ローカル DB へ接続する API など ── の組み込みがあまりできなかったのが少し残念でした。今後も続々出てくるであろう新しい機能を元に、もっと面白い機能を実現できないか、これからも考えて行きたいです。

今回、AIR で開発して大きく実感したのは「簡単にデスクトップアプリケーションが作れた」ということに尽きます。サーバサイドの Flash 開発のスキル、ノウハウをそのままデスクトップアプリケーション開発に投入できる環境というのは、筆者のような Flash デベロッパーにとってはとても素晴らしく感じます。

ただ、AIR 自体が現在ベータ版ということもありますが、開発している中でいくつか疑問に感じた点もありました。

細かい点だと、SimpleButton を透過すると CPU 使用率が上がることが判明したり、Update 機能は搭載されているものの、出来れば API を使うだけで AutoUpdate 機能を簡単に導入できるようになっていて欲しいなど、将来への要望も出てきます。まだまだ AIR や ActionScript 3.0 はスタートしたばかりの技術ということもあり、Java や Perl などに比べると有志が作成した各種のライブラリやフレームワークが不足しています。Java 出身の人間としては、たとえば Struts みたいな位置づけのフレームワークがもっとたくさん出揃ってくると、より開発がしやすくなってくると思います。こちらは今後の広がりに期待しましょう。


大平哲也切通 伸人 [nobuhito kiritooshi]
Flash developer & JAVA engineer
株式会社サイバーエージェント 所属。最近、映像編集&加工熱が再燃し始めています。