Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Adobe AIRでクールなMP3プレーヤーを作ってみる

AIRによる簡単なデスクトップアプリ製作を通してMXML/ActionScriptを学ぶ

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/06/18 14:00

 FlexやFlash、ActionScriptといったWeb技術を利用してデスクトップアプリケーションを作成できる「Adobe AIR」。本稿では簡単なMP3プレイヤーの製作を通して、Adobe AIRの基本となるMXMLやActionScriptについて学びます。

目次

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プレーヤーの製作」に入りましょう。まず、テキストエディタで以下のソースコードを記述してください。

AirMusicPlayer.mxml(UTF-8で保存)
<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を指定します。

AirMusicPlayer-app.xml(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」を下記に置き換えて、コンパイル・実行してみるとよいでしょう。

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>

 では順を追って、ソースコードを説明していきます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • tkitamura(ティーキタムラ)

    Java,php,Flex,Flashなどにより、 某社FXシステムから個人HPの作成まで幅広く 手がけました。 例) 朝比奈キョータローONLINE  アイティーヒジカタOfficialWebSite ほか どうぞよろしく。 &nbsp;

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5