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 and it worked!

Oh…ビンゴ。。
Titanium Studioのメニューから[Project]-[Clean]した後で実行すると動きました!
ビルド周りのところで変更が見落とされているのか、毎回Cleanしないと反映してくれないようです。
#しかしクリーン→ビルドがものすごく遅い。。

これでブラウザで動作確認したenchant.jsアプリがそのままで(Androidエミュレータ上で)動くようになりました!
ただし、外部のCSSファイルは前回みつけた情報のとおり、linkタグではなく、import文で読み込む必要があります。

Local CSS not used in Local HTML Webview » Community Questions & Answers » Appcelerator Developer Center

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 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である必要があるようです。

以上です。

タグ: , , , ,

TrackBack