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

CreateJSでロモウォールを作る

2014 年 7月 26 日 土曜日 kosuke
1年4ヶ月ぶりのブログ更新。

CreateJSのcacheでピクセル操作

2013 年 4月 8 日 月曜日 kosuke

Flickr API + CreateJS :: interesting photograph

2013 年 4月 2 日 火曜日 kosuke

ExtendCreateJS

2013 年 4月 2 日 火曜日 kosuke

jsdo.it 回転扉風ギャラリー

2013 年 2月 18 日 月曜日 kosuke

Canvasから画像書き出ししてTitaniumに渡す

2011 年 4月 21 日 木曜日 kosuke
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に解像度を設定する

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に解像度を設定すると題して説明します。 (さらに…)

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にリンクを設置しておくべきでしょう。

Safari…

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

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 = "/";
のようにして、表記を変更できます。