‘JavaScript’ カテゴリーのアーカイブ

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 );

カテゴリー JavaScript, Titanium | 0 件のトラックバック | 0 件のコメント »

Canvasに解像度を設定する

2011 年 4月 20 日水曜日 kosuke

先日リリースしたオリジナルアプリ作文メーカーでは、ユーザー操作で描く文字の描画に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に解像度を設定すると題して説明します。 (さらに…)

カテゴリー JavaScript, Titanium | 0 件のトラックバック | 0 件のコメント »

ProgressionでFlash Player判定後、無かったらリダイレクトする場合。

2011 年 2月 9 日水曜日 kosuke

これよりもっと手前でコールバック関数に別のものを指定するなどでもよいですが、なるべく元のソースを変更せずリダイレクトするなら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にリンクを設置しておくべきでしょう。

カテゴリー JavaScript, Progression | 0 件のトラックバック | 0 件のコメント »

Safari…

2010 年 8月 10 日火曜日 kosuke

5.0.1になって、この間の画面が溶ける現象がなおったと思ったら、こんどはSWFAddressが効かなくなったような気が...。いい加減にしてほしい。直リンクはOKですけど、ブラウザの戻る進むの時反応しなくないですか？俺だけ？ http://www.asual.com/swfaddress/samples/flash/ バージョン 5.0.1 (6533.17.8)

カテゴリー Flash, JavaScript, SWFAddress | 1 件のトラックバック | 0 件のコメント »

Shadowbox.js カウンタの表記

2010 年 6月 11 日金曜日 kosuke

このブログでも使っている、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 = "/";

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

カテゴリー JavaScript | 0 件のトラックバック | 0 件のコメント »

2BLOG