DigiTechLog Dot Com » AIR http://digitechlog.com Adobe AIR、Flex、Flash、Java Tue, 08 Nov 2011 12:46:29 +0000 http://wordpress.org/?v=2.8 ja hourly 1 Alcon: オープンソースのActionScript向けの軽量デバッギングツール http://digitechlog.com/2009/10/15/alcon-a-lightweight-debugging-tool-for-actionscript-developers.html http://digitechlog.com/2009/10/15/alcon-a-lightweight-debugging-tool-for-actionscript-developers.html#comments Thu, 15 Oct 2009 14:27:19 +0000 admin http://digitechlog.com/2009/10/15/alcon-a-lightweight-debugging-tool-for-actionscript-developers.html この前の「使いやすいオープンソースのActionScriptデバッグツールリスト」にも紹介していましたが、Alconとは、Sascha Balkau氏が開発され、パフォーマンス情報が見れたり、オブジェクトの詳細な情報をダンプ出来てオープンソースのActionScript 2及びActionScript 3向けの軽量デバッグツールです。

Alconの最初のバージョンはFlash Player 7の時代から書かれたものですので、そのバージョンはActionScriptのtraceによってログを取るだけのツールです。

AlconはAdobe AIRでも動作できます。FlexコンパイラのFlash IDEやMTASC(※MTASC（Motion-Twin ActionScript2 Compiler）: フリーのコマンドラインActionScript(Flash)コンパイラ)中にも使えます。

Alcon

以下の様の特徴があります。

  • Rewritten for Adobe AIR.
  • Trace API to output any kind of data in the same fashion ActionScript’s own trace method does but with severity levels, filtering and recursive object tracing.
  • A new App Monitor that monitors Framerate, Frame Render Time and Memory Consumption.
  • A completely new Object Inspector to view the properties of Objects, Arrays and Classes.
  • Included Help-Panel for quick access to Help and API documentation.
  • Supports ActionScript 2 and 3.
  • Two File Loggers which can be activated optionally to monitor log files.
  • Options Dialog to comfortably configure settings like background and text colors, output font and many other preferences.
  • Auto-Update.

実際使ってみるとアプリケーションの監視機能は「えー！」（強いな）という驚嘆を出るかもしれません。これはFlashアプリケーションに直接FPS計測機能を埋め込む必要がなくなりますから。

簡単でといえば、Alconは使いやすいツールですが、ドキュメントやサンプルなど資料はそんなに多くないです。興味がある方たちは自分の力を引き出しましょう。

【関連リンク】

http://blog.hexagonstar.com/alcon/　公式サイト

http://www.infoq.com/news/2008/09/alcon3-released　InfoQから開発者とのインタビュー

Related Posts

]]> http://digitechlog.com/2009/10/15/alcon-a-lightweight-debugging-tool-for-actionscript-developers.html/feed 1 トップ７個アドビAIRビデオアプリケーション http://digitechlog.com/2009/07/25/top-7-adobe-air-apps-for-videos-you-should-know.html http://digitechlog.com/2009/07/25/top-7-adobe-air-apps-for-videos-you-should-know.html#comments Sat, 25 Jul 2009 14:42:10 +0000 admin http://digitechlog.com/2009/07/25/top-7-adobe-air-apps-for-videos-you-should-know.html その前の「Adobe AIRマルチメディアアプリケーションツールリスト（写真とビデオなど）」にアドビAIRで開発する写真とビデオ関係アプリケーションを紹介しましたが、AIRはFlashフォーマットなどビデオもプレーでき、使いやすいので、eBayやAOLなどいろいろ大手もその技術を利用しています。アドビAIRベースアプリケーションもいろいろ出てきました。今回はビデオ関係のみトップのAIRアプリケーションをピックアップして次にリストします。ぜひ使ってみてください。

※Adobe AIR（Adobe Integrated Runtime）とは米アドビシステムズが開発中のアプリケーション実行環境である。2007年6月にWindowsおよびMac OS X向けのベータ版が公開された。以前はApolloという開発コード名で呼ばれていた。正式版は2007年後半にリリースする見通し。Adobe AIRを使えば，Webアクセスに代表されるインターネットの使い方と密に連携しながらも，Webブラウザの枠にとらわれないアプリケーションを開発できるようになる。Adobe AIRを導入すれば、既存の技術や人、プロセスはそのままに、ブランディング機能を備えた画期的なアプリケーションで新次元のカスタマーエンゲージメントを実現出来る。

Adobe-AIR

Adobe Media Player

それは前回も紹介しました。Adobe® Media Playerには、オンラインでもオフラインでも、見たい番組を好きなときに視聴できる多彩な機能が搭載されています。インターネットTVコンテンツのお気に入りリストを作ってダウンロードしたり、新しいエピソードが追加されるごとに自動的にダウンロードすることはもちろん、好きなときに視聴するための個人ビデオライブラリ作成もできます。

Adobe-Media-Player 

 

DeskTube

DeskTubeについて日本語資料はぜんぜん見つからなかったです。 DeskTubeとはYouTubeにてインタネットブラウザみたいデスクトップクライアントです。DeskTubeを使ってYouTubeメディアのビュー、検索、コメント、アップロード及びダウンロードできます。IE、FireFoxやsafariなどを使わずYouTubeもご覧できます。簡単でマウスをダブルクリックして出来ます。

desktube 

 

FLVPlay HD

FLVPlay HDはローカル／リモートのFLVとかMP４とかのプレーすることを可能です。 ローカルファイルもYouTubeみたいですよ。

FLVPlay-HD

 

RichFLV

FLV中の音楽はMP3へ変換したい場合があるのですか。RichFLVを利用してFLVデータの読み取り、カット、FLV→MP3とFLV→SWFの変換は可能です。

RichFLV

 

SideShow

SideShowは、flv, mp4, m4v, m4a, 3gp, mov, f4v, f4p, f4a, f4b, mp3などビデオフォーマットがサポートされています。　UIはSasami2Kベースで作られました。※Sasami2Kは２００１年から開発は止められました。

SideShow

 

Xe-MoviePlayer

Xe-MoviePlayerとは、Flickrクライアントにもなる動画プレイヤー、Web上に公開されている動画や様々な形式の動画ファイルに対応したマルチメディアプレイヤーです(F4V/ MP4/ M4V/ M4A/ Mp4v/ 3gp/ 3g2/ flvなどに対応)。スナップショット機能を備えており、お気に入りの場面を画像ファイルとして保存することができます。また、画像共有サイト「Flickr」にアップされた画像を見ることもできるので、動画プレイヤーと同時にFlickrクライアントとしても使えるところが魅力です。

XeMoviePlayer-V3

 

YouTube Widget

YouTube Widgetとは、YouTubeのビデオを検索、再生するWidgetです。

YouTube-Widget

英語版：
http://ntt.cc/2009/07/04/top-7-adobe-air-apps-for-videos-you-should-know.html

Related Posts

]]> http://digitechlog.com/2009/07/25/top-7-adobe-air-apps-for-videos-you-should-know.html/feed 1 Masapi: Flex／Flash／AIRで大量ファイルをロード用のオープンソースのフレームワーク http://digitechlog.com/2009/05/16/masapi-flash-flex-air-as3-framework-for-the-massive-loading-massload.html http://digitechlog.com/2009/05/16/masapi-flash-flex-air-as3-framework-for-the-massive-loading-massload.html#comments Sat, 16 May 2009 08:17:22 +0000 admin http://digitechlog.com/2009/05/16/masapi-flash-flex-air-as3-framework-for-the-massive-loading-massload.html 「Masapi」とは、Flex／Flash／AIRで大量ファイルをロードする用のオープンソースのAS３フレームワークです。URLLoaderやLoaderというクラスと同じインタフェースを持っています。

※URLLoader クラスは、指定した URL からテキスト、バイナリデータ、または URL エンコード形式の変数をダウンロードする際に使用します。動的なデータ駆動アプリケーションで使用するテキストファイル、XML、その他の情報をダウンロードする場合に便利です。

URLLoader オブジェクトは、データを ActionScript で使用できるようにする前に、それらのすべてのデータを URL からダウンロードします。URLLoader オブジェクトは、ダウンロードの進捗に関する通知を送信します。これらは、送出済みのイベント、さらには bytesLoaded および bytesTotal プロパティで監視できます。

「Masapi」は以下の特徴を持っています。

・Same interface for all load managers (URLLoader, Loader, …)
・Easy massive loading classes
・Advanced massive loading (priority, dependencies)
・Advanced massive loading management (loading policy, loading information, …)

[使用方法]

１）、次のURLから最新版をダウンロードします。

http://code.google.com/p/masapi/downloads/list

２）、プロジェクトに追加する

プロジェクトに追加するため、クラスパスに「ch」というフォルダが必要です。「chフォルダをFLAと同じフォルダに置く」と「srcフォルダをクラスパスに追加する(File > Publish settings > Flash > ActionScript 3 settings)」ってのいずれかもできます。

クラスパスに追加した上で、以下の様のソースで使えるかどうか確認します。

  1. import ch.capi.net.*;
  2. import ch.capi.events.*;
  3.  
  4. var ml:MassLoader = new MassLoader();
  5. ml.addEventListener(MassLoadEvent.FILE_OPEN, onFileOpen);
  6.  
  7. function onFileOpen(evt:MassLoadEvent):void { trace(”open”); }

正常で動作するとMasapiのインストールは完了します。

以下は「CompositeMassLoader」というクラスを利用してリスト中の何個ファイルをロードする例です。

  1. import ch.capi.net.*;
  2.  
  3. //creates the MassLoader
  4. var cml:CompositeMassLoader = new CompositeMassLoader();
  5.  
  6. //creates & add the files to the MassLoader
  7. cml.addFile(”myFile.txt”); // will use a URLLoader object with the URLLoaderDataFormat.VARIABLES property
  8. cml.addFile(”myFile.xml”); // will use a URLLoader object with the URLLoaderDataFormat.TEXT property
  9. cml.addFile(”myFile.css”); // will use a URLLoader object with the URLLoaderDataFormat.TEXT property
  10. cml.addFile(”myFile.png”); // will use a URLLoader object with the URLLoaderDataFormat.BINARY property
  11. cml.addFile(”myFile.png”, LoadableFileType.SWF); // will use a Loader object
  12. cml.addFile(”myFile.jpg”); // will use a URLLoader object with the URLLoaderDataFormat.BINARY property
  13. cml.addFile(”myFile.swf”); // will use a Loader object
  14. cml.addFile(”myFile.swf”, LoadableFileType.BINARY); // will use a URLLoader object with the URLLoaderDataFormat.BINARY property
  15.  
  16. //starts the loading
  17. cml.start();
  18.  
  19. //useful information for debugging
  20. //trace(cml.massLoader);

次は「Masapi」のローディングイベントを監視する例：

  1. import ch.capi.net.*;
  2. import ch.capi.events.*;
  3.  
  4. //creates the MassLoader
  5. var cml:CompositeMassLoader = new CompositeMassLoader();
  6.  
  7. cml.massLoader.addEventListener(ProgressEvent.PROGRESS, onOverallProgress); //overall progression
  8. cml.massLoader.addEventListener(MassLoadEvent.FILE_OPEN, onOpenHandler); //a file download starts
  9. cml.massLoader.addEventListener(Event.COMPLETE, completeHandler); //massload complete
  10.  
  11. //… (creates the files and so on)
  12.  
  13. //listen to the overall progression
  14. function onOverallProgress(evt:ProgressEvent):void
  15. {
  16.     var percent:Number = Math.round(evt.bytesLoaded / evt.bytesTotal * 100);
  17.     trace(”Loaded at “+percent+”%”);
  18. }
  19.  
  20. //listen when a file begins to be loaded
  21. function onOpenHandler(evt:MassLoadEvent):void
  22. {
  23.         var file:ILoadableFile = evt.file as ILoadableFile;
  24.         file.addEventListener(ProgressEvent.PROGRESS, onFileProgress);
  25. }
  26.  
  27. //listen to a specific file
  28. function onFileProgress(evt:ProgressEvent):void
  29. {
  30.         trace(”file progress”);
  31. }
  32.  
  33. //listen to the complete event
  34. function completeHandler(evt:Event):void
  35. {
  36.     trace(”MassLoad complete”);
  37. }
  38.  
  39. //starts the loading
  40. cml.start();

大量のファイルがあるので、ローディングのステータスの取得が必要となります。以下はステータスを取得する例：

  1. import ch.capi.net.*;
  2. import ch.capi.events.*;
  3.  
  4. //creates the MassLoader
  5. var cml:CompositeMassLoader = new CompositeMassLoader();
  6. cml.massLoader.addEventListener(ProgressEvent.PROGRESS, onProgress);
  7. //…
  8.  
  9. function onProgress(evt:ProgressEvent):void
  10. {
  11.         var info:ILoadInfo = evt.target.loadInfo;
  12.         //var info:ILoadInfo = cml.loadInfo;
  13.         trace(info.currentSpeed);
  14.         trace(info.averageSpeed);
  15.         trace(info.elapsedTime);
  16.         trace(info.remainingTime);
  17.         trace(info.percentLoaded);
  18.         trace(info.ratioLoaded);
  19.         trace(info.bytesLoaded+” / “+info.bytesTotal);
  20. }

[関連リンク]

・http://code.google.com/p/masapi/ 公式サイト

Related Posts

]]> http://digitechlog.com/2009/05/16/masapi-flash-flex-air-as3-framework-for-the-massive-loading-massload.html/feed 0 Cairngorm: Flex/AIR RIA構築用フレームワーク http://digitechlog.com/2009/05/01/cairngorm-is-the-lightweight-micro-architecture-for-rich-internet-applications-built-in-flex-air.html http://digitechlog.com/2009/05/01/cairngorm-is-the-lightweight-micro-architecture-for-rich-internet-applications-built-in-flex-air.html#comments Fri, 01 May 2009 14:17:13 +0000 admin http://digitechlog.com/2009/05/01/cairngorm-is-the-lightweight-micro-architecture-for-rich-internet-applications-built-in-flex-air.html Cairngorm Frameworkは、Flash開発元の adobe が提供している、もっとも長い歴史を持つ、もっとも成熟している、冒頭でも書いたとおりFlexアプリケーションにおけるクライアントサイド、Flex/AIR RIA構築用フレームワークです。　オープンソースであるため、誰でも無償で使用することができます。また、Apache License 2.0で配布されているため商用利用も可能です。

※Cairngorm Frameworkの名称の由来：Cairngorm とは、日本語で「煙水晶」という意味です。これはスコットランドにあるCairngorm山が煙水晶の産出地であったことに由来しています。 iteration::two社もスコットランドにあるので、それにちなんでフレームワークの名称にCairngormを採用したのではないかと筆者は推測しています。

Flexはプレゼンテーション層のみを対象とする製品のため、Flexアプリケーションを開発する際には、ビジネス層にSpringやSeasarなどのフレームワークを適用することも多いかと思います。また、Flexと同じプレゼンテーション層のフレームワークですが、既存のアプリケーションを生かすためにStrutsをFlexと併用させるケースもあると思います。

Cairngorm Frameworkは、クライアントサイドのフレームワークのため、動作環境はTomcatなどのアプリケーションサーバ上ではなく、Webブラウザ上の Flash Playerになります。また、StrutsなどのWebアプリケーションフレームワークと違って画面制御やバリデーション、例外ハンドリングといったアプリケーション開発を行うための基盤の機能を提供するフレームワークではありません。

Cairngormフレームワークに関連して経験豊かなJava開発者であるOlesen氏は以下のように述べている。

Cairngormにはmediatorやsupervising presenter、passive viewといった概念やそれに類するものは一切ありません。実際のところ、ビューコンポーネントの状態を直接モデルにデータバインディングすることを推奨していることでCairngormは多くの人に非難されています。さらに悪いことにモデルはグローバルな状態にあり、シングルトン（なクラス）を通して提供されます。

Cairngorm Frameworkの特徴

・オブジェクト指向

　Cairngorm Frameworkは、すべてAction Scriptのクラスまたはインターフェイスとして作成されています。スクリプトと聞くと手続き型のプログラミングをイメージしてしまいがちですが、最近ではオブジェクト指向プログラミング（OOP）の機能を搭載したスクリプト言語も増えています。Flex 1.5で採用しているAction Scriptのバージョンは2.0ですが、Action Scriptはバージョン2.0からこのOOPに対応しました。そのため、バージョン1.0までは手続き型でしか書くことができなかったAction Scriptも、JavaやC#と同じようにクラスやインターフェイスを定義するといったことが可能になりました（もちろん、従来どおり手続き型で書くこともできます）。ちなみに、Ruby On Railsの登場でいま非常に人気が高まっているRubyやWebサイトの構築によく使われているPHPもスクリプト言語ですが、OOPに対応しています。

・デザインパターンのコラボレーション

　Cairngorm Frameworkは、前述したとおり完全にオブジェクト指向に基づいています。そのため、Javaなどでおなじみのデザインパターン（主にJ2EEパターン）を多数利用しています。Cairngorm Frameworkのクラスを眺めてみると“Command”、“Service Locator”、“FrontController”、“BusinessDelegate”などパターン名がそのままクラス名やインターフェイス名になっていることが分かります。
　J2EEパターンでは、より複雑で規模の大きな問題に対処するために複数のパターンを組み合わせて使用することをMicro Architecture（マイクロアーキテクチャ）と名付けていますが、Cairngorm Frameworkはまさにこのマイクロアーキテクチャに基づいています。

・イベント・リスナモデル

　イベント・リスナモデルとは、イベントを発生させる可能性があるオブジェクトをリスナに登録しておきマウスクリックなどのイベントが発生した場合、イベントの発生をリスナに通知し処理をリスナに委譲させる方式です。リスナ（Listener）はその名のとおり、イベントの発生を聞く（捕捉する）オブジェクトです。

　例えばVisual Basicでは、ボタンの中にonClickなどのイベントをハンドリングするメソッドがあり、そのメソッドの中にボタンがクリックされたときの処理を書きました。しかし、これではビューであるボタンの中にボタンを押されたときのロジックが入り込んでしまい、ビューとロジックが密接に関係してしまいます。

　イベント・リスナモデルでは、イベントが発生すると登録先のリスナがそのイベントを処理するので、イベントを発生させるビューとイベント処理のロジックを切り離すことができオブジェクトの独立性が高まります。Flex自体にもイベント・リスナの仕組みはサポートされていますが、Cairngorm Frameworkではよりそれを使いやすくしてフレームワークとして提供しています。

・軽量で導入がカンタン

　Cairngorm Frameworkは前述したとおり、特定のアプリケーションサービスを提供するためのライブラリ群などを持たず、処理の枠組みだけを提供する “Architectural Framework”のため非常に軽量なフレームワークになっています。APIリファレンスですべてのクラスを見てもたった12個しかありません。 Cairngorm Frameworkを使うために必要なものは、フレームワークを構成するクラスをアーカイブしたファイルとCairngorm Frameworkの設定ファイルの2つだけです。導入は、これらをアプリケーションの所定の位置に置き、Flexの設定ファイルを少し変更するだけですのでとてもカンタンです。

・オブジェクト指向の恩恵を享受できる

Cairngorm Frameworkは、完全にオブジェクト指向に基づいていますのでJavaやC#などと同様に継承、カプセル化、ポリモーフィズムなどオブジェクト指向のテクニックを使うことができます。

　例えば、各クラスに共通して実装されている処理を親クラスとして切り出し、継承を使ってサブクラスでは親クラスと差異部分のみをコーディングすれば親クラスの再利用性が高まります。また、ポリモーフィズムを使ってインターフェイスと実装を分けるプログラミングをすれば、実装クラスを後で容易に切り替えることができ保守性が上がります。

・アーキテクチャが統一される

　Flexに限らずリッチインターネットアプリケーション（RIA）においては、HTMLベースのWebアプリケーションと違ってクライアントサイドにも画面回りのロジックやクライアントサイドだけで完結できるビジネスロジックを実装します。従来のFlexアプリケーションのクライアントサイドの開発では、Flexの仕組みだけを使って開発するか、または独自のフレームワークを作るしかありませんでした。独自のフレームワークといってもJavaではなくActionScriptで作らなければならないため、“処理の枠組み”を作り出すことはかなり難しいのではないかと思います。

　小規模なアプリケーションを少人数で開発する場合なら、Flexの仕組みだけで開発してもさほど問題はないと思います。しかし、大規模なアプリケーションを大人数で開発するときには、何かしらの枠組みがないと個々の開発者が自由にコーディングしてそれぞれのアーキテクチャを作り出すことができてしまいます。その結果、“作った人にしか分からないトリッキーなコード”が量産されてしまいます。これでは、プログラムが作った人に依存してしまい、保守性が下がってしまいます。もし、そんなプログラムの保守を自分がすることになったら……。もうゾッとしてしまいますよね？

　Cairngorm Frameworkは、“Architectural Framework”であり処理の枠組みを定めているため、個々の開発者はフレームワークで決められたアーキテクチャに沿って開発をすることになります。アーキテクチャに沿った開発とは、例えば、フレームワークのクラスを継承してあるメソッドをオーバーライドしたり、フレームワークのインターフェイスを実装してあるメソッドを実装するということです。従って、プログラマーが自由にコーディングすることを制限し、プログラミングに関して個人の裁量の入り込む余地が少なくなっているため、誰が作ってもアーキテクチャが統一され、品質の均一化が望めます。また、プログラムから属人性が排除されるため、保守性の向上にもつながります。

・JavaエンジニアのActionScript学習コストを低減できる

　Flexアプリケーション開発では、クライアントサイドをMXMLとActionScriptを用いて作り込む必要があります。クライアントサイドのロジックについては、ActionScriptを使って書きますので、ActionScriptをいかに使いこなすかがFlexアプリケーション開発の1つのポイントにもなります。ActionScriptは、JavaScriptの国際標準規格であるECMA（エクマ）に準拠しているため、 JavaScriptと文法が非常に似ておりJavaScriptのスキルを持っていればActionScriptも理解しやすいということがあります。

　しかし、FlexがJ2EEアプリケーションサーバ上で動作するということもあって、Flexアプリケーション開発を行う開発者の多くは、 Javaエンジニアであり、それほどJavaScriptに明るい人が多いわけではないのが現状です。そのようなJavaエンジニアにとって ActionScriptをマスターするのは、かなり時間がかかり学習コストは高いといえます。

　Cairngorm Frameworkを使えば、Javaエンジニアにとってなじみの深いオブジェクト指向やデザインパターン（J2EEパターン）などに基づいて開発を行うことができますので、すでに持っている開発ノウハウを生かすことができActionScriptの学習コストを低減させることができます。

Cairngormサンプル解説(Service層)

Service層では「Serviceパッケージ 」と「Delegateクラス」で構成されています。

１） Serviceパッケージに配置されるクラスは ServiceLocatorタグを持ったMXMLである ApplicationService.mxmlのみです。
これはCairngormがHTTPServiceやRemoteObjectといった 「サーバサイドとの連携の入り口を１つにしてしまおう」 との意図があります。 サーバサイドとの連携はＨＴＴＰＳｅｒｖｉｃｅやRemoteObjectを利用しますが、 それらを管理しているのが、このApplicationService.mxmlファイルです。 中身を見て見ましょう。

  1. <?xml version=”1.0″ encoding=”Shift_JIS”?>
  2. <ServiceLocator xmlns=”com.adobe.cairngorm.business.*” 　　　　　　　　　　　　　　････････････・・・・・・・・・・・・・・・・①
  3.  
  4. xmlns:mx="http://www.adobe.com/2006/mxml"
  5. >
  6. <mx:Script>
  7.     <![CDATA[
  8.         /** サービスを取得するためのインスタンス名を定義します。
  9.          * ここで定義する名称と下記<mx:HTTPService>タグのIDが一致しないと、
  10.          * HTTPServiceのインスタンスは取得できませんので気をつけてください。
  11.          **/
  12.         public static const APPLICATION_HTTP_SERVICE_NAME:String = "appHttpService";　　　　････②
  13.     ]]>
  14. </mx:Script>
  15. <mx:HTTPService id="appHttpService" 　　　　　　　　　　　　　　　　　　　　　　･･･････････････････････････････③
  16.     result="event.token.resultHandler(event)"
  17.     fault="event.token.faultHandler(event)"
  18.     method="POST"
  19.     showBusyCursor="true"
  20. />
  21.  
  22. </ServiceLocator>

①ServiceLocatorタグ
　　③にて記述されるHTTPServiceをCairngormが管理するために用意されたタグが
　　このServiceLocatorです。
　　このタグの中で宣言されたHTTPServiceやRemoteObjectタグは
　　ServiceLocatorクラスより取り出すことができます。
　　例）
　　var httpSrv:HTTPService =　ServiceLocator.getInstance().getHTTPService(”appHttpService”);

②public static const APPLICATION_HTTP_SERVICE_NAME

　　ここで宣言されているpublic static constの文字列は
　　③で記述されているHTTPServiceタグ（あるいはRemoteObjectタグ）のIDの文字列と
　　一緒である場合が必要です。
　　上記①で記したようにServiceLocatorからHTTPServiceあるいはRemoteObjectを取り出す際に、
　　ServiceLocatorタグの中で宣言したHTTPServiceタグ（あるいはRemoteObjectタグ）のIDを用いて、
　　ServiceLocatorタグから取り出すからです。
　　このIDは外部からのアクセス（例えばDelegateクラスからのアクセス）ではIDを
　　取得することが難しいです。
　　しかし、public static constとして宣言しておけば、
　　わざわざタグのIDを調べなくても、この宣言を利用するだけで取り出せるようになるからです。
　　ですので、必ず宣言しましょう。

③HTTPServiceタグ
　　
HTTPServiceを行うタグです。
　　resultにはevent.token.resultHandler(event)
　　faultにはevent.token.faultHandler(event)
　　と指定されていますが、これはDelegateの中で使う際に指定するもので、
　　IResponderのresultメソッドとfaultメソッドがそれぞれ関連付けされるようになっています。
　　詳しくはDelegateの解説をご覧ください。

２） DelegateクラスはHTTPServiceやRemoteObｊｅｃｔ等、サーバサイドと連携を行うためのクラスです。
Ｃａｉｒｎｇｏｒｍではこの
「Ｄｅｌｅｇａｔe以外ではサーバサイドとの連携ロジックは組み込まない」
というルールになっています。

では、サンプルのDelegateクラスを見てみましょう。

  1. package sample.service.samplecairngorm
  2. {
  3.  
  4. import mx.rpc.IResponder;
  5. import mx.rpc.http.HTTPService;
  6. import com.adobe.cairngorm.business.ServiceLocator;　　　　　　　　　　　　　　　　　　　　　　　･･････・・・・・・・・・・・・・・・①
  7.  
  8. import sample.service.ApplicationService;
  9.  
  10. /**
  11. * サーバと連携するためのクラスです。
  12. */
  13. public class SamplecairngormHttpDelegate
  14. {
  15.     private var _responder:IResponder;
  16.     private var _httpService:HTTPService;
  17.  
  18.     /**
  19.      * コンストラクタです。
  20.      * @param callingCommand サービス実行結果を返却する先を示すオブジェクトIResponderです。
  21.      */
  22.     public function SamplecairngormHttpDelegate(callingCommand:IResponder)　　　･･･････････････・・・・・・・・・・・・・・・②
  23.     {
  24.         // ApplicationServicecからHTTPServiceのインスタンスを取得します。
  25.         _httpService = ServiceLocator.getInstance().getHTTPService(ApplicationService.APPLICATION_HTTP_SERVICE_NAME);
  26.         // 返却オブジェクトを保持します。
  27.         _responder = callingCommand;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　････････････・・・・・・・・・・・・・・・・・③
  28.     }
  29.     /**
  30.      * Commandクラスから呼び出されるサーバ連携用メソッドです。
  31.      * @param o サーバーに渡したい値などを入れたObjectクラスです。
  32.      */
  33.     public function clickBtnHelloWorld(o:Object):void　　　　　　　　　　　　　　　　　　　　　･････････・・・・・・・・・・・・・・・・・④
  34.     {
  35.         // 返却オブジェクトのTOKENを指定するため、一時的にObject型に変換しています。
  36.         var service:Object            = _httpService;
  37.         // URLを指定します。
  38.         _httpService.url = "./hello.xml";
  39.         // アクセスした結果をserviceに返却し、そのserviceのresultHandlerとfaultHandlerのtokenに設定します。
  40.         service                        = _httpService.send();
  41.         service.resultHandler        = _responder.result;
  42.         service.faultHandler        = _responder.fault;　　　　　　　　　　　　　　　　　　　････････････・・・・・・・・・・・・・・・・⑤
  43.     }
  44.  
  45. }
  46.  
  47. }

①インポート文
　　Delegateクラスでは、サーバサイドとの連携結果を返すためのオブジェクト設定のためにＩＲｅｓｐｏｎｄｅｒを、
　　サーバサイドとの連携をするためのクラス保持のためにHTTPService（あるいはRemoteObject）クラスを
　　そしてCairngormの中で管理されたHTTPServiceあるいはRemoteObjectを取得するためにServiceLocatorクラスを
　　それぞれインポートしています。

②コンストラクタ
　　コンストラクタの引数としてIResponderを受け取っていますが、
　　これはHTTPServiceやRemoteObjectのメソッドを実行した結果を返すオブジェクトを
　　設定するためです。
　　このIResponderに指定されたresultメソッドあるいはｆａｕｌｔメソッドに
　　サーバサイドの実行結果が返却されるようになっています。

③サーバサイド連携オブジェクトの取り出しと返却オブジェクトの設定
　　ＳｅｒｖｉｃｅＬｏｃａｔｏｒからHTTPServiceあるいはRemoteObjectを取り出しています。
　　また引数として受け取ったcallingCommandを
　　インスタンス変数に設定しています。
　　このことにより、サーバサイドのサービス実行結果がcallingCommandのresultメソッドあるいはfaultメソッドに
　　返却されるようになります。

④サーバサイド連携メソッド
　　実際にサーバサイドと連携するためのメソッドです。
　　Commandのexecuteメソッドの中でこのメソッドが呼び出されることでしょう。
　　引数として渡されているObjectクラスは
　　HTTPServiceやRemoteObjectに渡すリクエストのパラメータを持ったObjectです。
　　例として
　　_httpService.request = o;
　　と使えると思います。

⑤返却先の再設定
　　実際に取り出されたHTTPServiceあるいはRemoteObjectの結果ハンドラを設定しているのがこの部分です。
　　service.resultHandler = _responder.result;
　　service.faultHandler = _responder.fault;
　　とサービスオブジェクトのそれぞれのハンドラに設定していることがわかります。

※サーバサイド連携メソッドの中でプログラムで意識しなければいけないところは
　　service.url
　　か
　　service.request
　　のどちらかになります（HTTPServiceの場合）
　　それ以外のコーディングはお約束として必ず記述をしてください。
　　そうでないとうまくIResponderに返却されません。

以上がService層の解説です。
Service層もDelegateが少々、特殊なことをしていますが、
ここはひとつお約束の構文ということで。

Cairngormサンプル解説(View層)

View層は「viewパッケージ」と「helperパッケージ 」のように構成されています。

今回のサンプルでは１）viewパッケージには何もないと思います。 SampleCairngorm.mxmlをそのままviewとして利用しているためです。
一般的に、ViewStackやStateで別コンポーネント化したものが
このviewパッケージに入れる、とお考えください。

ここでは２）helperパッケージについて解説します。

２）
helperパッケージは
「View層の画面表示用MXMLのScript部分をそのまま集めたクラスをViewHelperと呼ぶようにした」
といえるのではないでしょうか。
Cairngormの根本的な考え方として
「ScriptタグはMXMLの中にはできるだけ書かないようにしよう」
というのがありましたよね。
MXMLの中でScriptで書いていたものがこのhelperパッケージで設定されるViewHelperクラスになります。
このViewHelperクラスはViewHelperというクラスを継承したクラスはCairngormの中で一元管理されます。
一元管理されるということなので、
「ViewHelperにはユニークなIDを割り当てなければならない」
ことに気をつけてください。
サンプルのSampleCairngorm.mxmlの中では
<viewhelper:SamplecairngormViewHelper id=”sampleViewHelper”/>
と宣言されています。
ここで指定したIDがCairngormの中で（つまりは１つのFlexプロジェクトの中で）ユニークになっていなければなりません。
実際に見てみましょう。
例えばサンプルプロジェクトに
「Test1.mxml」
というMXMLコンポーネントを作成し以下のように記述します。

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
  3.  
  4. xmlns:viewhelper="sample.view.samplecairngorm.helper.*"
  5. width="400" height="300">
  6. <viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>
  7.  
  8. </mx:Canvas>
  9.  
  10. そしてこの「Test1.mxml」を
  11. 「SampleCairngorm.mxml」に追加してみましょう。
  12. 例）SampleCairngorm.mxmlの一部
  13.  
  14. <viewhelper:SamplecairngormViewHelper id="sampleViewHelper"/>
  15.  
  16. 　　　　　　　　　　　　　　　　　　　　　　　・
  17. 　　　　　　　　　　　　　　　　　　　　　　　・
  18.  
  19. <!-- viewhelperクラスのイベントハンドル用メソッドを呼び出しています。 -->
  20. <mx:Button id="btnHelloWorld" label="sayHello" click="{sampleViewHelper.clickBtnHelloWorld(event);}"/>
  21.  
  22. 　　　　　　　　　　　　　　　　　　　　　　　・
  23. 　　　　　　　　　　　　　　　　　　　　　　　・
  24.  
  25. &bold(){<local:Test1 id="aaa"/>}

これをコンパイルしてみましょう。
コンパイルは無事に通るかと思いますが、
実行してみるとエラーが発生するはずです。
それは
「sampleViewHelperという名前は既に使われているので、名前を変えてください」
といった意味のエラーが出るはずです。
このようにViewHelperのIDは必ずユニークでなければいけません。

さて、肝心のViewHelperクラスの中身ですが

  1. package sample.view.samplecairngorm.helper
  2. {
  3.  
  4. import com.adobe.cairngorm.view.ViewHelper;
  5. import com.adobe.cairngorm.control.CairngormEventDispatcher;　　　　　　　　　　　　　　　・・・・・・・・・・・・・①
  6.  
  7. import flash.events.*;
  8.  
  9. import sample.controller.samplecairngorm.event.ClickBtnHelloWorldEvent;　　　　　　　･･････････････②
  10.  
  11. /**
  12. * Samplecairngorm画面用のViewHelperです。
  13. */
  14. public class SamplecairngormViewHelper extends ViewHelper　　　　　　　　　　　　　　　･･･・・・・・・・・・・・・・・・③
  15. {
  16.     public function SamplecairngormViewHelper()
  17.     {
  18.         super();
  19.     }
  20.     /**
  21.      * Samplecairngorm画面のボタンID「btn」というUIコンポーネントの
  22.      * clickイベントをハンドルするためのメソッドです。
  23.      */
  24.     public function clickBtnHelloWorld(event:MouseEvent):void
  25.     {
  26.         // ここでは単純にイベントをDispatchしていますが、
  27.         // この中でVaridationを行うこともできます。
  28.         // またViewHelperクラスは「view」というプロパティを持っていて、
  29.         // このViewというプロパティはViewHelperクラスをインスタンス化した際の
  30.         // MXMLのインスタンスを示しています。
  31.         // このプログラムで「View」プロパティが示すMXMLのインスタンスは
  32.         // 「SampleCairngorm.mxml」のインスタンスです。
  33.         // MXMLのインスタンスですので、そのMXMLに書いてあるUIコンポーネントのインスタンスを取得することもできます。
  34.         // 例）
  35.         // SampleCairngorm.mxmlのLabelのインスタンスを取得し、textプロパティを取得したい
  36.         // var str:String = SampleCairngorm(view).lbl.text;
  37.         // こんな風に直接、Viewから値を取得することも可能です。
  38.         CairngormEventDispatcher.getInstance().dispatchEvent(new ClickBtnHelloWorldEvent(new Object()));　　･･･④
  39.     }
  40.  
  41. }
  42.  
  43. }

① CairngormEventDispatcherのインポート
　　CairngormEventDispatcherというのは
「Cairngormがイベントとして認識するものを送出するためのクラス」
　　です。
　　このクラスを利用してイベントを送出しなければ、
　　FrontControllerクラスを継承したControllerクラスはイベントを受け取ってくれませんし、
　　イベントにマッピングされたロジックも実行されませんので、注意が必要です。

② ClickBtnHelloWorldEventのインポート
　　FrontControllerクラスを継承したControllerクラスでpublic static constに設定したイベント文字列を持つイベントをインポートしています。
　　これがCairngormEventになるわけです。

③ ViewHelperを継承したSamplecairngormViewHelperクラスの宣言
　　CairngormにViewHelperクラスとして認識させるために、ViewHelperクラスを継承したクラス宣言を行っています。

④CairngormEventDispatcher.getInstance().dispatchEventメソッドを使ってのイベント送出
　　このメソッドを発行することにより、
「FrontControllerクラスを継承したクラスでaddCommandしたCommandクラスを呼び出す」
　　ことをしています。
　　このことにより、該当するイベントにマッピングされたCommandクラスのｅｘｅｃｕｔｅメソッドが呼び出されるわけです。

以下のURLでダウンロードできます。

http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm;jsessionid=1B8BB89807B455D98ED33F55CC3D6EF3

Related Posts

]]> http://digitechlog.com/2009/05/01/cairngorm-is-the-lightweight-micro-architecture-for-rich-internet-applications-built-in-flex-air.html/feed 1 SWFフォーマット画像ファイルをローカルに保存とするAdobe AIRアプリケーション http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html#comments Fri, 16 Jan 2009 13:25:42 +0000 admin http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html Adobe AIRアプリケーションにLoaderクラスを利用してロードされた画像ファイル、内部的に圧縮されたSWFファイルではなくて独自なフレームとして保存されます（そのような話について、正式なドキュメントとか資料はないようですが、誰か知ってるとぜひ教えていただきますね）。

BitmapDataをPNGやJPEGなどをエンコードして、loadBytesメソッドでLoaderにロードして、終わったらLoaderInfoクラスのbytesというプロパティでSWFに出力するようになります。そうする、SWFフォーマット画像ファイルをローカルに保存することをできました。注意しなければいけないのは、そのような操作はAdobe AIRだけです。ほかのウェブ系とかはいけないです。

下記はBitmapDataクラスからローカルswfファイルを生成／保存するメソッドです。

  1. /* create bitmap to be saved as an swf file */
  2.  var bd:BitmapData = new BitmapData(320,240);
  3.  /* capture application snapshot, this can be any other object */
  4.  bd.draw( Application.application as IBitmapDrawable );

作ったビットマップファイルをPNGやJPEGなどバーチャルファイルにエンコード処理を必要となります。ここの「バーチャル」というのは、ByteArrayクラスを使ってメモリ中に格納とすることです。サンプル中にはmx.graphics.codec.PNGEncoderを利用してバーチャルファイルを作成とします。

  1. /* create virtual png file */
  2.  var png:ByteArray = ( new PNGEncoder() ).encode( bd );

最後はLoaderクラスでバーチャルファイルをロードします。下記のようなソースでロードを終了するとsaveContentToSWFメソッドが実行されます。

  1. /* load virtual png image */
  2.  var l:Loader = new Loader();
  3.  l.contentLoaderInfo.addEventListener( Event.COMPLETE, saveContentToSWF );
  4.  l.loadBytes( png );

以下はsaveContentToSWFメソッドソース：

  1. function saveContentToSWF( event : Event ):void
  2. {
  3.  /* create output file on desktop */ 
  4.  var file:File = File.desktopDirectory.resolvePath('out.swf');
  5.  var fs:FileStream = new FileStream(); fs.open( file, FileMode.WRITE );
  6.  
  7.  /* pull out SWF bytes from Loader */ 
  8.  fs.writeBytes( (evt.target as LoaderInfo).bytes );
  9.  
  10.  fs.close();
  11. }

上記のメソッドは圧縮してないswfファイルが生成されます。実際運用するとき、圧縮しないとサイズが大きいですから、圧縮処理を必要です。以下は圧縮機能を付けって保存メソッドです。

  1. function saveContentToSWF_compress( event : Event ):void
  2. {
  3.  var file:File = File.desktopDirectory.resolvePath('out_c.swf');
  4.  var fs:FileStream = new FileStream();
  5.  fs.open( file, FileMode.WRITE );        
  6.  
  7.  /* compressed file header */
  8.  var swf_head : ByteArray = new ByteArray();
  9.  swf_head.endian = Endian.LITTLE_ENDIAN;
  10.  swf_head.writeBytes( (evt.target as LoaderInfo).bytes, 0, 8 );
  11.  swf_head[0] = 0x43; // 'C' letter, indicates that file is compressed
  12.  swf_head.position = 0;
  13.  
  14.  /* compressed file body */
  15.  var swf_body : ByteArray = new ByteArray();
  16.  swf_body.endian = Endian.LITTLE_ENDIAN;
  17.  swf_body.writeBytes( (evt.target as LoaderInfo).bytes, 8 );
  18.  swf_body.position = 0;
  19.  swf_body.compress();
  20.  swf_body.position = 0;        
  21.  /* write it down to file */
  22.  fs.writeBytes( swf_head );
  23.  fs.writeBytes( swf_body );
  24.  fs.close();        
  25. };

リソース：

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=9364&productId=2&loc=en_US

Related Posts

]]> http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html/feed 0