DEV.CONVEXSTYLE.NET

JUGEM Desktop x Flickr

Wed, 25 Jun 2008 14:47:10 +0900

社内のブログサービス（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 の紹介ページデザイン＆コーディングは野原君が担当。色々どーもでした！

H.264 動画の Progressive 配信

Fri, 04 Apr 2008 10:44:36 +0900

前回のエントリーで、Flash Media Server 3 を使用した Streaming 配信に関して記述しましたが、今度はウェブディレクトリより通常の Progressive 再生をしてみたのでメモ。前回は NetStream.play の記述は ns.play("mp4:sample.mp4"); や ns.play("mp4:sample.mov"); の様な形式で記述し Streaming 再生させていたが、Progressive 再生では NetConnection.connect(null) にして同様な記述では H.264 の動画コーデックで作成された MPEG-4 や MOV を再生できないようだ。もろもろ調べていたら flashcomguru の記事に同様な問題で、下記の様な記述が。 "That did the trick and my mp4 files now use a naming convention of Rendition.mov.flv, even though it complained that the file can't be opened. trust me it can once you run it in a browser." 要は、.mp4 や .mov も .flv として見立てて、ファイルの拡張子を例えば sample.mp4.flv や sample.mov.flv に変更し、NetStream.play の記述を ns.play("sample.mp4.flv"); やns.play("sample.mov.flv"); に変更し、サーバにアップロードすれば動作する。＊ただし .flv の時は拡張子を削除して ns.play("sample.mp4"); や ns.play("sample.mov"); の様に記述したいところだが、ns.play("sample.mp4"); では動作したが、ns.play("sample.mov"); では 404 エラーが返ってきた。ここら辺の挙動はどうなのか。 flashcomguru からはサンプル fla をダウンロードでき、そちらでは FLVPlayback を使用しているので、source プロパティに拡張子を変更したファイルの絶対パス（例：http://hogehoge.com/flv/sample.mov.flv）を指定して動作させている。次の Flash Player 辺りで改善されそうな内容ですが、一時的な改善策としてこんな感じらしい。念のため、ソースは下記に。

H.264 動画を Flash Media Server 3 より Streaming 再生

Mon, 31 Mar 2008 23:18:33 +0900

Flash Media Server 3 の Streaming 配信 会社で Flash Media Server 3 を触る機会があり、H.264 のストリーミング再生を試してみたのでメモ。 H.264 は従来の On2 VP6 コーデックよりもパフォーマンスと効率が向上した動画圧縮規格で、Flash Player 最新版（Flash Player 9.0.115）であれば、従来の .flv や .mp3 に加え、H264 を使用した他の動画フォーマット（.mov、.avi、.mp4 など）を Streaming 再生させることが可能。Adobe Flash on で HD 画質の動画を普通に見れますが、この画質は恐ろしく奇麗過ぎる！もはや映画レベルの画質をウェブでコンテンツとして普通に配信出来ますね。Flash Media Streaming Server 3 はそこまで高くはなく購入出来るレベルなので、専用サーバ立てて portfolio サイトのコンテンツ配信ぐらいなら十分ですね。どこかの記事で読みましたが、H.264 を Red5 もサポート予定らしいので、ライセンス購入なしに高画質動画配信が可能になる可能性がありますね。といういことで、Flash Media Server 3 の動画の Streaming 配信の際は、従来の NetConnection.connect の記述がフォーマットの違いによって微妙に異なるので下記に記述します。

マルチアプリケーションを１つの AIR アプリケーションで管理

Fri, 29 Feb 2008 09:38:58 +0900

AIR アプリケーションで大きく分類して１つの機能のみを保持する場合は、特に意識せずに開発すればいいんですが、ふと、機能が横並び的に拡張して、親アプリケーション（mx:WindowedApplication や mx:Application）ではそのレイアウトのみを管理し、各子クラスがそれぞれ１つのアプリケーションの単位として考えられる場合はどうやるんだろう・・・と思ったので、調査してみた。要は、各アプリケーションを表すアイコンがズラッと並んでいるだけで、各アイコンをクリックした時点で、各アプリケーションが起動する感じにしたい。 mx:Window 概略図

JUGEM Desktop

Sun, 03 Feb 2008 23:57:19 +0900

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

独自 showBusyCursor 表示方法

Sun, 20 Jan 2008 23:37:53 +0900

RPC 処理や HTTPService 処理中に表示される busy カーソル。 s2flex2-components や RemoteObject を使用して Flex（AIR）アプリケーションとサーバプログラムを Remoting で連携して何かを処理する場合、showBusyCursor="true" にすることで、サーバプログラムが任意の処理を行っている際にデフォルトのくるくる回るカーソルを表示することができるが、独自のカーソルやプログレスバーを表示したい場合があるので、その独自のカーソルやプログレスバーを表示する方法をメモ。

HTTP_Request で HTTP レスポンス情報の評価

Mon, 07 Jan 2008 19:45:05 +0900

明けましておめでとうございます。前回に引き続き、flickr.interestingness.getList API と Flash の関係について。 flickr.interestingness.getList はクオリティの高い写真を日付ごとに最大 500 件取得できる点ですが、中には Source URL で取得出来る最も重要な b サイズ（でかい画像サイズ）の画像がアップロードしたユーザーが画像を削除した際に取得出来ない場合があるようで、過去にさかのぼるにつれてその頻度は高いようです。 Flash で Viewer を作る以上、そういった画像は極力省きたいので一度 PHP などのプログラム側で HTTP レスポンスからの情報を評価する必要があります。Flickr の仕様上、画像が存在しない場合はHTTP リスポンスコードで 302（Moved Temporarily）が返って画像が無い場合の GIF 画像（photo_unavailable.gif）が返ってしまうので、Flash ではこういった GIF 画像も画像と認識して読み込んでしまい表現上都合が良くないので、cron で定期的にそういった画像を省いた状態で新規に xml を新たに書き出した方が良さそう。でもいちいちリクエストをするので処理は重いのがネックですね。curl --head でも同様な処理を行ったがそんなに処理速度が変わらなかった。何か他の方法は無いだろうか。

for each in

Sun, 30 Dec 2007 22:32:14 +0900

数ヶ月前に個人的に一発奮起して Canon 30D を購入したのですが、それ以来写真の面白さにのめり込んでしまいました。Flickr を写真サイトのメインとして使っているんですが、今までのベスト写真アーカイブを表示する photoViewer を自前で作成しようと思い、その前に Flickr のベストフォトを取得する flickr.interestingness.getList API をベースに基本ロジックを作成しています。 ActionScript 3.0 から for each in が追加されて XML の解析が凄い簡単かつ明瞭になりました。従来は XML の処理は firstChild や childNodes など毎回冗長的に記述していかなければならなかったですが、E4X と for each in の連携によって XMLList オブジェクトを解析するのは PHP でいう foreach 的な使い勝手で今更ながら感動です。

VideoDisplay では NetStream.seek 機能は実現出来ないのか？

Wed, 26 Dec 2007 18:23:22 +0900

アプリケーションサーバ（今回は Red 5 を使用）から streaming 配信で flv ファイルを Flex Framework の VideoDisplay Component に表示しようと思ったが、イベントドリブン的なプログラム内で、任意のタイミングにより FLV を seek させて動画の PlayHead を管理しようと思ったがうまく処理が動かなかった。（上手くいくかもしれないですが、自分ではどうにも出来なかった。）例えば、下記の様なクリックイベントで flv の streaming 配信させる簡単なスクリプトを組んでみる。これでも streaming 配信は可能なのだが、NetStream.seek の様な PlayHead の移動をさせる機能を持ち得ていないので、最初から再生させるには flv の再生が終了するのを待って再度クリックしないと先頭から再生しない模様。もっとも VideoDisplay の仕様的に、AutoRewind も streaming には対応してないみたいだし、試した限りでは、再生中はクリックしても特に何も変化せず動画は普通に再生し続けた。 ▽ MXML ソース

Moxie での S2Flex2-components 設定方法

Sun, 16 Dec 2007 22:45:51 +0900

Flex Builder Beta 2 "Moxie"での AIR アプリケーション開発で PHP 側のコントローラ（gateway.php）と Remoting でのデータのやり取りを行う AS 側でコントローラ的プログラムを開発しようかなと思ったんで、何を使おうか考えていたのですが、最初の２つ（RemotingObject、Lightweight Remoting Framework）は自分なりの理由で回避して S2Flex2-components を使用することにした。

Jugem x ASK.JP

Mon, 10 Dec 2007 18:29:44 +0900

久々のブログエントリー。そして久々に会社の既存サービスに Flash を一切使わない機能をゴリゴリ開発。ブログサービス jugem に ASK.JP の動画投稿 API を使用してローカル動画投稿機能を実装してみました。Open な API では無いですがよく出来ている API だったので、スムーズに開発出来ました。既存のサービスのソースも追えたので、結構良い勉強になりました。【使用技術】 PHP、Smarty、PEAR、MySQL、CSS、Javascript、HTML、PhotoShop、ASK API 【担当領域】 PHP、Smarty、PEAR、MySQL、Javascript、ASK API 辺り

unable to bind to property

Fri, 26 Oct 2007 14:24:08 +0900

動的なプロパティを持つ 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)

SQLite in AIR

Wed, 17 Oct 2007 00:20:25 +0900

Apollo Mini Camp で Apollo for Adobe Flex Developers 等の著者の Mike Chambers さんが AIR から SQLite を導入すると話していましたが、AIR より実際に導入されたので、現在開発中の AIR アプリケーションに実際に実装してみた。もともと必要な情報を FileStream クラスでローカルに xml の様なファイル書き出ししようかと考えていたが、データをもっと Secure に扱いかったので SQLite を使用。まだまだもっと使えて欲しいなあ…という部分もけっこうあるんですが、まあ、Beta の段階だしね。使用方法は、基本的な SQL 構文の知識と AIR で実装されている SQLConnection class、 SQLStatement class、SQLResult class、File 系の class 辺りを連携させることで、至って簡単に使用することで実現できる。

ViewStack

Wed, 10 Oct 2007 23:25:56 +0900

自分の様に Flash 開発に慣れている場合、Flash の時間軸の概念に基づいて画面遷移やコンテンツの切り替えを行う。簡単に言えば、ログインは frame1、メインコンテンツは frame2、ログアウトは frame3 にそれぞれ gotoAndStop() しフレームを移動させることによって画面遷移を行う。しかし、Flex の開発になった途端、結構な Flash をやる方はこの時間軸の考えが無くなり少し混乱することがあるんじゃないか。最近、自分は会社で本格的に AIR アプリ制作と、その他個人で Flex 開発をしていて、少なからずこのポイントで悩んだのでメモ。色々と検索してみると、同様な記事が FXUG にありました。・記事１・記事２全く分からなかった時は ActionScript で制御するのか、でも凄い効率悪いし Flex Framework を使っている意味無いしとか感じていましたが、ViewStack ですべてのモヤモヤが解消されました。他にも SWFLoader の方法もありますが、個人的には ViewStack が今回の用途に合っていたのでこっちを使用してみた。

Adobe ケーススタディー

Tue, 09 Oct 2007 23:49:42 +0900

Adobe ケーススタディーに会社の"カラメル"のワークが載りました。自分は大した事はしてないですが、少しだけ Flash で絡んだのでオマケ程度に載ってます。関係ないですが、社長と自分の動きがかぶっていたので、社長が作りました。外人は誰だか分かりませんが、ウケタので載せておきます。 Adobe ケーススタディー