必要条件

この記事に必要な予備知識

特にありません。プログラミングやWebアプリケーション開発の知識も必要ありません。

ユーザーレベル

初級

その他の要件

はじめに

AIRプログラミングに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。

  • デザイナーでAIRによるデスクトップRIAの概要や開発方法を知りたい方
  • Visual Basic、Visual C#、Visual C++、Delphiなどのデスクトップアプリケーション開発者で、AIRアプリケーション開発に関心がある方
  • FlashやDreamweaverでサイト構築をしている方でAIRアプリケーション開発に関心がある方

この連載ではプログラミングの経験を問わず、RIA、デスクトップRIAの概念、AIRの基本を理解したうえで、シンプルなAIRアプリケーションを作成できることを目標とします。

第2回目はAIRランライムの入手とインストール、AIR SDKによるHTML版Hello AIRアプリケーションの作成方法をご紹介します。

学習できること

AIRラインタイムの入手とインストール

第1回「デスクトップRIAの基本とAIRの優位点」でご紹介したように、AIRアプリケーションをインストールして実行するにはAIRランタイムをあらかじめセットアップしておく必要があります。方法はシンプルですが、手順をご紹介します。

Ⅰ.AIRランタイムのダウンロード

AIRランタイムはAdobeサイトからダウンロードします。Windows版、Mac OS版、Linux版があるので、お使いの環境に合わせて入手してください。

Adobe - Adobe AIR

Ⅱ.AIRランタイムのインストール

AIRランタイム入手後のインストール手順は通常のアプリケーションセットアップと同様です。

Windowsの場合、ダウンロードしたAdobeAIRInstaller.exe を実行します。以下の画面イメージはOSとAIRバージョンにより異なります。

上記のようにインストールが完了すると、AIRアプリケーションをインストール実行できます。次にサンプルプログラムのインストール手順をご紹介します。

Ⅲ.シームレスインストール

アドビは作成したAIRアプリケーションの配布方法として、開発者にとってもユーザにとっても非常に効率よいエレガントな方法を提供しています。この方法は「シームレスインストール」と呼ばれます。

AIRプログラムをインストール、実行するための正式な手順として、ランタイムのインストールをご紹介しましたが、アドビが提供する「シームレスインストール」配布方法をとれば、ユーザはAIRアプリのインストールと同時にランライムのインストールを行うことができます。つまり、ユーザがランタイムを個別にダウンロードしてインストールする必要がなくなります。

筆者がそのためのサンプルアプリケーションとシームレスインストーラを作成しました。ランタイムをインストールしていない方も、AIRアプリと同時に「シームレス」にインストールすることができます。おためしください。なお、インストールしたAIRランタイムとAIRアプリケーションはWindowsの場合、通常のアプリケーションと同様にコントロールパルから削除を行うことができます。
サンプルのアプリケーションはベーシックなエフェクト効果(ビヘイビア)を確認するシンプルなものです。下記のサイトからシームレスインストールが行えます。

websysd.com - AIR1.5 Behavior

AIRランタイムがインストールされていない場合、次のダイアログで「はい」を選択してシームレスにインストールできます。

ランタイムがインストール済みの場合、アプリケーションのインストールはすぐに始まります。次の画面では、「開く」を選択してダウンロードと同時にセットアップを開始します。

セットアップ開始後の次の画面では、①発行者ID、②システムアクセスに関する警告が出ていますが、①は独自に作成したデジタル証明書を使用しているため出される警告で、②はAIRアプリケーションがローカルシステムに対してアクセスする機能を持つことに対する確認事項です。
「インストール」を選択したあと、インストール先などを設定すると、すぐにインストールが行われます。

次のようなアプリケーションがインストールされます。クラッシックなHaloビヘイビアを確認できます。

AIR SDKの入手とインストール

Ⅰ. AIR SDK

「SDK」は、「Software Development Kit」の略で、作成したプログラムからアプリケーションを構築するまでに必要なツールがセットになったものです。「AIR SDK」は言うまでもなくAIRアプリ作成のためのDevelopment Kit(開発キット)です。

AIR SDK入手することにより、AIRアプリケーションのインストーラ作成までを行うことができます。一方SDKはアドビサイトから無償でダウンロード可能です。これはつまり、完全に無償でAIRアプリケーションの構築と配布を行うことも可能であることを意味します。

AIR SDKの入手とインストールを行い、シンプルなAIRアプリケーションを作成する手順をご紹介します。

Ⅱ.AIR SDKのダウンロード

AIR SDKはAdobeからダウンロードして入手します。Windows、Mac OS、Linux版があるので、環境に合わせて入手してください。

Adobe - AIR: Adobe AIR SDK

Ⅲ.JREの確認

AIR SDKを入手したらすぐにインストールしたいのですが、SDKに含まれるプログラムはJavaで作成されているため、その実行にはJRE(Java Runtime Environment: Javaプログラムを実行するための環境)のインストールが必要です。

ここでは、既にJREがインストールされて使用可能になっているかチェックする手順をご紹介します。インストールが必要と判断された場合、その手順は本題ではないため、お使いの環境に合わせて行ってください。

Mac OSの場合、ターミナル、Linuxの場合いうまでもなくコンソールでコマンドを入力します。Windowsの場合、スタートメニュー – アクセサリにあるコマンドプロンプトで次のコマンドを入力します。

C:¥Users¥R. Miyata>java -version

次のようなメッセージが得られたら、”1.5.0_15”の部分にある「バージョン」を確認します。バージョンが”1.4.0” 以上なら、すでにAIR SDKを使用可能です。
メッセージが表示されない場合、JREをインストールしてパスの設定などを行う必要があります。

java version "1.5.0_15" Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_15-b04) Java HotSpot(TM) Client VM (build 1.5.0_15-b04, mixed mode, sharing)

Ⅳ.AIR SDKをインストールして使う

AIR SDKのインストールは、Windows、Mac OS、Linuxともダウンロードしたファイルを解凍するだけです。解凍した後binというフォルダができますが、そこにSDKの主要コマンドが格納されています。このフォルダへのパスをOSの環境変数で設定しておくとよいでしょう。

SDKコマンドの実行

さて、いよいよAIR SDKコマンドの動作を確認します。SDKコマンドはbinフォルダにあるため、C:¥AIR_SDKがSDK解凍フォルダの場合、次のように入力します。

C:¥Users¥R. Miyata > cd ¥ [Enterキー] C:¥> cd air_sdk  [Enterキー] C:¥ AIR_SDK> <<=このような表示になれば成功です。 C:¥AIR_SDK> cd bin [Enterキー] binフォルダに移動します。

次に

C:¥AIR_SDK¥bin> adl -help [Enterキー] と入力します。

下記のようなメッセージが表示されたら、すでにAIRアプリケーションを実行可能です。

C:¥AIR_SDK¥bin>adl -help usage: adl ( -runtime <runtime-dir> )? ( -pubid <pubid> )? -nodebug? <app-desc> <root -dir>? ( -- ... )? adl ?help
SDKコマンドラインツールの内訳

ここでもう一度「dir」コマンド(Max OS、Linuxの場合、lsコマンド)により、binフォルダの内容を確認しましょう。

C:¥AIR_SDK¥bin> dir  [Enterキー] と入力します。

adl.exe
adt.bat

という2つのファイルがあります。これらがAIR SDKのメインコマンドです。機能は次のようになります。

  • AIR Debug Launcher(adl.exe)

AIRアプリケーションをインストールせずにテスト実行するプログラムです。このプログラムにより、AIRアプリケーションをセットアップしないで実行できるので、新しいAIRアプリケーションや、自分で作成したアプリケーションを試しに動かしてみたいときなどに役立ちます。

  • AIR Development Tool(adt.bat)

AIRアプリケーションを配布可能なインストールパッケージとしてパッケージングするプログラムです。このツールにより、作成したプログラムをインストーラつきで配布するという、本格的なリリース方法がサポートされます。

AIR SDKでHelloAIRアプリケーションを作成する

AIR SDKを使ってHTMLベースのAIRアプリケーションを作成します。HTMLで記述されたドキュメントをAIR SDKコマンドでアプリケーションに変換します。HTMLドキュメントがJavaScriptを使用している場合、その機能もAIRアプリケーションに盛り込まれます。

Ⅰ.HTMLドキュメントとAIRプログラムの実行結果

まず、シンプルなHTMLドキュメントがどのようなAIRアプリケーションになるか、結果を見てみましょう。

このHTMLドキュメントは下図のようなAIRアプリケーションになります。ブラウザ上ではなく、アプリケーションとして動作していることがわかります。 このようなアプリケーションを作成するには、Windowsの場合、Visual Basic.NETなどの開発ツールを使用するのが一般的でしたが、AIRテクノロジーにより、手軽に作成できるようになったことがわかります。しかも作 成したアプリケーションは手を加えることなくMac OSとLinuxでも動作します。

Ⅱ. Hello AIR HTMLからAIRアプリケーションを作成する

HTMLドキュメントは言うまでもないですが、下記のようなシンプルなものです。エディタでドキュメント作成をしたら、文字コードはUTF-8形式で保存しておきましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>タイトル:Hello AIR</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8 " /> </head> <body> <h1>Hello AIR</h1> <p>最もシンプルなAIRアプリケーション</p> </body> </html>
AIRアプリケーション記述ファイル(application descriptor file)

このHTMLファイルをAIRアプリケーションに変換して実行します。ただし、その際に作成するアプリケーションの情報を記述したXML形式のファイルを作成する必要があります。

その情報ファイルには例えば、「アプリケーション名、バージョン、使用するHTMLファイル、起動時のウィンドウのサイズ」のような、作成するアプリケーションの基本情報が含まれます。このXML形式ファイルを「AIRアプリケーション記述ファイル(application descriptor file)」と呼びます。

AIRアプリケーション記述ファイルは、HTML/Flash/Flexの作成方法にかかわらず、AIRアプリケーションの実行に必要な設定情報です。

ここでは、次のようなアプリケーション記述ファイルを作成します。

<?xml version="1.0" encoding="utf-8" ?> <application xmlns="http://ns.adobe.com/air/application/1.5" minimumPatchLevel="0"> <id>example.html.HelloAIR</id> <version>1.0</version> <filename>HelloAIR</filename> <initialWindow> <content>HelloAIR.html</content> <visible>true</visible> <width>400</width> <height>200</height> </initialWindow> </application>
AIRアプリケーション記述ファイルの内容

このファイルには、次のような情報が記述されています。

<?xml version="1.0" encoding="UTF-8"?>

xmlバージョン1.0で、UTF-8エンコーディングで記述するという宣言です。

<application xmlns=”http://ns.adobe.com/air/application/1.5” minimumPatchLevel="0">

AIRの名前空間を指定しています。application/1.5の「1.5」は使用するAIRランタイムのバージョンを示します。2009年現在の場合、カレントバージョンはAIR1.5です。このバージョンのSDKを使用する場合、このままの記述でOKです。

<id>com.websysd. HelloAIR</id>

アプリケーションに固有のIDを記述します。通常「com.company.アプリケーション名」のような、「reverse-DNS」と呼ばれるIDが使用されます。

<version>1.0</version>作成するアプリケーションのバージョンは1.0であることを示します。

<filename>HelloAIR</filename> AIR実行ファイルの名前を示します。

<initialWindow> ここから初期ウィンドウの設定であることを示します。
    <content>HelloAIR.html</content> メインHTMLソースファイル名
    <visible>true</visible> 起動後にウィンドウを表示
    <width>400</width> ウィンドウの幅=400ピクセル
    <height>200</height> ウィンドウの高さ=200ピクセル
  </initialWindow>  初期ウィンドウの設定はここで終了です。
</application> アプリケーション記述はここで終了です。

AIRアプリケーション記述ファイルは、HTMLソースと同じフォルダに作成します。ここでは、次のようなファイル名で作成します。

  • HTMLファイル: c:¥air_app¥HelloAIR.html
  • アプリケーション記述ファイル:c:¥air_app¥HelloAIR-app.xml

入力ができたらすぐ実行してみましょう。
コマンドプロンプトで保存フォルダ(c:¥air_app)に移動し、adlプログラムを実行します。

C:¥air_app>adl HelloAIR-app.xml

HTMLファイルをShift-JISなどで保存すると次のように日本語が正しく表示されません。

Windows VistaなどのOSに付属する新しいメモ帳では、文字コードを指定して保存が行えます。UTF-8形式で保存すると日本語が正しく表示されます。

Ⅲ.アドビ製品でAIRアプリケーションを作成する

ご紹介したSDKによる方法はあまり効率のよい方法ではありません。この方法はAIR SDKの基本処理を手動で確認するためのものであり、本格的なAIRアプリケーションを構築する近道はアドビアプリケーションを使用することです。
アドビはすべてのWeb製作者、Flashデベロッパ、Flex開発者がそれぞれのスキルを生かしてAIRアプリケーションを作成できるように、Dreamweaver CS3以上、Flash Professional CS3以上、そしてFlex Builder3(Flex 4正式リリース以降はFlash Builder)以降で効率よくAIRアプリケーションの作成とテストが行えるように最良の環境を提供しています。

最後に

今回はAIR ランタイムの入手、シームレスインストールによるAIRアプリケーションとランタイムのシームレスなインストール方法の実施、AIR SDKとテキストエディタによるシンプルなHTML版AIRアプリケーションの作成方法をご紹介しました。
AIR SDKのみのアプリケーション作成はあまり効率的ではありませんが、AIR SDKはAIR開発環境に共通するベースとなるツールです。
次回より本格的なAIRアプリケーション開発を行うための基本開発手順をご紹介いたします。

次回のトピック