Monacaのプレビューを使う際のTips
最近Monacaをハンズオンで使っています。開発環境を用意せず、ブラウザさえあればすぐに動くものが作れるというのは大きなポイントになります。
しかし普段の開発環境とは異なる分、詰まってしまうこともあるようです。そこで今回はMonaca IDEを使った開発において注意して欲しいポイントを紹介します。
Webブラウザとスマートフォンアプリでのイベントの違い
WebブラウザでjQueryなどを使った開発を行っている時に、 $(function() {}) をよく使うかと思います。これはDOMの構築などが終わり、JavaScriptを安全に実行できるようになった状態で呼び出されます。しかしMonaca（Cordova）アプリの場合、さらにプラグインの読み込みなども完了しなければ安全に開始できません。それは deviceready というイベントになります。ただしこのイベントはWebブラウザでは実装されていないので、Monaca IDEのプレビューでは使えません。
そこで次のようにコードを書くと便利です。
function onDeviceReady() {
alert("読み込まれました");
}
var event = typeof cordova === 'undefined' ?
'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);
これはWebブラウザの場合はDOMContentLoaded、スマートフォンアプリの場合はdevicereadyをイベントリスナーに設定する指定です。iPhone/iPad/Androidの区別だけではスマートフォンのWebブラウザ判別には使えませんので、Cordovaアプリに特有のグローバル変 数であるcordovaがあるかどうかを判定に使っています。これでプレビューの場合も確認が容易になります。
このテクニックはclickイベントとtapstartイベントを分ける際にも使えます。スマートフォンにおけるclickイベントは若干の遅延があるので、tapstartを積極的に使っていくべきなのですが、Monaca IDEのプレビューでは反応しなくなってしまいます。そこで処理分けすることでどちらでも動作する、かつ最適な動作が期待できるようになります。
リモートファイルを読み込む場合の注意
同様にMonaca IDEのプレビューではリモートファイルを読み込むのに制限（CORS）があります。そのため、スマートフォンアプリとして外部のXMLやJSONを読み込む場合、同じファイルをMonacaプロジェクト内にも用意して、プレビューの時にはそのファイルを読み込むようにしましょう。処理分けは上記と同じ仕組みが使えます。
自社のアプリで、サーバと通信するといった場合にはCORSの設定を行っておけば問題ないでしょう。
JavaScriptエラーの確認の方法
Monaca IDEにはコンソールが表示されているので、プレビューで起こっているエラーも確認できるかと思ってしまう方がたくさんいます。しかしこれはMonacaデバッガー用のエラー表示になるので、プレビューのエラーは出ません。
そこでエラーの確認方法なのですが、プレビューのアプリの画面相当部分を右クリックします。そして出てきたコンテクストメニューで要素の 検証であったり、検証といったDevToolsが開くメニューを選択します。これ以外の方法ですと、プレビュー全体であったり、Monaca IDEを対象としたDevToolsが開いてしまいますので注意してください。
DevToolsが開けば、コンソールを見てエラーメッセージが確認できます。なお、時々保存忘れというケースもありましたので、ちゃんとファイル保存されているかも確認してください。
プレビューはHTMLファイルを開いている時以外には表示されません
プレビューはあくまでもHTMLファイルを編集している場合に限って右側に表示されます。JavaScriptやCSSなどを編集中に確認する場合は別ウィンドウとして表示されるので注意してください。なお、別ウィンドウの場合でもファイル編集後のリロードは自動的に行われます。
こうした点に注意すると、初学者の方であってもMonaca IDEを使ったアプリ開発がスムーズに開始できるかと思います。特にプレビューをうまく使えばデザインや動作確認が素早く行えるようになります。ぜひお試しください！
