このページの本文へ

HTMLから変換!Adobe AIR開発の入門編 (4/4)

2009年09月29日 10時00分更新

文●宮田 亮/Webシステム開発株式会社代表取締役

  • この記事をはてなブックマークに追加
本文印刷

 いよいよ、AIR SDKを使ってシンプルなAIRアプリケーションを作成してみましょう。ここでは、HTMLで記述されたドキュメントをAIR SDKコマンドでアプリケーションに変換します。なお、今回は使用していませんが、HTMLにはJavaScriptを記述できますので、JavaScriptを使った機能もAIRアプリケーションに盛り込めます。


「Hello AIR」――HTMLからAIRアプリケーションを作成する

 まず、HTMLドキュメントがどのようなAIRアプリケーションになるか、完成画面を見てみましょう。以下は、元になるHTMLドキュメントをブラウザーで表示したところです。

アプリケーションの元になるHTML

 この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アプリケーション記述ファイルを作成する

 HTMLファイルをAIRアプリケーションに変換して実行する前に、アプリケーションの情報を記述したXML形式のファイルを作成する必要があります。情報ファイルには、「アプリケーション名」「バージョン」「使用するHTMLファイル」「起動時のウィンドウのサイズ」といった、作成するアプリケーションの基本情報が含まれます。このXML形式ファイルを「AIRアプリケーション記述ファイル(application descriptor file)」と呼びます。

SDKによるAIRアプリケーションの作成

SDKによるAIRアプリケーションの作成


 AIRアプリケーション記述ファイルは、HTML/Flash/Flexの作成方法に関わらず必要な設定情報です。ここでは、次のようなアプリケーション記述ファイルを作成します。


<?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>

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

<?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年8月現在のカレントバージョンは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



 以下のように、「Hello AIR」アプリケーションが無事に表示されれば成功です。

 なお、HTMLファイルをShift-JISなどで保存すると次のように日本語が正しく表示されません。UTF-8形式で保存すると日本語が正しく表示されますので、文字化けが発生した場合は確認してください。Windows VistaなどのOSに付属する新しいメモ帳では、文字コードを指定して保存できます。


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

 今回ご紹介したSDKによるAIRアプリケーションの開発は、あまり効率のよい方法ではありません。あくまでもAIR SDKの基本処理を手動で確認するためのものであり、本格的なAIRアプリケーションの構築にはアドビ製品を利用するのが近道です。

 アドビはすべてのWeb制作者、Flashデベロッパー、Flex開発者がそれぞれのスキルを生かしてAIRアプリケーションを作成できるように、 Dreamweaver CS3以降/Flash Professional CS3以降/Flex Builder3以降(Flex 4からはFlash Builder)で、AIRアプリケーションの開発をサポートしています。これらのツールを使えば、AIRアプリケーションの作成やテストを効率よくできます。


最後に

 今回はAIRランタイムの入手、シームレスインストールによるAIRアプリケーションとランタイムのインストール方法、AIR SDKとテキストエディタによるHTML版AIRアプリケーションの作成方法をご紹介しました。AIR SDKだけを使ったアプリケーションの作成はあまり効率的ではありませんが、AIR SDKはAIR開発環境に共通する、ベースとなるツールですので覚えておくとよいでしょう。

 次回より、本格的なAIRアプリケーション開発の基本手順をご紹介します。

■次回のトピック

  • DreamweaverによるAjax版AIRアプリケーションの開発手順

著者:宮田 亮氏

宮田氏

Webシステム開発株式会社代表取締役 開発・教育エンジニア。アドビ認定Flex/AIR/Flashデベロッパー、同Flex/AIR/Flashインストラクター。20年を超えるIT開発・教育・マネジメントキャリアを持ち、Flex、AIR、Java、C/C++、Oracle、MySQL、.NET等を駆使したシステム開発経験多数。同社サイトでは、Flex/AIRの技術情報やサンプルコードの公開している。技術者養成の専門スクールIT塾(Adobe認定トレーニングセンター)でFlex/AIRセミナーも随時開講。著書は「Flex 3プログラミング入門」(秀和システム)、「AIRプログラミング入門」(秀和システム)。

前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く