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 の紹介ページデザイン＆コーディングは野原君が担当。色々どーもでした！]]>
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 の紹介ページデザイン＆コーディングは野原君が担当。色々どーもでした！]]>
package {
public class CustomClient {
/**
* onBWDone イベントハンドラ関数
* @return void
*/
public function onBWDone():void {
trace("onBWDone");
}
/**
* onMetaData イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onMetaData(infoObj:Object):void {
trace("onMetaData");
}
/**
* onPlayStatus イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onPlayStatus(infoObj:Object):void {
trace("playStatus");
}
}
}
【開発環境】
Flash CS3 Professional
【参考サイト】
flashcomguru]]>
package {
public class CustomClient {
/**
* onBWDone イベントハンドラ関数
* @return void
*/
public function onBWDone():void {
trace("onBWDone");
}
/**
* onMetaData イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onMetaData(infoObj:Object):void {
trace("onMetaData");
}
/**
* onPlayStatus イベントハンドラ関数
* @param Object infoObj
* @return void
*/
public function onPlayStatus(infoObj:Object):void {
trace("playStatus");
}
}
}
▽ 注意点
FMS 3.0 のデフォルトのアプリケーション（vod）に接続すると、onBWDone という関数が各 client オブジェクトに対して call されて呼び出され、非同期エラー（AsyncErrorEvent）が返ってきました。これは main.asc で Application.onConnect 時に呼び出されている関数で、これもここでは CustomClient クラスに追記しました。main.asc はその他関連ファイルと共に、 main.far というパッケージ化されたファイル内に含まれているので、もし詳しく main.asc の内容を見たい方は、unzip main.far をすることで、内部のファイル一覧に解凍し、main.asc を見ることが出来るようになります。
今シーズンは素材用にと結構スノボー動画を Xacti CA-65 で撮影してましたが、やっぱりさらに高画質を目指したいので Xacti HD700 辺りで撮影して、H.264 形式で配信もいいなとか思います。
【使用環境】
Flash CS3 Professional、Flash Media Server 3、Flash Player 9.0.115
【参考サイト】
Flash Media Server 3 の Streaming 方法
main.far の詳細]]>
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import flash.display.Sprite;
import flash.display.NativeWindow;
import flash.display.NativeWindowDisplayState;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowResize;
import flash.display.NativeWindowSystemChrome;
import flash.display.NativeWindowType;
import flash.events.Event;
import flash.events.MouseEvent;
[Embed(source='../asset/sampleImage.png')]
private var SampleImage:Class;
private var win1:NativeWindow;
private var win2:NativeWindow;
/**
* Window 1 を開くための関数
*/
private function openWindow1():void {
var targetX:Number = stage.nativeWindow.x + stage.nativeWindow.width;
var targetY:Number = stage.nativeWindow.y;
win1 = makeWindow(
false,
false,
false,
NativeWindowType.NORMAL,
false,
NativeWindowSystemChrome.STANDARD,
"Window 1",
300,
300
);
win1.x = targetX;
win1.y = targetY;
var imageSprite:Sprite = new Sprite();
imageSprite.x = imageSprite.y = 0;
imageSprite.addChild(new SampleImage());
win1.stage.addChild(imageSprite);
}
/**
* Window 2 を開くための関数
*/
private function openWindow2():void {
var targetX:Number = win1.x + win1.width;
var targetY:Number = stage.nativeWindow.y;
win2 = makeWindow(
false,
false,
false,
NativeWindowType.NORMAL,
true,
NativeWindowSystemChrome.NONE,
"window 2",
300,
300
);
var imageSprite:Sprite = new Sprite();
imageSprite.addChild(new SampleImage());
win2.stage.addChild(imageSprite);
win2.x = targetX;
win2.y = targetY;
win2.stage.addEventListener(MouseEvent.MOUSE_DOWN, onWin2MouseDown);
}
/**
* Window 2 をマウスダウンした際のイベントハンドラ関数
*/
private function onWin2MouseDown(evt:MouseEvent):void {
win2.startMove();
}
/**
* 新規ウィンドウを作成するための関数
*
* @param Boolean maximizable
* @param Boolean minimizable
* @param Boolean resizable
* @param String type
* @param Boolean transparent
* @param Boolean systemChrome
*
* @return NativeWindow nativeWindow
*/
private function makeWindow(
maximizable:Boolean,
minimizable:Boolean,
resizable:Boolean,
type:String,
transparent:Boolean,
systemChrome:String,
title:String,
width:Number,
height:Number
):NativeWindow
{
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.maximizable = maximizable;
options.minimizable = minimizable;
options.resizable = resizable;
options.type = type;
options.transparent = transparent;
options.systemChrome = systemChrome;
var nativeWindow:NativeWindow = new NativeWindow(options);
nativeWindow.title = title;
nativeWindow.stage.align = StageAlign.TOP_LEFT;
nativeWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
nativeWindow.visible = true;
nativeWindow.stage.stageWidth = width;
nativeWindow.stage.stageHeight = height;
return nativeWindow;
}
]]>
</mx:Script>
<!-- Window 1 用ボタン -->
<mx:Button
id="Window1_btn"
label="window 1 を開く"
x="10"
y="10"
click="openWindow1()" />
<!-- Window 2 用ボタン -->
<mx:Button
id="Window2_btn"
label="window 2 を開く"
x="10"
y="50"
click="openWindow2()" />
</mx:WindowedApplication>
じゃあ、どうやって ViewStack などで画面遷移などを管理できる MXML Component をアプリケーションの単位として制御できるんだろうと調べていたら、mx:Window という MX タグがあることにたどり着いた。これは先ほどのNativeWindow クラスで新規ウィンドを開く様に、新規ウィンドを起動することができるのだが、MXML コンポーネントとして制御できるため、この中で mx:Viewstack や mx:Canvas や mx:Script やら他の MXML タグを通常通り使える。要は、１つのアプリケーションを作っている感覚で、複数のアプリケーションを作れる訳だ。なお、結構文献はまだまだ少ないみたいで、最初、NativeWindowSystemChrome.NONE、transparent=true などで透過やフレームなしの新規画面を立ち上げるのに苦労したので、その状態にした新規ウィンドを立ち上げた例を今回は記述する。
▽ mx:Window による通常のポップアップ
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showFlexChrome="false">
<mx:Style>
Application {
background-image: "";
background-color: "";
}
</mx:Style>
<mx:Script>
<![CDATA[
import view.SampleView;
import flash.display.NativeWindow;
import flash.display.NativeWindowDisplayState;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowResize;
import flash.display.NativeWindowSystemChrome;
import flash.display.NativeWindowType;
import mx.core.Window;
public var testVar:String = "Hello World";
private var window:Window;
/**
* 新しいウィンドウを起動するための関数
*/
private function openWindow():void {
window = makeWindow(
SampleView,
false,
false,
false,
NativeWindowType.LIGHTWEIGHT,
true,
NativeWindowSystemChrome.NONE,
false,
false,
false,
300,
480
);
window.x = 10;
window.y = 10;
window.open();
}
/**
* ウィンドウ作成用関数
*/
private function makeWindow(
ClassName:Class,
minimizable:Boolean,
maximizable:Boolean,
resizable:Boolean,
type:String,
transparent:Boolean,
systemChrome:String,
showStatusBar:Boolean,
showTitleBar:Boolean,
showGripper:Boolean,
width:Number,
height:Number
):Window
{
var window:Window = new ClassName();
window.minimizable = minimizable;
window.maximizable = maximizable;
window.resizable = resizable;
window.type = type;
window.transparent = transparent;
window.systemChrome = systemChrome;
window.showStatusBar = showStatusBar;
window.showTitleBar = showTitleBar;
window.showGripper = showGripper;
window.minWidth = width;
window.minHeight = height;
return window;
}
]]>
</mx:Script>
<!-- 新規ウィンドを開くためのボタン -->
<mx:Button
id="Win_btn"
label="Window を開く"
x="10"
y="10"
click="openWindow()" />
</mx:WindowedApplication>
【開発環境】
Flex Builder 3.0
【参考サイト】
http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=1353
http://livedocs.adobe.com/flex/3/langref/mx/core/Window.html
【参考本】
]]>
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]]>
package {
import mx.core.UIComponent;
import flash.display.Sprite;
public class CustomBusyCursor extends UIComponent {
[Embed(source='cursor.swf')]
private var CustomCursor:Class;
public function CustomBusyCursor() {
var cursor:Sprite = new CustomCursor();
addChild(cursor);
}
}
}
▽ MXML ソースサンプル
今回は s2flex2-components を使用して簡単にログインのサンプル。ボタンをクリックしログイン処理を開始する。Remoting には AMFPHP 1.9-beta を利用し、class 名は Login で test/Login.php として保存し、ログイン用の関数を loginUser とする。
（PHP 側の詳しいプログラムに関しては特に今回は関係が無いので省く。）
<?xml version="1.0" encoding="UTF-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s2="http://www.seasar.org/s2flex2/mxml" layout="absolute"> <mx:Script source="BusyCursor.as" /> <mx:VBox> <mx:Form> <mx:FormItem label="ユーザー ID:"> <mx:TextInput id="userId" /> </mx:FormItem> <mx:FormItem label="パスワード:"> <mx:TextInput id="password" displayAsPassword="true" /> </mx:FormItem> <mx:Button label="ログイン" click="login()" /> </mx:Form> </mx:VBox> <s2:S2Flex2Service id="loginService" gatewayUrl="http://hogehoge.com/amfphp/gateway.php" destination="test.Login" result="login_onResult(event)" fault="login_onFault(event)" /> </mx:Application>▽ ActionScript ソース loginService.loginUser に２つのパラメータを渡してログインする。
import mx.controls.Alert;
import CustomBusyCursor;
private var cBusyCursor:CustomBusyCursor;
private function login():void {
var userId:String = userId.text;
var password:String = password.text;
if(userId == "" || password == "") {
Alert.show("必須項目を入力してください。", "ログインエラー");
return;
}
cBusyCursor = new CustomBusyCursor();
cBusyCursor.x = Math.floor(width / 2);
cBusyCursor.y = Math.floor(height / 2);
addChild(cBusyCursor);
loginService.loginUser(userId, password);
}
private function login_onResult(evt:Object):void {
removeChild(cBusyCursor);
if(evt.result) {
trace("ログイン成功");
} else {
trace("ログイン失敗");
}
}
private function login_onFault(evt:Object):void {
removeChild(cBusyCursor);
trace("ログイン失敗");
}
【使用技術】
Flex Framework, Flex Builder 3 beta, ActionScript 3, AMFPHP 1.9 - beta, s2flex2-components
【参考サイト】
FxUG 記事：flexの処理の一時的な中断]]>
$sampleObj = new sampleClass();
$isExisted = $sampleObj->isPhotoExisted('http://farm1.static.flickr.com/29/65010636_f8ad1dc77c_b.jpg');
【参考サイト】
http://d.hatena.ne.jp/akid/20060103/p1
]]>
package {
public class CustomClient {
public function onMetaData(infoObject:Object):void {
trace("metadata");
}
public function onPlayStatus(infoObject:Object):void {
trace("onPlayStatus");
}
}
}
記述量は増えましたが、最初の例の VideoDisplay では出来なかった再生中の動画の seek は出来る模様。やっぱり Flashguru にも書いている様に VideoDisplay は独自に NetConnection は操作するみたいだが、NetStream オブジェクトへの操作機能は何もない様だ。What the heck !!!
p.s.
AIR 書き出ししたアプリケーションから Red5 v0.6 RC3 以前の Red 5 には NetConnection で接続出来なくなった。Flex Project では接続出来るのに、謎。AIR の beta 1 までは動いていたはずなので、Flex Builder beta 2 以降で objectEncoding の設定が変わったのか？RunTime の仕様？これに関しては冬休みに調査してみよう。
【使用技術】
Flex Framework, ActionScript 3.0, Red 5
【参考サイト】
Flash Guru 記事：Playing a live FMS stream using VideoDisplay in Flex2]]>
【使用技術】
PHP、Smarty、PEAR、MySQL、CSS、Javascript、HTML、PhotoShop、ASK API
【担当領域】
PHP、Smarty、PEAR、MySQL、Javascript、ASK API 辺り]]>
package
{
public class SetData
{
[Bindable]
public var label:String;
[Bindable]
public var src:Class;
public function SetData(label:String, src:Class) {
this.label = label;
this.src = src;
}
}
}
■ 最終的なソース
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="source/index.html"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='asset/image01.jpg')]
private var image01:Class;
[Bindable]
[Embed(source='asset/image02.jpg')]
private var image02:Class;
[Bindable]
[Embed(source='asset/image03.jpg')]
private var image03:Class;
[Bindable]
[Embed(source='asset/image04.jpg')]
private var image04:Class;
[Bindable]
[Embed(source='asset/image05.jpg')]
private var image05:Class;
[Bindable]
[Embed(source='asset/image06.jpg')]
private var image06:Class;
[Bindable]
private var sample_arr:Array = [
new SetData("image01", image01),
new SetData("image02", image02),
new SetData("image03", image03),
new SetData("image04", image04),
new SetData("image05", image05),
new SetData("image06", image06)
]
]]>
</mx:Script>
<mx:Component id="sample_renderer">
<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:Label fontWeight="bold" text="{data.label}" />
<mx:Image source="{data.src}" />
</mx:VBox>
</mx:Component>
<mx:TileList
columnWidth="150"
rowHeight="150"
columnCount="3"
dataProvider="{sample_arr}"
itemRenderer="{sample_renderer}" />
</mx:Application>
]]>
<?xml version="1.0" encoding="UTF-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="ViewStack サンプル" width="500" height="300" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5"> <mx:HBox width="100%" horizontalAlign="center"> <mx:Button label="ログイン" click="myViewStack.selectedChild=login" /> <mx:Button label="メイン" click="myViewStack.selectedChild=main" /> <mx:Button label="ログアウト" click="myViewStack.selectedChild=logout" /> </mx:HBox> <mx:ViewStack id="myViewStack" width="100%" height="100%" borderColor="#000000" borderStyle="solid" creationPolicy="auto"> <mx:Canvas id="login" width="100%" height="100%" backgroundColor="#FFFFCC"> <mx:Label text="ここはログインエリアです！" /> </mx:Canvas> <mx:Canvas id="main" width="100%" height="100%" backgroundColor="#CCFFFF"> <mx:Label text="ここはメインエリアです！" /> </mx:Canvas> <mx:Canvas id="logout" width="100%" height="100%" backgroundColor="#FFCCFF"> <mx:Label text="ここはログアウトエリアです！" /> </mx:Canvas> </mx:ViewStack> </mx:Panel> </mx:Application>もっと汎用性を持たせるなら、mx:Canvas 部分それぞれをクラス化して管理すると、開発効率や修正作業が断然上がりますね！
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ns1="*">
<mx:Panel title="ViewStack サンプル" width="500" height="300" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button label="ログイン" click="myViewStack.selectedChild=login" />
<mx:Button label="メイン" click="myViewStack.selectedChild=main" />
<mx:Button label="ログアウト" click="myViewStack.selectedChild=logout" />
</mx:HBox>
<mx:ViewStack id="myViewStack" width="100%" height="100%" borderColor="#000000" borderStyle="solid" creationPolicy="auto">
<ns1:Canvas1 id="login" />
<ns1:Canvas2 id="main" />
<ns1:Canvas3 id="logout" />
</mx:ViewStack>
</mx:Panel>
</mx:Application>
]]>
Adobe ケーススタディー]]>