多分日頃からOpenSocial開発をしてる人には当たり前のことなんだろうけど
ぐぐってもわからなかったので。。

iframeで外部ページを埋め込めるか？

mixiアプリはそもそもiframe内にgadget.xmlをキャッシュされた状態で起動する。

つまり、mixi.jp内のページにmixi-platform.comにキャッシュされたコンテンツを表示していて
さらにその中で別ドメインなコンテンツを表示できるのか？

結論としてはできる。 ただ外部ページからではOpenSocialAPIに接触しようがないから、不便は不便。

iframeの中にfacebookアプリを埋め込んだりもできたよ。
でもmixiアプリ上で認証させるのは多分規約違反。

iframeで外部コンテンツを表示するっていう作法も、外部サイトへの遷移の規約に従ってない気がするのでアウトかな？

どうでしょう？

Flashから外部コンテンツとの通信

OpenSocialのFlash埋め込みAPIを使って、配置したSWFから
URLLoaderなんかを使って普通にクロスドメインな通信ができるかチェック。

これもできる。相手のサーバから拒否されてなければ。

JavaScriptはXHRを使えないから（ひょっとして使える？）、makeRequestするわけだけど
Flashは普通に通信できるなら、mixiアプリは開発しやすさで言えばFlashで作るに限るってことかなぁ。

makeRequestはoAuthの署名リクエストが使えるので、通信にセキュリティを保証したい場合は有効だと思う。

ExternalInterface.callの１番目の引数は、呼び出すJavaScriptのメソッド名という事になっていますが

は単純に以下のようなJSが実行されているものと考えられるので

まぁ、ようするに無名関数をFlash側で引数としてあげればいいと。

しかし、この説明では一つ問題があります。 なぜなら、JavaScriptやActionScript3のString型は、プリミティブ型ではあるものの、変数のコピーは値コピーではなく参照コピーになるからです。それどころか、ActionScript3では全てのプリミティブ型のコピーは参照コピーになるようです

こちらの記事を是非合わせてお読みいただくことをおすすめします！！

コリン・ムック「今から始めるActionScript 3.0」に行ってきました。

http://www.event-web.net/as3/ 今コリン・ムックのレクチャーから帰ってきました。

初心者向けのレクチャーではありましたが、９時間の長丁場。 内容の方は、ビギナー向けということもあり易しめで、難しいところもありませんでした。 コリン節を堪能してきましたよ。

僕はAS2.0の時に、コリン氏のMVC Clockのソースを穴があくほど読んで、初めてMVCという概念を勉強したので師匠を拝むような気持ちでした。

で、基本的には「ActionScript3でどうやってアプリケーションを開発していくか」という課題をひとつのサンプルアプリを通して、疎結合に作っていく大切さを表現していました。

前半はAS3の言語的な部分に多く触れ、後半はMVCやディスプレイオブジェクト、イベントなどの実装寄りな話。

コリン氏は「変数」と「オブジェクト」の関係を正しく理解してもらいたいと何度か言っておりました。

そのわかりやすさに衝撃を受けたので、メモします。

• 「変数には値そのものが格納されているわけじゃない。変数は値の参照を持っているだけ」
• 「変数はコンテナではない。参照を持つ事のみ可能。本来のコンテナはシステムメモリ」

と同じことを何度もいっていたので、よほど覚えて帰ってほしかったのでしょう。

例えばプリミティブ型（NumberやString）では

としたとき、「dog」というオブジェクトがコピーされています。

追記： 文字列変数コピーは参照コピーである:福井プログラマー生活向上委員会の記事を参照してください。

この時２つの変数の間でオブジェクトは共有されていません。

では、複合データ型の場合

２つの変数は同じオブジェクトを参照しています。 ここまでは問題ないかと。

ではさらに突っ込んで、「参照」とは何かを説明すると

これはちょっと変だと思う人もいるかも。 nullはオブジェクトを捨てる事ではなく、参照を切るだけ

図を見ると、「変数a」と「配列[10,1,2,3]」を繋ぐ線が消えただけだということが良くわかる。変数が持っているのは、この「線」の部分だけだということ。

では

とすると、オブジェクト[10,1,2,3]は消えたのでしょうか？ 答えはノーです。

どの変数からも参照されなくなったオブジェクトはやがてメモリから捨てられます。 これをガベッジコレクションといいますが、どの変数からも参照されなくなった時点で削除されるのではなく、捨てる準備。捨ててもいいよというマークがされて適当な時にGCされます。

その適当な時とは？ コリン氏がいうには、ロードをやめたり、重い処理をストップさせたりした場合らしいです。

AS3ではビルトインではないけれど、強制的にガベッジコレクションを実行するハックもあるので それを使うのもありですかね。

http://www.gskinner.com/blog/archives/2006/08/as3_resource_ma_2.html

個人的にこのオブジェクトの話は、わかってはいても人に説明しづらい。理解したつもりでも、なんかずれていた。という経験があるので、この参照を矢印で表現する図解はためになりました。

今日のレクチャーの内容は http://moock.org/lectures/groundUpAS3/にあります。

–

追記： コリン・モック氏本人がレクチャーで使っていた図解は http://moock.org/lectures/groundUpAS3/の ・copies and references ・multiple references to the same object にありました。 SWFなのでクリックして紙芝居的に挙動が確認できます。

このフォーラムで、シーク機能について質問が投げられていたので作ってみた。

Flex2でFLVプレイヤーを作ろうと思ったら、ボタンなどの標準コンポーネントを使って 簡単に実装できちゃうんですが、シークバーはちょっとポイントが要ります。 でもだからといって、コンポーネントを作らないといけないわけじゃなくて、 HSliderとスクリプトだけでなんとかできちゃいます。

こんな感じになる。それっぽいでしょ？

コントローラを配置

まずはFLVを表示するためのVideoDisplayクラスと シークするためのHSliderクラスを準備

FLVの再生位置とシークバーを同期させる

これだけでもFLVは再生されるので、再生されている位置とシークバーを同期させてみます。 ここからは基本的に編集するのは

のみ

スライダーの最小値と最大値を決定します。 最大値にビデオの総時間をバインディングされるようにしておき さらにビデオの再生位置に変更があるたびに、スライダーの値とビデオの再生時間が同期するように仕込む。 これで、再生時間 / 総再生時間みたいなことを気にしないでも、スライダーが勝手に計算してくれます。

スライダーからの変更をビデオに反映する

次にスライダーからビデオの再生位置を変更できるようにします。 HSliderに次の行を追加します。 [xml] change=”{ if(myVD.stateResponsive) myVD.playheadTime = myHS.value }” [/xml]

VideoDisplay#stateResponsiveはビデオが応答可能かどうかの判定メソッドです。 まだ動画がロードされていなかったり、ビジーな状況を回避しつつ スライダーのvalueをそのままビデオの再生位置時間に代入します。 これはスライダーとビデオの扱う単位を「秒」で揃えているから可能になっています。 Flexでは往々にして、コントロール間で扱う単位を揃えたり 中間に変換するアダプターメソッドを噛ますと、生産性があがりますね。

見た目や精度を向上する

さて、ここまでで一応実装完了しているのですが 使ってみると、ドラッグ中はビデオに再生位置が反映されなかったり 再生位置をスライダーのつまみの位置だけで確認しなければならなかったり ちょっと不親切です。

HSliderにさらに、下の処理を追加。 [xml] liveDragging=”true” showTrackHighlight=”true” [/xml]

Slider#liveDraggingは、つまみのドラッグ中にもchangeイベントを発行しつづけるためのフラグです。 Slider#showTrackHighlightは、スライダーの始点からつまみまでを色つけするスタイルプロパティ。

完成

以下は全コードです。

ソースファイル

まずはRubyのソース

server_client.rb [ruby] require “socket_server” server = SocketServer.new server.open 8001 [/ruby]

ソケットサーバを8001番ポートでオープン

socket_server.rb [ruby] class SocketServer

def initialize( port=nil ) puts “create server..” @port = port || 8001; end

def open( port=nil ) @port = port if( !port.nil? ) @gs = TCPServer.open @port @clients = [] puts “open server #{@port}”

while true
  Thread.start( @gs.accept ) do |s|
    open_client s
    while ( message = s.gets )
      send_message_all( message )
    end
    close_client s
  end
end

end

def open_client( client ) puts “#{client} is connected.” @clients << client end

def close_client( client ) puts “#{client} is closed.” @clients.delete client end

def send_message_all( message ) puts “[message all] #{message}” @clients.each do |client| send_message( client, message ) end end

# send message to IOSocket def send_message( target, message ) message.chomp! target.write( message << “\n” ) end

end [/ruby]

そしてFlex2のソース

Socketクラスを使ってます。 XMLSocketクラスを使ったら、メッセージのタイミングが１個ずれました。

SocketTest.mxml [html]

<![CDATA[ import flash.net.Socket;

  [Bindable]
  public var sock:Socket;

  private function handleCreateComplete():void
  {
    sock = new Socket();
    sock.addEventListener(ProgressEvent.SOCKET_DATA,handleSocketData);
    sock.addEventListener(Event.CONNECT,handleSocketConnect);
    sock.addEventListener(Event.CLOSE,handleSocketClose);
    //sock.addEventListener(DataEvent.DATA,handleSocketData);
    sock.addEventListener(IOErrorEvent.IO_ERROR,handleSocketIOError);
  }

  private function handleSocketConnect(e:Event):void
  {
    debugger.text += “Connection Success.\n”;
    formViewStack.selectedChild = connectedForm;
    sock.removeEventListener(Event.CONNECT,arguments.callee);
  }

  private function handleSocketClose(e:Event):void
  {
    debugger.text += “Connection Close.\n”;
    formViewStack.selectedChild = connectForm;
    sock.removeEventListener(Event.CLOSE,arguments.callee);
  }

  private function handleSocketData(e:ProgressEvent):void
  {
    debugger.text += e.target.readUTF();
  }

  private function handleSocketIOError(e:IOError):void
  {
    trace(e);
  }

]]>

<mx:VDividedBox width="100%" height="100%">

  <mx:ViewStack id="formViewStack" width="100%" height="200">

    <views:ConnectForm id="connectForm" sock="{sock}" />
    <views:ConnectionForm id="connectedForm" sock="{sock}" />

  </mx:ViewStack>

  <mx:TextArea width="100%" id="debugger"/>

</mx:VDividedBox>

[/html]

views.ConnectForm.mxml [html] <![CDATA[ public var sock:Socket;

  private function handleConnectButtonClick(e:MouseEvent):void
  {
    sock.connect( formdata.host, formdata.port );
  }

]]>

{txtHost.text} {int(txtPort.text)}

[/html]

views.ConnectionForm.mxml [html] <![CDATA[

  public var sock:Socket;

  private function handleSendButtonClidk(e:MouseEvent):void
  {
    if( sock.connected )
    {
      XML.prettyPrinting = false;
      sock.writeUTF( sendXML.toXMLString() + "\n" );
      sock.flush();
    }
  }

]]>

{txtMessage.text}

[/html]

とりあえず、ここまで

最終的には、mx.rpc.AbstractInvokaを継承したSocketServiceコンポーネントを作るところまでしたい。

var logCategoryName:String = “ConnectionLog”

var logger:ILogger = Log.getLogger(logCategoryName); logger.info(‘connect..’); logger.error(‘connect error..’); logger.worn(‘connect worn’); logger.fatal(‘connect fatal’); [/js]

こんな感じ？

ログレベルは fatal < worn < error < info

僕は各クラスごとにログカテゴリを設定してるんで、全エントリーを使って コンストラクタん中で、こんな感じに。

[js] var logger:ILogger = Log.getLogger( describeType(this).@name.toString().match(/::(.*)/)[1] ); [/js]

あとは、環境によって、TraceとかLocalConnectionとか、ログの出力方法を切り替えたいなと。

mx.logging.targetsあたりを弄るのかな？

[js] import flash.utils.describeType; String(describeType(this).@name).match(/::(.*)/)[1]; [/js]

で、読んでいるうちに何か作りたくなったので 簡単にこさえてみた。お絵かきツール。 実はFlashでお絵かきツールって作ったこと無かったのよねぇ。

下の灰色四角の中でマウスをクリックすると線が描けます。

概要

1. マウスを押したら、描画開始
2. マウスを放すまで、描画しつづける
3. マウスを放したら、描画終了

と、誰が作ってもこんな感じだと思います。 1時間くらいで作れるように、あまり機能は求めません。

作ったクラスは

paint.Paint お絵かきツールのメインクラス

paint.Background 背景

paint.Canvas 絵を描くカンバス

paint.Brush ブラシ。サイズとか色とか

本当は背景クラスはカンバスを継承した方がいいような気がしますが それは今後追求したくなったら、やろう。

おソース

[js] /** * お絵かきツールのメインクラス * @author mitsuru.haga@gmail.com * @version 0.1 */

package paint {

import paint.*;
import flash.display.Sprite;
import flash.events.*;

public class Paint extends Sprite{

    //  ブラシ
    protected var brush:Brush;

    //  ブラシコレクション
    protected var brushCollection:Array = [];

    //  カンバス
    protected var canvas:Canvas;

    //  背景
    protected var background:Background;

    /**
    * コンストラクタ
    */
    public function Paint(){
        initialize();
    }

    /**
    * 初期化
    * @return
    */
    protected function initialize():void{

        //  ブラシを配列にどんどん追加
        brushCollection.push( new Brush( 'Red', 5, 0xFF0000 ) );
        brushCollection.push( new Brush( 'Blue', 5, 0x0000FF ) );
        brushCollection.push( new Brush( 'Green', 5, 0x00FF00 ) );

        //  ランダムにブラシを決定する
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];

        //  背景を作る
        background = new Background();
        background.buttonMode = true;
        background.width = stage.stageWidth;
        background.height = stage.stageHeight;
        background.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        background.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( background );

        //  カンバスを作る
        canvas = new Canvas();
        canvas.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        canvas.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( canvas );

    }

    /**
    * マウスを押した場合
    * 線を描く準備
    * @param    e
    * @return
    */
    protected function onCanvasMouseDownHandler( e:MouseEvent ):void {
        trace( 'draw start' );
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];
        canvas.graphics.lineStyle( brush.thickness, brush.color, 1 );
        canvas.graphics.moveTo( mouseX, mouseY );
        canvas.addEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを放した場合
    * 線を描くの終わり
    * @param    e
    * @return
    */
    protected function onCanvasMouseUpHandler( e:MouseEvent ):void {
        trace('draw finish');
        canvas.graphics.endFill();
        canvas.removeEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを押している間
    * 線を描き続ける
    * @param    e
    * @return
    */
    protected function drawingHandler( e:Event ):void{
        trace('drawing');
        canvas.graphics.lineTo( mouseX, mouseY );
    }
}

} [/js]

感想

ふーん、実に簡単。 気分が乗ったら、Flexのコンポーネントにするくらいの事をしてみたい。 最近Flexばかりだったけど、素のActionScript3ってのも漢らしくていいなと最近思う。

ダウソ

ソースファイル

まず何も考えずに僕が試した方法は、以下の通り。 Flash8の感覚でやると、こうではなかろうか？

間違った方法

[js] import flash.text.*;

// テキストフォーマットを作成 var format:TextFormat = new TextFormat(); format.size = 30; //フォントをリンケージ名で指定する format.font = ‘MyFont’;

// テキストフィールドを作成 var field:TextField = new TextField(); field.defaultTextFormat = format; field.embedFonts = true; field.antiAliasType = AntiAliasType.ADVANCED; field.text = ‘テスト’;

// ステージに配置 addChild( field ); [/js]

そして、ライブラリに「新しいフォント」シンボルを作る、 埋め込むフォントを指定して、リンケージを設定だ。

これでコンパイルすると、フォントが表示されません。。

調べた

で、調べてみるとあった。

Font embedding problems in Flash CS3 IDE

ざっくりと呼んでみると Font.enumerateFonts()で埋め込んだフォントを調べてみると フォントの名前がリンケージ名じゃないから TextFormat.fontでリンケージ名を指定しても、フォントが見つからないって寸法だ。

やってみた

それを回避するための方法が以下

[js] //FontクラスのサブクラスMyFontからフォント名を取得 format.font = new MyFont().fontName; [/js]

できた！

ライブラリにフォントシンボルを作って、リンケージを指定するときに ベースクラスがflash.text.Fontだった事に気づいていると思う。 CS3では、リンケージ名=クラス名だから、クラスのインスタンスプロパティを使ってあげれば良いという事になる。

はてブで注目エントリーになってた。 僕が登録した時にはまだ１桁だったのだが、RailsとAIRのお手軽な組み合わせに注目している人が多いという事の表れか？

scaffold_resourceなんて知らなかったなぁ。

そろそろAIRとRoRでなんか作っておかないと時代に乗り遅れると思いつつ。 おもしろいもん作ろうと思って、始める前から挫折している自分ガイル。

やっぱ付箋くらいが妥当だよな。