2013年1月11日

最新版のMonacaデバッガー/FWの状況

お久しぶりです。斉藤です。

今回、Monaca デバッガー/FW側のリリースを行い、以下のような修正がされました。
その詳細について（技術的な内容も含めて）お伝えします。

・テンプレートエンジンの廃止
・iOS版のデバッガーにクラッシュレポート機能追加
・ログの強化
・iOSでのネットワークインストール機能の再実装

* テンプレートエンジンの廃止

これについては、以前のブログでも言及されています。http://blog.asial.co.jp/1121
開発当初からの機能の一つであったテンプレートエンジンが外れることになりました。
これによって、テンプレートエンジンのシンタックス"{{", "}}"と競合するJSライブラリー（AngularJSなど）の使用が可能になりました。
また、iOS版でhistory系の関数が正しく動作する（後述参照）ようになりました。

ここでは、それぞれのプラットフォーム別にその実装状況について触れてみたいと思います。

Android：
実は、テンプレートエンジンを処理していた際のloadDataと呼ばれる実装を残しています。
なぜかというと、Androidではhistory系の関数がこの実装上でも動作し、これをloadUrl方式に変更することで、monaca.queryParamsの実装で制限がかかることが分かっているためです。
そのため、loadData方式を採用したままになっています。

iOS：
こちらでは、テンプレートエンジンを処理していた際のloadHTMLStringという実装ではなく、loadRequest形式に変更しました。Android版でmonaca.queryParamsの実装に制限がかかると記述しましたが、その問題をiOS側では解決できているためです。
loadRequestという実装によって、WebViewが履歴を残すようになりましたので、これによってhistory系の関数が動作します。

補足読み込み方式の違いについて

・loadData, loadHTMLString形式
htmlのソースコードを読み込み、WebView上に表示する。Monacaでは、そのhtmlのソースコードを読み込む前に、テンプレートエンジンという独自の機能で処理を行っていた。

・loadUrl, loadRequest形式
ソースコードを直接読み込むのではなく、指定したURLをWebViewが読み込む方式。
ブラウザがWebページを表示するための一般的な方法。

* iOS版のデバッガーにクラッシュレポート機能追加

クラッシュレポートという言葉はAndroidアプリケーションを触っている方なら、ご存知の方も多いと思います。
アプリケーションがクラッシュした際に、そのログを開発者に送る機能です。
iOS版でも、その機能があることにはあるのですが、iTunes経由になるため、あまり送られていないのが現状です。
そのため、デバッガーの機能として実装を行いました。

独自の実装という訳でなく、QuincyKitというライブラリーを組み込んでいます。
http://quincykit.net/

デバッガーがクラッシュした場合、次回ログインした際にクラッシュレポートを送るかどうかのダイアログが表示されます。
こちらで、"はい"を選択しますと、我々の方にそのクラッシュした際の情報が送られます。
"いつも"を選択しますと、ダイアログを表示すること無くログを送りますので、表示が邪魔な方はこちらを選択してください。

このライブラリーはオープンソースになっていますので、iOSネイティブアプリケーションの開発をされている方におすすめです。
https://github.com/TheRealKerni/QuincyKit

* ログの強化

IDEを開いた際に、デバッグログというパネルがあるのはご存知でしょうか？

こちらには、


・プロジェクトのエラーや警告
・何らかのアクション（ページを開く、プロジェクトを起動する、コンテンツを読み込むなど）を行った際のログ

などが、デバッガーから送られています。

今回これに加えて、デバッガーというアプリケーション自体が出すログも送るような修正を加えました。
なぜこのような機能が必要かというと、PhoneGapを組み込んでいることがその理由の一つにあたります。
Monacaでは開発の際に、デバッガーやPhoneGapが出すエラーを確認することは困難でした。
そのため、JS側の問題なのか、デバッガー側の問題なのかを悩みつつ開発された方も多くいらっしゃるかと思います。

デバッガーというアプリケーションが出すログをIDEに送ることにより、どういう問題が起きているかを確認しやすくなりました。問題が生じた際は、ぜひこのログをご確認いただき、フィードバックいただけますと幸いです。

補足デバッグログについて

ログはそれぞれレベルを持っています。


・デバッグ：デバッガーが何らかの動作をしたというログや、通常では必要の無いログ（コンテンツを読み込むときなど）
・ログ：console.log APIや、AndroidのLog.iによって送られるログ
・警告：動作を止めるほどではないが、何らかの不都合がある記述によって引き起こされた問題であるというログ（存在しないコンテンツを読み込もうとした場合など）
・エラー：開発中のアプリケーションが動作しなくなるような問題であるというログ（存在しないページを表示しようとした場合など）

という様々なレベルのログが、デバッガーからIDEに送られています。
これを確認することで、デバッガーがどういう処理をしているのか、どういうエラーを捕捉したのかを確認することが出来ます。