Apollo Application を実験的に個人で何かしら使ってみたかったので、"３食以外に自分がどれだけ食べるか"をコンセプトに、Apollo Application 内でウェブカメラ経由で動画をサーバに保存し、動画と商品名・各カロリー数・買った場所・日時を追加し総カロリー数を動画で計算していくアプリを作ってみました。メタボリックアプリケーション、videlog。あくまで今回は実験なのでクオリティとかコンセプトとかかなりユルイ感じで作ってます。
The screenshot of videlog.szp.jp
The screenshot of videlog apollo application
Flex Builder 2.0 で開発のアプリケーションから AMFPHP などのサーバプログラムに通信する際には、デフォルトでは Remote Object を使用して通信するのがスタンダードで、慣れると特に問題は無いのですが、それよりも便利な Flex framework があるんではないかと検索していたら、s2flex2-components というコンポーネントがあったのでメモ。Remoting Object では少し煩わしかった services-config.xml の様な config.xml の設定やFlex compiler への設定が無くなり、少ない労力と直感的に操作できるのでかなり快適です。
ということで Remote Object と s2flex2-components を使用した Remoting の方法について対比してみたいと思います。
Lightweight Remoting Framework は danny patterson さんがリリースした ActionScript 3.0 のみで使用できる Remoting Framework で、サーバへの Remoting 接続が容易にできる。
ActionScript Project しか試してないけど、swc もあるんで、おそらく Flex Project 内でも使用できるではないだろうか。
使い方は凄い簡単で osflash を確認してもらえばすぐに使い方が理解できると思うんですが、この Framework というか Design Pattern を理解すれば、Custom Event とか Event Dispatcher の流れが分かるのでソースは目を通したら結構為になる。メインクラスで管理したい addEventListener で設定する任意のイベント（イベントハンドラ系）をどの様に独自にカスタマイズして dispatch するとかきっちり理解できた。
最新版は直接ブラウザからファイルを保存するか、svn checkout で取得できる。
個人の Flickr RSS って便利になりましたね。
最近ふとFlickr の RSS を見たら、以前は M サイズ画像情報のみだったので URL の規則性ですべての画像データ情報を取得していたけど、今はサムネール画像・M サイズ画像・オリジナル画像のパーマリンク、幅、高さがすべて表記されてるんですね。これだと簡単に個人のブログパーツやスライドショーや photogallery くらいはすぐ作れるし、E4X で簡単に XML を解析できるようになったので再利用をかねて個人用に ActionScript 3.0 の解析 class（ParseFlickrXML）を作ってみた。Flickr API を使うならこのクラスがいいと思うけど、自分の RSS を解析するだけだとこれでいいかなと。
ちなみに結構前に作ったので今思うのは、XML の解析用のクラス（ParseFlickrXML）自体が EventDispatcher クラスを extends したら他のイベントクラスは必要なかったし汎用性があると思うけど、作成時はこんなもんだったんで今後直します。
自分の様に Flash 開発に慣れている場合、Flash の時間軸の概念に基づいて画面遷移やコンテンツの切り替えを行う。簡単に言えば、ログインは frame1、メインコンテンツは frame2、ログアウトは frame3 にそれぞれ gotoAndStop() しフレームを移動させることによって画面遷移を行う。
しかし、Flex の開発になった途端、結構な Flash をやる方はこの時間軸の考えが無くなり少し混乱することがあるんじゃないか。最近、自分は会社で本格的に AIR アプリ制作と、その他個人で Flex 開発をしていて、少なからずこのポイントで悩んだのでメモ。
色々と検索してみると、同様な記事が FXUG にありました。
・記事１
・記事２
全く分からなかった時は ActionScript で制御するのか、でも凄い効率悪いし Flex Framework を使っている意味無いしとか感じていましたが、ViewStack ですべてのモヤモヤが解消されました。他にも SWFLoader の方法もありますが、個人的には ViewStack が今回の用途に合っていたのでこっちを使用してみた。
動的なプロパティを持つ Object を集めた ArrayCollection Object を TileList に Bind し、itemRenderer で表示レイアウトをカスタマイズしようとすると、Debug の際に console 画面に下記の様なエラーが。
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher) warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
Flex Builder Beta 2 "Moxie"での AIR アプリケーション開発で PHP 側のコントローラ（gateway.php）と Remoting でのデータのやり取りを行う AS 側でコントローラ的プログラムを開発しようかなと思ったんで、何を使おうか考えていたのですが、最初の２つ（RemotingObject、Lightweight Remoting Framework）は自分なりの理由で回避して
S2Flex2-components を使用することにした。
アプリケーションサーバ（今回は Red 5 を使用）から streaming 配信で flv ファイルを Flex Framework の VideoDisplay Component に表示しようと思ったが、イベントドリブン的なプログラム内で、任意のタイミングにより FLV を seek させて動画の PlayHead を管理しようと思ったがうまく処理が動かなかった。（上手くいくかもしれないですが、自分ではどうにも出来なかった。）
例えば、下記の様なクリックイベントで flv の streaming 配信させる簡単なスクリプトを組んでみる。これでも streaming 配信は可能なのだが、NetStream.seek の様な PlayHead の移動をさせる機能を持ち得ていないので、最初から再生させるには flv の再生が終了するのを待って再度クリックしないと先頭から再生しない模様。もっとも VideoDisplay の仕様的に、AutoRewind も streaming には対応してないみたいだし、試した限りでは、再生中はクリックしても特に何も変化せず動画は普通に再生し続けた。
▽ MXML ソース
<mx:Script>
<![CDATA[
private function playVideo():void {
var flvname:String = "rtmp://hogehoge.com/app/sample.flv";
local_video.source = flvname;
local_video.play();
}
]]>
</mx:Script><mx:VBox>
<mx:VideoDisplay id="local_video" width="320" height="320" />
<mx:Button label="再生" click="playVideo()" />
</mx:VBox>
RPC 処理や HTTPService 処理中に表示される busy カーソル。
s2flex2-components や RemoteObject を使用して Flex（AIR）アプリケーションとサーバプログラムを Remoting で連携して何かを処理する場合、showBusyCursor="true" にすることで、サーバプログラムが任意の処理を行っている際にデフォルトのくるくる回るカーソルを表示することができるが、独自のカーソルやプログレスバーを表示したい場合があるので、その独自のカーソルやプログレスバーを表示する方法をメモ。
Adobe Integrated Runtime Beta 3 上で動作する JUGEM Desktop というアプリケーションの開発に携わり 1/29 にリリースしました。ウェブカメラの動画を記憶ストリームとしてアプリケーションサーバー上に一時的に保存し、ユーザーアクションによって動画をウェブディレクトリに保存し、JUGEM 各ユーザーのブログコンテンツとして使用できるという仕様。今回は最近動画に力を入れている ASK.jp と連携しデコワクを使用するため、ASK で提供された API を使用し、最終的に記憶ストリーム（.flv）を ASK 側に POST する形を取りました。（ローカルの DV ファイルをアップロードするウェブ版は去年末に開発しました。）
JUGEM Desktop の現状の機能自体は Flash Developer や Flex Developer の方にはいたって基本の機能で、すでにウェブ上のアプリケーションでもウェブカメラの動画投稿ができるものを多くみているし、個人的にもウェブでは３度程、記憶ストリームを利用したアプリケーションを仕事や個人ワークで開発しているので、目立って新しいことをしたという訳ではないですが、とにかく、JUGEM というブログサービス（対何十万人）を相手にするための対サービス型のアプリケーション開発は結構シビアで目に見えない部分で苦労しました。後、AIR アプリケーションは"既存のスキルをローカルアプリケーションに使用でき簡単に開発できる"という風に聞いていましたが、やってみると Flex Framework をきっちり理解していないと難しいなと痛感。自分見たくゼロから Flex を始めた方はまずは Flex で詰まりそう。特に、Flash 完結したアプリケーションを AIR 書き出しするために Flex Framework を使用する場合と違い、ユーザーインタラクションがある場合はなおさらかなと思います。MVC 設計を意識し今後の開発での汎用性を意識していたけど、自分のスキルがまだまだです。でも思いました。今まで企業サイト・サービス・個人ワークで目的は違えど何とか新しいクリエイティビティを表現したい！と開発やデザインしてきましたが、AIR アプリケーションの様に、決まった動作を論理的に考えて開発するのも気持ちいい！なあと。一発ギャグ的なアプリケーションもいいけれど、「ウェブライフをより便利に！」って考えて作った方が AIR はより最適かなと思います。例えば、teknision が開発した Finetune Desktop は自分には凄い使い勝手がよく、I-Pod Shuffle 的にいい音楽を偶然探すには最適です。
ということで、使っていただくと分かると思いますが機能的には全くまだまだです。
開発は１人作業なので時間が限られているのですが、引き続き Flex を勉強しながら時間がある限り新しい機能を追加していきます。Flex Beta 3 もまだまだ問題点とかが多いけれど、正式版が出る時に fix されているのを期待したい！
【使用技術】
Flex Builder 3 Beta 3, Flash CS 3 Professional, Flex Component Kit, AIR API, ActionScript 3.0, PHP 4, AMFPHP, ASK API, Smarty, PEAR, MySQL, SQLite, Application server on Linux, Photoshop CS 3
【担当領域】
Flex Builder 3 Beta 3, Flash CS 3 Professional, Flex Component Kit, AIR API, ActionScript 3.0, PHP 4, AMFPHP, ASK API, Smarty, PEAR, MySQL, SQLite, Application server
AIR アプリケーションで大きく分類して１つの機能のみを保持する場合は、特に意識せずに開発すればいいんですが、ふと、機能が横並び的に拡張して、親アプリケーション（mx:WindowedApplication や mx:Application）ではそのレイアウトのみを管理し、各子クラスがそれぞれ１つのアプリケーションの単位として考えられる場合はどうやるんだろう・・・と思ったので、調査してみた。
要は、各アプリケーションを表すアイコンがズラッと並んでいるだけで、各アイコンをクリックした時点で、各アプリケーションが起動する感じにしたい。
mx:Window 概略図
社内のブログサービス（JUGEM）で、以前開発していた JUGEM Desktop を 1.2 より 2.0 にアップデートしました。
Flickr 機能を追加し、自分の Flickr スクリーンネームでログインすれば、ブラウザ経由ではなく、AIR アプリケーションから直接ブログに最大８枚までの Flickr 写真とともに記事をエントリーすることができます。インタフェース的にはドラッグ＆ドロップで写真を記事に追加する感じです。
写真好きな人とか、Flickr は Englishで JUGEM は日本語で切り分けたい人とか、ブラウザ経由が面倒な人はどうぞ。
詳細：http://jugem.jp/fun/jugemdesktop/
JUGEM Desktop 2.0
【使用技術＆環境】
Flex Builder 3.0、Flash CS 3 Professional、ActionScript 3.0、AMFPHP 1.9、PHP、PEAR、Smarty、MySQL、Linux、Flickr API、PhotoShop CS 3
【担当領域】
Flash、プログラム、データベース、サーバ、デザイン（AIR アプリ側）
＊JUGEM の紹介ページデザイン＆コーディングは野原君が担当。色々どーもでした！
Zend Framework + AS3/Flex ユーザーの自分にとっては Zend と Adobe が提携して Zend_Amf_Server がリリースされたので、おっ！って感じで早速使ってみた。
これまでは AMF 通信の際は AMFPHP 1.9 を使っていて特にこれで問題は無いけれど、Zend Framework がインクルードされている環境では Zend_Amf_Server はすぐに使えるし、個別にパッケージをダウンロード出来るのでそれだけアップロードしても使用可能。Zend Framework ベースでデータベース連携とかするなら PHP 5 / MySQL 5 とか推奨なので、環境が無い場合はこれまで通り AMFPHP + PEAR 辺りで Flash と連携して特に問題ないと思う。一応、Cairngorm Framework とともに使ってみたけど使い勝手に特に問題ないし、外国人の開発陣も結構興奮している模様なんで、次のアプリケーション開発で環境が整う場合には、設定とか簡単だし Zend_Amf_Server を使ってみよう。
使い方。
（１）任意のサーバディレクトリに server.php（名前は何でも OK。）を作成し、下記の様に AMFServer を作成する。ブラウザ経由でこのページに直接アクセスしダウンロードが開始されるか、システムコマンドでアクセスして <p>Zend Amf Endpoint</p> と表示されたら設定完了。ただしこのままだと AMFServer が設定されただけなので、実際に Flash/Flex から呼び出す関数を持った PHP class（ここでは、Test.class.php）を setClass 関数で AMFServer インスタンスにアタッチする。また、名前空間を使用し複数のクラスをセットしたり、特定のディレクトリごとすべて含める事が出来る。これを設定する事で、Flex 側から RemoteObject の source プロパティで PHP 側のクラスファイルを記述する必要が無くなる。また、setClassMap 関数で明示的に DTO にも対応させることができるのは AMFPHP とは設定は多少違う。
AMFServer 用の php ファイル設定（http://あなたの URL/server.php）
<?php
require_once('Zend/Amf/Server.php');
require_once('class/Test.class.php');
// Zend_Amf_Server Object
$server =& new Zend_Amf_Server();
$server->setClass('Test');
//$server->setClassMap('TestVO', 'TestVO');
$response =& $server->handle();
echo $response;
?>
Test class（AMFPHP 用クラスファイル）
＊今回は簡単な helloWorld 関数を持った Test クラスを作成する。
<?php
class Test {
/**
* Construct Function
*/
public function __construct() {
}
/**
* Function to helloWorld
* @param String name
* @return String
*/
public function helloWorld($name') {
return 'Hello, ' . $name;
}
}
?>
