http://developer.appcelerator.com/

Titaniumはとっても生産性が上がる素晴らしいツールなんですが 使っていくうちに、もう少しOOPっぽく楽に書きたいなと思うようになりました。

そのひとつの回答として「CoffeeScript」を使うというのがあるんですけど

CoffeeScriptを使ったTitanium Mobileアプリケーション開発

http://d.hatena.ne.jp/donayama/20110107/titanium_with_coffeescript

Objective-Cを生成するためのJavaScriptを生成するためのCoffeeScriptを書く というところに、どうしても抵抗があります（何をいまさら・・）。

複数人で、しかも学習しながら開発をしようと考えているので リファレンスやサンプルを一度CoffeeScriptに翻訳するというプロセスは 結構きついだろうと思いました。

そこでmootoolsを使います。

http://mootools.net/

mootoolsにはサーバサイド用のmootools-serverというのがあるので、それを使いましょう。

http://mootools.net/download

こんな感じでクラスベースにコードを書いていくことができます。

Titaniumに適したJSライブラリを探している方、お試しアレ。

CM

僕が最近起こした会社FoodFotoでは、エンジニア、デザイナーを募集しています。

サーバインフラに強い方、Railsに詳しい方、TitaniumでiPhone開発したい方、iPhoneやWebサービスのデザインをしたい方、などなど募集中です。一緒に世界をめざそーぜ。

興味あるという方がいらっしゃいましたら、@func09 か haga@foodfoto.jp 宛にご連絡ください。

多分日頃から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の署名リクエストが使えるので、通信にセキュリティを保証したい場合は有効だと思う。

こんな感じで。 しかし文字リテラルの挙動が期待と違っていました。

ちょっと待ってほしい。 文字リテラルも文字列クラスのインスタンスですよー、なんて解説をしようと思ってたのに これじゃぁ、文字リテラルはStringオブジェクトじゃないという事になってしまう。

事実として

というコードが実行できるのだから、文字列リテラルがStringオブジェクトじゃないと話が合わない。だってsubメソッドはStringのインスタンスメソッドじゃないか！

結論

答えはここにありました。

Literals – MDC（文字列リテラル）

String Object – MDC #文字列リテラルは String オブジェクトとは別物

文字列リテラルの値でなら、String オブジェクトのどんなメソッドでも呼び出すことができます。JavaScript が自動的に文字列リテラルを一時的な String オブジェクトに変換し、メソッドを呼び出し、その一時的な String オブジェクトを破棄するのです。String.length プロパティを文字列リテラルで使うこともできます。

という事なんですって。

つまり、文字列リテラルの状態では確かにStringのインスタンスではないけれど、メソッドを呼び出す時はJavaScriptがStringオブジェクトに変換していると。なるほど。

ちなみにこのエントリーの内容はMozilla FireFoxでしか試していませんし、Mozillaのサイトでしか結論を見つけていませんので、他のブラウザでどうなのかは一切調べてませんので悪しからず。誰か暇な人は調べてトラバください。

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

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

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

こう使います。

スコープを渡さないで実行すると、コールバックのスコープはイベント自身なんだけど クラス内で$.ajaxを使いたい場合なんかは不都合ですんで。

時間があれば、さくっとプラグインにしておきたいけど プラグインにするほどのコード量じゃないし、 プラグインは別ファイル化するのが一般的だから、いちいち面倒くさいし。

ちなみに、これはActionScriptでいうところの mx.utils.Delegate.createと全く同じ機能ですね。

SVNからチェックアウト

必要なライブラリをgemでインストール

libfreeimage-3.10.0.dylibをlib以下に移動

DBを初期化

サーバを起動

確認

http://127.0.0.1:3000

どの入力フォームにもフォーカスしていない場合 nとpで特定の処理を実行するサンプル

このFLV版を作るのは結構容易いだろうなぁと思った。 最近特に何もしてないし 比較的FLVとExternalInterfaceは得意だから作ってみようかなぁと。

AS3.0でFLVを再生するくらいのスクリプトなら、５分もあれば書ける。ていうか書けた。

基本的なUIをHTML側にやらせて、 それをFlashに以上するだけだから

[js] flv = new FlvJS(); $(‘flvplayer’).apendChild(flv); flv.play(‘hoge.flv’); [/js]

てなJSを書いたら ExternalInterface経由で、そのままNetStreamに委譲すればいいわけだ。 あと基本的なイベントのコールバックも受け取れるようにすれば。

そういうのは、eyevioで何回も設計実装してるから作れるぞ。 むしろそのまま採用して欲しいくらいだぞ。

ま、問題は作る時間があるかって話だね。ははは。

最近はまったく忙しくて、全然勉強する時間もありゃしません。

弊社の人が作ったJavaScriptでトグル処理をするソースコードがメールで流れてきて それに触発されて、自分もいろいろ書いてみて、社内でシェアしたものをうｐします。

まるごとJavaScriptを見ていて、クロージャっていいよね。という気分だったので クロージャをおさらいしてみました。 トグル処理の様々な実装方法テスト in JavaScript

最終的なソースコードはこんな感じになったよ。

[js]

/** * オブジェクトを継承する（Objectを汚染拡張 from prototype.js） * @param destination 拡張されるオブジェクト * @param source 雛形オブジェクト */ Object.mixin = function( destination, source ){ for (property in source) destination[property] = source[property]; return destination; }

/** * トグル可能な要素を表すクラス */ var TogglableElement = function(){}; TogglableElement.prototype = { flag:true, resultTarget:undefined, toggle:function(){ this.flag = !this.flag; }, update:function(){ this.resultTarget.innerHTML = ( this.flag ) ? ‘ON’ : ‘OFF’; }, onmouseup:function(){ this.toggle(); this.update(); } };

/** * 初期化 * イベントハンドラはHTML内ではなく、スクリプト内で定義 */ function init(){

/* オブジェクト拡張方式 */ var btn1 = document.getElementById(‘btn1′); var btn2 = document.getElementById(‘btn2′);

// ボタン要素をトグラブルオブジェクトに拡張する Object.mixin( btn1, TogglableElement.prototype ); Object.mixin( btn2, TogglableElement.prototype );

// 出力先を定義する btn1.resultTarget = document.getElementById(‘result1′); btn2.resultTarget = document.getElementById(‘result2′);

/* クロージャ渡し方式 */ document.getElementById(‘btn3′).onmouseup = getToggleClosure( document.getElementById(‘result3′) ); document.getElementById(‘btn4′).onmouseup = getToggleClosure( document.getElementById(‘result4′) );

/* ソースコードの表示トグル */ document.getElementById(‘viewsource-a’).onclick = getToggleClosure2( document.getElementById(‘sourcecode-a’), viewSourceCode ); document.getElementById(‘viewsource-b’).onclick = getToggleClosure2( document.getElementById(‘sourcecode-b’), viewSourceCode ); document.getElementById(‘viewsource-c’).onclick = getToggleClosure2( document.getElementById(‘sourcecode-c’), viewSourceCode ); }

/** * トグル処理＆DOM操作のクロージャ関数を返す * １つの関数を各所で使い回せるようにクロージャ化する * @param target HTMLElement 内容を書き換えるHTML要素 */ function getToggleClosure( target ){ var flag = true; // フラグ。レキシカルスコープ内に保持 var target = target; // ターゲット。レキシカルスコープ内に保持 return function(){ flag = !flag; // フラグを逆転 target.innerHTML = ( flag ) ? ‘ON’ : ‘OFF’; // flag==trueならON }; }

function getToggleClosure2( target, callback ){ var flag = true; var target = target; var callback = callback return function(){ flag = !flag; // フラグを逆転 callback.apply( this, [ target, flag ] ); }; }

function viewSourceCode( target, flag ){ this.innerHTML = ( flag )? ‘ソースコードを表示する’ : ‘ソースコードを隠す’; target.style.display = ( flag )? ‘none’ : ‘block’; }

/** * window.onloadにリスナーを貼る */ if( /msie/.test(navigator.userAgent.toLowerCase()) ) window.attachEvent( ‘onload’, init ); else window.addEventListener( ‘load’, init, true );

[/js]

サンプルはここです。

忙しくて全然手を付けられないや。

Canvasを使ったグラフライブラリはいくつかあるけど グラフ以外にCanvasの良い利用法って何かねぇ・・・。 全然思いつかないや。 今回作ったサンプルは、AS3で言うところのSpriteクラスの感覚で Canvasを扱うためのクラス。

[js] var stage = new Sprite(); stage.width = 600; stage.height = 400; stage.beginFill( 0xCCCCCC ); stage.drawRect( 0, 0, 400, 400 ); stage.clearRect( 10, 240, 20, 20 ); stage.beginFill( 0xFF0000 ); stage.drawCircle( 100, 100, 100 );

var s2 = new Sprite(); s2.x = 100; s2.y = 100; s2.beginFill( 0x0000FF ); s2.drawRect( 0, 0, 180, 180 ); s2.beginFill( 0x00FF00 ); s2.drawCircle( 160, 10, 40 ); stage.addChild( s2 ); document.getElementById(‘canvas’).appendChild( stage ); [/js]

こんな感じで使います。

今見てみると、Spriteクラスっていうより flash.display.Graphicsクラスじゃないか・・。 [js] function Sprite(){ this.__element = document.createElement(‘div’); this.__element.style.position = ‘relative’; for( var prop in Sprite.prototype ){ this.__element[prop] = Sprite.prototype[prop] } this.__element.initialize(); return this.__element; }

Sprite.prototype = { initialize:function(){ this.__color = 0×000000; this.__canvas = document.createElement(‘canvas’); this.__canvas.style.position = ‘absolute’; this.__context = this.__canvas.getContext(’2d’) || undefined; this.appendChild( this.__canvas ); this.x = 0; this.y = 0; this.width = 0; this.height = 0; this.watch( ‘x’, function( i, o, n ){ this.__canvas.style.top = n } ) this.watch( ‘y’, function( i, o, n ){ this.__canvas.style.left = n } ) this.watch( ‘width’, function( i, o, n ){ this.__canvas.width = n } ) this.watch( ‘height’, function( i, o, n ){ this.__canvas.height = n } ) }, beginFill:function( color ){ this.__color = color || 0; var r = ( color >> 16 & 0xFF ); var g = ( color >> 8 & 0xFF ); var b = ( color & 0xFF ); r = ( r > 0×10 ) ? r.toString(16) : ’0′.concat( r.toString(16) ); g = ( g > 0×10 ) ? g.toString(16) : ’0′.concat( g.toString(16) ); b = ( b > 0×10 ) ? b.toString(16) : ’0′.concat( b.toString(16) ); this.__context.fillStyle = ‘#’.concat( r, g, b ); }, drawRect:function( x, y, width, height ){ //this.__resize( x+width, y+height ); this.__context.fillRect( x, y, width, height ); }, clearRect:function( x, y, width, height ){ this.__context.clearRect( x, y, width, height ); }, drawCircle:function( x, y, radius ){ //this.__resize( x+radius, y+radius ); this.__context.beginPath(); this.__context.arc( x, y, radius, 0, Math.PI*2, false ); this.__context.fill(); }, drawEllpse:function( x, y, width, height ){

}, addChild:function( sprite ){ this.appendChild( sprite ); }, __resize:function( w, h ){ if( this.__canvas.width < w || this.__canvas.height < h ){ this.__canvas.width = w; this.__canvas.height = h; this.beginFill( this.__color ); } } } [/js]