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

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

(さらに…)

iPhoneアプリ 作文メーカー

2011 年 4月 17 日 日曜日 kosuke

手書きで作文を書くアプリを作りました。作文を原稿用紙の画像ファイルに書き出せます。「ひらがなれんしゅうちょう」や「カタカナれんしゅうちょう」で文字を練習して作文を書こう。

作文メーカー - nipx





無料版もあります。無料版は原稿用紙にニピクロゴの透かしが入る以外、有料版と同じです。

作文メーカー FREE版

作文メーカー FREE版 - nipx

無料版は原稿用紙にロゴの透かしが入るよ。

iPhoneアプリ Design Clock TOKINOWA をリリースしました。

2011 年 2月 18 日 金曜日 kosuke

待ち受けFlashで人気のあった作品「刻ノ環」をiPhoneアプリにしました。卓上時計としてご利用いただけます。無料です。

TOKINOWA - nipx



この作品はTitanium Mobileを使って作りました。
Titanium MobileはJavaScriptを使ってiPhone、Android向けアプリを作る開発環境です。ティスクトップ向けアプリを作る為の環境もあります。

Flasher目線でみるとAdobe Airと思いっきり競合するわけですけど、iPhoneに関していえばほとんど全てのデバイス機能にアクセスするAPIが備わっており、UIKitを利用できる点でも現状のpackager for iphoneにない魅力があります。開発元のAppceleratorがAptanaを買収し今春にTitaniumとAptana Studioの統合製品をリリース予定など今なかなか注目を集めています。

今回はTitanium Mobileを試す、学習目的で作ってみました。
待ち受けで使ったデザインやリソースがありシンプルな時計アプリですので、Titanium Mobileのごく一部の機能を利用したのみですが、Titanium Mobileをダウンロードする時点からはじめて1日後にはほぼ仕上がっていました。もちろんその後こまかなバグフィックスに時間をようしましたけども。

使ってみてTitanium Mobile自体に不安定さがまだ残っているようにも感じましたが、学習コストが低く、アプリによってはかなり効率的な開発ができそうで、今後も楽しみな環境だと思います。