はじめてのAIRアプリ開発

「知っ得!」Tips集

今月号の記事

2008年2月にバージョン1.0が正式公開されて盛り上がりを見せているAdobe AIR。この6月には AIR コンテストの開催もあり、Flash CS3や Dreamweaver CS3で応募作品を開発中、もしくは思案中という方も多いことでしょう。そこで今回は、AIRコンテスト向けチュートリアルサイトでサンプルアプリケーションを開発していただいたリクルートメディアテクノロジーラボ　鈴木拓生氏に、AIR アプリケーションを開発するにあたってハマったこと、発見したこと、知って損なしの「知っ得」Tips集を寄稿していただきました。

AIR でブラウザからデスクトップに飛び出そう！

"AIR の一番の魅力ってなんだろう？"
この問いは、 AIR コンテスト向けのチュートリアルサイトでサンプルアプリケーションを作らさせていただく際に、まず考えたことでした。

もちろん、これまで培ってきた Flash のノウハウや HTML+CSS+JavaScriptを使った通常の Web 開発手法で、デスクトップアプリを作ることができるという点は非常に魅力的でした。ただ、これだと Flash アプリケーションや Web サイトをローカルの環境で動かしているだけで、数ある AIR の魅力の一部分でしかないな、と作っているうちに感じました。

それよりもやはり、AIR の一番の魅力は「ブラウザから飛び出すことで、表現の自由度が格段に上がった」。これに尽きると思います。 Flash や Ajax は表現の自由を与えてくれたのですが、それはあくまでもWebブラウザや Flash Player という四角い枠の中での自由であり、この四角い枠から飛び出すことは決してできませんでした。 Webブラウザが一つの規定デザインであり、その中で実現可能な表現に無意識のうちにアイデアを落とし込んでしまっていました。しかしAIR を使うことによって、Webブラウザが無意識なレベルでデザインしていた四角い枠を取っ払い、丸形だろうと、三角形だろうと開発するアプリケーションにもっとも適した形状にできるのです。ひとつの大きな制約がなくなったことで、これまで実現不可能だったアイデアを実現することが可能だったり、また逆にこれまで思いつかなかったようなアプリケーションのアイデアが湧き出てくる可能性を私たちに与えてくれているところに、AIR の一番の魅力でしょう。

そんな魅力的なアプリケーション開発を可能にしてくれる AIR。しかし、実際に開発を進めてみると、やはり AIR と Web サイトは別物と意識しながら開発を進めないと、ちょっとしたことでつまづいてしまいます。

Flash を使っての AIR アプリ開発

チュートリアルサイトを既にご覧いただいた方はご存知の通り、Flash CS3 を使うと簡単に AIR アプリを開発できます。Flash を使って簡単に開発ができる一方で、これまでの開発方法そのままでいくと、ちょっとしたことにハマったりもします。ここではまず、FlashでAIR アプリケーションを開発する場合に注意しておくべき Tips をピックアップしてみます。

Tips - その１

stage.window から stage.nativeWindow へ

AIR を開発するにあたって私自身、真っ先に試してみたいと思った事がありました。それは、月並みですが、背景が透明な AIR アプリです。AIR アプリで半透明にするには、AIR のインストール設定でできるのですが、nativeWindowクラスを使いましょう。簡単なコードでは、

windowShape_mc.addEventListener(MouseEvent.MOUSE_DOWN, doMove);
function doMove(e:MouseEvent):void{
  stage.nativeWindow.startMove();
}
closeButton_mc.addEventListener(MouseEvent.MOUSE_DOWN, doClose);
function doClose(e:MouseEvent):void{
  stage.nativeWindow.close();
}

のように、nativeWindowクラスを使います。また AIR1.0 からは Window クラスは使えませんので注意した方が良いかもしれませんね。

Tips - その２

Mac でもマウスホイールがふつうに使える

私は普段 MacBook で開発を行うことが多いのですが、Mac を使っていると、Flash でのマウスホイールの検知に苦労しませんか？これまで、Flash で Mac のマウスホイールを扱う場合は、swfmacmousewheel などのライブラリを使用する必要がありました。

しかし、AIR アプリケーションにおいてはマウスホイールが Mac でもネイティブにサポートされているのです。マウスホイールを使ったアプリケーションを開発する際、このようにネイティブ対応されていることは嬉しい限りです。

Tips - その３

trace 結果を見たい場合はデバッグモードを使いましょう

trace を使うときはデバッグモードで！

Flash で開発している際に、私は trace を使ってエラー判定をしたり、ちゃんとパラメータが渡っているかをチェックしています。そして、ムービーのプレビューを実行し、出力パネルに trace の結果が出力されているで確認をしていました。しかし、この方法で AIR アプリを開発していると、悩ましい事態に陥ってしまいます。

ActionScript 内にtrace を記述してムービープレビューをしても「アレ?? trace が出ない…」という事態に陥ってしまいます。それなら、ギリギリまで FlashPlayer でプレビューして最後に AIR に書き出せば良いやと思っていると、今度は nativeWindow クラスを FlashPlayer がサポートしていないので、エラーが出てしまいます。「はて、困った…」と思ったら、 AIR で開発する際にはデバッグモードでプレビューするとちゃんと trace の値がとれます。常識的なことかもしれないのですが、個人的にちょっとハマってしまったので、記述させていただきます。

Dreamweaver を使った AIR アプリ開発

AIR は WebKit ベースのHTMLレンダリングエンジンを持っているので、当然 Dreamweaver CS3 を使えば通常の Webページを制作するフローで AIR のアプリが開発できてしまいます。WebKit がランタイムに採用されているため、HTML+CSS+JavaScript で記述されたコードをレンダリングすることが可能がゆえ、ついつい AIR がローカルアプリケーションだという事実を忘れがちになります。しかし、この簡易さが原因で Dreamwever を使った AIR アプリ開発でも何回かハマってしまいました。ここではハマったポイント（初心者的で恥ずかしいですが）を皆さんにもお伝えしましょう。

Tips - その１

Yahoo!のFlash版地図APIならAIRでも表示できます

開発は Safari ブラウザをベースに

AIR は WebKit ベースのラインタイムなので、同じレンダリングエンジンを採用しているSafari （MacとWindowsに対応しているアップル製Webブラウザ）をターゲットブラウザにしておけば問題なく動作します。これまでブラウザ間での CSS や Javascript の互換性に悩まされていた開発者の方々に取っては、非常に魅力的な開発環境では無いでしょうか。また WebKit ベースですので、IE6、IE7 では実装されていないcanvasタグが使えるのも非常に魅力的です。

Tips - その２

AIR にはドメインが無い!?

AIR の魅力として、Web サイトを作る要領で開発できると書きました、もちろんサーバ -クライアント環境であるWeb とは違うローカルアプリケーションならではの問題点もあります。その一番の違いは、Web アプリケーションでは通常あるはずのwww.example.com のようなドメインが AIR にはないのです！　そのため、ドメイン名をベースに API キーを発行しているようなサービスだと AIR 上では動作しません。今回のチュートリアルでも「じゃらんの宿」を Map 上にプロットしようとしたところ、Google Map のようなドメイン名をベースに API キーを発行している Web サービスは AIR で使えませんでした。これでは無理だ…と諦めかけていましたが、Yahoo! の提供しているFlash 版地図 API を試したところ、動ごくことが判明。これには助かりました。

もちろん、どこかドメインのあるサーバに一度HTML ファイルを置いて、その HTML ファイルを innerHTML で取得してしまえば問題無いのですが、AIR アプリケーションのみですと今回のようにドメインが無いという理由により使えない Web サービスもあったりするので、開発の初期段階から注意が必要です。

Tips - その３

Javascript のセキュリティ面での制約に注意!?

Dreamweaver を使った AIR 開発をするうえで注意しなくてはいけないのは、window.loadが実行後に

	<div id="container"></div>

	document.getElementById('container').innerHTML = '<a href="#" onclick="alert(1)">Click Me</a>';

このように innerHTML 操作の際に Javascript の onclick などのイベントコールバックは実行されませんので、下記のコードのように id にイベントリスナーを定義するような形式にしましょう。

document.getElementById('container').innerHTML = '<a href="#" id="smith">Click Me</a>';
	
document.getElementById('smith').addEventListener('click', function(){ alert(1); });

Javascript のセキュリティ面での制約は、この例以外にも、eval()が使えない、document.write()が使えないなど複数ありますので注意です。

詳しくはこちらのドキュメントを参照しましょう。

Tips - おまけ

AIR のボタンやプルダウンは独自仕様？？

AIR は WebKitベースだと書きましたが、Safariとは見た目のうえで決定的な違いがあります。それは、ボタンやプルダウンメニューの見た目が異なるのです。下の図を見てもらうと分かると思うのですが、AIRのデザインはSafari のボタンやプルダウンメニューよりも若干シャープなデザインになっていますね。ちょっとしたことで、実際の開発とは関係無いことなのですが、印象深かったので「おまけ」で記述しておきます。

Safari で表示した場合 Safariで表示した場合

AIR で表示した場合 AIRで表示した場合

‹ 戻る

鈴木拓生
株式会社リクルート　メディアテクノロジーラボ

1979年11月千葉県生まれ
2004年3月　慶応義塾大学院　政策•メディア研究科卒業
デザイン会社、フリーランスを経て2007年株式会社リクルートメディアコミュニケーションズ入社
現在、株式会社リクルートの実証・研究機関であるメディアテクノロジーラボにて研究員として活動中。
メディアテクノロジーラボでは主にDESIGN SHOWCASE マッシュアップアワードの運営等を担当。