トップ » 技術記事 » API で覚える Adobe AIR（1） - AIR でできること

API で覚える Adobe AIR（1） - AIR でできること

このエントリーをはてなブックマークに追加

タグ: AIR javascript


API で覚える Adobe AIR

Adobe AIR が話題になっています。Adobe AIR を使えば、これまで使ってきた Web アプリケーションの技術、HTML/JavaScript や Flash/Flex を利用して、デスクトップアプリケーションを作ることができます。今回から、数回にわたって、Adobe AIR の API をテーマにして、AIR の各機能を紹介していきます。1回目の今回は、AIRの機能を概観してみます。

これまでも、八角研究所の連載で、Adobe AIR について紹介してきました。これらの内容で、AIR の概要や、ちょっとしたツールの使い方が分かって頂けたのではと思っています。そこで、今度は、AIR の各機能に注目して、AIR の使い方を紹介します。これまでが AIR 基礎編だとしたら、今回の連載は、機能編といったところでしょうか。

APIというのは、Applicatin Programming Interface の略で、システムに固有の機能を使うためのインターフェイス（利用者との接点）を指します。例えば、Windows API と言えば、Windowsのコア機能を使うためのライブラリ群を指します。つまり、AIR APIとは、Adobe AIRのコア機能を使うためのライブラリ群です。

Adobe AIR でできることを確認してみよう！

AIRで出来ることは、既存の Web ブラウザベースのアプリケーションでできることに加えて、ローカルファイルへのアクセスやデータベース、ネイティブウィンドウやメニューのサポートなど盛りだくさんです。

AIRのAPIは、JavaScript と、ActionScript(Flash/Flex)で同じように使えるように設計されています。これらのAPIは、機能のグループごとにパッケージ単位に分けられています。例えば、ローカルファイルアクセスの機能は、「flash.filesystem」というパッケージにまとめられています。また、クリップボードの機能は、「flash.desktop.Clipboard」という具合です。以下にAIRの代表的な機能をまとめてみました。

AIR API の機能一覧
  • 機能 [パッケージ名]
  • ローカルファイルアクセス(コピー、移動、ショートカット作成)[flash.filesystem]
  • OSネイティブなウィンドウ [flash.display.NativeWindow]
  • OSネイティブメニュー [flash.display.NativeMenu]
  • ネットワーク(HTTP/ソケット)[flash.net]
  • クリップボード[flash.desktop.Clipboard]
  • ドラッグ&ドロップ[flash.desktop.NativeDragManager]
  • システムトレイアイコン[flash.desktop.SystemTrayIcon]
  • キーボード/マウス[flash.ui]
  • バイナリ[flash.utils.ByteArray]
  • マルチメディア(音声/動画) [flash.media]
  • データベース(SQLite)[flash.data]
  • ネットワークの監視（接続状況の確認)[air.net]
  • HTML/PDF [flash.html]

機能の後ろにある[パッケージ名]は、AIR の機能がどのパッケージで宣言されているかを表しています。こうやってみると、ほとんど、AIR の機能は、flash のパッケージに属しているものだというのが分かると思います。

ただし、これを、JavaScript から使う場合には、「AIRAliases.js」というライブラリのおかげで、「air.XXX」のような「air」から始まるクラスを利用してプログラムを作ることができるようになっています。

では、次に、AIR だけでは実現できないことをいくつか紹介してみます。

Adobe AIR で出来ないこと

AIR では、いろいろなデスクトップアプリケーションを作ることができます。しかし、完全に既存のデスクトップアプリケーションを置き換えられるのかと言うと、難しい部分もあります。

まず、AIRでは、OSのすべての機能を使えるわけではないという点にあります。OSが提供するネイティブな API は使うことができません。加えて、直接、自身以外の実行ファイルを起動することもできませんし、レジストリを書き換えるなど管理者権限を必要とするようなアプリケーションは作ることができません。(※ローカルにあるファイルの読み書きコピーや列挙、ショートカットの作成はできます。)

ただし、多くのデスクトップアプリケーションでは、これらの制約と無縁です。時計や計算機、カレンダーなどのアクセサリをはじめ、各種のニュースを表示するティッカーや、お絵かきツールなど、さまざまなアプリケーションを、AIR で作成することができます。

JavaScript で、グラフィック（Canvas API）が利用できる！

また、JavaScript でAIRアプリケーションを作る場合に、AIR API 以外でも便利な機能があります。それが、Canvas API です。AIR は、Safari のHTMLエンジンである、Web Kit をベースにして作られています。そのため、Safari に用意されている、描画機能、Canvas API を利用することができます。これを使うことで、Flash/Flex の機能を使うことなく、グラフィックを利用することができます。

以下は、Adobe AIR のマニュアルにあるプログラムですが、次のようにしてグラフィックを描画することができます。

JavaScriptで描いた三角形
JavaScriptで描いた三角形
<html>
<body>
<canvas id="triangleCanvas" style="width:40px; height:40px;"></canvas>
<script>

    var canvas = document.getElementById("triangleCanvas");
    var context = canvas.getContext("2d");
    context.lineWidth = 3;
    context.strokeStyle = "#457232";
    context.beginPath();
        context.moveTo(5,5);
        context.lineTo(35,5);
        context.lineTo(20,35);
        context.lineTo(5,5);
        context.lineTo(6,5);
    context.stroke();
</script>
</body>
</html>

Canvas API の詳細については、Apple の Safari に関する資料が参考になります。

AIR の HTML/CSS/JavaScriptのアプリケーションは、Web Kit という技術の上に構築されています。これは、Mac OS X に標準で搭載されているWebブラウザ「Safari」に使われているもので、オープンソースのプロジェクトとして開発されているものです。AIR が、独自の HTML レンダリングエンジンを使うのではなく、Web Kit を採用したおかげで、既存の多くの Ajax ライブラリをそのまま利用することができるようになっているのです。（ただし、AIR ならではのセキュリティ制約があります。詳しくは、Adobe AIR と ExtJS の入門をご覧ください。）

JavaScript で AIR APIを利用するには？

JavaScript から、AIR APIにアクセスするには、「window.runtime」からはじまるオブジェクトを利用することで、各種AIRの機能を利用することができます。例えば、AIRには、デバッグ支援の機能として、コンソールへ値を出力する trace() という関数が用意されています。この関数を使うには、「window.runtime.trace()」を呼び出します。

<script>
window.runtime.trace("Hello!");

</script>

AIR SDKでコマンドラインから実行した場合は、以下のようにコンソールに値が出力されます。

http://aoikujira.com/demo/hakkaku/rc/20080427_air-api-trace.png
AIRAliases.js を使う

AIR SDKを使っている場合には、SDKの「frameworks」ディレクトリに AIRAliases.js というファイルが入っています。(Aptana を使う場合には、AIR プロジェクトを作っただけで自動的にプロジェクトにコピーされます。)

この AIRAliases.js は、JavaScript で AIR を使うときの必須ライブラリです。これは、何をするものかと言えば、ActionScript向けに作られている AIR API のパッケージを、JavaScript で手軽に使えるようにエイリアスが定義されているのです。

このライブラリを利用すると、例えば先ほど見た、trace() 関数も、「air.trace()」というように、かなり短い名前で使うことができるようになります。JavaScript でライブラリを取り込む場合、以下のように記述します。以下は、AIRAliases.js を利用して trace() 命令を使う例です。

<!-- AIRAliases.js の取り込み -->
<script type="text/javascript" src="AIRAliases.js" />

<!-- プログラム本体 -->
<script type="application/javascript">
air.trace("Hello!");
</script>

AIR API のまとめ

今回は、主に、Adobe AIR でできることについて紹介しました。また、JavaScript から、AIR の API を使う場合に必要となる、AIRAliases.js の役割についても書きました。次回から、実際にAPIを利用したプログラムを紹介します。お楽しみに。

Series Navigationファイル関連APIを使ってみよう»

このエントリーをはてなブックマークに追加

Posted by クジラ飛行机 | 2008年05月07日 01:12 | permalink

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :