akihiro kamijo: AIR Archives

February 25, 2009

Flash Player 10.0.22.87 と Adobe AIR 1.5.1 公開

Flash Player 10.0.22.87 と AIR 1.5.1 がリリースされました。どちらもクリティカルなセキュリティ上の問題に対応するためのアップデートですので、できるだけ早く適用することをお勧めします。（http://get.adobe.com/jp/flashplayer,　http://get.adobe.com/jp/air）

Flash Player 10.0.22 については、英文ですが Flash Player update available to address security vulnerabilities に対応されたセキュリティ問題の詳細が記述されています。（バッファのオーバーフローや入力検査時の問題等）ちなみに上記リンクの最後に Flash CS4 や CS3 用のデバッグプレーヤをダウンロードするためのリンクも書かれています。

その他のバグフィックスや機知の問題点についてはリリースノートをご覧ください。（Flash Player 10 Release Notes - pdf:2.1MB）日本語で「Flash Player 10.0.22.87 の修正点と改良点」と書かれた箇所に 20 点ほど記述があります。あと、10.0.22.87 から Solaris サポートが追加されています。

AIR 1.5.1 は Flash Player 10.0.22 の搭載とバグフィックスが主要な変更点ですが、2 件だけ追加機能があります。

InvokeEvent.reason イベントにより、アプリケーションがユーザによって起動されたか、ログイン時に自動的に起動されたかを知ることができる
Capabilities.cpuArchitecture 属性から、コンピュータのプロセッサアーキテクチャ（「PowerPC」や「x86」などの文字列になる）を取得できる

これらの新しい機能を使用する場合は、アプリケーション記述子の名前空間の宣言を xmlns="http://ns.adobe.com/air/application/1.5.1" に更新します。

AIR 1.5.1 のリリースノートは以下の 2　つが公開されていますのでご覧ください。

開発者向け：http://www.adobe.com/support/documentation/jp/air/1_5_1/releasenotes_developers.html

ユーザ向け：http://www.adobe.com/support/documentation/jp/air/1_5_1/releasenotes_users.html

Posted by ackie at 04:44 PM | Comments (0)

December 19, 2008

AIR 1.5 の変更点

遅ればせながら。AIR 1.5 からセキュリティ上の理由により HTMLLoader の仕様が変更されています。

HTMLLoader.loadString() を使って HTML コンテンツを読み込んだ場合（Flex では HTML.htmlText に HTML コンテンツを設定した場合）、AIR 1.1 アプリケーションは、アプリケーションサンドボックス内にコンテンツを読み込みます。そのため、読み込まれたコンテンツからは自由にローカルリソースにアクセスすることができました。

AIR 1.5 から loadString() はコンテンツをブラウザサンドボックスに読み込むように変更されています。これによって、読み込まれた HTML コンテンツから外部リソースを参照する際、ローカルリソースへのアクセスが制限されるようになります。

以上の変更は、アプリケーション記述子の名前空間を 1.5 に変更した場合のみ有効です。名前空間が 1.1 の場合には、AIR 1.5 ランタイム上でも以前と同じ動作をします。

また、AIR 1.5 アプリケーションでも、HTMLLoader.placeLoadStringContentInApplicationSandbox = true と設定すると、AIR 1.1 アプリケーションと同じ振る舞いをするようになります。ただ、安全面からお勧めはいたしません。

Posted by ackie at 05:47 PM | Comments (1)

December 18, 2008

Linux 用 AIR 1.5 公開

Linux 用 AIR 1.5 が公開されました。http://get.adobe.com/jp/air/ からダウンロードできます。

あわせて Linux 用の AIR SDK も公開されています。日本語のページはまだ更新されていないようですのでとりあえず US のサイトからどうぞ。（Adobe AIR SDK）

これで AIR がサポートするプラットフォームに Fedora 8, Ubuntu 7.10, Open Suse 10.3 が追加されたことになります。他の Linux ディストリビューションでも rpm か Debian パッケージマネージャをサポートするものでは動作させることは可能だと思います。

インストール手順、既知の問題等の詳細についてはリリースノートをご覧ください。

OS に依存しない AIR アプリケーションを開発するためのベストプラクティスが US のサイトに公開されています。（Developing cross-platform Adobe AIR applications）とりあえず英文で申し訳ありませんがよろしければご覧ください。

Posted by ackie at 05:04 PM | Comments (0)

November 25, 2008

Flash テキストレイアウトフレームワーク（Text Layout Framework）ベータ版の公開

Adobe Labs に Text Layout Framework ベータ版が公開されました。（Text Layout Framework@Labs）

Flash Player 10 から新しいテキストエンジン（Flash Text Engine - FTE）とそれを扱うための flash.text.engine という新しいパッケージが追加されていますが、Text Layout Framework はその API 上に構築されたフレームワークです。高度なテキストのレイアウト機能や、テキストの選択、編集機能などが実装されています。また、マークアップ形式のデータを扱うことができます。

上のリンクのページに Flash コンテンツとして 8 つのデモが提供されていますので、まずはそちらをご覧ください。"start tour" をクリックすると最初のデモが表示されます。

Text Layout Framework を使うには実行環境として Flash Player 10 または AIR 1.5 が必要です。開発環境は、Flash CS4, Flex Builder 3.0.2, Gumbo になります。

英語版の Flash CS4 を既にお使いの場合は、こちらのページ（Downloads/Text Layout Framework@Labs）から Text Layout Component for Flash CS4 をダウンロードして、中の MXP ファイルをインストールします。これで、コンポーネントパネル内の標準コンポーネントに textLayout コンポーネントが、その他のパネルに Text Layout パネルが追加されます。

Text Layout パネルでは、テキストのいろいろな属性をパネル内で選択することでプログラムを書かなくても設定できます。使い方は、英語で恐縮ですがとりあえずは Text Layout Component for Flash CS4 Professional Overview をご覧ください。

Text Layout パネルとほぼ同等のものがオンラインでも提供されています。（Text Layout Demo@Labs）

Flex Builder 3.0.2 をお使いの場合は、ダウンロードページ（Downloads/Text Layout Framework@Labs）から Text Layout Framework をダウンロード後、textLayout_core.swc, textLayout_edit.swc, textLayout_conversion.swc の 3 つのファイルを sdks\3.2.0\frameworks\libs の下にコピーします。

Text Layout Framework の使い方サンプル

ダウンロードページ（Downloads/Text Layout Framework@Labs）にある Text Layout Component Examples for Flash CS4　には ActionScript のサンプルも含まれてますので、Flash CS4 がなくてもいろいろな使い方を見ることができます。

例えば、下は Text Layout Framework を使って "Hello World" を表示する例です。

var textFlow:TextFlow = new TextFlow();
textFlow.addChild(p);  // textFlow は全ての要素の親
 
var p:ParagraphElement = new ParagraphElement();
p.addChild(span);  // p は span の親要素
 
var span:SpanElement = new SpanElement();
span.text = "Hello, World"; // span テキストを持つ要素
span.fontSize = 48; // span にスタイルを設定

Text Layout Framework のルートの要素は必ず TextFlow オブジェクトになります。主な要素の関係は以下のような感じです。（HTML と似てます）

TextFlow: DivElement または ParagraphElement を子に持つ
DivElement: DivElement または ParagraphElement を子に持つ - <div>
ParagraphElement: SpanElement, InlineGraphicElement, LinkElement, TCYElement 等を子に持つ - <p>
SpanElement: パラグラフ内のテキスト - <span>
InlineGraphicElement: パラグラフ内に表示されるイメージ（への URL） - <img>
LinkElement: リンク要素（href 属性にリンク先やイベントを指定） - <a>
TCYElement: 縦書きの TextFlow 内で横に表示されるテキスト（TCY は縦中横の意） - <tcy>

これらの要素はマークアップ形式で記述することも可能です。

<?xml version="1.0" encoding="utf-8"?>
 <flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008">
    <flow:p>
      <flow:span fontSize="48">Hello World</flow:span>
    </flow:p>
  </flow:TextFlow>

このマークアップの例は最初のスクリプトのサンプルと同じ内容を記述したものです。

Posted by ackie at 06:58 PM | Comments (1)

November 20, 2008

Adobe AIR 1.5 公開

既報のとおり Adobe AIR 1.5 が公開されています。（http://get.adobe.com/jp/air/）

インストールは既存の環境を上書きするため、検証環境へのインストールを行う際はご注意ください。AIR 1.5 のランタイム上でも AIR 1.0, 1.1 のアプリケーションはサポートされます。とはいえセキュリティフィックスによる仕様変更への対応は必要になるケースもあります。その他機知の制限事項についてはリリースノートをご覧ください。（air 1.5 release note - PDF:129KB）

開発環境は、Flash CS4, Flex Builder 3, Dreamweaver CS3/CS4 が利用できます。現時点で日本語環境で使える AIR 1.5 の開発ツールは Flex Builder 3 と Dreamweaver CS3 ですね。Flex Builder 3 のアップデートはヘルプメニューから「更新を検索…」を選べば処理が開始されます。Dreamweaver CS3 用の AIR 1.5 機能拡張は Tools for AIR and Ajax のページの下のほうにあるリンクからダウンロードしてください。（日本のサイトはまだ更新されていないようなので）

AIR 1.5 の SDK のダウンロードは Adobe AIR SDK から、Flex 3.2 SDK のダウンロードは Flex 3 SDK Downloads からどうぞ。

AIR 1.5 の新機能は

新たに 5 ヶ国語のサポートを追加
Flash Player 10 のサポート
WebKit のバージョン更新
ローカルデータベースの暗号化機能追加

です。

SQLite データベースの暗号化

AIR 1.5 から SQLConnection クラスの open(), openAsync() メソッドが最後の引数に暗号化の鍵を渡せるよう変更されています。

public function open(
  reference:Object = null, openMode:String = "create",
  autoCompact:Boolean = false,　pageSize:int = 1024,
  encryptionKey:ByteArray = null):void
 
public function openAsync(
  reference:Object = null, openMode:String = "create",
  responder:Responder = null,　autoCompact:Boolean = false, pageSize:int = 1024,
  encryptionKey:ByteArray = null):void

encryptionKey は 16 バイト長です。これを指定した場合のみ暗号化された（る）データベースとして扱われます。

パスワードから鍵を生成したいときに、オープンソースの ActionScript 3.0 core library プロジェクト (as3corelib) の EncryptionKeyGenerator というクラスが使えるようになるようです。下のような使い方ができるとのこと。

import com.adobe.air.crypto.EncryptionKeyGenerator;
var keyGenerator:EncryptionKeyGenerator = new EncryptionKeyGenerator();
var encryptionKey:ByteArray = keyGenerator.getEncryptionKey(password);

まだ追加されてないっぽいのですが、コードはこちらに紹介されていますので英文ですがご参考まで。（Understanding the EncryptionKeyGenerator class）

Posted by ackie at 06:35 PM | Comments (0)

September 22, 2008

Adobe AIR Linux 版ベータ公開と AIR 1.5 の情報

AIR Linux 版のベータが公開されています。（Adobe AIR 1.1 for Linux beta@Labs）今回のリリースでは AIR 1.1 の機能がほぼ実装されていますので、既存の AIR アプリケーションはおおよそそのまま Linux 上で実行できることになります。サポートされるプラットフォームは Fedora 8, Ubuntu 7.10, Open Suse 10.3 です。

ベータ版には、以下の 2 つの制限があります。

DRM 機能が実装されていない。そのため Adobe Media Player は正しく動作しない。
バッジからのシームレスインストールが機能しない。AIR パッケージをダウンロードしてインストールする必要がある。

これらの制限は正式版までには修正される予定です。

正式版リリースは年内が予定されていますが、AIR 1.5 のアップデートが先になるようです。従って Linux 版は 1.5 が最初のバージョンということになりそうです。

Adobe Labs にアルファ版が公開されている Linux 用 Flex Builder （Adobe Flex Builder Linux Public Alpha）もこの機会にお試しください。

AIR 1.5 (Cosmo)

さて、上記のように年内に AIR のアップデートが予定されています。AIR 1.5 としてリリースされる予定で、主な目的は Flash Player 10 の新機能をサポートすることです。

主要な新機能をいくつか挙げると、

Flash Player 10 の統合
- Pixel Bender を利用したカスタムフィルターやブレンド
- 3D エフェクトや描画用 API
- 新しいテキストエンジンによる高度なレイアウト機能
新しいストリーミング機能、コーデック
SquirrelFish の Webkit への統合による JavaScript 実行速度の改善
SQLite データベースへのレコード単位での暗号化

などがあります。

Adobe オープンソースサイトに公開されている Flex SDK の最近の nightly builds には AIR 1.5 SDK が含まれています。（Flex 3 SDK Downloads）

これを使えば Win / Mac 環境で AIR 1.5 の一部の機能を試すことが可能です。Nightly builds はきちんとしたテストのされていないものですので、利用する場合はその旨十分ご留意ください。SDK にはコマンドラインツールやライブラリが含まれますが、インストール用の AIR ランタイムは含まれません。また、ドキュメントも AIR 1.1 のままです。

Posted by ackie at 09:04 AM | Comments (0)

June 18, 2008

SwitchBoard ベータ公開

SwitchBoard は AIR アプリケーションと Adobe Creative Suite 製品をつなぐテクノロジーです。SwitchBoard を経由すれば AIR - CS 間でスクリプトを送受信することが可能です。

例えば、Adobe Labs に公開されている SDK には、AIR アプリケーションから Photoshop を利用してイメージファイルのフォーマットを PNG に変換するサンプルが含まれています。このように、制作ワークフローの一部を AIR アプリケーションで繋ぐような使い方が想定されています。

BridgeTalk

BridgeTalk は CS 製品間の通信に使われるプロトコルです。BridgeTalk に対応したアプリケーション間で任意のスクリプトを送受信することができ、必要であればアプリケーション起動も行われます。程度の差はありますが CS3 のつく製品はほぼ BridgeTalk 対応です。

Adobe Bridge CS3 という制作アセットを管理するツールがありますが、これもその名のとおり BridgeTalk を使って他の製品とアセット情報のやり取りを行うツールです。AIR アプリケーションからもこの BridgeTalk を使えるようにするのが SwitchBoard というわけです。

SwitchBoard のインストール

SwitchBoard を有効にするには 2 つのコンポーネントをインストールする必要があります。

SwitchBoard Service ： AIR アプリケーションと Creative Suite 製品間のメッセージを中継
SwitchBoard Launcher ：ターゲットのアプリケーションを起動

プラットフォームに応じて以下のファイルをダウンロードし setup を実行するとインストーラが起動されます。

Windows : switchboard_p1_win_061608.zip : 25.5MB
Macintosh : switchboard_p1_mac_061608.dmg : 12.2MB

画面の指示に従ってインストールを完了すると SwitchBoard service と SwitchBoard launcher がバックグラウンドで起動されます。

ちなみに、ベータ版でサポートされる OS は、

Windows XP SP2, Vista SP1
Mac OS 10.4.9, 10.5.3

です。

SwitchBoard アプリケーションの開発

Labs に Flex Builder 3 用の SwitchBoard SDK が公開されています。

Windows : switchboard_sdk_p1_win_061608.zip : 1.32MB
Macintosh : switchboard_sdk_p1_mac_061608.dmg : 1.59MB

ダウンロードしたファイルから SwitchBoard.swc を見つけて AIR プロジェクトに追加します。

SwitchBoard を使うときは AIR アプリケーションの最初に SwitchBoard.Client.init() を、最後に SwitchBoard.Client.exit() を呼ぶように行を追加するのがお作法です。

CS 製品にメッセージを送るには以下のように記述します。ここでは、Photoshop に JavaScript のスクリプトを送っています。

var msg:SwitchBoard.Message = new SwitchBoard.Message();
msg.target = "photoshop";
msg.body = "alert('Hello Photoshop')";
msg.send();

SwitchBoard 対応の AIR アプリケーションを実行する前に SwitchBoard がインストールされている必要があります。ご注意ください。

より詳しい説明は SDK に含まれているドキュメントをご覧ください。CS 各製品側の情報は ExtendScript Toolkit 2 ヘルプが参考になると思います。

Posted by ackie at 05:36 PM | Comments (0)

June 17, 2008

Application Update Framework for Adobe AIR ベータ公開

AIR アプリケーションのアップデート機能を簡単に実装するためのフレームワークが Adobe Labs に公開されました。（Application Update Framework for Adobe AIR@Labs）フレームワークやドキュメントは air_appupdater_061608.zip (ZIP : 0.92 MB) に含まれています。

このフレームワークにはアップデートの有無からインストール完了の確認までに必要な機能と UI がひととおり含まれています。標準の UI の代わりにカスタム UI も使用することも可能です。

SDK 内には 4 つの同じような名前のファイルが提供されていますが swc ファイルが Flash 用、swf ファイルが HTML 用です。標準で提供される UI を使用する場合は ApplicationUpdaterUI.swc (swf) を、UI を使用しない場合は ApplicationUpdater.swc (swf) を使用します。

このフレームワークでサポートされるのは以下のようなシナリオです。

定期的にアップデートの確認を実行
アップデート情報の書かれた XML ファイルをダウンロードし内容をチェック
新しいバージョンの AIR アプリケーションをダウンロードしてインストールを開始
アップデートの確認からインストール進行状況の通知まで個々のステップにおけるイベントの発行
アップデートされたアプリケーションの最初の実行時のイベント発行

従って、このフレームワークを使用するには、決められたフォーマットの XML ファイルをサーバ側に用意する必要があります。このファイルをアップデート記述子と呼びます。

アップデート記述子には以下の 3 つの項目を記述します。どれも必須項目です。

version - AIR アプリケーションの新しいバージョン、アプリケーション記述ファイル内の version と同じ値を使用
url - AIR アプリケーションのパッケージファイルの URL
description - アップデート処理中に表示される新しいバージョンに関する情報

下はアップデート記述子の簡単なサンプルです。description には lang 属性を使って各国語で説明を記述できるようになっています。

<?xml version="1.0" encoding="utf-8"?>
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
  <version>1.1a1</version>
  <url>http://example.com/updates/sample_1.1a1.air</url>
  <description>
    <text xml:lang="en">English description</text>
    <text xml:lang="ja">日本語 description</text>
    <text xml:lang="fr">French description</text>
  </description>
</update>

さて、アップデート機能を利用するには ApplicationUpdaterUI か ApplicationUpdater のインスタンスを使用します。このとき属性として以下の項目を設定できます。

updateURL: String - アップデート記述子の場所を URL で記述
delay: Number - アップデート確認の間隔を日単位で指定（0.01 のような値も可）
defaultUI: <dialog> タグを使って標準 UI の使用を指定（利用可能なダイアログは “checkForUpdate”,” downloadUpdate”, “downloadProgress”, “installUpdate”, “fileUpdate”, “unexpectedError”）

これらの属性を外部 XML ファイル経由で読み込むことができます。下は外部 XML ファイルの記述例です。

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0">
  <url>http://example.com/updates/update.xml</url>
  <delay>1</delay>
  <defaultUI>
    <dialog name="checkForUpdate" visible="false" />
    <dialog name="downloadProgress" visible="false" />
  </defaultUI>
</configuration>

外部 XML ファイルを利用する場合は、ファイルの場所を configurationFile 属性に設定します。

var appUpdaterUI:ApplicationUpdaterUI = new ApplicationUpdaterUI();
appUpdaterUI.configurationFile = "cfg/updateConfig.xml";

XML ファイルを使用する代わりに ApplicationUpdater の属性に直接値を指定することもできます。

var appUpdaterUI:ApplicationUpdaterUI = new ApplicationUpdaterUI();
appUpdaterUI.updateURL = "http://example.com/updates/update.xml";
appUpdaterUI.delay = 1;

属性を設定したら、必要なイベント処理を登録してから initialize() メソッドを呼びます。これでアップデート機能が実行されます。イベントの詳細についてはフレームワークに付属するドキュメントを参照してください。

var appUpdaterUI:ApplicationUpdaterUI = new ApplicationUpdaterUI();
appUpdaterUI.configurationFile = "cfg/updateConfig.xml";
 
appUpdaterUI.addEventListener(UpdateEvent.DOWNLOAD_COMPLETE, onDownloadComplete);
appUpdaterUI.addEventListener(StatusUpdateEvent.UPDATE_STATUS, onStatusUpdate);
appUpdaterUI.addEventListener(StatusUpdateErrorEvent.UPDATE_ERROR, onStatusUpdateError);
appUpdaterUI.addEventListener(DownloadErrorEvent.DOWNLOAD_ERROR, onDownloadError);
appUpdaterUI.addEventListener(ErrorEvent.ERROR, onError);
 
appUpdaterUI.initialize();

ApplicationUpdater のインスタンスを同時に複数使うことはできません。

Posted by ackie at 12:55 PM | Comments (0)

Adobe AIR 1.1 公開です

Adobe AIR 1.1 が公開されました。（Adobe AIR） AIR 1.1 からは、日本語を含む 10 の言語に正式対応です。AIR アプリケーションのインストール画面にも日本語を表示できます。

日本語のダウンロードページはまだのようですがとりあえずリンクです。（http://get.adobe.com/air/?loc=jp）既に AIR 1.0 がインストールされている環境では AIR の自動アップデート機能が更新の有無を定期的に確認するため、わざわざ手間をかけなくてもそのうちアップデートされることと思います。（なお、今回 Linux 版についての更新はありません。いまのところ夏の間には次のアップデートが行われる予定とのこと。）

下記は、AIR 1.1 の主な新機能のリストです。

インストール時や実行時のダイアログボックスのローカライズ
日本語のキー入力など英語以外の言語向けアプリケーションサポート
アプリケーション記述ファイルの name 及び description 属性の各国語対応
エラーメッセージのローカライズ
Capabilities.languages の追加による OS からの優先する言語の順位の取得
証明書の移行をサポート（自己署名の証明書から CA 発行の証明書へ等）
Windows XP SP3、 Vista SP1 とそれぞれの OS の Tablet PC Edition と 64-bit 版をサポート
File.spaceAvailable API の追加による利用可能なディスクスペースの取得
NativeWindow.supportsTransparency 属性の追加
400 以上のバグフィックスとメモリ利用の効率化
Microsoft SMS や IBM Tivoli 等を利用したサイレントインストール（要ライセンス契約です : Adobe AIR Runtime Distribution）

関連するドキュメントは http://www.adobe.com/support/documentation/en/air/ にまとめられています。

既存の AIR 1.0 アプリケーションはそのままでも AIR 1.1 上で動作しますが、アプリケーションタグの “xmlns” 属性を http://ns.adobe.com/air/application/1.1 に変更すればパフォーマンス向上など AIR 1.1 のメリットを享受できるので、この機会に対応するのもよいかもです。

開発環境の設定

さて、AIR 1.1 対応のアプリケーションを開発するには開発環境も更新が必要です。

Flex Builder 3

Flex で AIR 1.1 のアプリケーションを開発するには今日中に公開される予定の 3.0.2 SDK を使用します。Flex SDK は Adobe のオープンソースサイトからダウンロード可能です。（Flex 3 SDK Downloads）ちなみに 3.0.2 は stable build です。これは最低限のテストはされているが milestone build ほど本格的なテストはされていないビルドになります。

Flex Builder 3 に新しい SDK を追加する方法は livedocs をご参照ください。（Flex Builder での複数の SDK の使用）

データビジュアライゼーションとオートメーションのクラスを使っている場合はそれらのファイルを 3.0.2 のディレクトリにコピーする必要があります。以下はそのリストです。

<sdkdir>/frameworks/libs/automation*.swc
<sdkdir>/frameworks/libs/datavisualization.swc
<sdkdir>/frameworks/locale/en_US/automation*.swc
<sdkdir>/frameworks/locale/en_US/datavisualization_rb.swc
<sdkdir>/frameworks/locale/ja_JP/automation*.swc
<sdkdir>/frameworks/locale/ja_JP/datavisualization_rb.swc
<sdkdir>/frameworks/rsls/datavisualization_3.0.0.477.*

現在の Flex Builder 3 の仕様では、AIR 1.1 用のアプリケーション記述子を使うよう個別に設定する必要があります。ちょっと手間ですが、ルートタグを xmlns="http://ns.adobe.com/air/application/1.0" から xmlns="http://ns.adobe.com/air/application/1.1" に変更してください。

6/18 追記：Flex のテックノートが公開されました。（Update Flex Builder to use the Adobe AIR 1.1 SDK）

Dreamweaver CS3

AIR 1.1 に対応した機能拡張をインストールします。入手はこちらから。（Adobe AIR extension for Dreamweaver mxp : 33.6MB）

Flash CS3

まず、Adobe AIR 用の Flash ファイルが作成できることを確認します。（できない場合は「ヘルプ」→ 「アップデート」で最新のアップデートを適用してください。）

次に、AIK というフォルダの中身を全て削除します。フォルダ自体は削除しないでください。

Windows: C:/Program Files/Adobe/Adobe Flash CS3
Mac OS X: Macintosh HD: Applications: Adobe Flash CS3

AIR 1.1 用の AIK （AIR SDK Integration Kit）をダウンロードして unzip してから先ほどの AIK フォルダ内にコピーします。

Windows: http://www.adobe.com/go/getaikwin （zip : 12.9MB）
Mac OS X: http://www.adobe.com/go/getaikmac （tbz2 :18.1MB ）

さらに、Flash から AIR 1.1 用にパブリッシュするにはアプリケーション記述ファイルをマニュアルでアップデートする必要があります。

まず、一旦アプリケーション記述ファイルを「コマンド」メニューから作成します。これで作成された xxx-app.xml を適当な名前に変更したら、AIR アプリケーション設定画面を開いて、改名したファイルをアプリケーション記述ファイルとして使用するよう指定します。

次に、アプリケーション記述ファイルを編集します。変更する項目は以下のとおりです。テキストエディタなどで開いて修正します。

xmlns="http://ns.adobe.com/air/application/1.0" を xmlns=" http://ns.adobe.com/air/application/1.1" に修正
<name> タグ内に <text xml:lang="ja">日本語名</text> のようにしてアプリケーション名を記述
同様に <description> タグ内にも日本語で説明を記述
<icon> タグが正しくローカルファイルのパスを指すように変更（またはデフォルトアイコンを使うようにタグ自体を削除）
ファイルのエンコーディングを UTF8 に変更

あとは、いつものようにパブリッシュできます。詳細はこちらのテックノートをご覧ください。（Installing Adobe Air 1.1 Update for Flash CS3 Professional）

Posted by ackie at 12:05 PM | Comments (10)

June 04, 2008

Adobe AIR コンテスト締め切りと授賞式

Adobe AIR コンテストの締め切りが今週の金曜日になりました。1 日か 2 日くらいなら遅れても大丈夫らしい（噂ですけど）ので、応募予定の方は最後までがんばってください。

授賞式の予定は以下のとおりです。

日時：2008年６月19日(木)　18:30～20:30 (受付開始 18:00～)
会場：品川プリンスホテルクラブeX
参加費：無料 (要事前登録)
定員：300名

詳細および参加登録はこちらのページをご参照ください。（http://www.info-event.jp/adobe/aircon/）

Posted by ackie at 06:44 PM | Comments (0)

April 09, 2008

Adobe Media Player 1.0 公開

Adobe Media Player 1.0 が US では正式に公開されました。（http://www.adobe.com/products/mediaplayer/）

ご存知のとおり AIR の日本語サポートはまだですが、ご興味のある方はお試しいただければと思います。ダウンロード URL は http://www.adobe.com/go/getamp です。

Posted by ackie at 06:05 PM | Comments (0)

Flash Player 9.0.124.0 と Adobe AIR 1.0.1 公開

Flash Player 9 のアップデートが公開されました。新しいバージョンは 9.0.124.0 です。先日お知らせしたセキュリティ関連の脆弱性への修正対応が行われています。

あわせて、AIR のアップデートも公開されました。これは Flash Player のアップデートがそのまま適用されたもので、その他の仕様に関する変更点はありません。

Posted by ackie at 11:30 AM | Comments (3)

March 31, 2008

Adobe AIR for Linux アルファ版リリース

Adobe AIR の Linux 用アルファ版がリリースされました。（Adobe AIR for Linux@Labs）アルファ版ですのでまだバグもたくさんあると思いますがよろしければお試しください。Mac 版 Win 版と同様に英語版になります。

サポートされる環境は以下のとおりです。

Linux Distribution：

RedHat Desktop Linux 4
RedHat Enterprise Linux v5
Novell Desktop Linux 9
SUSE Linux Enterprise Desktop 10
Ubuntu 6.06

デスクトップ環境：

GNOME
KDE

パッケージ管理：

RPM
Debian

ウインドウマネージャ：

Metacity (default for GNOME)
KWin (default for KDE)

その他詳細はリリースノート（英文）をご覧ください。Linux 版の日本語版に対する要望があれば是非お知らせください。

Posted by ackie at 07:20 PM | Comments (0)

February 26, 2008

Adobe AIR 1.0 関連のアップデート（Spry とインストールバッジ）

AIR 1.0 のリリースと一緒にいくつかのアップデートがありました。

まず、Spry が AIR 1.0 の対応版として 1.6.1 になりました。新しいバージョンのフレームワークと Dreamweaver CS3 用の Spry 機能拡張が Adobe Labs に公開されています。（Spry framework for Ajax@Labs）ダウンロードはこちらから。（Spry prerelease 1.6.1@Labs）

それから、AIR 用の新しいインストールバッジの情報も更新されました。（AIR Badge@Labs）

インストールバッジ (zip: 113 KB)

このインストールバッジを使用する際は zip に含まれる EmbedDemo.html ファイル内のコードが参考になります。SWFObject ベースのアップデータになっていて、HTML 内でインストールに必要なパラメータを設定することができます。参考までに、SWFObject にパラメータを設定する場合は以下のように記述します。

var so = new SWFObject("AIRInstallBadge.swf", "Badge", "215", "180", "9.0.115", "#FFFFFF");
so.addVariable("パラメータ名", "値"); // この行を必要なパラメータの数繰り返す

バッジを正しく動作させるためには、とりあえず以下の 3 つのパラメータを設定します。

airversion ：必要な AIR ランタイムのバージョン（AIR 1.0 は "1.0"）
appname ：ダイアログに表示されるアプリケーション名
appurl ：".air" アプリケーションファイルへの絶対パス (例 http://www.adobe.com/sample.air)

インストールしたアプリを実行したい場合は以下のパラメータも設定します。このとき、アプリケーション記述ファイル内の <allowBrowserInvocation> が true に設定されている必要があります。

appid ：アプリケーション記述ファイル内に書かれたアプリケーション固有の ID （例 com.adobe.air.MyApplication）
pubid ：パブリッシャー ID、16 進数の文字列

その他の主なオプションパラメータもいくつか。（全部試してないので違ったらごめんなさい）

appversion ：アプリケーションのバージョン、アップデートを行う際には必要でアプリケーション記述ファイル内のバージョンと一致していることが望ましい
imageurl ：バッジ内にアプリケーション名の代わりに表示する画像ファイルの URL
appinstallarg ：インストール時にアプリケーションが起動された場合 BrowserInvokeEvent の arguments 属性に渡される値
applauncharg ：バッジからアプリケーションが起動された場合 BrowserInvokeEvent の arguments 属性に渡される値
helpurl ：インストール時のヘルプコンテンツが書かれたページへの URL

その他、バッジ内に表示されるテキストは一通りパラメータで変更できるようになっているようです。

インストールバッジを正しく使用するには Flash Player 9.0.115.0 が必要です。以下の行を追加すると 6.0.65.0 以降のFlash Player がインストールされた環境であれば、必要に応じて Express Install を利用した Flash Player のアップデートが実行されます。

so.useExpressInstall('expressinstall.swf');

インストールのロジックは AIRInstallBadge.as に記述されています。これを変更することでもインストール環境の設定が可能です。また、バッジの見た目を変えたいときは AIRInstallBadge.fla を変更することになります。

Posted by ackie at 09:04 AM | Comments (0)

February 25, 2008

Adobe AIR 1.0 リリース

Adobe AIR 1.0 が正式にリリースされました。US のサイトに製品ページが新しくできています。（http://www.adobe.com/products/air/） AIR ランタイムのインストールは専用の URL からもできるようになっています。（http://get.adobe.com/air/）

また、Flash 用アップデータ（Flash CS3 9.0.2 アップデートの事前インストールが必要です）と Dreamweaver 用機能拡張、 FlexBuilder 3 と開発環境も合わせてリリースされています。

Flash 用アップデータは以下のリンクからダウンロードできます。

日本語版 Windows 用アップデータ (EXE, 16.5 MB)
日本語版 Macintosh 用アップデータ (DMG, 53.3 MB)

ベータ版の Flash 用機能拡張をインストールしていた場合は、事前に以下の作業を行ってください。

1. 以下のフォルダを削除します

(Windows) \Program Files\Adobe\Adobe Flash CS3\AIK
(Mac) /Applications/Adobe Flash CS3/AIK

2. 以下のフォルダを開いて

(Windows) \Program Files\Adobe\Adobe Flash CS3\<lang>\First Run\Commands\
(Mac) /Applications/Adobe Flash CS3/First Run/Commands

以下のフォルダまたはファイルを削除します

AIR フォルダ
AIR - Application and Installer Settings.jsfl
AIR - Create AIR File.jsfl

3. 以下のファイルを削除します

(Windows) \Program Files\Adobe\Adobe Flash CS3\<lang>\Configuration\External Libraries\FLAir.dll
(Mac) /Applications/Adobe Flash CS3/Configuration/External Libraries/FLAir.bundle.

4. 以下のファイルを削除します

(Windows) \Program Files\Adobe\Adobe Flash CS3\<lang>\Configuration\Players\AdobeAIR1_0.xml
(Mac) /Applications/Adobe Flash CS3/Configuration/Players/AdobeAIR1_0.xml

5. 以下のフォルダを開いて

(Windows) \Document and Settings\<username>\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands\
(Mac) /Users/<username>/Library/Application Support/Adobe/Flash CS3/ja/Configuration/Commands/

以下のフォルダまたはファイルを削除します

AIR フォルダ
AIR - Application and Installer Settings.jsfl
AIR - Create AIR File.jsfl

Dreamweaver 用の機能拡張はこちらのページ内のリンクからダウンロードできます。（Tools for AIR and Ajax）英語版のみの提供ですが、日本語版の Dreamweaver でも使えるようです。サポート状況については、なにか情報があればまたお伝えします。

Flex は同時に新バージョンの Flex 3 が発表されています。（Adobe Flex 3）このバージョンアップにより AIR アプリケーションの開発もサポートされています。

残念ながら、既に発表されていた通り AIR 1.0 は英語版ということで、日本語環境でのインストールや実行、それから日本語入力や日本語の表示や日本語データの取り扱いはサポートされないことになります。日本語対応は次のアップデートの最重要項目とのことですので、本格的な利用はもう少しだけお待ちください。

Posted by ackie at 06:05 PM | Comments (2)

December 18, 2007

Adobe AIR ベータ 3 追加情報

遅ればせながら AIR ベータ 3 のもうちょっと詳しい情報です。

実行環境のインストール

まず、今回サポートされる OS は、

Windows Vista Home と Ultimate Edition, Windows XP SP2
Windows 2000 SP4 （シームレスインストールは未サポート）
Mac OS 10.5 Leopard と Mac OS 10.4.x Tiger （Intel と PowerPC）

です。

AIR ベータ 1 の実行環境は 12 月 15 日で使用できなくなっています。ベータ 1 用のアプリケーションについてはこの機会にベータ 3 への移行をご検討ください。ベータ 3 は正式リリース前の最後のベータになる予定（いまのところ）ですので、今後大幅な変更は無いものと思われます。なお、AIR ベータ 2 は 2008 年 6 月 1 日に AIR ベータ 3 は 2008 年 11 月 1 日にそれぞれ使用できなくなる予定です。それまでベータ 2 とベータ 3 の実行環境を一緒に使用することは可能ですが、その場合は必ずベータ 2 の実行環境を先にインストールするようにしてください。

AIR ベータ 1 のアンインストールは Windows であれば｢プログラムの追加と削除」から、Mac ではアプリケーションディレクトリ内の「Adobe AIR Uninstaller」より行うことができます。ちなみにベータ 3 のアンインストールも同様の手順で行えますが、ベータ 3 をアンインストールすると以前のバージョンも全て削除されますのでご注意ください。

さて、以下、今回のリリースでの変更点です。

シームレスインストール

ベータ 3 の環境をインストール後はベータ 2 のシームレスインストールが正常に動作しなくなります。ベータ 2 のインストールバッジを引き続き利用する場合は、ベータ 3 の SDK に含まれる AIRBadge.as を使うようにインストールバッジを修正してください。修正には Flash CS3 が必要になります。なお、ベータ 3 のシームレスインストールの使用は最新の Flash Player （9.0.115.0）が前提です。

アプリケーション記述ファイルの変更

以下の点が変更されています。

xmlns が “http://ns.adobe.com/air/application/1.0.M6” に
<title> が <name> に
<name> が <filename> に
<handleUpdates> が <customUpdateUI> に
appId が <application> タグの属性から <id> に
version が <application>タグの属性から<version> に
<allowBrowserInvocation> タグを <application> の子要素として追加
<icon> タグを <fileType> の子要素として追加

DB 関連の変更

BLOB の書き出しをする際にデータが自動的に ByteArray にシリアライズされます。以前のバージョンで明示的に ByteArray を使用していた場合には対応が必要です。

それから ISQLUserDefinedFunction と SQLUserDefinedFunctionType はサポートされなくなりますので利用を中止するようにしてください。

既知の制限・問題

沢山ありますので主な件だけ。

HTML:

PDF の表示には Reader 8.1 以降が必要です
イメージファイルへの直接リンクをクリックするとイメージの代わりにイメージのダウンロードサイズが表示されます
Vista では <mx:text> 内のリンクをクリックするとデフォルトブラウザの設定に関わらず IE のウインドウが開きます
iframe の width や height を 100% にするとアプリがハングすることがありますのでそれより小さい値を使用します
アプリケーション HTML 以外のテキストインプットでは Control+v が使用できません

HTML 内の Flash コンテンツ：

navigateToURL が指定された HTML ページを表示しないことがあります
Windows 上で frameset/iframe 内の SWF が表示されないことがあります
WMODE が transparent または opaque の場合コンテンツが正しく表示されないことがあります
右クリックで

証明書を使った電子署名：

AIR アプリケーションをパッケージする際、使用する証明書によってNullPointerException が発生することがあります。その場合には以下の手順でパッケージを行います。

ADT （コマンドラインツール）を次の URL からダウンロードします: http://www.adobe.com/go/getadt
AIR SDK のインストールされたディレクトリ内の \lib の下にファイルをコピーします
以下のコマンドを実行します（下は myApp.swf をパッケージする例です）

 adt -package -storetype pkcs12 -keystore myCertificate -storepass myPassword 
 application.xml myApp.swf  <myOtherFiles>

ドメイン間の LocalConnection：

LocalConnection.allowDomain() を使用する際 app#<appid> 形式のドメインに正しく動作しません。そのために allowDomain("*") を使用する必要のあるケースがでてくるかと思います。 allowDomain("*") を指定すると全てのドメインからのアクセスが可能になるため、あくまで一時的な回避策として利用するようご注意ください。.

その他一般的な API

NativeApplication.undo() と NativeApplication.redo() はまだ利用できません
NativeMenu.clone() を実行するとクラッシュすることがあります
MouseEvent.buttonDown は常に true です
ウインドウが未表示の状態でフルスクリーン等ディスプレイの状態を変更すると表示がおかしくなったりクラッシュすることもあります
stage の scaleMode を NO_SCALE に設定しないとオブジェクトの大きさが勝手に変更されます
入力フィールドにフォーカスがあると F1-F12 キーを押してもイベントが発生しません

Mac 関連：

NativeApplication.removeAsDefaultApplication() を実行すると正しく動作せずに ActionScript error #2004 になります
変更された PDF を再読み込みするとアプリケーションがハングすることがあります

Mac OS 10.5 (Leopard) 関連：

FileReference を使ってアップロードする際、URLRequest にカスタムヘッダを指定しても有効にならないことがあります
背景の透明なアプリケーションが正しく描画されないことがあります
rollOut と mouseLeave が正しく動作しません

追加削除されたメソッド・属性

最後に、英文のままですが追加・削除されたメソッドや属性のリストです。主なところでは Shell が NativeApplication になったり JavaScritObject が Object になったり DRM 関連のメソッドが追加されたりしています。SQL DB 関連も多くの変更があります。

New Methods/Properties/Constants

File

File.isPackage : Boolean
File.isSymbolicLink : Boolean

HTML

HTMLLoader.textEncodingOverride : String
HTMLLoader.textEncodingFallback : String
HTML <frame> attribute allowcrossdomainxhr

Mouse

MouseEvent.controlKey : Boolean
MouseEvent.clickCount : int
MouseEvent.MIDDLE_CLICK
MouseEvent.MIDDLE_MOUSE_DOWN
MouseEvent.MIDDLE_MOUSE_UP

Drag and Drop

NATIVE_DRAG_UPDATE : String

Media

flash.media.scanHardware()

DRM

NetStream.resetDRMVouchers()
NetStream.setDRMAuthentication()

Security

flash.securiy.XMLSignatureValidator.useSystemTrustStore : Boolean
flash.securiy.XMLSignatureValidator.revocationCheckSetting : String

NativeApplication (formerly Shell)

NativeApplication.copy()
NativeApplication.cut()
NativeApplication.redo()
NativeApplication.undo()
NativeApplication.selectAll()
NativeApplication.performKeyEquivalent()
NativeApplication.publisherID. publisherID is an empty string when debugging with adl. However, a command line flag in adl allows you to run with a publisherID, and the Flex 3 debugging UI also has a field for you to enter it. Clients can find their publisherID by installing the app and looking at the META-INF/AIR/publisherid file.

Local SQL DB

SQLConnection.openAsync()
SQLError.details
SQLConnection.cacheSize
SQLConnection.autoCompact
SQLConnection.pageSize
SQLConnection.cacheSize
SQLMode

DRM

DRMErrorEvent (error code related properties from DRMStatusEvent has been migrated to DRMErrorEvent)

Removed Methods/Properties/Constants

URLRequest

URLRequest.setLoginCredentials() – use URLRequestDefaults.setLoginCredentialsForHost() instead

Local SQL DB

SQLStatement.prepare()
SQLStatement.reset()
SQLStatement.prepared : Boolean
SQLEvent.PREPARE
SQLConnection.getFile()
SQLConnection.synchronous
SQLConnection.version
SQLConnection.caseSensitiveLike
SQLError.code

HTML

window.runtime property for non application HTML pages.
flash.html.JavaScriptObject, use Object class instead
flash.html.JavaScriptArray, use Object class instead
flash.html.JavaScriptFunction, use Object class instead

NativeWindow

NativeWindowSystemChrome.UTILITY
NativeWindowType.MODAL
NativeWindowInitOptions.hasMenu

API changes

URI Schemes

“app-resource:” scheme –> “app:” scheme

File

FileReference.send() –> FileReference.uploadUnencoded()
File.applicationResourceDirectory –> File.applicationDirectory
flash.filesystem.EncryptedLocalStore –> flash.data.EncryptedLocalStore

Drag and Drop

DragManager –> NativeDragManager
DragOptions –> NativeDragOptions
DragAction –> NativeDragActions
NativeDragEvent.actionsAllowed : DragOptions –> NativeDragEvent.allowedActions : NativeDragOptions

Mouse

MouseEvent.cmdKey : Boolean –> MouseEvent.commandKey : Boolean

Service Monitor

ServiceMonitor.lastUpdated –> ServiceMonitor.lastStatusUpdate
ServiceMonitor.augmentPrototype() –> ServiceMonitor.makeJavascriptSubclass()

Screen

Screen.colorDepth : uint –> Screen.colorDepth : int

NativeApplication (formerly Shell)

flash.system.Shell –> flash.desktop.NativeApplication
Shell.isBoundAsDefaultApplication() –> NativeApplication.isSetAsDefaultApplication()
Shell.bindAsDefaultApplication() –> NativeApplication.setAsDefaultApplication()
Shell.unbindAsDefaultApplication() –> NativeApplication.removeAsDefaultApplication()
Shell.id –> NativeApplication.applicationID
Shell.lastUserInput –> NativeApplication.timeSinceLastUserInput
Shell.shell –> NativeApplication.nativeApplication
Shell.startApplicationAtLogin –> NativeApplication.startAtLogin
Shell.activateApplication –> NativeApplication.activate

Local SQL DB

SQLEvent.CLEAN –> SQLEvent.COMPACT
SQLConnection.clean() –> SQLConnection.compact()
SQLUpdateEvent.tableName : String –> SQLUpdateEvent.table : String
SQLConnection.attach(): boolean argument removed
SQLConnection.SQLConnection(): boolean argument to constructor removed
The SQLStatement parameters property is now 0-based instead of 1-based. (i.e.: sql.paremeters[1] –> sql.parameters[0]).

URLRequest

URLRequestDefaults.shouldAuthenticate –> URLRequestDefaults.authenticate
URLRequest.shouldAuthenticate –> URLRequest.authenticate
URLRequestDefaults.shouldCacheResponse –> URLRequestDefaults.cacheResponse
URLRequest.shouldcacheResponse –> URLRequest.cacheResponse

URLMonitor

URLMonitor.acceptableStatuses –> URLMonitor.acceptableStatusCodes

Updater

flash.system.Updater –> flash.desktop.Updater

HTML

HTMLHost.closeWindow() –> HTMLHost.windowClose()
HTMLHost.htmlControl –> HTMLHost.htmlLoader
HTMLControl –> HTMLLoader
HTMLControl.useApplicationDomain –> HTMLLoader.runtimeApplicationDomain
HTMLControl.shouldCacheResponse –> HTMLLoader.cacheResponse
HTMLControl.htmlWidth –> HTMLLoader.contentWidth
HTMLControl.htmlHeight –> HTMLLoader.contentHeight
HTMLControl.domInitialize Event –> HTMLLoader.htmlDOMInitialize : Event
Event.DOM_INITIALIZE –> Event.HTML_DOM_INITIALIZE
flash.events.HTMLUncaughtJavaScriptExceptionEvent –> flash.events.HTMLUncaughtScriptExceptionEvent
Javascript API: window.htmlControl ? window.htmlLoader

EncryptedLocalStore

EncryptedLocalStore.setItem(name:String, data:ByteArray) –> EncryptedLocalStore.setItem(name:String, data:ByteArray , stronglyBound : Boolean = false)

Posted by ackie at 10:05 AM | Comments (9)

December 17, 2007

Adobe AIR ベータ 3 対応の Flash CS3 Professional アップデート

Adobe AIR ベータ 3 に対応した Flash CS3 Professional のアップデートがちょっと遅れて公開されました。（AIR:Flash_CS3_Professional_Update@Labs）

今回サポートされるプラットフォームは以下の通りです。

Windows® XP sp2
Windows® Vista Home Premium, Business, Ultimate, Enterprise (certified for 32-bit) editions.
Mac OS X 10.4.x (Intel or PPC)

インストールの際は、まず AIR ベータ 3 の実行環境をインストールします。（AIR download@Labs）

AIR ベータ 3 用アップデータをインストールする前には Flash CS3 Professional (9.0.2) 用の Flash Player アップデートもインストールする必要があります。Adobe の Flash サポートサイトから日本語版をダウンロードしてください（Adobe Flash Support Center）。この数日に Adobe Update Manager からの自動更新でアップデート済の方はこの手順をスキップできます。

事前準備が環境したら、以下のファイルをダウンロードします。

Macintosh: flashcs3 air extension p3 jp 121407.dmg (49 MB)

Windows: flashcs3 air extension p3 jp 121407.exe (16 MB)

なお、今回のアップデータを適用する前に以前のバージョンをアンインストールすることをお勧めします。ベータ 1 を削除せずにベータ 3 をインストールした場合は、必ず以下のスクリプトをダウンロードして実行してください。

ベータ 1 削除用スクリプト: （右クリックまたは ctrl クリックして jsfl ファイルとして保存します）
flashcs3_air_extension_p1cleanup_jp_100107.jsfl (1KB)

アンインストールの手順は以下の通りです。

Macintosh

/Applications/Adobe Flash CS3/ を開き AIK フォルダーを削除します
/Applications/Adobe Flash CS3/First Run/Commands を開き以下のファイルを（存在すれば）削除します
- - AIR - Application and Package Settings.jsfl
- - AIR - Package AIR File.jsfl
/Users/<username>/Library/Application Support/Adobe/Flash CS3/<lang>/Configuration/Commands/ を開き以下のファイルを（存在すれば）削除します
- - AIR - Application and Package Settings.jsfl
- - AIR - Package AIR File.jsfl

Windows

\Program Files\Adobe\Adobe Flash CS3\ を開き AIK フォルダーを削除します
\Program Files\Adobe\Adobe Flash CS3\<lang>\First Run\Commands\ を開き以下のファイルを（存在すれば）削除します
- - AIR - Application and Package Settings.jsfl
- - AIR - Package AIR File.jsfl
\Document and Settings\<username>\Local Settings\Application Data\Adobe\Flash CS3\<lang>\Configuration\Commands\ を開き以下のファイルを（存在すれば）削除します
- - AIR - Application and Package Settings.jsfl
- - AIR - Package AIR File.jsfl

まだ、日本語に対応していないため、パス名等に日本語が含まれると動作しません。他にもいくつもバグがあります。主なものだけいくつか挙げてみると、

Mac and Win:

最初のコンパイル時に定義が見つからない旨のコンパイルエラーが表示されることがあります
トレースの出力がデバッグ時にしか表示されません。
flash.net クラスを使用するには ServiceMonitorShim コンポーネントをコンポーネントパネル内の AIR Service Monitor からライブラリにドラッグします
以前のバージョンで作成した AIR 用の fla をそのまま使用する場合はアプリケーション記述ファイルを明示的に作り直す必要があります

Mac のみ:

パッケージ作成に失敗してもエラーが表示されません

英文になりますが、ドキュメントが以下のリンクから参照できます。

Posted by ackie at 10:01 AM | Comments (0)

December 13, 2007

Adobe AIR ベータ 3 公開

Adobe AIR ベータ 3 が公開されました。（Adobe AIR@Labs）開発環境としては FlexBiilder 3 ベータ 3 （FlexBuilder3 Beta@Labs）と Dreamweaver CS3 用の機能拡張（Adobe AIR Extension for Dreamweaver Beta 3@Labs）が提供されています。Flash 用の機能拡張は少し後になるようです。

AIR ベータ 3 の実行環境をインストールした後に AIR ベータ 2 の実行環境をインストールするとベータ 3 のアプリケーションがインストールできなくなります。また、ベータ 3 実行環境をインストールした後は、ベータ 2 のインストールバッジからのインストール（Web ページをクリックするやつです）ができなくなりますのでご注意ください。

Posted by ackie at 11:40 AM | Comments (0)

November 13, 2007

Adobe MAX AIR API の使い方セッションの資料

Adobe AIR API の使い方のセッション資料です。OS ネイティブ機能との連携に使用する API と（air-api-overview.pdf: 985KB）ローカルデータアクセスのための API の分があります。（air-api-storage.pdf: 826KB）ご参考まで。

Posted by ackie at 06:33 PM | Comments (0)

November 12, 2007

Adobe MAX AIR セキュリティセッションの資料

遅くなりましたが MAX の資料をアップします。とりあえず AIR セキュリティの分になります。（air_security.pdf: 1.39MB）

Posted by ackie at 07:39 PM | Comments (0)

October 16, 2007

Adobe AIR ベータ 2 セキュリティ関連の変更点

AIR ベータ 2　関連でセキュリティの話題を 2 つご紹介します。

まず、先週 AIR のインストールバッジの更新版が公開されました。（air_b2_badge_100907.zip : 50.5KB）これはベータ 2 SDK に含まれるバッジのアップデート版になります。今までのバッジにクロスサイトスクリプティングに対する脆弱性が発見されたため緊急に対応が行われました。現在インストールバッジを利用している場合には、なるべく早く更新することをお勧めします。

次は、HTML セキュリティモデル変更の件です。最近よく言及されるようになった eval(), JSON, innerHTML 等の使用を対象とした攻撃に対応するため、ベータ 2 から HTML アプリケーションの実行環境として 2 種類のサンドボックスが用意されています。

1 つ目のサンドボックスはアプリケーションサンドボックスと呼ばれ、AIR の提供する機能に自由にアクセスできますが、外部からのスクリプト読み込みや eval() の使用等が不可になっています。2 つ目のサンドボックスはクラシックサンドボックスと呼ばれ、こちらでは通常の HTML ブラウザと同等の機能が提供されますが、AIR の API を呼び出すことはできません。

ベータ 2 での標準のサンドボックスはアプリケーションサンドボックスになります。そのため、ほとんどの AJAX フレームワークに対して、それらを使用したアプリケーションがそのままでは動作しなくなることが予想されます。

このような場合には、まずクラシックサンドボックスに HTML アプリケーションを記述します。次に、AIR の機能を使用している箇所をアプリケーションサンドボックス側に移します。そのあと、クラシックサンドボックスからアプリケーションサンドボックスの処理を呼び出すための処理を追加します。SandboxBridge という機能を利用すると、クラシックサンドボックスとアプリケーションサンドボックスを連携させることが可能です。

クラシックサンドボックスの指定方法や SandboxBridge の API の具体的な使い方ついては、簡単なサンプルが公開されていますのでそちらをご参照ください。（air_htmlsecurity_sample_100107.zip : 64.7KB）また、AIR Developer Center に（英文ですが）関連する記事もありますのでそちらもご覧いただければと思います。（Building an expense tracker on the new Adobe AIR HTML security model）

最後に、新しい HTML セキュリティモデルのホワイトペーパーが公開されています。まだドラフトですので今後更新が行われていくものですが、いくつか参考になる情報が書かれていますのでご紹介しておきますね。（air_htmlsecurity.pdf : 180KB）

Posted by ackie at 05:23 PM | Comments (2)

October 09, 2007

Adobe AIR のデジタル署名機能について

AIR ベータ 2 から、パッケージ作成時の電子署名が必須になりました。この変更が行われたのは、

パッケージ後に改変されていないことを確認する
パッケージ作成者を確認する

の 2 点を実現するためということのようです。署名を行わないと airi という拡張子のファイルが作成されますが、これは adt 等で署名をしないとそのままでは AIR 環境で使用することができません。

署名には CA が発行した証明書と自己署名した証明書が使えます（p12, pfx）。自己署名の証明書の場合には上の 2 つ目の目的には使用できないことになりますね。

ところで、電子署名は「プログラムが正しく動作すること」の確認にはなりません。また、そもそも、現時点では署名機能の動作自体も（ベータなので）保障されていません。ですので、とりあえず AIR のパッケージを作成するだけであれば、あまり気にせず自己署名の証明書をご使用ください。たまたま正規の証明書を持っているという方は動作確認をしていただければ嬉しいですが。

自己署名の電子証明書の作成

さて、自己署名の証明書は、Flex Builder 3 ベータ 2 や Flash / Dreamweaver の AIR ベータ 2 用機能拡張を使って作成することができます。それぞれのツールでの作成方法は以下の通りです。なお、証明書作成時に入力したパスワードは忘れないよう注意してください。

Flex Builder 3 ベータ 2 の場合

Export ウィザードを実行し "Digital Signature" と書かれたパネルが表示されたら "Create..." というラベルのボタンをクリックします。証明書を作成するためのダイアログウインドウが表示されますので、発行者名、パスワード、作成するファイル名を入力して "OK" を押すと証明書が作成されます。名前等に使用できる文字は英数字に限られるようです。

AIR update Beta 2 for Flash CS3 Professional の場合

コマンドメニューから "AIR - Application & Installer Settings" ウインドウを開くと下のほうに "Digital Signature" と書かれた欄が見つかると思います。その行の右にある "Change..." と書かれたボタンを押すと証明書を設定するためのウインドウが開くので、Sign the AIR file with a digital certificate がチェックされていることを確認した上で "Create..." というラベルのボタンをクリックします。後は Flex Builder のケースと同じです。（1024 ビットと 2048 ビットが選べるようになっていますが）

AIR Extension for Dreamweaver® Beta 2 の場合

サイトメニューから（なぜか Flash とは違うメニューなのですが） "AIR Application Settings..." を選択してダイアログウインドウを開きます。ウインドウの下のほうにある "Digital signature" の右にある "Set..." を押すと証明書の設定用ウインドウが開きます。後は Flash と同じ手順です。

Posted by ackie at 09:05 AM | Comments (1)

October 01, 2007

Adobe AIR ベータ 2 開始

Adobe AIR ベータ 2 が公開されました。新しいランタイムが Labs からダウンロードできるようになっています。（Adobe AIR download@Labs）

ベータ 2 がサポートする環境は以下のとおりです。

Windows 2000 SP4, Windows XP SP2, Windows Vista Home and Ultimate Edition
Mac OS 10.4.7 以降 (Intel と PowerPC)

ベータ 1 のランタイムは 12 月 11 日に動作しなくなるとのことなので、ベータ 1 用の AIR アプリケーションは早めにベータ 2 に移行することをお勧めします。ベータ 2 のランタイムはベータ 1 のランタイムと共存できるため、移行作業を始めても、しばらくはベータ 1 用のアプリケーションを使用することが可能です。

ベータ 2 用アプリケーションの開発には、同じく今日公開された Flex Builder 3 Beta 2 または AIR SDK Beta 2 または AIR Extension for Dreamweaver CS3 Beta 2 または AIR update Beta 2 for Flash CS3 をインストールします。Flex Builder 3 ベータ 2 で開発する場合、ワークスペースは新規に用意することをお勧めしますが既存のワークスペースを利用しようと思っている場合は事前のバックアップをお忘れなく。なお Flex Builder ベータ 2 からは新規 AIR プロジェクトを作成するには、まず新規 Flex プロジェクトを選択し、開いたパネル内の Application Type から Desktop application を選択するという手順に変更されています。

それでは、以下、主な変更点の説明です。

アプリケーション記述ファイルの変更

さて、AIR ベータ 2 ではアプリケーション記述ファイル（-app.xml）が変更されています。そのため、既存のベータ 1 のアプリケーションについてはこのファイル内の記述をいくつか変更しないと新しいランタイム上で実行することができません。

まず、名前空間を Http://ns.adobe.com/air/application/1.0.M5 に変更します。今回は末尾が M5 になっています。次に、application タグの子要素として initialWindow タグを記述します。そうしたら rootContent タグの属性をすべて initialWindow の要素に書き換えます。下はその例です。

<initialWindow>
  <content>Main.swf</content>
  <systemChrome>standard</systemChrome>
  ...
　　<visible>true</visible>
</initialWindow>

ベータ 2 ではメインウインドウの visible 属性のデフォルトが false になっています。そのため、メインウインドウを最初から表示したい場合には上の例のように visible 属性を明示的に ture に設定します。

API の変更

API 関連でベータ 1 から変更された主な項目は以下のとおりです。

1. ByteArray

ByteArray.infrate() と ByteArray.deflate() メソッドがなくなりました。代わりに、ByteArray.compress() と ByteArray.uncompress() メソッドの引数として、CompressionAlgorithm.DEFLATE か
CompressionAlgorithm.ZLIB を指定するようになりました。

2. ClipboardManager

ClipboardManager クラスと TransferableData クラスが Clipboard クラスで置き換えられました。システムのクリップボードへのアクセスには ClipboardManager.accessClipboard() の代わりに Clipboard.generalClipboard シングルトンオブジェクトを使用します。

3. DragManger

isDragging がメソッドからプロパティになりました。

4. Door

セキュリティ関連の変更に伴い Door クラスが廃止されました。LoaderInfo クラスの Door 関連の属性は LoaderInfo.parentSandboxBridge と LoaderInfo.childSandboxBridge に変更されています。

5. File

下記いくつかの API が変更されています。

File.listDirectories()      → File.getDirectoryListing()
File.listDirectoriesAsync() → File.getDirectoryListingAsync()
File.listRootDirectories()  → File.getRootDirectories()
File.relativize()           → File.getRelativePath()
File.resolve()              → File.resolvePath()

また、いくつかのメソッドで使用されていた clobber というパラメータは has been renamed overwrite という名前に変更されました。

6. NativeWindow

visible プロパティをコンストラクタではなく属性として指定するようになりました。デフォルト値は false です。

Stage.window は Stage.nativeWindow に変更されました。

NativeWindowCapabilties クラスが無くなり、代わりに NativeWindow クラスの属性として実装されました。

NativeWindowCapabilities.hasWindowIcon → NativeWindow.supportsIcon
NativeWindowCapabilities.hasMenu       → NativeWindow.supportsMenu
NativeWindowCapabilities.windowMinSize → NativeWindow.systemMinSize
NativeWindowCapabilities.windowMaxSize → NativeWindow.systemMaxSize

7. System

System.pause(), System.resume(), System.gc() の各メソッドはデバッグモードでのみ使用できるようになりました。それから、System.exit() は AIR アプリケーションから使用できなくなりました。代わりに Shell.exit() を使うようにしてください。

その他にも、アイコンにはレイヤーがひとつだけの PNG だけがサポートされるようになったり、変更がいろいろあります。詳細はリリースノート（英文）をご覧ください。（AIR release note@Labs）

Posted by ackie at 02:41 PM | Comments (0)

September 25, 2007

Adobe AIR 完全解説

ASCII さんから Adobe AIR 完全解説が 9 月 27 日に発売になります。現在 Adobe Labs に公開されているベータ版のムックです。日本語の AIR 本としてはもちろん初めてですが、Flex や ActionScript 3 の入門用としても貴重な日本語の情報が掲載されています。

Flash CS3 と Dreamweaver CS3 から AIR アプリケーションを書き出す手順と、Flash CS3 を使って Flex コンポーネントを開発する方法についての記事を担当しました。ので、ちょっと自己宣伝っぽいですが、Flex は使わないけど CS3 ならという方もお手にとっていただければ嬉しいです。

Posted by ackie at 07:32 PM | Comments (1)

August 21, 2007

Adobe AIR update for Flash CS3 Professional Beta 1 公開

Adobe AIR update for Flash CS3 Professional Beta 1 が Adobe Labs に公開されました。（Adobe AIR update for Flash® CS3 Professional beta@Labs）このアップデートをインストールすると Flash CS3 から AIR アプリケーションの書き出しが直接行えるようになります。

アップデートの動作確認が行われているプラットフォームは以下のとおりです。

Windows® XP sp2
Windows® Vista Home Premium, Business, Ultimate, Enterprise (32-bit)
Mac OS X 10.4.x (Intel or PPC)

今回のアップデートは Flash CS3 Professional にのみ適用可能です。以前のバージョンの Flash はサポートされませんのでご注意ください。また、AIR ベータのインストールが事前に必要です。一緒に AIR ベータをインストールする場合は AIR のページ（Adobe AIR Installer @Labs）からインストーラが入手できます。

アップデート用のファイルは以下のリンクからダウンロードします。ダウンロード後ファイルをダブルクリックするとアップデータが実行されます。

Macintosh： Adobe AIR update for Flash CS3 Professional for Macintosh (27 MB)
Windows： Adobe AIR update for Flash CS3 Professional for Windows (13 MB)

このインストーラは言語別になっています。日本語版以外の Flash CS3 をお使いの場合は Labs の製品ページ（Adobe AIR update for Flash® CS3 Professional beta@Labs）から入手してください。

使い方については英語になりますが、簡単な説明が Labs に載っていますのでご参照ください。（Using the Adobe AIR™update for Flash）時間があれば別途翻訳して公開します。

最後に、ベータ１での既知の問題です。

About Authoring Adobe AIR ダイアログ内の ”Don’t show me again” チェックボックスをオンにして有効にならない。
ムービーのプレビュー時に trace からの出力が出力パネルに表示されない。デバッグ時のみ表示される。
AIR ファイル名はアプリケーション名と同じものになり変更できない。
パッケージ作業に非常に時間がかかる。
ファイル名やパス名に日本語を使用すると正しくパッケージングできない

Mac のみ:

AIR ファイルの書き出し先が変更できない。
パッケージに失敗しても成功を示すメッセージが表示される。
Fla ファイルのパス名にスペースを含むとアプリケーション ID にデフォルトの名前が使用される。このため複数のアプリケーションで同じ ID が使用される可能性がある。
AIR のプレビュー中にオーサリング環境が固まったらプレビューウインドウを閉じると通常の状態に戻る。
Application & Installer Settings ダイアログボックスで OK ボタンを押しても変更した内容が保存されない。代わりに内容を変更後 Package ボタンを押してAIR ファイルのパッケージングを行う。

Windows のみ:

パッケージ中にプログレスバーが表示されない。

Posted by ackie at 06:00 PM | Comments (0)

July 03, 2007

grant skinner の Flash CS3 用 Adobe AIR extension

Adobe からの Flash CS3 用 AIR 機能拡張はまだ公開されていませんが、grant skinner が Flash CS3 用の AIR extension を自作して公開してくれました。

試してみたところ、日本語環境でも使えるようですので報告しておきます。grant の blog はこちらです。（Creating AIR Projects with Flash CS3）

7月4日追記：早くもアップデート版が公開されたようです。（Creating AIR Panel for Flash CS3 Updated）

Posted by ackie at 06:25 PM | Comments (0)

June 25, 2007

Adobe AIR Extension for Dreamweaver と Dreamweaver CS3 日本語版

先日 Adobe Labs に公開された Adobe AIR Extension for Dreamweaver が日本語版の Dreamweaver CS3 ではテストされていないことをお伝えしましたが、社内有志によるテストの結果、いくつか不具合はあるもののお試し目的であれば十分使えそうだということが分かりました。

現在判明している大きな問題は以下の2つです。

Dreamweaver の起動、終了と新規ファイルの作成の度に JavaScript Error のダイアログが2回ほど出ます。かなりうざいバグですが機能には影響ないようです。
UTF-8 以外のエンコーディングで AIR にパッケージすると文字化けします。当面 AIR アプリケーションを開発する際は UTF-8 を使用する必要があります。

もし他にもバグが見つかったら是非ご連絡いただければと思います。日本語版の CS3 もやっと出荷されましたので是非お試しください。

ところで、AIR のベータから透過な HTML アプリケーションが開発できるようになった件について、何件かお問い合わせをいただきましたので補足説明です。

この機能は HTML をルートとするアプリケーションに関するものです。AIR のベータでは JavaScript から HTMLControl オブジェクトの paintsDefaultBackground 属性を使って背景の表示/非表示を指定することができます。

<script>
  function init(){
    // HTML の背景を透明に
    window.htmlControl.paintsDefaultBackground = false;
  }
</script>
<body onload="init();">

これでアプリケーション記述ファイル内でメインウインドウの背景が透明になるように設定すれば、背景の透過な HTML アプリケーションを実行することができます。

7月4日追記：下記コメントをいただいたので確認したところ、アプリケーション記述ファイル内で transparent が true の場合は AIR が起動時に paintsDefaultBackground = false の設定をするようです。つまり、背景を透過にしたい場合は、アプリケーション記述ファイルに指定するか、JavaScript から paintsDefaultBackground の値を設定する、のどちらかで実現できます。

以上、訂正です。ご指摘ありがとうございました。

Posted by ackie at 03:33 PM | Comments (5) | TrackBack

June 11, 2007

Adobe Apollo 改め Adobe Integrated Runtime (AIR) パブリックベータ開始

そうです。Apollo の正式名称が発表されました。今日からは AIR でよろしくお願いします。

さて、Adobe Labs に従来のアルファ版に機能の追加されたパブリックベータ版が公開されています。（AIR@Labs）新しいランタイムや SDK のダウンロード等詳細な情報は Labs をご覧ください。

Dreamweaver 用の Apollo 開発機能拡張のベータ版も今日公開されています。（air Dreamweaver CS3 extension@Labs）こちらは Dreamweaver CS3 の英語版のみでテストされているとのことですので、申し訳ありませんが日本のユーザの皆様には ”お試し” もまだお待ちいただくことになるようです。一方 Flash 用の機能拡張はまだ時間がかかっていて、もう少し先の公開になりそうです。

ここで話を進める前に注意点をいくつか。

今回のベータ版をインストールする前にアルファ版を必ずアンインストールしてください。（この制限はベータ版に対するものです。製品版ではアップデートの際にアンインストールする必要はありません。）
アルファ版用に開発されたアプリケーションはベータ版でのインストール / 使用共にできません。こちらもアンインストールしてください。
AIR のベータでアプリケーションを開発するには、Labs に今日公開された Flex 3 の使用が前提になります。FlexBuilder 2 を使用されていた場合は Labs から Flex 3 の開発環境をダウンロードして下さい。（FlexBuilder 3 には AIR 開発環境が最初から含まれています）
Flex 3 と一緒についてくる Flash Player は Flex 3 開発専用のバージョンです。一般の Web 閲覧や Flex 2 / Flash CS3 等の開発での使用は避けてください。

以下は、ベータで追加された新機能リストです。

まず、HTML 関連の拡張は、

XSLT を含め最新の webkit のコードに対応
異なる OS 間での一貫性を向上
より多くの Ajax フレームワークとコンポーネントのサポート
透過な HTML アプリケーション
より詳細なドキュメントと追加された HTML 関連のサンプル

それから AIR ランタイムにデータベースモジュールが埋め込まれました。

ACID トランザクションの実現
DB 使用の設定が一切不要
大きなデータの扱いを可能に
BLOB のサポート
テキストサーチ機能

そのほかにもいくつも OS との連携機能が追加 / 改良されています。

ウインドウ API の拡張
ファイルピッカー / ブラウザ
サービスとの接続を検知する API
ネイティブのメニューが利用できる API
OS のドラッグ & ドロップ機能の利用
クリップボードのサポート
ファイルタイプや拡張子の登録

その他、アルファ版からの変更点はおいおいご紹介する予定です。アルファ版の時とはアプリケーション記述ファイルのフォーマットも異なっていますので移行には十分注意してください。

最後に、Developer Derby のお知らせです。ベータ版の Air を使ってもっともユニークな作品を作った方には最高 $100,000 の旅行が賞品として授与されるとのことです。その他 5 つのカテゴリーのトップには Mac Pro 等が賞品として用意されています。詳しくはこちらです。（Adobe Air Developer Derby@Labs）

Posted by ackie at 01:04 PM | Comments (10)

May 14, 2007

Adobe Apollo mini camp@Tokyo

今月 Apollo のエバンジェリストの Mike Chambers が来日します。それにあわせて 5 月 23 日（水） 18:00-20:00 に大崎ゲートシティホールで Apollo mini camp@Tokyo が開催されることになりました。（Apollo mini camp@Tokyo）

セミナー自体は無償ですが事前登録が必要です。セミナーの特設サイトからお申し込みください。（Apollo mini camp@Tokyo　事前登録）定員は 150 名ですのでお早めに。

Posted by ackie at 10:56 AM | Comments (0)

April 23, 2007

Shell クラスと Apollo アプリケーション

shell は Apollo アプリケーションと OS の仲介役のオブジェクトです。ドキュメントの記述から察するに、今後まだ仕様の追加変更がありそうな予感もしますが、とりあえず主な点をまとめます。

まず、shell オブジェクトはアプリケーション起動時に自動的に生成されますので、明示的に生成する必要はありません。シングルトンオブジェクトとして実装されていて、アクセスは Shell.shell のように行います。

Shell クラスのプロパティとメソッド

shell オブジェクトには以下のプロパティがあります。

id:String                 // アプリケーション ID
activeWindow:NativeWindow // 現在アクティブなウインドウ
focusWindow:NativeWindow  // 現在フォーカスされているウインドウ
autoExit:Boolean          // true ならウインドウクローズ時自動的に終了

id はアプリケーション記述ファイル (-app.xml) の name タグの値が設定されます。id はアプリケーションを識別するために使用されるので、他のアプリケーションと被らないような名前にすることが重要です。ですので "com.adobe.apollo.ApplicationName" のような形式の命名が推奨されています。id に使用できる文字は英数字と "." （ドット）と "-" （ハイフン）です。

activeWindow は現在アクティブなウインドウ、focusWindow は現在フォーカスのあるウインドウへの参照です。どちらの属性も対象のウインドウが shell の属するアプリケーションのウインドウでない場合には null が設定されます。

autoExit は、値が true に設定されていると（これがデフォルトです）全てのウインドウがクローズされた時点で自動的にアプリケーションが終了します。値が false の場合は明示的に Shell.shell.exit() を呼ばないと終了しないという仕様になっています。ただし、アルファ版ではこれがまだちゃんと動作しないようで、false にすると exit() を呼んでもアプリケーションが終了しません。少なくともアルファ版の間は autoExit には触らない方がよさそうです。

さて、exit() メソッドの呼び出しは戻ります。すなわち、あるイベントハンドラが exit() を呼び出したとすると、そのイベントハンドラの処理が全て終了するまでは、実際のアプリケーションの終了処理は開始されません。

Shell クラスのイベント

Shell クラスには以下のイベントが定義されています。

activate      // アプリケーションがアクティブになった
deactivate    // アプリケーションが非アクティブになった
invoke        // アプリケーションが起動された
networkChange // ネットワークの接続状態が変わった

activate はアプリケーションがアクティブになると、deactivate はアクティブでなくなるとディスパッチされます。アルファ版では、activate と deactivate イベントは最初に作られたアプリケーションウインドウのみディスパッチされるようです。

Invoke イベントはアプリケーション起動時にディスパッチされます。このイベントはリスナが登録されるまで保存されるため、アプリケーション起動後でもちゃんと処理できるようになっています。

Inboke イベントの型は InvokeEvent です。属性として以下の2つを持っています。

arguments:Array       // 起動時に渡された引数の配列
currentDirectory:File // 引数内に相対パスがあった際の基準になるディレクトリ

ちなみに Apollo では一つのアプリケーションを複数起動することはできません。代わりに、2回目以降の起動時には、最初に起動したアプリケーションに Invoke イベントが通知されます。

これにより、アプリケーションでは必要に応じて対応することが可能になります。例えば2つ目のアプリケーションウインドウを開くこともできますね。なお、前述のとおりアプリケーションの識別は id 属性により行われます。

最後の一つの networkChange イベントはネットワークの接続状態が変更されたことを通知してくれます。ちょっと乱暴ですがネットワークケーブルを抜いたり差したりするとイベントがディスパッチされるのが確認できます。

Posted by ackie at 05:25 PM | Comments (0)

April 20, 2007

NativeWindow クラスのイベント（その２）

displayStateChanging イベントのキャンセル

前回書いたように、ing 系のイベントは必要に応じて処理自体をキャンセルするために使用できます。displayStateChanging イベントであれば displayState の変更をキャンセルするわけですから、最大化や最小化を行わないという指示を出すことになります。

AS3 では、イベントにより標準的に行われることになっている処理をキャンセルするには、イベントハンドラ内で preventDefault() を呼び出します。前回のサンプルをそのまま使うと、onDispStateEvent() メソッド内に preventDefault() を追加すればよいことになります。

onDispStateEvent() メソッドは displayStateChange と displayStateChanging イベントの両者で共用しているのでキャンセル不可のイベント（displayStateChange）も渡される可能性があります。そのため、キャンセル可能かを確認するロジックも追加しています。

private function onDispStateEvent(e:NativeWindowDisplayStateEvent):void {
  if (e.cancelable) {   // キャンセル可能かをチェック
    e.preventDefault(); // 標準処理をキャンセル
  }
  trace("type:", e.type, e.afterDisplayState);
}

実際にこのコードを実行してみると、システムクロームのボタンを押しても何も起こらないのに対して、アプリ内のボタンはそのまま有効なのが分かると思います。また、アプリ内のボタン押下時に明示的に displayStateChanging イベントのディスパッチを行うと、システムクロームのボタンと同様にキャンセル処理が有効になるのが確認できると思います。

NativeWindowBoundsEvent

NativeWindow の bounds 属性が変更されると NativeWindowBoundsEvent がディスパッチされます。bounds 属性が変更されるのはウインドウの位置か大きさが変わった場合です。

NativeWindowBoundsEvent は beforeBounds と afterBounds の属性を持っていて、それぞれ変更前の値と変更後の bounds 属性の値を示します。ing 系（moving, resizing）のイベントでは beforeBounds がその時点での値、完了通知のイベント（move, resize）では afterBounds がその時点での値ということになります。

NativeWindowDisplayStateEvent のケースと同様に、move と resize イベントはそれぞれウインドウの位置もしくは大きさが変われば常にディスパッチされますが、moving と resizing はマウス操作で位置や大きさを変えた場合のみディスパッチされ、スクリプトから bounds 等の属性を変更した場合にはディスパッチされません。

これも NativeWindowDisplayStateEvent のケースと同様に、属性値の変更時に明示的に moving や resizing をディスパッチすることで、他のコンポーネントでもキャンセルを可能にすることができます。

ちなみに Stage クラスにも resize イベントがあります。こちらはステージの大きさが変更された後に描画開始できる状態になるとディスパッチされます。

以下は NativeWindowBoundsEvent の発生を確認するためのサンプルです。システムクロームを表示した状態で試してみてください。デバッグモードをお忘れなく。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="addListeners()">
  <mx:Script>
  <![CDATA[
    private function addListeners():void {
      stage.window.addEventListener(NativeWindowBoundsEvent.RESIZE, onBoundsEvent);
      stage.window.addEventListener(NativeWindowBoundsEvent.RESIZING, onBoundsEvent);
      stage.window.addEventListener(NativeWindowBoundsEvent.MOVE, onBoundsEvent);
      stage.window.addEventListener(NativeWindowBoundsEvent.MOVING, onBoundsEvent);
    }
    private function onBoundsEvent(e:NativeWindowBoundsEvent):void {
      trace("type:", e.type, e.afterBounds);
    }
    private function onBoxMouseDown(e:MouseEvent):void {
      stage.window.startResize(NativeWindowResize.BOTTOM_RIGHT);
    }
    private function onBarMouseDown(e:MouseEvent):void {
      stage.window.startMove( );
    }
  ]]>
  </mx:Script>
  <mx:HBox mouseDown="onBarMouseDown(event)" width="100%" height="24" backgroundColor="#ffffff"/>
  <mx:HBox mouseDown="onBoxMouseDown(event)" width="100%" height="100%" backgroundColor="#ffffff"/>
</mx:ApolloApplication>

close と closing イベント

最後に close と closing イベントです。これらのイベントは、ユーザがウインドウを閉じるボタンを押した時、閉じるまでに必要な処理があるケースなどに便利です。イベントの型は flash.events.Event です。

closing は閉じる直前に close は閉じた後に発生します。closing イベントをキャンセルすると、ウインドウを閉じるという処理自体をキャンセルできます。ただ closing イベントはシステムクロームの閉じるボタンを押した場合以外には自動的にディスパッチされないため、必要な場合には明示的にイベントを発生させる必要があります。この点は他の ing 系のイベントと同じです。

Posted by ackie at 05:16 PM | Comments (0)

April 19, 2007

NativeWindow クラスのイベント

以下は NativeWindow クラスのイベントのリストです。

displayStateChange    NativeWindow オブジェクトの displayState 属性が変更された
displayStateChanging  NativeWindow オブジェクトの displayState 属性が変更される直前
move                  NativeWindow オブジェクトがデスクトップ上で移動した
moving                NativeWindow オブジェクトがデスクトップ上で移動する直前
resize                NativeWindow オブジェクトの大きさが変更された
resizing              NativeWindow オブジェクトの大きさが変更される直前
close                 NativeWindow オブジェクトが閉じられた
closing               NativeWindow オブジェクトが閉じられる直前

ひとめで２つずつペアになっているのが分かるかと思います。４種類のウインドウに対する操作に対して、完了の直前と完了後それぞれの状態を通知するイベントが定義されています。

ing で終わるイベントは警告のような位置づけで、これを受け取ることで処理が完了する前に状況を確認したり、場合によっては処理自体をキャンセルするといった使い方が想定されています。そのため ing 系のイベントはいずれもキャンセル可能です。

一方 ing のつかないイベントは完了を通知するイベントです。事後処理が必要な場合に使用します。

では個々のイベントを少し詳しく見てみたいと思います。

NativeWindowDisplayStateEvent

まずは displayState 属性の変更に関連するイベントです。displayStateChanging は NativeWindow オブジェクトの displayState が変更される直前、displayStateChange は displayState が変更された後に該当する NativeWindow によってディスパッチされます。

このときディスパッチされるイベントオブジェクトの型は flash.events.NativeWindowDisplayStateEvent です。この型のイベントは beforeDisplayState と afterDisplayState の属性を持っていて、それぞれ変更前の値と変更後の値を示します。

displayStateChanging イベントの場合はまだ変更が完了していないので、イベントを受け取った時点での displayState 属性の値は beforeDisplayState の方ということになります。一方 displayStateChange イベントの場合は変更が既に行われているので、その時点の displayState 属性の値は afterDisplayState の方ということになります。

では早速サンプルコードを動かしてみましょう。まず、システムクロームを表示するようにアプリケーション記述ファイル内の rootContent タグの systemChrome が standard になっていることを確認します。

<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>

下のサンプルコードでは applicationComplete イベントのタイミングでイベントリスナ（onDispStateEvent）を追加しています。onDispStateEvent 内では trace() を使ってイベント情報を出力するようにしていますので、デバッグモードで実行してください。Flex Builder のコンソールにメッセージが出力されます。デバッグは虫のアイコンをクリックすると開始されます。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="addListeners()">
  <mx:Script>
  <![CDATA[
    private function addListeners():void {
      stage.window.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, onDispStateEvent);
      stage.window.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, onDispStateEvent);
    }
    private function onDispStateEvent(e:NativeWindowDisplayStateEvent):void {
      trace("type:", e.type, e.afterDisplayState);
    }
    private function onMinBtnClick(e:MouseEvent):void
    {
      stage.window.minimize();
    }
    private function onMaxBtnClick(e:MouseEvent):void
    {
      if (stage.window.displayState != NativeWindowDisplayState.MAXIMIZED)
      {
        stage.window.maximize();
        maxBtn.label = "v";
      }
      else
      {
        stage.window.restore();
        maxBtn.label = "\u25A2";
      }
    }
    private function onCloseBtnClick(e:MouseEvent):void
    {
      stage.window.close();
    }
  ]]>
  </mx:Script>
  <mx:HBox width="100%" backgroundColor="#ffffff">
    <mx:Button id="minBtn" label="_" click="onMinBtnClick(event)" />
    <mx:Button id="maxBtn" label='{"\u25A2"}' click="onMaxBtnClick(event)" />
    <mx:Button id="closeBtn" label="X" click="onCloseBtnClick(event)" />
  </mx:HBox>
  <mx:HBox width="100%" height="100%" backgroundColor="#ffffff"/>
</mx:ApolloApplication>

注意深くテストをした人は、システムクロームの最小化 / 最大化ボタンと、ウインドウ内の最小化 / 最大化ボタンとで押された後のイベントに違いがあるのに気づいたことと思います。

システムクロームのボタンからウインドウを最大化したり元に戻したりすると displayStateChanging と displayStateChange の両方のイベントが発生します。

一方、ウインドウ内のボタンを押した場合は displayStateChange イベントしか発生しません。（つまり ing イベントは発生しません）

これは、システムクロームから操作がされた場合、その操作によりリクエストされた処理が実際に行われる前に対応することが可能なようにという配慮によるものです。そのため、NativeWindow が displayStateChanging を自動的にディスパッチするのです。

一方、ウインドウ内のボタンから minimize() 等のメソッドを呼び出す場合は、呼び出す前に必要な対応を記述しておくことが可能なはずです。そのため minimize(), maximize(), restore() を呼んでも displayStateChanging は自動的にはディスパッチされません。

もし minimize() 等による displayState の変更に対しても displayStateChanging イベントが必要な場合には、以下のような記述を追加します。下は minimize() が呼ばれた場合です。

private function onMinBtnClick(e:MouseEvent):void
{
  stage.window.minimize();
  var dispStateEvent:NativeWindowDisplayStateEvent = 
    new NativeWindowDisplayStateEvent(
      NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, true, true, 
      stage.window.displayState, NativeWindowDisplayState.MINIMIZED);
    stage.window.dispatchEvent(dispStateEvent);
}

ApolloApplicaton のクロームではこれと同様な処理が追加されています。アプリケーション記述ファイルの rootContent タグの systemChrome を none にして ApolloApplication のクロームを表示すると displayStateChanging を確認することができます。

ちょっと長くなってしまいましたのでイベント話の続きはまた次回。

Posted by ackie at 05:48 PM | Comments (0)

April 18, 2007

新しい Apollo ウインドウを開く方法

Apollo アプリケーションから新しいウインドウを開くには NativeWindow もしくはそのサブクラスのインスタンスを生成します。下は NativeWindow のコンストラクタです。

public function NativeWindow(visible:Boolean, initOptions:NativeWindowInitOptions)

NativeWindow のコンストラクタは２つの引数を取ります。

1 つ目の引数はウインドウが作成されたときに表示するかしないかのフラグです。ウインドウを作成したら表示位置や大きさなどに多少の細工を加えることも多いと思います。ウインドウが表示された状態でこれらの処理を行うと途中の段階も画面に表示されてしまいますので、とりあえずコンストラクタでは false （非表示）を指定しておいて、必要な処理が終わったら window.visible = true を呼んでウインドウを表示するというのが一般的にはよさそうですね。

同様に、アプリケーション起動時に画面に表示したくない初期処理が存在する場合は、アプリケーション記述ファイル (-app.xml) 内 rootContent タグの visible を false にしておいて適当なタイミングで window.visible = true を呼ぶことで対応できます。

2 つ目の引数はウインドウの初期化に使われるオプションを指定する NativeWindowInitOptions 型のオブジェクトです。以下のような項目が NativeWindowInitOptions クラスに定義されています。

systemChrome:String  // ウインドウが使用するシステムクロームの種類
transparent:Boolean  // ウインドウが透けた背景を使用できるか
resizable:Boolean    // ウインドウの大きさを変更できるか
maximizable:Boolean  // ウインドウを最大化できるか
minimizable:Boolean  // ウインドウを最小化できるか

それぞれの属性の初期値は以下のようになっています。変更の必要があるものだけ指定すれば OK です。

systemChrome = NativeWindowSystemChrome.STANDARD;
transparent = false;
resizable = true;
maximizable = true;
minimizable = true;

systemChrome の取り得る値は NativeWindowSystemChrome クラスに定義されています。現在のアルファ版で使用できるのは以下の 2 種類だけです。

public static const STANDARD:String // OS 標準のクロームを使用
public static const NONE:String     // OS のクロームを使用しない

NativeWindowSystemChrome.NONE を指定した場合はクローム無し、つまり枠の内側のみのウインドウが表示されます。

ここまでまとめに、新しいウインドウを開くときの基本的な関数のサンプルです。

public function createNewWindow():void {
  // ウインドウ初期化オプションを作成
  var options:NativeWindowInitOptions = new NativeWindowInitOptions();
  // ここで必要に応じてオプションを設定
 
  // ウインドウの作成
  var newWindow:NativeWindow = new NativeWindow(false,options);
 
  // ここに必要な処理を記述
 
  // ウインドウを可視化
  newWindow.visible = true;
}

owner 属性

NativeWindowInitOptions クラスには owner という属性があります。この属性には新しく作成するウインドウのオーナーとなるウインドウを指定することができます。

owner を指定してウインドウを初期化すると、作成されたウインドウは常に自身の owner の上に表示されるようになります。owner ウインドウがフォーカスされてもお互いの重なり順は変わりません。

また、owner ウインドウが閉じられるとそのウインドウを owner に持つ全てのウインドウが閉じられます。

下のサンプルでは最初のアプリケーションウインドウがアプリーケーション起動後に開いたウインドウの owner になっています。そのため、アプリケーションウインドウを閉じるといくつウインドウが開いていても全てのウインドウが閉じられ、アプリケーションが終了します。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="350" height="200">
  <mx:Script>
  <![CDATA[
  public function createNewWindow():void {
    // ウインドウ初期化オプションを作成
    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.owner = stage.window;
 
    // ウインドウの作成
    var newWindow:NativeWindow = new NativeWindow(false,options);
    newWindow.width = 400;
    newWindow.height = 300;
 
    // ウインドウにテキストフィールドを追加
    newWindow.stage.align = StageAlign.TOP_LEFT;
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    var tf:TextField = new TextField();
    tf.width = newWindow.width;
    tf.text = "これは空のウインドウです";
    newWindow.stage.addChild(tf);
 
    // ウインドウを可視化
    newWindow.visible = true;
  }
  ]]>
  </mx:Script>
  <mx:Button label="ウインドウを開く" click="createNewWindow();"/>
</mx:ApolloApplication>

なお、アルファ版の制限として Flex のコンポーネントが追加できません。このサンプルではテキストフィールドを使用しています。

Posted by ackie at 05:00 PM | Comments (0)

April 17, 2007

Flex Builder 日本語版での Apollo 拡張の使用について

既にお伝えしましたように、現在 Adobe Labs に公開されている Flex Builder 2.0.1 用 Apollo 機能拡張は日本語版の Flex Builder とのテストが行われていません。やはり日本語版で使えたほうが便利ですし、本当に動かないのか様子を見るためにとりあえず2週間ほど社内数名で使ってみたところ特に問題が起きたりすることはありませんでした。

テスト用途であれば使用できるレベルのように思われますので、Flex Builder 2.0.1 日本語版に Apollo 機能拡張をインストールする際の手順をお伝えします。サポートはありませんのであくまで自己責任にはなりますが、よろしければ参考にしてください。

Adobe Labs から Apollo 機能拡張をダウンロードします。（Adobe Labs Downloads Apollo）
Flex Builder 2.0.1 日本語版に Apollo 機能拡張をインストールします。ビルド番号に対する警告パネルが表示されますがそのまま続行します
\plugins\com.adobe.flexbuilder.components.config.nl1_2.0.160522\nl\ja\config\components に apollo.xml をコピーします
\plugins\com.adobe.flexbuilder.editors.mxml_2.0.160522\resources に componentToExtensionMap.xml をコピーします
もし Apollo ランタイムがインストールされていなければインストールします

以上です。必要はファイルは zip ファイルにまとめてありますのでダウンロードしてください。（ApolloFBExtJ.zip:1.7KB）

Posted by ackie at 06:18 PM | Comments (0)

April 12, 2007

Apollo ウインドウの位置とサイズを変える色々な属性

NativeWindow クラスには Apollo アプリケーションのウインドウの位置や大きさを示すプロパティがあります。

x:Number       // ウインドウの左上の角の x 座標
y:Number       // ウインドウの左上の角の y 座標
width:Number   // ウインドウの幅（単位：ピクセル）
height:Number  // ウインドウの高さ（単位：ピクセル）

これらのプロパティに値を設定することでウインドウの位置や大きさを変えることができます。

stage.window.x = 50;
stage.window.y = 50;
stage.window.width = 800;
stage.window.height = 600;

ウインドウの幅と高さに指定できる最小値と最大値は予め決められています。最小値より小さな値を指定すると最小値として与えられている大きさになります。つまり下限の定義よりウインドウを小さくすることはできません。同様に最大値として定義されている値よりウインドウを大きくすることもできません。

最大値と最小値はそれぞれ以下のプロパティから参照できます。当然ですがこれらのプロパティは読み取り専用です。

maxSize:Point  // ウインドウの大きさの最大値
minSize:Point  // ウインドウの大きさの最小値

どちらも Point 型（Class Point@livedocs）で、座標値として大きさの上限または下限を指定します。例えば、maxSize.x はウインドウ幅の上限、maxSize.y はウインドウ高さの上限です。

ちなみに、maximize() を呼んだ後のウインドウの大きさは maxSize に定義されている上限の値と同じになります。

それから、プロパティを使ってウインドウを最大化した場合 reset() を呼んでも元には戻りません。displayState が NORMAL のままのためです。

bounds 属性

NativeWindow の bounds 属性を使うと位置と大きさをいっぺんに指定することができます。

bounds:Rectangle  // ウインドウの位置と大きさ

Rectangle 型（Class Rectangle@livedocs）のオブジェクトで座標情報を管理するわけです。例えば上の例は以下のように書き直すことができます。

// ウインドウ左上角の座標を （50, 50） 幅を 800 高さを 600 に設定
stage.window.bounds = new Rectangle(50, 50, 800, 600);

NativeWindow と Stage

ところで、ウインドウの大きさはシステムクロームが使用されていた場合にはクロームの大きさも含みます。ウインドウ内のクローム以外の領域がステージ（window.stage）です。

ステージ領域の大きさは stage オブジェクトの属性から取得することができます。Stage クラスには stageWidth と stageHeight という属性がありそれぞれ stage オブジェクトの幅と高さを表しています。

これらの属性に値を代入すると stage の大きさが変わります。そのためステージを表示しているウインドウの大きさも変わります。

stage.stageWidth = 800;
stage.stageHeight = 600;

stage と window が同じ display list に属していることになるので stage と stage.window.stage は同じオブジェクトのはずですね。

Posted by ackie at 06:37 PM | Comments (0)

April 10, 2007

Apollo ウインドウの移動とリサイズの実現

ふつうのウインドウだったらマウスでウインドウの位置を変えたり大きさを変えたりできますよね？今回はそれらの機能を追加したいと思います。

startMove() メソッド

startMove() は NativeWindow クラスのメソッドです。

public function startMove():void

マウスのボタンを押すと mouseDown イベントが発生します。この状態で startMove() メソッドを呼び出すと、マウスボタンを離す（もしくは何らかのマウスイベントが発生する）までマウスの動きに従ってウインドウを移動させることができます。

移動終了の判断は Apollo 側で勝手に行いますので、特に設定する必要はありません。ですので stopMove() といった類のメソッドは提供されていません。

ちなみに Windows では mouseDown 以外のタイミングから startMove() を呼ぶとキー操作による移動も可能になるようです。

さて、前回のサンプルにタイトルバーを使った移動ができるように機能を追加してみましょう。

まずはタイトルバーのコンポーネントがマウス操作に反応するよう mouseDown イベントに対するイベントハンドラを指定します。

<mx:HBox mouseDown="onTitleBarMouseDown(event)" styleName="box" width="100%">

イベントハンドラの側で必要な処理は startMove() を呼び出すことだけです。

private function onTitleBarMouseDown(e:MouseEvent):void {
  stage.window.startMove( );
}

これで、タイトルバーを掴んで動かすことができるようになりました。

startResize() メソッド

次にウインドウのリサイズ処理を開始する startResize() メソッドの使い方です。

public function startResize(edgeOrCorner:String):void

このメソッドも、上で説明した startMove() と同様に、mouseDown のイベントハンドラ内で呼ばれると mouseUp イベントが発生するまで処理（こっちの場合はマウスの動きに従ってウインドウの大きさを変更）を続けます。リサイズ終了の処理の記述が必要ない点も startMove() と似ています。

startResize() メソッドの引数にはリサイズを行う方向（下向きとか左向きとか）を指定します。ということは、マウスの押された場所によって、指定する引数を変更するロジックが必要になるということです。例えば、押された場所が右下の角であれば、右側と下側両方の辺をリサイズの対象とするように引数を指定する必要があります。（普通のアプリの場合）

このとき引数として指定できるオプションには以下のものがあります。NativeWindowResize クラスに定義されています。

NativeWindowResize.TOP          // 上方向にリサイズ
NativeWindowResize.BOTTOM       // 下方向にリサイズ
NativeWindowResize.LEFT         // 左方向にリサイズ
NativeWindowResize.RIGHT        // 右方向にリサイズ
NativeWindowResize.TOP_LEFT     // 上と左方向にリサイズ
NativeWindowResize.TOP_RIGHT    // 上と右方向にリサイズ
NativeWindowResize.BOTTOM_LEFT  // 下と左方向にリサイズ
NativeWindowResize.BOTTOM_RIGHT // 下と右方向にリサイズ
NativeWindowResize.NONE         // どの方向にもリサイズしない

下のサンプルコードは右下方向にリサイズする処理を開始するものです。分かりやすくするために反応する領域を大きめに取っています。

private function onBoxMouseDown(e:MouseEvent):void {
  // 反応する領域の大きさ
  var dragArea:int = 300;
  // マウスが右下の角にあるかチェック
  if ((mouseY > (height - dragArea)) && (mouseX > (width - dragArea))) {
    stage.window.startResize(NativeWindowResize.BOTTOM_RIGHT);
  }
}

このメソッドを呼び出す記述を追加すると前回のサンプルでもリサイズができるようになります。下が修正したコードです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    private function onMinBtnClick(e:MouseEvent):void
    {
      stage.window.minimize( );
    }
    private function onMaxBtnClick(e:MouseEvent):void
    {
      if (stage.window.displayState != NativeWindowDisplayState.MAXIMIZED)
      {
        stage.window.maximize( );
        maxBtn.label = "v";
      }
      else
      {
        stage.window.restore( );
        maxBtn.label = "\u25A2";
      }
    }
    private function onCloseBtnClick(e:MouseEvent):void
    {
      stage.window.close( );
    }
    private function onTitleBarMouseDown(e:MouseEvent):void {
      stage.window.startMove( );
    }
    private function onBoxMouseDown(e:MouseEvent):void {
      var dragArea:int = 300;
      if ((mouseY > (height - dragArea)) && (mouseX > (width - dragArea))) {
        stage.window.startResize(NativeWindowResize.BOTTOM_RIGHT);
      }
    }
  ]]>
  </mx:Script>
  <mx:Style>
    Application
    {
      background-color:"";
      background-image:"";
    }
    .box {
      backgroundColor:#888888;
      backgroundAlpha:0.8;
    }
  </mx:Style>
  <mx:HBox mouseDown="onTitleBarMouseDown(event)" styleName="box" width="100%">
    <mx:Button id="minBtn" label="_" click="onMinBtnClick(event)" />
    <mx:Button id="maxBtn" label='{"\u25A2"}' click="onMaxBtnClick(event)" />
    <mx:Button id="closeBtn" label="X" click="onCloseBtnClick(event)" />
  </mx:HBox>
  <mx:HBox mouseDown="onBoxMouseDown(event)" styleName="box" width="100%" height="100%"/>
</mx:Application>

Posted by ackie at 06:47 PM | Comments (0)

April 09, 2007

NativeWindowDisplayState クラス

ウインドウの現在の表示状態を知りたいとき、NativeWindow クラスの displayState プロパティ（読み取り専用）から取得することができます。

var windowStatus:String = stage.window.displayState;

このプロパティの持つ値は NativeWindowDisplayState というクラスに定義されています。とりうる値は以下の３種類です。

NativeWindowDisplayState.NORMAL     // ウインドウは通常の表示状態である
NativeWindowDisplayState.MINIMIZED  // ウインドウは最小化されている
NativeWindowDisplayState.MAXIMIZED  // ウインドウは最大化されている

これを使うと前回紹介した NativeWindow のメソッドは以下のように理解することができます。

public function maximize():void // displayState を MAXIMIZED にする
public function minimize():void // displayState を MINIMIZED にする
public function restore():void  // displayState を NORMAL にする

ウインドウの displayState を変更できるのはこの３つのメソッドのみです。（いまのところ）

さて、以上を踏まえて前回のサンプルを修正してみます。

前回のサンプルでは4つのボタン（最小 / 最大 / 戻る / 閉じる）が常に表示されたままでした。

maximize() メソッドはウインドウが最大化されていれば呼ばれても何もしません。つまり悪さはしません。（minimize() メソッドも同様です）ですが、押しても何もしないボタンが表示されているのもなんですので、一般的な OS のウインドウのように1つのボタンで”最大化”と”戻る”の操作を兼ねるようにしたいと思います。

アプリケーションの起動時はウインドウは最大化されていないと考えてよいと思われるので、最初は最大化ボタンを表示しておき、その後はボタンが押されるたびにウインドウの状態により動作を切り替えるという方針をとることにします。

そうすると最大化ボタンが押されたときに呼び出される onMaxBtnClick() は以下のように書き直すことができます。

private function onMaxBtnClick(e:MouseEvent):void
{
  if (stage.window.displayState != NativeWindowDisplayState.MAXIMIZED)
  {
    stage.window.maximize( );
    maxBtn.label = "v";
  }
  else
  {
    stage.window.restore( );
    maxBtn.label = "\u25A2";
  }
}

上のメソッド内では、最初に displayState の値を調べたらその値に従って呼び出すメソッドとボタンのラベルを変更しています。

大きさを戻す専用のボタンはいらなくなるため全体のコードは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    private function onMinBtnClick(e:MouseEvent):void
    {
      stage.window.minimize( );
    }
    private function onMaxBtnClick(e:MouseEvent):void
    {
      if (stage.window.displayState != NativeWindowDisplayState.MAXIMIZED)
      {
        stage.window.maximize( );
        maxBtn.label = "v";
      }
      else
      {
        stage.window.restore( );
        maxBtn.label = "\u25A2";
      }
    }
    private function onCloseBtnClick(e:MouseEvent):void
    {
      stage.window.close( );
    }
  ]]>
  </mx:Script>
  <mx:Style>
    Application
    {
      background-color:"";
      background-image:"";
    }
    .box {
      backgroundColor:#888888;
      backgroundAlpha:0.8;
    }
  </mx:Style>
  <mx:HBox styleName="box" width="100%">
    <mx:Button id="minBtn" label="_" click="onMinBtnClick(event)" />
    <mx:Button id="maxBtn" label='{"\u25A2"}' click="onMaxBtnClick(event)" />
    <mx:Button id="closeBtn" label="X" click="onCloseBtnClick(event)" />
  </mx:HBox>
  <mx:HBox styleName="box" width="100%" height="100%"/>
</mx:Application>

Posted by ackie at 06:37 PM | Comments (0)

April 06, 2007

Apollo ウインドウに最大/最小化と閉じるボタンを追加

Apollo アプリケーションのウインドウは NativeWindow というクラスのインスタンスです。この NativeWindow クラスの API を使うとウインドウを閉じたり最大化したりできます。

NativeWindow クラス

DisplayObject のインスタンス（画面に表示されるオブジェクトは基本的にみんなそうです）であれば、自身が所属する表示領域を stage 属性に持っています。この stage 属性から stage を表示している NativeWindow オブジェクトを取得することができます。

// DisplayObject のインスタンス内では以下の記述が可能
var window:NativeWindow = stage.window;

Stage の window プロパティは Apollo 実行環境でのみ有効で、Flash Player 環境では存在しません。プラグインは個別のウインドウを持たないので当たり前といえば当たり前ですが。

ちなみに、アプリケーションから実行環境を調べる方法の一つとして System.Capabilities.playerType が使えます。

public function isDesktopPlayer():Boolean
{
  return (Capabilities.playerType == "Desktop");
}

さて、NativeWindow クラスにはウインドウの大きさを操作するためのメソッドがいくつか提供されています。

public function maximize():void // ウインドウを最大化する
public function minimize():void // ウインドウを最小化する
public function restore():void  // ウインドウの大きさを元に戻す
public function close():void    // ウインドウを閉じる

maximize() と minimize() はそれぞれウインドウを最小化 / 最大化するメソッドです。restore() はウインドウが最小化または最大化された状態からそれ以前の位置と大きさにウインドウを復元するメソッドです。

４つ目の close() はウインドウを閉じるメソッドです。一度閉じたウインドウを再度開くことはできません。一時的ににウインドウを隠すだけであれば visible 属性を使う方法があります。

displayObject.stage.window.visible = false; // ウインドウを一時的に隠す

後で visible 属性を true に設定すれば再びウインドウが表示されます。（ちなみにアプリケーション記述ファイル（アプリ名-app.xml）の rootContent タグの３つめの属性の visible で設定されるのもこの属性です）

以下はこれらのメソッドを使ったサンプルです。Application のスタイル指定でメインウインドウの背景を透明にしているため、２つの HBox に明示的に背景色を指定しています。（注：app.xml 内 rootContent タグの属性値変更をお忘れなく）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    private function onMinBtnClick(e:MouseEvent):void
    {
      stage.window.minimize( );
    }
    private function onMaxBtnClick(e:MouseEvent):void
    {
      stage.window.maximize( );
    }
    private function onRestoreBtnClick(e:MouseEvent):void
    {
      stage.window.restore( );
    }
    private function onCloseBtnClick(e:MouseEvent):void
    {
      stage.window.close( );
    }
  ]]>
  </mx:Script>
  <mx:Style>
    Application
    {
      background-color:"";
      background-image:"";
    }
    .box {
      backgroundColor:#888888;
      backgroundAlpha:0.8;
    }
  </mx:Style>
  <mx:HBox styleName="box" width="100%">
    <mx:Button id="minBtn" label="_" click="onMinBtnClick(event)" />
    <mx:Button id="maxBtn" label='{"\u25A2"}' click="onMaxBtnClick(event)" />
    <mx:Button id="restoreBtn" label='{"v"}' click="onRestoreBtnClick(event)" />
    <mx:Button id="closeBtn" label="X" click="onCloseBtnClick(event)" />
  </mx:HBox>
  <mx:HBox styleName="box" width="100%" height="100%"/>
</mx:Application>

今回紹介した４つのメソッドの実行は非同期です。完了通知はイベントによって行われます。

Posted by ackie at 06:15 PM | Comments (0)

April 05, 2007

Apollo ウインドウをもっと自由にデザインする方法

Apollo アプリケーションのクロームを変更する方法は以前にも一度触れましたが、そのときは Apollo が提供するクロームをそのまま使いました。今回はウインドウの形やボタンを自由にデザインする方法です。

クロームを消す

まず、アプリケーション記述ファイル（アプリ名-app.xml ）内の rootContent タグを変更します。rootContent タグの systemChrome が "standard" の場合は OS 標準のウインドウになりますが、"none" の場合は Apollo アプリケーションの提供するクロームが使われます。

<rootContent systemChrome="none" transparent="false" visible="true">[SWF reference is generated]</rootContent>

上記のように systemChrome を "none" に設定して、空の Apollo アプリケーションを作ります。

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

これを実行すると以下のようなウインドウが表示されます。

このとき、アプリケーションのウインドウにタイトルバーやボタンが表示されているのは Apollo が提供するクロームが使用されているからです。

Apollo が提供するクロームを使用したくない場合は Apollo アプリケーションのルートタグを ApolloApplication から Application に変更します。

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

すると以下のような表示に変わります。

タイトルバーやボタン類はなくなって、普通の Flex アプリケーションの背景になったということですね。後は自由にウインドウ操作用のコントロールを配置することができます。

背景を消す

さて、まだ四角い背景に残っていますので次はこれを消します。背景が無くなれば、代わりに好きな形のオブジェクトを背景に使えるだろうという算段です。

まず、アプリケーション記述ファイル（アプリ名-app.xml ）内の rootContent タグに transparent という属性があります。これを "true" にします。

<rootContent systemChrome="none" transparent="true" visible="true">[SWF reference is generated]</rootContent>

これだけだと背景は変わりません。この設定とあわせて Application のスタイルに以下を追加します。

background-color:"";
background-image:"";

そうすると、アプリケーションの背景が透明になります。

つまりアプリケーションを実行してみても何も表示されなくなります。何も表示されないため実行されているかどうかが一見しても分かりません。試す場合はタスクバー等から確認してみてください。

以上で、四角い枠のないアプリケーションを作れるようになりました。Application タグ内に適当なオブジェクトを配置するとそれだけが表示されます。下は読み込んだイメージのみが表示されるサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
    Application
    {
      background-color:"";
      background-image:"";
    }
  </mx:Style>
  <mx:Image source="myImage.png"/>
</mx:Application>

Posted by ackie at 05:43 PM | Comments (0)

April 03, 2007

イベントによる Flex コンポーネントの連携

当面 Apollo の開発環境が Flex Builder のみとのことで Flex 入門も兼ねてと書き始めたら（今頃すみません）思っていたより長引いてます。

さて、前回のコードでは、以下の通り MyBrowser.mxml から HTMLControlBar コンポーネントにイベントの発生を伝えるためにメソッドを呼び出していました。

// MyBrowser.mxml
private function onDomInitialize(e:Event):void {
  htmlControl.onDomInitialize();
}

これは２つのコンポーネントの依存関係を強くしますし、そもそも HTML コンポーネントへの参照を HTMLControlBar コンポーネントに渡しているのに別途イベントを伝えるコードも在るのは冗長なように思われます。

そこで、この箇所を変更してみたいと思います。

domInitialize イベントが発生したら処理を行うというのは HTMLControlBar コンポーネントの都合です。なのでイベントを受け取る設定は HTMLControlBar コンポーネント側のみで完結するようにします。具体的には、”HTMLControlBar コンポーネントは HTML コンポーネントへの参照が target 属性に渡されたら HTML コンポーネントの domInitialize イベントへのリスナを登録する” ようにしたいと思います。

そのために set を使うことにします。set は get と対になるプロパティへのアクセスを実現する機能です。以前に解説を書いたことがありますのでより詳しい説明はそちらをご参照くさい。（get と set）

set を使うと target 属性は以下のように書き直すことができます。

private var _target:HTML;
 
public function set target(value:HTML):void {
  _target = value;
}

この形であれば、set 関数内部でイベントリスナを登録することも可能です。下のコードでは Event.DOM_INITIALIZE イベントに対して onDomInitialize() メソッドをリスナとして登録しています。これで target で domInitialize イベントが発生したら onDomInitialize() が呼ばれるようになります。

private var _target:HTML;
 
public function set target(value:HTML):void {
  _target = value;
  _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
}

HTML コンポーネントは一つとは限らないかもしれません。念のため古いリスナが登録されていたら削除するコードも追加してみます。

private var _target:HTML;
 
public function set target(value:HTML):void {
  if (_target != null) {
    _target.removeEventListener(Event.DOM_INITIALIZE, onDomInitialize);
  }
  _target = value;
  _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
}

今のところ必要なさそうですが、念のため get も定義しておきます。

public function get target():HTML {
  return _target;
}

以上で HTMLControlBar コンポーネント内に HTML コンポーネントへのイベントリスナを設定する機能も実装されました。

従って、MyBrowser.mxml からは HTML コンポーネントの domInitialize イベント関連の記述は全て削除可能になります。

最後に全ファイルのコードです。

MyBrowser.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 
  <local:HTMLControlBar id="htmlControl" target="{html}"/>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>

HTMLControlBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.HTML;
      private var _target:HTML;
 
      public function set target(value:HTML):void {
        if (_target != null) {
            _target.removeEventListener(Event.DOM_INITIALIZE, onDomInitialize);
        }
        _target = value;
        _target.addEventListener(Event.DOM_INITIALIZE, onDomInitialize);
      }
      public function get target():HTML {
        return _target;
      }
      private function onDomInitialize(event:Event):void {
        prevLocations.pushLocation(_target.location);
        inputTF.text = _target.location;
      }
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(url:String):void {
        _target.location = url;
      }
    ]]>
  </mx:Script>
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>

PreviousLocations.as

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    [Bindable]
    public var isPopEnabled:Boolean = false;
    private function setPopEnabled():void {
      isPopEnabled = history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        setPopEnabled();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
        setPopEnabled();
      }
    }
  }
}

MyBrorser.css

Application {
   background-color:"";
   background-image:"";
   background-alpha: 0.4;
}

Posted by ackie at 05:44 PM | Comments (0)

April 02, 2007

Apollo ブラウザのコードの見直しの続き

MXML コンポーネントの作成

今回はユーザが操作する UI すなわち HBox タグで囲まれたコンポーネント群を外部コンポーネント化してみます。MyBrowser.mxml 内の以下の箇所になります。

  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
  </mx:HBox>

コンポーネントの名前は HTMLControlBar とします。例によって Ctrl-n でダイアログを開いたら MXML Component を選んで Next を押します。

上記の画面が表示されたら Filename の欄に HTMLControlBar と入力し、Based on の欄を HBox に、Width と Height は空白にします。

Finish ボタンを押すと、MXML エディタが開いて、下のような MXML コンポーネントのテンプレートが出来上がります。

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

ここに MyBrowser.mxml ファイルから TextInput タグと２つの Button タグをコピーしてきます。Hbox タグの間にそのままペーストするだけです。

履歴管理の機能もこちらのコンポーネントに持たせた方がよさそうですので、PreviousLocations タグもコピーします。その際ルートの HBox タグに xmlns:local="*" の追加を忘れないようにしましょう。local 名前空間の宣言が必要ですので。

以上で下のようなファイルができたと思います。これで、タグの部分の移動は完了です。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>

次に、スクリプトの記述を始めます。

HTMLControlBar からはユーザの操作に応じて HTML コンポーネントの location を設定できなければなりません。そこで、HTML コンポーネントへの参照を属性として持つことにします。名前は target とします。

import mx.controls.HTML;
public var target:HTML;

HTMLControlBar 内３つの UI コンポーネントから呼び出される back() と setLocation() はそのままコピーしてもよさそうです。直接 HTML コンポーネントを参照していた箇所（html と記述された部分）だけ target と置き換えます。

private function back():void {
  var prevURL:String = prevLocations.popLocation();
  if (prevURL != null) {
    setLocation(prevURL);
  }
}
private function setLocation(url:String):void {
  target.location = url;
}

同様に onDomInitialize() もそのままコピーしてきます。こちらも html → target の変換のみ行います。

public function onDomInitialize():void {
  prevLocations.pushLocation(target.location);
  inputTF.text = target.location;
}

とりあえずこれで HTMLControlBar に必要な機能はひととおりそろいました。

MXML コンポーネントの利用

MyBrowser.mxml ファイル側では、これまで HBox タグで囲まれていた箇所全体を、上で作成した HTMLControlBar のタグで置き換えます。

<local:HTMLControlBar id="htmlControl" target="{html}"/>

この際 HTMLControlBar の target 属性に html を指定します。これで HTMLControlBar コンポーネントに HTML コンポーネントへの参照が設定されます。

MyBrowser.mxml 内のスクリプトブロックに関しては、back() と setLocation() は HTMLControlBar に移したのでそのまま削除して構いませんが、onDomInitialize() はちょっと配慮が必要です。単純に削除すると HTMLControlBar 側の onDomInitialize() を呼び出す手段がなくなってしまうからです。

なので、ここでは onDomInitialize() は残すことにしてその中で HTMLControlBar コンポーネント側の onDomInitialize() を呼び出すように変更してみます。

private function onDomInitialize(e:Event):void {
  htmlControl.onDomInitialize(e);
}

以上で MyBrowser から外部コンポーネント化した HTMLControlBar を使えるようになりました。

あと少し変更したい箇所がありますが、とりあえずここまでのまとめです。まずは、HTMLControlBar.mxml ファイルから。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.HTML;
      public var target:HTML;
 
      public function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(target.location);
        inputTF.text = target.location;
      }
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(url:String):void {
        target.location = url;
      }
    ]]>
  </mx:Script>
  <local:PreviousLocations id="prevLocations"/>
  <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
  <mx:Button label="移動" click="setLocation(inputTF.text)"/>
  <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
</mx:HBox>

それから MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        htmlControl.onDomInitialize(e);
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
 
  <local:HTMLControlBar id="htmlControl" target="{html}"/>
  <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)"
    domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>

PreviousLocation.as は前回のものが使用できます。

Posted by ackie at 06:39 PM | Comments (0)

March 29, 2007

Binding を使った Flex コンポーネント連携

アプリケーション構造見直しの手始めとしてまず履歴管理を PreviousLocations という外部クラスで行うことにしました。とりあえず動くようにはなりましたが少し気になる箇所が残っています。

「MyBrowser.mxml をよくみると back() と onDomInitialize() 両関数とも ”戻る” ボタンの状態を設定するために履歴の状況チェックを行っています」という理由で、「履歴の状態を公開する手段を何かしら提供する必要がありそう」なため、PreviousLocations クラスに isPopEnabled() というメソッドを定義してみました。

ところが、このメソッドは履歴の状態が変わったら必ず呼ぶことが要求されるという種類のものです。そのため、呼び出す側からすると、いつ呼び出すのが適切かを把握したいと思ったら PreviousLocations 内部の動きを理解しなければなりません。

せっかく外部クラス化したのに、これでは意義も薄れてしまいます。そこで、PreviousLocations の内部ステータスが変わったら、PreviousLocations の側から通知するように変更してみたいと思います。

Bindable メタタグ

まず、履歴が2つ以上残っているかどうかを示すフラグ isPopEnabled を定義します。このフラグに新しく値が代入されたらイベントを発生するように変更したいと思います。あわせてフラグを設定するための setPopEnabled() メソッドも定義しておきます。

public var isPopEnabled:Boolean = false;
private function setPopEnabled():void {
  isPopEnabled = history.length > 1;
}

さて、これから isPopEnabled の変更を伝えるイベントを追加するわけですが、Flex にはこういった仕組みを簡単に実現する手段が提供されています。Bindable というメタタグです。

[Bindable]
public var isPopEnabled:Boolean = false;

上のように変数の宣言の上の行に [Bindable] と記述すると isPopEnabled の値が変わったらそれを通知するイベントを発生させるというコンパイラに対する指示になります。この指定によってコンパイル時にイベント生成に必要なコードが勝手に追加されます。

このときに発生するイベント名は propertyChange という名前です。イベント名を指定することも可能です。

[Bindable(event="changePopEnabled")]
public var isPopEnabled:Boolean = false;

Binding

さて、MyBrowser.mxml 側では PreviousLocations からのイベントを受け取るためにイベントリスナが必要になります。が、Flex はここでも便利な機能を提供しています。タグの属性に中括弧で囲んだ変数を代入する式があるとイベントリスナがコンパイル時に自動的に生成されるというものです。この機能をバインディングと呼んでいます。

<mx:Button label="戻る" enabled="{prevLocations.isPopEnabled}"/>

上のように記述することを enabled 属性に prevLocations.isPopEnabled をバインドすると言ったりします。これだけで対象（ここでは prevLocations.isPopEnabled）の値が変更されたイベントで enabled 属性の値を再設定する仕組みまで記述したことになります。

以上で ”PreviousLocations の側から履歴の状況が変わったら通知” という目的は達成されました。あとはこの変更にあわせていくつかの修正です。

MyBrowser.mxml 内では isPopEnabled() を呼び出している２つの行を削除します。

代わりに PreviousLocations.as 内では、履歴を保持している配列の中身を変更したら setPopEnabled() の呼び出しを行うように直します。これにより popLocation() と pushLocation() で一箇所ずつ修正されることになります。

下が新しい PreviousLocations.as ファイルです。

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    [Bindable]
    public var isPopEnabled:Boolean = false;
    private function setPopEnabled():void {
      isPopEnabled = history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        setPopEnabled();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
        setPopEnabled();
      }
    }
  }
}

こちらは MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
        }
      }
      private function setLocation(location:String):void {
        html.location = location;
      }
 
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(html.location);
        inputTF.text = html.location;
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <local:PreviousLocations id="prevLocations"/>
 
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button label="戻る" click="back()" enabled="{prevLocations.isPopEnabled}"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>

Posted by ackie at 05:04 PM | Comments (0)

March 28, 2007

Apollo ブラウザのコードの見直し

Kuler （Kuler@Labs）がアップデートされました。RSS への対応や UI の変更等がされています。昨日発表された Illustrator CS3 との連携もできるようです。

さて、前回の Apollo ブラウザの記事で ”戻る” ボタンに関する修正を入れたおかげでコードがぱっと見では分かり辛くなってしまいました。そこで、ちょっとアプリケーションの構造を見直してみたいと思います。

ActionScript コンポーネントの作成

まずは、履歴管理に関する機能を外部クラス化してみます。

新しく作成するクラスは PreviousLocatons という名前にして、履歴の取り出しと追加を行うために以下のようなメソッドを持たせることにします。

public class PreviousLocations {
  public function popLocation():String {} // 履歴の取り出し
  public function pushLocation(location:String):void {} // 履歴の追加
}

早速ファイルを作成してみましょう。例によって Ctrl-n を押してダイアログウインドウを開いたら ActionScript Class を選んで Finish を押します。すると下の図のような画面が表示されるので Project が MyBrowser になっていることを確かめて、Name のフィールドに PreviousLocations と入力します。今回は Package 等他のフィールドは指定せずにおきます。

この状態で Finish を押すと、PreviousLocations.as というファイルが作成されて同時に AS エディタが開かれます。エディタ内には PreviousLocations のクラス定義の枠だけが作成された状態になります。

これで準備ができたので、このクラス定義の中に MyBrowser.mxml 内のスクリプトから履歴管理に関連した箇所を移動させてきます。

まず、2つの変数定義はどちらもそのまま移動してしまってよさそうです。

private var history:Array = new Array();
private var isPop:int = 0;

isBack は isPop に（新しいメソッド名にあわせて）変えてみました。

次は popLocation() を定義してみます。MyBrowser.mxml の back() がほぼそのまま使えそうです。

public function popLocation():String {
  var prevLocation:String = null;
  if (history.length > 1) {
    history.pop();
    prevLocation = history[history.length - 1];
    isPop++;
  }
  return prevLocation;
}

popLocation() の戻り値は、履歴内に戻る先が存在すればその URL、存在しなければ null を返すようにしました。

さらに pushLocation() も定義してみます。こっちは onDomInitialize() からのコードが使えそうです。

public function pushLocation(location:String):void {
  if (isPop > 0) {
    isPop--;
  } else {
    history.push(location);
  }
}

これは簡単でしたね。そのまま移すだけでした。

さて、これで予定していたメソッドが定義できたので、あとは PreviousLocations クラスに合わせて MyBrowser.mxl 側を直せばよさそうです。が、MyBrowser.mxml をよくみると back() と onDomInitialize() 両関数とも ”戻る” ボタンの状態を設定するために履歴の状況チェックを行っています。

．．．とすると、PreviousLocations クラスは履歴の状態を公開する手段を何かしら提供する必要がありそうです。

ここではとりあえず下のメソッドを足すことにしてみようと思います。

public function isPopEnabled():Boolean {
  return history.length > 1;
}

以上で、履歴管理のクラスは使えそうな感じになりました。

ActionScript コンポーネントの利用

さて、今度は MyBrowser.mxml ファイルを変更していきましょう。

最初に、新しく定義した PreviousLocations クラスのインスタンスを宣言します。

インスタンスは ApolloApplication タグの子タグとして宣言したいと思います。なので、Style タグの次辺りの適当な行で <local と入力します。するとコードヒントに PreviousLocations が出てきます（と思います）のでそれを選択します。id 属性を指定してタグを閉じるとインスタンス宣言の完了です。

<local:PreviousLocations id="prevLocations"/>

このタグを追加してから MyBrowser.mxml の2行目にある ApolloAppication タグを見ると xmlns:local="*" が自動的に追加されているのが分かると思います。今回のようにとりあえずパッケージを指定せず作ったクラスを使うときには便利な機能です。

あとは、back() と onDomInitialize() の修正ですね。

まず back() はこんな感じに。

private function back():void {
  var prevURL:String = prevLocations.popLocation();
  if (prevURL != null) {
    setLocation(prevURL);
    backBtn.enabled = prevLocations.isPopEnabled();
  }
}

onDomInitialize() はこんなで。

private function onDomInitialize(e:Event):void {
  prevLocations.pushLocation(html.location);
  inputTF.text = html.location;
  backBtn.enabled = prevLocations.isPopEnabled();
}

以上で変更はおしまいです。

ちょっと長くなってしまったので、ここまでに出来上がったコードをまとめておきます。まず、PreviousLocations.as ファイルを。

package
{
  public class PreviousLocations
  {
    private var history:Array = new Array();
    private var isPop:int = 0;
 
    public function isPopEnabled():Boolean {
      return history.length > 1;
    }
 
    public function popLocation():String {
      var prevLocation:String = null;
      if (history.length > 1) {
        history.pop();
        prevLocation = history[history.length - 1];
        isPop++;
      }
      return prevLocation;
    }
    public function pushLocation(location:String):void {
      if (isPop > 0) {
        isPop--;
      } else {
        history.push(location);
      }
    }
  }
}

少しスリムになった MyBrowser.mxml です。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function back():void {
        var prevURL:String = prevLocations.popLocation();
        if (prevURL != null) {
          setLocation(prevURL);
          backBtn.enabled = prevLocations.isPopEnabled();
        }
      }
      private function setLocation(location:String):void {
        html.location = location;
      }
 
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        prevLocations.pushLocation(html.location);
        inputTF.text = html.location;
        backBtn.enabled = prevLocations.isPopEnabled();
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html;
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <local:PreviousLocations id="prevLocations"/>
 
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="setLocation(inputTF.text)"/>
    <mx:Button label="移動" click="setLocation(inputTF.text)"/>
    <mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"
    locationChange="onLocationChange(event)" domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>

Posted by ackie at 06:55 PM | Comments (1)

March 26, 2007

Apollo HTML コンポーネントのイベント

前回までに作ったコードを実際に試された方は気がつかれたと思いますが、”戻る” ボタンがちゃんと機能しない場合があります。今回はその辺りを修正してみたいと思います。

問題その１： 2つ前の画面に戻れない

いくつかのページを表示した後、”戻る” を押すと前の画面に戻ります。ところが、もう一回 ”戻る” を押しても同じページが表示されてしまいます。その後何回押しても同じページのままです。

これは、HTML コンポーネントの complete イベントで履歴を追加するようにしたことに原因があります。（Apollo でブラウザを作るの続き）普通に新しいページをロードしているうちは問題ないのですが、”戻る”ボタンで前のページを表示したときにも、戻ったページの表示が完了すると complete イベントが発生するため戻ったページを改めて履歴に追加しなおすという一歩戻ってまた進むような動作をしてしまうのです。

これを解決するには complete イベントハンドラ内で、”戻る” の押下による表示かどうかを判定して動作を切り替えればよいはずです。そこで、状況を示すフラグを追加して、それによってハンドラの動作を切り替えるよう変更します。修正される箇所はフラグの追加を含め 3 箇所です。

private var isBack:int = 0; // 戻り中を示すフラグの宣言
 
private function back():void {
  if (history.length > 1) {
    history.pop();  // 現在の URL を廃棄
    var prevURL:String = history[history.length - 1]; // 最終エントリを取得
    html.location = prevURL;  // HTML コンポーネントに URL を設定
    isBack++;  // フラグをセット
  }
}
 
private function pushURL(e:Event):void {
  if (isBack > 0) {
    isBack--;
  } else {
    history.push(html.location); // 現在の location を配列に記録
  }
  inputTF.text = html.location;
  fadeIn.target = html; // 効果のターゲットを設定したら開始
  fadeIn.play();
}

まず、isBack という変数を宣言して、back() 内でその値を一つ増やしています（”戻る” の開始）。onComplete() 内では isBack が正の値なら一つ値を減らし（”戻る” の完了）、それ以外の場合（新規ページの表示）のみ通常の処理を行うよう変更しました。

これで、2つ前のページにも戻れるようになったと思います。

HTTP コンポーネントのイベント

問題その２：表示完了前に ”戻る” ボタンを押すと2つ前の画面に飛んでしまう

”戻る” は一つ前の画面に戻るためのボタンです。ところがときどき2つ前の画面に戻ってしまうことがあります。これは、履歴の追加されるタイミングが complete イベント発生時、すなわちページ全体の描画完了時であるためです。

今の仕様だと、読み込んだページの描画が完全に終了するまで、履歴の状態は前のページが表示されていたときのままです。なので描画完了前に ”戻る” を押すと、一つ前のさらに前のページに移動してしまうわけです。

とすると画面に表示が開始されるまでには履歴の追加を済ませておきたいところです。では、都合よく使えそうなイベントは HTML コンポーネントにあるでしょうか。

以下が、HTML コンポーネントの描画に関連するイベントです。

locationChange: HTML コンポーネントの location プロパティが変更された
domInitialize : HTML ドキュメントの読み込み開始に伴い DOM が初期化された
htmlRender    : HTML コンテンツの描画が完了した
complete      : 全てのコンテンツの読み込みと描画が完了した

このうち htmlRender は読み込むコンテンツが複数あるとそれぞれのコンテンツの描画完了に対して発生します。

今回は読み込み開始のタイミングで処理を行いたい訳ですから domInitialize を使うのがよさそうです。そこで complete イベントで呼び出している pushURL() メソッドから履歴操作に関連する分を取り分けます。

メソッドを分けたついでにそれぞれ onDomInitialize() と onComplete() という名前に変更します。そのまたついでに locationChange の処理も onLocationChange() というメソッドで行うことにします。

この変更で、呼び出されるメソッドの定義はそれぞれ以下のようになります。

private function onLocationChange(e:Event):void {
  html.alpha=0
}
private function onDomInitialize(e:Event):void {
  if (isBack > 0) {
    isBack--;
  } else {
    history.push(html.location); // 現在の location を配列に記録
  }
  inputTF.text = html.location;
}
private function onComplete(e:Event):void {
  fadeIn.target = html; // 効果のターゲットを設定したら開始
  fadeIn.play();
}

いままで back() の中でも入力テキストフィールドに読み込む対象の URL を設定していましたが、どうやら onComplete() のタイミングだけでよさそうです。ということで back() メソッドからはその行を削除することにします。

最後に HTML コンポーネントからこれらのメソッドが呼び出されるよう記述を変更します。

<mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)" 
  domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>

さて、これを実際に試してみましょう。描画完了前に ”戻る” を押しても2つ前には戻らなくなったかと思います。

UI コンポーネントの状態を変更する

問題その３：履歴が無くても ”戻る” ボタンが押せる状態になっている

プログラムを起動した瞬間から ”戻る” ボタンがアクティブになっています。これも気になりますよね。

まず、初期表示時に ”戻る” ボタンを無効にしたいと思います。それには enabled プロパティを false にします。後でボタンを有効にするためこのプロパティを切り替える必要があるはずなので、id も指定しておきます。backBtn という名前にしてみました。

<mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>

ボタンを有効にできるのは履歴が2つ以上あるときです。履歴を追加したタイミングで履歴の数をチェックしてボタンの有効/無効を切り替えるようなロジックを追加します。

private function onDomInitialize(e:Event):void {
  if (isBack > 0) {
    isBack--;
  } else {
    history.push(html.location); // 現在の location を配列に記録
    if (history.length > 1) { // 履歴が１より多い
      backBtn.enabled = true;
    }
  }
  inputTF.text = html.location;
}

逆に ”戻る” を押したときは履歴の数が１以下になったら無効に戻す処理が必要です。

private function back():void {
  if (history.length > 1) {
	...
    if (history.length <= 1) { // 履歴が１以下
      backBtn.enabled = false;
    }
  }
}

これでボタンの表示が戻る先の有り無しで切り替わるようになったと思います。

以下が今回の修正を反映したコードです。50 行余りになりました。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
      private var isBack:int = 0;
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          isBack++;
          if (history.length <= 1) { // 履歴が１以下
            backBtn.enabled = false;
          }
        }
      }
      private function loadURL():void {
        html.location = inputTF.text;
      }
      private function onLocationChange(e:Event):void {
        html.alpha=0
      }
      private function onDomInitialize(e:Event):void {
        if (isBack > 0) {
          isBack--;
        } else {
          history.push(html.location); // 現在の location を配列に記録
          if (history.length > 1) { // 履歴が１より多い
            backBtn.enabled = true;
          }
        }
        inputTF.text = html.location;
      }
      private function onComplete(e:Event):void {
        fadeIn.target = html; // 効果のターゲットを設定したら開始
        fadeIn.play();
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
    <mx:Button label="移動" click="loadURL()"/>
    <mx:Button id="backBtn" label="戻る" click="back()" enabled="false"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" locationChange="onLocationChange(event)"
    domInitialize="onDomInitialize(event)" complete="onComplete(event)"/>
</mx:ApolloApplication>

Posted by ackie at 05:22 PM | Comments (1)

March 22, 2007

Apollo ウインドウスタイルの変更

メインウインドウのスタイル変更

前回までの MyBrowser は下のように OS （この場合は Windows XP Classic）のウインドウ内に表示されていました。今回はこのウインドウのスタイルを変更してみます。

まず MyBrowser プロジェクト下にある MyBrowser-app.xml というファイルを変更します。

MyBrowser-app.xml ファイルを見つけたらダブルクリックするとエディタが開きます。その中から rootContent タグを探します。下のようなタグが見つかると思います。

<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>

ここでタグ内の systemChrome 属性の値を none に変更します。

<rootContent systemChrome="none" transparent="false" visible="true">[SWF reference is generated]</rootContent>

MyBrowser-app.xml ファイルを保存して MyBrowser を実行すると、下図のようにタイトルバー等のパーツが Apollo が提供するものに変わります。

次に、ウインドウの背景を透けた状態にして見ましょう。それには先ほどの rootContent タグ内の transparent 属性の値を true に変更します。

<rootContent systemChrome="none" transparent="true" visible="true">[SWF reference is generated]</rootContent>

これだけだとまだ背景は透けません。別途 css を使ってスタイルを設定する必要があります。

MXML ファイル内にも直接スタイルを設定できますが、今回は別途 CSS ファイルを作成してみます。Ctrl-n キーを押すと下のようなウィザードが表示されます。ここでは Flex フォルダー下の CSS File を選択します。

Next キーを押すと下の画面に変わります。MyBrowser が選択されていることを確認して、File name に MyBrowser と入力したら画面下の Finish を押します。

これで MyBrowser.css が作成されてエディタに開かれた状態になったと思います。ここではウインドウの背景を透かしたいので Application のスタイル属性を下のように記述します。ファイルの保存をお忘れなく。

/* MyBrowser.css file */
Application {
  background-color:"";
  background-image:"";
  background-alpha:"0.4";
}

あとは、MXML ファイルから今作成した CSS ファイルを参照するように指定すれば完了です。以下のタグを MyBrowser.mxml ファイル内にルートタグの子として記述します。

<mx:Style source="MyBrowser.css"/>

下の図は背景の黒が少し分かる程度で分かりにくいですが、実際のデスクトップ上で見るとよく分かるかと思います。のちほどお確かめくださいませ。

Effect の適用

Flex には Effect という表現効果を定義したクラスがあります。これを使って、コンテンツが表示される際にだんだんくっきりしてくるような効果を追加してみたいと思います。

今回使用するのは Fade という Effect のサブクラスです。Fade は対象オブジェクトの透明度を指定された効果前の値（alphaFrom）から効果後の値（alphaTo）に変化させます。効果にかける時間は duration で指定します。

タグで定義すると以下のようになります。（もちろん ActionScript で定義することも可能です）

<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

上で定義した効果を HTML が表示されるタイミングで適用したいので、HTML コンポーネントの complete イベントに設定されている pushURL() 関数で呼び出すようにします。

  private function pushURL(e:Event):void {
    // 効果のターゲットを設定したら開始
    fadeIn.target = html;
    fadeIn.play();
    // 現在の location を配列に記録
    history.push(html.location);
    // あわせて入力テキストフィールドの表示も変更
    inputTF.text = html.location;
  }

ついでに、新しい URL が指定された時点で HTML コンポーネントを透明にしてしまいたいと思います。URL が変更されると HTML コンポーネントの locationChange イベントが発生しますので、そのタイミングで HTML コンポーネントのアルファを 0 に設定します。ここでは下のコードのように HTML タグの locationChagnge 属性に直接書いてみました。

<mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>

最後に全体のコードです。ここまでで約40行になりました。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
      private function loadURL():void {
        html.location = inputTF.text;
      }   
      private function pushURL(e:Event):void {
        // 効果のターゲットを設定したら開始
        fadeIn.target = html;
        fadeIn.play();
        // 現在の location を配列に記録
        history.push(html.location);
        // あわせて入力テキストフィールドの表示も変更
        inputTF.text = html.location;
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
    <mx:Button label="移動" click="loadURL()"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>
</mx:ApolloApplication>

Posted by ackie at 04:10 PM | Comments (0)

March 20, 2007

Apollo でブラウザを作るの続き

”戻る” ボタンの追加

前回作った MyBrowser に一つ前のページに戻る機能を追加してみたいと思います。

まず、ボタンを一つ追加します。”移動” ボタンの次の行に Botton タグを ”戻る” というラベルで追加します。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="移動" click="html.location = inputTF.text;"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>

追加した Button タグ内に click="back()" という記述がありますが、これは ”戻る” ボタンがクリックされたら back() という関数を呼び出すという指定です。

次はこの back() 関数を記述します。MXML 内に ActionScript を記述するには Script タグを使います。下の例にあるように Script タグで囲まれた範囲にはスクリプトを書くことができます。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // ここにスクリプトを記述
      private function back():void {
      }
    ]]>
  </mx:Script>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="移動" click="html.location = inputTF.text;"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>

back() 関数内では一つ前の URL を HTML コンポーネントの location プロパティ、すなわち html.location に設定することになります。（HTML コンポーネントの詳しい使い方は別の機会に説明します）そうすると以前のURLを覚えている必要がありますので、履歴を保持するための配列も一つ定義します。スクリプトの箇所は、以下のようになります。

  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
    ]]>
  </mx:Script>

あとは URL が変更される毎に history 配列に URL を追加する仕組みを作れば出来上がりです。HTML コンポーネントは、指定された URL からリソースの読み込みが完了すると complete というイベントを発生しますので、これを使ってみることにします。

まず、HTML コンポーネントのタグを使ってイベントハンドラを設定します。

  <mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>

今回は pushURL() という関数を呼ぶように指定しました。pushURL() の中身はこんな感じです。

  private function pushURL(e:Event):void {
    // 現在の location を配列に記録
    history.push(html.location);
    // あわせて入力テキストフィールドの表示も変更
    inputTF.text = html.location;
  }

以上で ”戻る” ボタンらしきものが出来たと思います。以下は全体のコードです。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
      private function pushURL(e:Event):void {
        // 現在の location を配列に記録
        history.push(html.location);
        // あわせて入力テキストフィールドの表示も変更
        inputTF.text = html.location;
      }
    ]]>
  </mx:Script>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="移動" click="html.location = inputTF.text;"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
</mx:ApolloApplication>

Apollo アプリケーションの配布

作成したアプリケーションを配布するには air パッケージを作成します。Flex Builder の場合は、まずメニューバーから File -> Export と選択します。そうすると Flex Builder は以下のパネルを表示します。

Deployable AIR File を選択して Next ボタンを押します。今度は下図のように Apollo Deployment Export Wizard が表示されます。MyBrowser-app.xml ファイルを選んで Wizard 下部の Finish ボタンを押します。これで air ファイルが作成され、Navigator パネル内の MyBrowser.mxml の上あたりに表示されます。

今回作成した air ファイルに含まれるのは上で指定した xml ファイルと MyBrowser.swf の2つのみです。上記のパネルが表示された状態で、Finish の代わりに Next を押すと他に air ファイルに含めたいファイルを指定することもできます。

air ファイルをダブルクリックするとインストーラが起動されます。

Posted by ackie at 05:40 PM | Comments (4)

March 19, 2007

Adobe Apollo アルファ版公開

Apollo のアルファ版が Adobe Labs に公開されました。（Apollo@Labs） Apollo は従来の Web アプリケーションの境界を大きく広げる可能性を持った新しいクロス OS の実行環境（のコードネーム）です。以前に書いた簡単な説明（Apollo のご紹介）と、先日のデブサミで使用した資料（Developer Summit 2007 資料ダウンロード：14-B-2f）もよろしければご参照ください。

Apollo の特徴は Ajax (HTML+JavaScript), Flash, Flex (MXML+ActionScript) といった Web アプリケーション開発技術を使いながらデスクトップアプリケーションのように様々なローカルのリソースも利用できることです。まだアルファ版ですので Ajax のフルサポートや PDF 表示機能はこれからですがファイル I/O 等の主要な機能は実装されています。早速 Apollo 体験をしてみてください。

まずは Apollo のランタイムのインストールです。次のライセンス条文（Adobe Apollo Runtime License）をお読みいただいてから、必要なモジュールをダウンロードしてください。アルファ版でサポートされるのは以下のプラットフォームです。

Windows 版 (Windows XP SP2 / Vista Home premium edition: msi, 6 MB)
Macintosh 版 (Mac OSX 10.4 PPC / Intel: dmg, 8 MB)

ダウンロードしたファイルをダブルクリックすると Apollo のランタイムがインストールされます。

Apollo ランタイムをインストールすると、Apollo アプリケーションがインストールできるようになります。このようにアルファ版では Apollo ランタイムと Apollo アプリケーションを別々にインストールしますが、正式リリース時には Apollo ランタイムのインストールされていない環境でも Apollo アプリケーションとランタイムを一度にインストールする手段が提供される予定になっています。

いくつかのサンプルアプリケーションが Labs 内（Apollo:Applications:Samples@Labs）にも公開されていますのでインストールしてお試しいただければと思います。（mms.cfg ファイルを標準以外の構成で使用している場合、Apollo アプリケーション実行中はそのファイルを削除してください）

注：なお Apollo アプリケーションはデスクトップアプリのように種々のローカルリソースを利用できます。出自の不明な Apollo アプリケーションは決してインストールしないよう注意してください。Apollo のリリース時までには電子署名機能がサポートされる予定です。

Apollo アプリケーションの開発

Apollo アプリケーションを開発するには Apollo SDK を使用します。

コマンドラインツールで開発する場合はこの SDK のみダウンロードすれば OK です。が、これでは結構大変なのでオーサリングツールへの Apollo 開発用の拡張機能も提供されることになっています。現時点で拡張機能が提供されるオーサリングツールは Flex Builder 2.0.1 のみです。Labs から Flex Builder 用機能拡張のベータ版が提供されています。

SDK と Flex Builder の機能拡張（SDK を含む）どちらも Labs のダウンロードページ（Adobe Labs Downloads Apollo）から入手できます。

Flex Builder 2.0.1 はまだ英語版しか公開されていませんが、今週末には日本語版もリリースされる予定です。既に日本語版のライセンスをお持ちの方はそれまでお待ちいただくのもよいかもしれません。英語版をダウンロードされる方は US の Adobe サイトからお願いします。（Adobe Trial Downloads）

Flash および Dreamweaver にも将来的には Apollo 用アドオンが提供される計画です。当面はこの機会に Flex Bulder をお試しいただければと思います。

開発に必要なドキュメントも Labs 内上記のリンク（Adobe Labs Downloads Apollo）にあります。日本語訳は順次この blog で公開していく予定です。

なお、Apollo のアルファ版は英語環境のみでテストされています。日本語を使用する上で問題が見つかるかもしれませんが、その際にはコメントをお寄せください。製品チームにフィードバックさせていただきます。

ブラウザを作ってみよう

最後に Flex Builder を使った簡単な Apollo アプリケーションの作り方をご紹介します。

まず Flex Builder 2.0.1 と Apollo 開発用機能拡張をインストールします。とりあえず Flex Builder を試してみようという方は、インストール時に Flex Builder plug-in ではなく Flex Builder （デフォルトの方です）を選ぶことをおすすめします。plug-in はインストールに Eclipse 環境が必要です。

インストールが完了したら Flex Builder を起動します。画面左上の Navigator パネル内で右クリックして ”new” を選んでから "Apollo Project" を選択します。

ダイアログウインドウが表示されたらまず Basic を選びます。すると下の画面が表示されますのでプロジェクト名を入力します。ここでは MyBrowser としています。

プロジェクト名を入力したら画面下の Finish を押して完了です。Navigator パネル内に　MyBrowser というプロジェクトが作成されたと思います。

MyBrowser.mxml が編集できる状態になっているはずですので、エディタ内に以下のコードを入力します。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="移動" click="html.location = inputTF.text;"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>

Ctrl-s を押してファイルをセーブしたら、mxml ファイルを実行します。（Navigator パネル内の MyBrowser.mxml の文字の上で右クリックをして、表示されたメニューから "Run Application" を選択）

無事ブラウザが動きましたか？

Posted by ackie at 07:14 PM | Comments (0)

October 20, 2006

Apollo のご紹介

既にあちらこちらで耳にしていると思いますが、Adobe では Apollo というコードネームで新しい実行環境を開発しています。来週 US で開催される MAX で詳しい情報が公開される予定とのことなので、今のうちにこれまで公開されている情報をまとめておきたいと思います。

まず、Apollo の特徴は、Flash や AJAX といった Web の制作や開発で一般的に使用されている技術を使ったデスクトップアプリケーションの作成を可能にすることです。例えば、予め Apollo さえインストールされていれば、Flash で作ったコンテンツや AJAX アプリケーションをデスクトップにインストールして実行できるわけです。

また、通常デスクトップアプリケーションは固有の OS に依存した作りになりますが、Apollo アプリケーションは Apollo が OS 間の差を吸収するため複数の OS 上で動作させることができます。Flash Player はブラウザに対するプラグインですが Apollo は OS に対するプラグインという見かたもできるかもしれません。

さらに、デスクトップアプリケーションですから、ブラウザの制限のため Web アプリケーションでは使えなかった機能も利用可能になります。

さて、下の図は Apollo アプリケーションの構成を示したもので、Mike Chambers のプレゼンテーションから切り出したものです。オリジナルはこちらの URL にあります。（apollo presentation slides）

apollo application structure

図の中心にある２つのボックスは Apollo が２種類のアプリケーションを可能にすることを示しています。

Flash/Flex で開発したコンテンツ（HTML コンテンツをオーバーレイで表示）
HTML/JavaScript/AJAX で開発したコンテンツ（中に Flash コンテンツを埋込）

PDF はどちらのパターンでも組み合わせられることになっています。

上図の下部には Apollo APIs というボックスがありますが、Apollo では OS の機能にアクセスするための API が提供されます。そのため、Apollo 用に機能を拡張して Flash/Flex アプリケーションを作りたい場合は、従来 Flash Player や Flex のフレームワークが提供しているおなじみ API に加えて Apollo の API を覚えればよいわけです。例えば、ファイルシステムへ自由にアクセスを行い複数ウインドウをコントロールするアプリケーションとか、バックグラウンドで実行される常駐型のアプリケーションが可能になるでしょうし、また、他のアプリケーションとのドラッグ＆ドロップやクリップボードの使用といったデスクトップ機能の統合も考えられます。

Apollo では Flash だけでなく HTML/JavaScript ベースのコンポーネントも作ることができます。この際の OS 間での互換性は HTML 表示＆JavaScript 実行用に使われるエンジンに依存することになりますが、まだ特にどの技術を採用するといった類のコメントは出されていないようです。

現在 Apollo がサポートを予定しているプラットフォームは Windows と Mac OS X です。来年中には最初のバージョンのリリースができることをターゲットに開発が進められているようです。この記事の最初に紹介した Mike のプレゼンテーションでは年内に Adobe Labs にデベロッパー版を公開予定とありますが、最初は限定した範囲で始めるべきとのコメントもレポートされており（PC ADVISER の記事）、当面は待つことになるかもしれません。

Posted by ackie at 05:14 PM | Comments (0) | TrackBack

akihiro kamijo

February 25, 2009

Flash Player 10.0.22.87 と Adobe AIR 1.5.1 公開

December 19, 2008

AIR 1.5 の変更点

December 18, 2008

Linux 用 AIR 1.5 公開

November 25, 2008

Flash テキストレイアウトフレームワーク （Text Layout Framework） ベータ版の公開

Text Layout Framework の使い方サンプル

November 20, 2008

Adobe AIR 1.5 公開

SQLite データベースの暗号化

September 22, 2008

Adobe AIR Linux 版ベータ公開と AIR 1.5 の情報

AIR 1.5 (Cosmo)

June 18, 2008

SwitchBoard ベータ公開

BridgeTalk

SwitchBoard のインストール

SwitchBoard アプリケーションの開発

June 17, 2008

Application Update Framework for Adobe AIR ベータ公開

Adobe AIR 1.1 公開です

開発環境の設定

June 04, 2008

Adobe AIR コンテスト締め切りと授賞式

April 09, 2008

Adobe Media Player 1.0 公開

Flash Player 9.0.124.0 と Adobe AIR 1.0.1 公開

March 31, 2008

Adobe AIR for Linux アルファ版リリース

February 26, 2008

Adobe AIR 1.0 関連のアップデート（Spry とインストールバッジ）

February 25, 2008

Adobe AIR 1.0 リリース

December 18, 2007

Adobe AIR ベータ 3 追加情報

実行環境のインストール

シームレスインストール

アプリケーション記述ファイルの変更

DB 関連の変更

既知の制限・問題

追加削除されたメソッド・属性

New Methods/Properties/Constants

Removed Methods/Properties/Constants

API changes

December 17, 2007

Adobe AIR ベータ 3 対応の Flash CS3 Professional アップデート

December 13, 2007

Adobe AIR ベータ 3 公開

November 13, 2007

Adobe MAX AIR API の使い方セッションの資料

November 12, 2007

Adobe MAX AIR セキュリティセッションの資料

October 16, 2007

Adobe AIR ベータ 2 セキュリティ関連の変更点

October 09, 2007

Adobe AIR のデジタル署名機能について

自己署名の電子証明書の作成

October 01, 2007

Adobe AIR ベータ 2 開始

アプリケーション記述ファイルの変更

API の変更

September 25, 2007

Adobe AIR 完全解説

August 21, 2007

Adobe AIR update for Flash CS3 Professional Beta 1 公開

July 03, 2007

grant skinner の Flash CS3 用 Adobe AIR extension

June 25, 2007

Adobe AIR Extension for Dreamweaver と Dreamweaver CS3 日本語版

June 11, 2007

Adobe Apollo 改め Adobe Integrated Runtime (AIR) パブリックベータ開始

May 14, 2007

Adobe Apollo mini camp@Tokyo

April 23, 2007

Shell クラスと Apollo アプリケーション

Shell クラスのプロパティとメソッド

Shell クラスのイベント

Flash テキストレイアウトフレームワーク（Text Layout Framework）ベータ版の公開

Apollo でブラウザを作るの続き