Adobe AIRとは
「Adobe AIR」とは、リッチクライアントとして定評のある「Flex」や「Flash」「ActionScript」といったWeb技術を利用してデスクトップアプリケーションを作成し、動かせる実行環境のことです。Adobe社が提供しています。
ブラウザを使用する必要がないため、ローカルファイルへのアクセスやドラッグ＆ドロップを行うこともでき、WindowsやMac OS、Linuxで動作するなど、プラットフォームを問わない特長もあります。
今回はこのAdobe AIRを利用して、MP3プレーヤーを製作してみましょう。
対象読者
- Flash、Flexでの開発経験のある人。
- 基本的なActionScript3.0の知識のある人。
- プラットフォームを問わないアプリケーションを開発したい人。
実行環境/開発環境の準備
それではまず、Adobe AIRの実行環境をインストールしましょう。Adobe Labsからインストーラを入手し、インストールしてください（Windows版とMacintosh版があります）。
続いて、Adobe AIRのコンパイルに必要な「Flex 3.0 SDK」を、AdobeのWebページからダウンロードし、インストールします（SDKはページ下部にあります）。どちらも無料で入手できます。
最後に、Flex 3.0 SDKをインストールしたディレクトリの「bin」ディレクトリにパスを通せば、開発の準備は完了です。
簡単なAdobe AIRアプリケーションの作成
それでは早速、今回の目的「MP3プレーヤーの製作」に入りましょう。まず、テキストエディタで以下のソースコードを記述してください。
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" title="AirMusicPlayer" alpha="0.9" > </mx:WindowedApplication>
これを「AirMusicPlayer.mxml」という名前で作業ディレクトリに保存します。この際、文字コードにUTF-8を指定して保存しないと、コンパイル時にエラーが発生しますので注意してください。
そして、amxmlcコマンドでコンパイルしましょう。
amxmlc AirMusicPlayer.mxml
同じディレクトリに「AirMusicPlayer.swf」というファイルができていれば成功です。
続いて、次の内容を「AirMusicPlayer-app.xml」というファイル名で同じディレクトリに保存して下さい。Adobe AIRアプリケーションに関する情報を記述したファイルで、「ADTファイル」と呼びます。こちらも文字コードはUTF-8を指定します。
<?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0"> <id>music1</id> <version>0.1</version> <filename>AirMusicPlayer</filename> <initialWindow> <content>AirMusicPlayer.swf</content> <visible>true</visible> <systemChrome>none</systemChrome> <transparent>true</transparent> <width>300</width> <height>150</height> </initialWindow> </application>
そして次のようにadlコマンドを実行してください。
adl AirMusicPlayer-app.xml
正しく手順を実行できていれば、AirMusicPlayerというタイトルの付いた、ウィンドウのみのアプリケーションがデスクトップに現れるはずです。終了するには、ウィンドウ右上の×ボタンをクリックします。
MP3プレイヤーの機能の実装
それでは、先ほどのウィンドウだけのアプリケーションに部品を追加していき、MP3プレイヤーを完成させましょう。
まずは、ソースコードの完成形から見せます。すぐに試してみたい人は、先ほどの「AirMusicPlayer.mxml」を下記に置き換えて、コンパイル・実行してみるとよいでしょう。
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="initApp();"
title="AirMusicPlayer" alpha="0.9"
> <mx:Script> <![CDATA[ import flash.media.Sound; import flash.media.SoundChannel; import flash.display.Sprite; import mx.core.UIComponent; import flash.events.*; [Bindable] private var file:File; private var sound:Sound; private var soundPath:String; private var isPlaying:Boolean = false; //演奏中かどうかフラグ private var channel:SoundChannel; private var spriteRight:Sprite; private var spriteLeft:Sprite; private var uic:UIComponent; private function initApp():void { file = new File(); sound = new Sound(); channel = new SoundChannel(); spriteRight = new Sprite(); spriteLeft = new Sprite(); uic = new UIComponent; uic.x=122; uic.y=40; this.addChild(uic); spriteRight.graphics.beginFill(0x0000ff); spriteRight.graphics.drawRect(0, 0, 0.1, 20 ); spriteRight.graphics.endFill(); spriteLeft.graphics.beginFill(0x0000ff); spriteLeft.graphics.drawRect(0, 22, 0.1, 20 ); spriteLeft.graphics.endFill(); uic.addChild(spriteRight); uic.addChild(spriteLeft); file.addEventListener(Event.SELECT,selectHandler); this.addEventListener(Event.ENTER_FRAME,enterHandler); } private function selectHandler(event:Event):void { soundPath = file.nativePath; sound = new Sound(); sound.addEventListener(Event.COMPLETE,loadHandler); sound.load(new URLRequest(soundPath)); } private function loadHandler(event:Event):void { titleText.text = sound.id3.songName; } private function musicPlay():void { try{ channel = sound.play(); isPlaying = true; }catch(e:Error){ } } private function enterHandler(event:Event):void { spriteRight.width = channel.rightPeak * 100; spriteLeft.width = channel.leftPeak * 100; } private function musicStop():void { if(isPlaying == true){ channel.stop(); titleText.text = ""; } isPlaying = false; } private function selectFile():void { musicStop(); file.browse(); isPlaying = false; } ]]> </mx:Script> <mx:Button id="openBtn" label="OPEN" x="10" y="10"
width="80" click="selectFile();"/> <mx:Button id="playBtn" label="PLAY" x="10" y="35"
width="80" click="musicPlay();"/> <mx:Button id="stopBtn" label="STOP" x="10" y="60"
width="80" click="musicStop();" /> <mx:TextInput id="titleText" color="0xffff00"
backgroundColor="0x000000" x="100" y="10"/> <mx:Label text="R" x="100" y="40" width="20"/> <mx:Label text="L" x="100" y="62" width="20"/> </mx:WindowedApplication>
では順を追って、ソースコードを説明していきます。
