アドビ エアバス

エアバスと言っても、グーグルが所有しているボーイング７６７のような飛行機ではありません。

エア ＝ AIR ＝ Adobe Integrated Runtime

AIRは、コードネームApolloの製品正式名で、

AIR BUS ＝ AIRデザインのバス

このバスですが、先週の金曜日、社内のカフェテリアでランチをしていたらオフィスの窓からAdobeロゴの付いたバスが停まったのが見えました。

これから新事業で新たなレベニューを求めて公共交通のサービスでもはじめるのかな？（冗談です）と思ったのですが、どうやらそうではないみたいですね。

気になるので調べてみたのですが、on AIR Bus Tourがあるみたいです。北アメリカの１８都市を巡って、AIRのプロモーションを行うイベントのようです。

on AIR Bus Tour

どうせなら、あいのりみたいに世界一周したほうが面白そうですね。で世界一周の様子をAdobe Connectで配信するとかして。

でも今回のツアーはライブ配信があるみたいですね。こちらのページで。

サイトのスケジュールを見ると７月１０日に最初の目的地シアトルに着く予定のようです。おそらく今現在シアトルに向かっている最中なんでしょうね。（太平洋時間７月９日午前１２時現在）

さて、気になるバスのデザインですが、以下のページで確認できます。

http://www.flickr.com/photos/mikechambers/632337663/in/pool-onairbustour/

勢いでAdobe AIRの飛行機でも購入してほしいですね。

ちなみにAIR ギターもあるみたいですね。

http://www.flickr.com/photos/mikechambers/581742767/in/pool-onairbustour/

イメージビューアを作ってみよう

Apolloランタイムでは、ファイルシステムの参照が可能です。この機能を生かして、ハードディスク内にある画像を表示させるアプリケーションを作成してみよう。

イメージビューアを作成するには、以下のコンポーネントが必要です。

• Image (ID="imageContainer")
  
• Button
• Label (ID="infoLabel")
• FileSystemTree (ID="tree")

上にFileSystemTreeを含みました。今回は、ハードディスク内のイメージを表示させるので、FileSystemTreeというコンポーネントを使用して、エクスプローラーのようなツリー状のスタイルでファイルを選択してイメージを表示させたいと思います。

まず、スクリプト部分は、以下のようになります。

<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init( ):void {
tree.directory = File.documentsDirectory;
}
public function getDetails( ):void {
var node:File = tree.selectedItem as File;
if(node != null) {
if(node.isDirectory) {
logDirectoryDetails(node);
} else {
logFileDetails(node);
}
}
}
public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath;
imageContainer.source = file.url;
}
public function logDirectoryDetails(dir:File):void {
infoLabel.text = dir.nativePath ;
}
]]>
</mx:Script>

以下の一行でファイルシステムにアクセスできるようにします。

import flash.filesystem.File;

以下の関数では、デフォルトでマイドキュメントのディレクトリを参照する指定を行います。

public function init( ):void {
tree.directory = File.documentsDirectory;
}

以下の関数でImageコンポーネントに画像のファイルのパスを渡す処理を行います。

public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath; //Labelに選択したパスを表示する
imageContainer.source = file.url; //Imageコンポーネントのsourceに表示させるイメージのパスを渡す
}

file.nativePath;は、実際どのようなパスかを表示させます。Traceで
file.nativePath;の値を調べてみると、以下のような値を返します。

C:\Documents and Settings\username\My Documents\My Pictures\Picture\adobe1.jpg

imageContainer.sourceには、表示させたいイメージのパスを渡してあげるのですが、パスの渡し方がちょっと特殊なので、
imageContainer.source = file.nativePath;というようには行きません。イメージのパスを渡す場合は、file.urlを使います。

Traceでfile.urlがどのような値か調べてみると、以下のような値を返します。

file:///C:/Documents%20and%20Settings/username/My%20Documents/My%20Pictures/Picture/adobe1.jpg

イメージを表示させる際に、このパスの渡し方に気をつけましょう。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init( )"
>
<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init( ):void {
tree.directory = File.documentsDirectory;
}
public function getDetails( ):void {
var node:File = tree.selectedItem as File;
if(node != null) {
if(node.isDirectory) {
logDirectoryDetails(node);
} else {
logFileDetails(node);
}
}
}
public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath;
imageContainer.source = file.url;
trace("file.nativepath is: " + file.nativePath);
trace("file.url is: " + file.url);
}
public function logDirectoryDetails(dir:File):void {
infoLabel.text = dir.nativePath ;
}
]]>
</mx:Script>
<mx:Panel
title="Picture Viewr"
width="98%"
height="98%"
verticalCenter="0"
horizontalCenter="0"
>
<mx:HBox
height="100%"
width="100%">

<mx:VBox
width="20%"
height="100%">

<mx:FileSystemTree
id="tree"
height="90%"/>

<mx:Button
label="Load Image"
click="getDetails( )"/>
</mx:VBox>

<mx:VBox
height="100%"
width="80%">

<mx:Image
id="imageContainer"
styleName="picture"
maxWidth="500"
maxHeight="500"
scaleContent="true">
</mx:Image>
<mx:Label
id="infoLabel"
text="Info" />

</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:ApolloApplication>

---

リファレンスサイト

Apolloポケットガイド邦訳Wiki - ファイルブラウザを作る

TextInputに入力した文字をLabelに渡してみよう

今回は、TextInputコンポーネントに入力した値をLabelコンポーネントに渡してみたいと思います。
前回のマウスイベントの取得を応用して、ボタンをクリックした際にTextInputに入力してある値をLabelに表示させます。

用意するコンポーネントは、

• TextInput
• Label
• Button

今回は、ボタンをクリックしたタイミングでTextInputのテキストをLabelのテキストに代入する処理を行います。この処理を行うには、以下のようなコードを記述します。

public function clickHandler(event:Event):void {
resultString.text = inputString.text;
}

前回同様にクリックのイベントが発生したら、inputString.textをresultString.textに代入します。

resultStringは、TextInputのIDです。
inputStringは、LabelのIDです。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
width="300"
height="150"
layout="absolute"
backgroundColor="#334455"
creationComplete="createListener(event);"
>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
public function createListener(event:FlexEvent):void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
}
public function clickHandler(event:Event):void {
resultString.text = inputString.text;
}
]]>
</mx:Script>
<mx:Panel
title="TextInput to Label"
width="90%"
height="90%"
horizontalCenter="0"
verticalCenter="0"
paddingLeft="10"
paddingTop="10"
paddingRight="10"
paddingBottom="10"
layout="vertical"
backgroundAlpha="30"
>
<mx:HBox width="100%" height="100%">
<mx:Label
text="Input:"
/>
<mx:TextInput
id="inputString"
width="100%" text=""
/>
<mx:Button
id="myButton"
label="OK"
/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:Label text="Result:" />
<mx:Label
id="resultString"
width="100%"
/>
</mx:HBox>
</mx:Panel>
</mx:ApolloApplication>

マウスイベントを取得してみよう

Apolloのアプリケーションと言っても記述するコードの中身はFlexのMXMLおよびActionScriptになります。今回は、各マウスのイベントを取得してみましょう。

マウスイベントを取得するにはいくつか方法があるかと思いますが、イベントについて、FlexのLiveDocsに説明が書いてあります。

イベントの使用

今回は、マウスをクリックした時、マウスをボタン上にロールオーバーした時、マウスをボタンからロールアウトした時のイベントを取得します。

まず、マウスをクリックした時のイベントを取得するには、

MouseEvent.CLICK

また、ロールオーバー、ロールアウトには、

MouseEvent.ROLL_OVER //ロールオーバー
MouseEvent.ROLL_OUT //ロールアウト

を使用します。

このマウスイベントを取得するには、イベントリスナーが必要となります。イベントリスナーはイベントが発生したことを監視するaddEventListenerという監視役が必要です。そこで、今回はボタンにイベントリスナーを適用するので、以下のような感じになります。

myButton.addEventListener (MouseEvent.CLICK, clickHandler);

また、発生したイベントに応じて、何らかの処理を実行したいので、addEventListenerの第二引数の名前の関数を以下のように用意します。

private function clickHandler ( event:Event ):void {
//ここに実行したい処理を記述
}

今回の場合は、マウスをクリックした際に、myLabelに「Mouse Click」という文字を表示させたいので、以下のような記述になります。

private function clickHandler ( event:Event ):void
{
myLabel.text = "Mouse Click";
}

さて、これらのコードですが、MXMLファイルのどこにでも記述して良いわけではないので、あるタグで囲ってあげる必要があります。スクリプトの処理を行う場合は、<mx:Script> から始まるタグの中にさらに<![CDATA[の中でスクリプトの処理を行う必要があります。また、]]></mx:Script>で閉じる必要があるのでお忘れなく。

<mx:Script>
<![CDATA[

]]>
</mx:Script>

実際、今回の処理をこのタグに入れると以下のような感じになります。

<mx:Script>
<![CDATA[

public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>

public function createListener():void

なお、上の関数を使用しているで、<mx:ApolloApplication内にcreationComplete="createListener();"を追加しておきましょう。

スクリプトの部分は上記で完了です。さて、スクリプトの処理を実行する元となるボタンなどの設定は、以下の通りです。

<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>

スクリプト部分で、myButton.addEventListenerと記述してあります。この部分のmyButtonは、ボタンコンポーネントのIDを示しているので、<mx:Buttonでid="myButton"という感じでスクリプト内で使用している名前に統一しておきましょう。ラベルコンポーネントも同様です。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="350" height="200"
creationComplete="createListener();"
>

<mx:Script>
<![CDATA[
public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>
<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>
</mx:ApolloApplication>

---

リファレンスサイト

Class MouseEvent

Flex クイックスタート：イベントの処理

Flex BuilderでHello Worldアプリケーションを作成しよう2

前回コードベースで「Hello World」のアプリケーションを作成しましたが、Flex Builderでは、デザインビューモードでラベル等を配置してテキストを表示させることも可能なので、この方法も紹介したいと思います。

まず、前回同様にFlex Builderを起動して、プロジェクトを作成または開きます。
下の図のようにMXMLファイルが開くと、「Source」もしくは「Design」を選択できるボタンがあるので、「Design」のボタンをクリックします。




「Design」ボタンをクリックするとGUIでラベル等を配置できるようになります。例えばラベルを配置したいのであれば、Flex Builderの画面左下側にコンポーネントを選択できるパネルがあるので、ここからラベルをMXMLにドラッグアンドドロップします。





MXMLにドラッグアンドドロップした後、ドロップしたコンポーネント（例えばラベル）が選択されているのを確認して、今度はFlex Builderの画面右側にラベルのプロパティが表示されるので、「Text」部分に「HelloWorld!」と入力してみましょう。



入力したテキストの内容がMXMLに反映されます。



「Design」を使用した方法でもMXMLのコードは自動的に生成されるので、レイアウトを整えたりするには、こちらの「Design」を使用したほうが手っ取り早いかもしれません。

bloggerでコード領域用のCSSを適用する

サンプルアプリケーションのコード部分をブログで紹介したい場合があります。下記のようにブログ本文と区別をつけるため、ボックスを配置して、その中にコードを表示させるにはどうすればいいのでしょうか？

<body> サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル
サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　 サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル
サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　サンプル　
</body>

どう設定すれば良いか分からなかったので、個人的なメモも兼ねて紹介したいと思います。

BloggerでCSSの設定を変更もしくは追加するには、ブログの管理ページにログインし、「テンプレート」タブの「HTMLの編集」をクリックします。

「HTMLの編集」をクリックすると、ブログで設定しているレイアウトのコードが表示されるので以下のコードを追加して保存します。

p.code {
font-family: "Courier New", "Courier", "mono"; //フォントを指定
font-size: small; フォントサイズを指定
width: 400px; //ボックスの幅
white-space: nowrap; //改行を行わない
overflow: auto; // コードがボックスに収まらない時にスクロールを表示する
border-style: solid; //ボーダースタイルを実線に設定
border-width: 1px;
background-color: #F4FFFC;
line-height: 100%;
margin: 1px;
padding: 2px;
}

上の記述のような感じでコードを追加して、テンプレートを保存した後、ブログを投稿する際に、コード部分を「<p class="code"> </p>」で囲むことでコード部分がボックス内に表示されるようになります。

なお、プレビューでは適用されないので公開した後に確認する必要があります。

Flex BuilderでHello Worldアプリケーションを作成しよう

はじめてアプリケーションを作成する際の定番として、「Hello World」という文字を表示させることからはじめてみましょう。

Flex BuilderでApolloアプリケーションを作成する場合、主にMXMLとActionScriptが必要となってきます。

今回は、「Hello World」という文字を表示させるだけなので、FlexのMXMLだけを使用します。

まず、Flex Builder 2を起動して、[File]-[New]-[Apollo Project]を選択すると下のようなダイアログボックスが表示されるのでデフォルトで選択されている「Basic」のまま「Next」をクリックして次に進みます。


次にApolloアプリケーションのプロジェクト名を入力します。

今回は「HelloWorld」というプロジェクト名にします。プロジェクト名を入力後に「Finish」をクリックします。

プロジェクト名の設定が完了すると上の図のように、「HelloWorld.mxml」がデフォルトで開いています。また、あらかじめ、以下のようなコードが入っています。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:ApolloApplication>

このコードに「Hello World」の文字を表示させるため以下のようにコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" />
</mx:ApolloApplication>

今回は、MXMLのmx:Labelを使い、以下の一行を追加して「Hello World!」を表示させます。

<mx:Label text="Hello World!" />

上記のコードを記述後、[Run]-[Run HelloWorld Ctr+F11]を選択して、アプリケーションを実行するか、もしくは、「Ctrl + F11」を押す、再生ボタンのアイコンをクリックしてアプリケーションを実行することができます。



アプリケーションを実行すると上のようなウィンドウが表示されます。「Hello World!」という文字が左上端に表示されました。しかし、この位置だと分かるにくいので、文字をウィンドウの中心に持って行きましょう。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" />
</mx:ApolloApplication>

以下の２行を追加することで文字をウィンドウの中心に持っていくことができました。

horizontalCenter="0"
verticalCenter="0"

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" />
</mx:ApolloApplication>

Flex Builder 2 と Flex Builder用のApollo拡張機能のインストール

「Apolloのアプリケーションを作成するには？」でApolloアプリケーションを作る方法として、Flex Builder 2で作るのが、最も扱いやすい方法だとという事を話しました。 さて、このFlex Builder 2の入手方法ですが、これも同様にAdobe Labsからトライアル版がダウンロードできるので、トライアル版をダウンロード、インストールして試しましょう。(トライアル版をダウンロードするにはAdobeアカウントのログインが必要です。)

Flex Builder 2のインストールが完了したらApollo拡張機能もダウンロードして、インストールしましょう。

Apollo拡張機能のインストーラーもAdobe Labsからダウンロードできます。こちらからアクセスできます。

Flex Builder 2およびApollo拡張機能のインストールが完了したら、Flex Builderを起動して、[File]-[New]-[Apollo Project]がメニューにあれば、このメニューを選択して、Apolloのアプリケーションの作成を開始できます。

Apollo関連Webサイト

Apolloの参考書として、「Apollo for Adobe Flex Developers Pocket Guide」という本が出ているのですが、Apolloがまだアルファ版ということもあり、個人で購入するかどうかを考えていたのですが、この本を邦訳しているサイトを発見したので、こちらを活用したいと思います。

Apolloポケットガイド邦訳Wiki
http://labs.anthill.jp/wiki/apollo/index.php?FrontPage

また、その他にもApolloに関する情報が以下のサイトで入手できます。

http://weblogs.macromedia.com/akamijo/

http://www.apolloapps.com/

http://weblogs.macromedia.com/mesh/

これらのサイトとその他のサイトをブログのリンクに追加してあるので、このブログのリンク（ブログの右側のサイドバー）からもアクセスできます。

Apolloのアプリケーションを作成するには？

Apolloのアプリケーションを作成するには、Apollo SDK およびFlex Builderに拡張機能をインストールして、Flex BuilderでApolloのアプリケーションを作成することができるようです。現在のところ、一番扱いやすい方法としては、Flex Builderを使用してアプリケーションを作ると良いでしょう。

次は、Flex Builderの入手方法、Flex Builder用のApollo拡張機能のインストールを紹介したいと思います。

Apolloのサンプルアプリケーションを試してみよう

Adobe Labsにサンプルアプリケーションがあります。





上のページからApolloのサンプルアプリケーションがダウンロードできます。

Apolloのアプリケーションは、「.air」という拡張子のインストーラーを実行してアプリケーションをインストールします。

試しにアプリケーションをひとつダウンロードして、インストールしてみましょう。



例えば、「 ScreenPlay.air 」をダウンロードすると上のようなアイコン（ファイル）がマシン上に現れます。このアイコンは、Apolloのランタイム上で動作するアプリケーションのインストーラーになります。このアイコンをダブルクリックして、インストールを開始します。

インストールが開始されると上のようなウィンドウが表示されます。そのままインストールを続行したい場合は「Install」をクリックします。

今回は、「Adobe ScreenPlay 1.0」というアプリケーションをインストールします。また、オプションとして、アプリケーションのショートカットをスタートメニューおよびデスクトップに追加するか選択できます。



「Continue」をクリックするとインストールが完了します。

さて、インストールしたアプリケーションを起動してみましょう。
インストール直後は、アプリケーションを起動するにチェックが入っているので、そのまま「Finish」をクリックすれば、アプリケーションが起動します。


デスクトップにショートカットを追加するオプションが選択されていれば、デスクトップ上にアプリケーションのアイコンが表示されます。このアイコンをダブルクリックして、アプリケーションを起動します。


今回のサンプルアプリケーションは、デスクトップ上に直接書くことができるアプリケーションです。線を描いたり、線の色、太さ等の変更もできるようです。

最後にサンプルアプリケーションのアンインストールは、通常のアプリケーションと同様に、コントロールパネル＞プログラムの追加と削除でアンインストールします。

インストールしたアプリケーションの名前が一覧に表示されるはずなので、その名前を選択して削除します。

Apolloランタイムをインストールしてみよう

Apolloのアプリケーションを使うには、まずApolloのランタイムがインストールされている必要があります。Apolloのランタイムは現在Adobe Labsでアルファ版が無料でダウンロードできます。

まずはAdobe LabsからApolloランタイムをダウンロードしてみよう。

上のページが表示されたら、使っているOSに応じて「Download for Macintosh」および「Download for Windows」をクリックしてインストーラーをダウンロードしよう。

ここからはWindows版で話を進めていきます。

インストーラーをダウンロードしたらファイルをダブルクリックします。

インストーラーをダブルクリックするとApolloランタイムのインストールが始まります。インストールが終わると次のようなダイアログが表示されます。


これでApolloランタイムがマシンにインストールされました。インストールされたかの確認は、コントロールパネルから「プログラムの追加と削除」を開いて、一覧に「Adobe Apollo 1.0 Alpha 1」というのがあれば、インストールされています。また、アンインストールもここで行います。

次はApolloのサンプルアプリケーションをインストールしてみましょう。

Apollo とは

最近、AdobeからApolloという製品のアルファ版がAdobe Labsからダウンロードできるようになりました。Apolloがどういうものか知りたかったので、私も早速Apolloをダウンロードしてみました。

まず、Apolloがどういうものかと言うと、Apollo本体（ランタイム）を他のAdobe製品に例えると、Flashのスタンドアローンプレイヤー（もしくはプロジェクタ）が似ているかと思います。

FlashオーサリングのアプリケーションをマシンにインストールするとFlash Playerのスタンドアローン版も一緒にインストールされます。このスタンドアローンプレイヤーがあることでSWFファイルをデスクトップ上で実行することができます。

Apolloのランタイムは、Flashのスタンドアローンプレイヤーみたいにアプリケーションがデスクトップ上で実行できるというものです。

ただ、ApolloではFlashと違ってファイルシステム間の連携ができるのでより柔軟なアプリケーションが作れるかと思います。

akihiro kamijoブログにも詳しく紹介されています。

本ブログは、Apolloのサンプルのアプリケーションを作成する際のメモとして利用したいと思います。