2BLOG

titaniumのWebViewに配置したcanvasに描いたイメージをファイルに保存する方法。
ユーザーにcanvasで何かを描かせたらそのデータをファイルに保存したいことも多いはず。作文メーカーを作った時に調べたところWebViewの中のcanvasとtitaniumでデータを受け渡す方法が2つありました。

1.htmlファイル（canvasタグを書いたhtmlファイル）のJavaScriptでTitanium.App.fireEventでイベントを送信しイベントオブジェクトにcanvasのデータを添付する。

2.titaniumのjsからWebViewのevalJSメソッドを使って、htmlファイルに書いたcanvasのデータをreturnするJavaScriptを実行する。

作文メーカーでは2の方法を使っています。
まず、canvasでイメージデータに変換するにはtoDataURL() メソッドを使います。
以下のページを参考にしました。

toDataURL() メソッド – Canvasリファレンス – HTML5.JP

一つ問題があります。
toDataURL();
の戻り値はbase64でエンコードされた文字列なのですが、その先頭にmimetypeが含まれるようです。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....

titaniumでファイルに保存する場合、このmimetypeが後々問題になりますので、どこかの段階で削除します。今回はtoDataURL()を実行した直後にreplaceで文字列から削除することにしました。最初の,以前を削除して以下のようなデータに整形します。

iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....

この処理をまとめたのが以下の関数です。

function output(){
	var cvs = document.getElementById( "stage" );
	var src = cvs.toDataURL("image/png").replace(/^.*,/,'');
	return src;
}

この関数をtitaniumから実行して戻り値をファイルに変換します。
データをデコードしてファイルに書き込めば完了です。デコードするときにmimeTypeがあるとうまくいかないので削除しておく必要があったという具合でした。

var result = webview.evalJS("output();");
var base64 = Titanium.Utils.base64decode(result);
var file = Titanium.Filesystem.getFile( Titanium.Filesystem.tempDirectory, "_TEMP_.png" );
file.write( base64 );

先日リリースしたオリジナルアプリ作文メーカーでは、ユーザー操作で描く文字の描画にCanvasを使っています。
titanium mobileでは描画APIが標準で用意されていない為、WebViewをつかってCanvasで代用した形です。僕はCanvasを使うのはこれが初めてでしたので、実装をCanvasでなく正攻法でいって描画系のモジュールを使うなどでも同じように1からだったのですが、Canvasでもそれなりにパフォーマンスが出るようだし、やはり僕のようなWeb系のデベロッパー/デザイナーにはWebの技術を使ったほうが間違いや不安も少ないと思ったので。今回のは単純な使い方だったしね。

このCanvasを使うにあたって疑問がありました。Ratina Display（640×960）の機種と通常ディスプレイ（320×480）の機種で使いわける必要があるのか？具体的にはキャンバスのサイズはどちらに設定すればいいのか？という点。開発時点ではRatina Displayの確認環境がなかったので、かなり疑問でした。

もう一つ、今回はアプリで使うデータになるので、Canvasで描いたものをtitaniumに渡さなくてはいけない。これできるの？という点。

結果的にどちらも疑問は解消したのですが、初めてってこともあって右往左往と調べたりしたので2回に分けてメモしておきます。参考になる方もいるかもです。

とりあえず今回は前者の疑問、サイズの問題。これをCanvasに解像度を設定すると題して説明します。

(続きを読む…)

これよりもっと手前でコールバック関数に別のものを指定するなどでもよいですが、なるべく元のソースを変更せずリダイレクトするならprogression_unpack.jsの以下の部分を修正すればいいと思う。

progression_unpack.js

var complete = function( e ) {
	$p( $( "disabled_javascript" ), { style:{ display:"none" } } );
 
	if ( e.success ) {
		$render( config );
 
		var target = d.getElementById( config.attributes.id );
 
		if ( target ) {
			target.style.outline = "none";
			target.focus();
		}
	}
	else {
		//ここに追記
		window.location = 'リダイレクト先のURL';
		$css( "#" + config.htmlContentId, { display:"block" } );
	}
};

上の部分の修正をしてprogression.jsとして使えばOK。
このJavaScriptによる実行（JavaScriptによる判定、expressinstall.swf実行結果の正否）なので、JavaScript自体が無効の場合、リダイレクトしない。なのでリダイレクトの場合もhtmlにリンクを設置しておくべきでしょう。

5.0.1になって、この間の画面が溶ける現象がなおったと思ったら、こんどはSWFAddressが効かなくなったような気が…。いい加減にしてほしい。

直リンクはOKですけど、ブラウザの戻る進むの時反応しなくないですか？俺だけ？
http://www.asual.com/swfaddress/samples/flash/

バージョン 5.0.1 (6533.17.8)

このブログでも使っている、Shadowbox.jsというLightBox系Ajaxライブラリについて。
Shadowboxでは、グループ化した時、カウンタが表示されます。このカウンタは「 1 of 10 」のような表記。だけどあまり、この「 of 」って表記をデザインで使うことなくないですか？
大体、1 / 10 みたいな。スラッシュを使うんじゃないかと。こっちの方がスマートに見えるし。

そこで、このofを変えたいと思ったのですが、この表記は公式サイトにあるAPIやOptionには記載が無かった。しょうがないので、中身をみてみたらありました。 S.langってオブジェクトの中です。

S.lang = 
{
	 code : "en", of : "of", loading : "loading", cancel : "Cancel", next : "Next", previous : "Previous", 
	 play : "Play", pause : "Pause", close : "Close", errors : 
	 {
	     single : 'You must install the <a href="{0}">{1}</a> browser plugin to view this content.', 
	     shared : 'You must install both the <a href="{0}">{1}</a> and <a href="{2}">{3}</a> browser plugins to view this content.', 
	     either : 'You must install either the <a href="{0}">{1}</a> or the <a href="{2}">{3}</a> browser plugin to view this content.'
	 }
};

このオブジェクトのofの値が表示されてるっぽい。SはShadowboxのショートカットなので、

Shadowbox.lang.of = "/";

のようにして、表記を変更できます。

前々回のエントリー「SWFMacMouseWheelで気づいたこと」ですが、preventDefault()の制御を試してみました。

(続きを読む…)

JavaScriptとFlashのやり取りにExternalInterfaceを試しました。

サンプル

リファレンスによるとFlash 8から実装されていました。
FlashからJavaScriptもJavaScriptからFlashも自由度が高く操作できます。

fsCommand()を過去に利用したことがあったのですが、fsCommandはMacのブラウザに非対応だったので、FlashとJavaScriptの通信を積極的に使ったことがありませんでした。
ExternalInterfaceならそれほど環境を気にしなくてよいので使えそうです。
Flashのアニメーションにあわせてブログの見た目を変更するとか出来そう。

詳しい使い方はFlashのリファレンスを参照。
FlashからJavaScriptへ通信する場合以下みたいな感じです。使い方は簡単です。

ActionScript

ExternalInterface.addCallback( " test " , testFunc);

JavaScript

document.getElementById(" flashのID ").test();

swfmacmousewheel2.jsを読んでみて気づいたこと。
(続きを読む…)

既に多くの方が書かれていますが、FlashでMacのホイールマウスを検知するクラスをPIXEL BREAKER. さんが公開しています。これを試した覚え書きです。

(続きを読む…)