Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
Monaca
お久しぶりです。斉藤です。

今回、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を開いた際に、デバッグログというパネルがあるのはご存知でしょうか?



こちらには、
  1. ・プロジェクトのエラーや警告
  2. ・何らかのアクション(ページを開く、プロジェクトを起動する、コンテンツを読み込むなど)を行った際のログ
などが、デバッガーから送られています。

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

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

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



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

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



* iOSでのネットワークインストール機能の再実装



デバッガーからビルドしたアプリケーションをインストール出来る機能です。
諸事情によりiOS版では廃止しておりましたが、今回のリリースよって使えるようにしました。
ただし、IDEでビルドしたデバッガーのみに限られますので、その点はご了承ください。







* 終わりに



この記事では、新しくリリースされたMonacaデバッガー/FWの詳細をお伝えしました。
また、その他フィードバックをいただいたバグの修正を今回行っております。
どうぞ、新しくなったMonacaデバッガーをお使いください!

コメント

  • ttktktktkk

    Monaca Debuggerについての質問なのですが、
    iframeタグはリンク先が相対パスだとうまく動作しませんか?
    yahoo.co.jpとかだとうまくいくのですが、相対パスを指定すると、iframeの中が全画面表示になります。

    debuggerのバージョンは、1.6.2で、andorid版です。

    よろしくお願い致します!

  • Monaca

    ttktktktkk様

    <iframe src="hoge.html#embed">
    のように、相対パスの後ろに「#emdbed」をつけてお試しいただけますでしょうか。

    よろしくお願いします。

  • ttktktktkk

    #embedと入れると、「問題が発生したため、Monaca Debuggerを終了します。」となります。。
    <iframe id="hogeFrame" src="hoge.html#embed" frameborder="0" scrolling="no"></iframe>

  • Monaca

    ttktktktkk様

    ご返信ありがとうございます。
    状況を詳しく教えていただきたいので、下記お問い合わせページから、再度ご連絡いただけますでしょうか。
    https://monaca.mobi/page/contact

    お手数をおかけしますが、どうぞよろしくお願い致します。

  • bbicycle

    Monaca Debuggerについて質問です。

    他のサーバーで作成したwebアプリを
    monacaのwebビューワをつかってiframeで表示し、jQuery PHP等を利用しようとしています。
    Webブラウザ上ではうごいているのですが、monacaで表示した際に以下のエラーが表示されます。

    (in http://ajax.googleapis.com/ajax/libs/jquery/1/jqyery.min.js:4)

    これはWebアプリ上でつかっているjQueryを読み込めないというエラーでしょうか?
    またどうすれば、jQueryをiframe内で利用できるでしょうか?

    よろしくお願い致します。

  • Monacaサポート

    bbicycle様

    コメントありがとうございます。

    >(in http://ajax.googleapis.com/ajax/libs/jquery/1/jqyery.min.js:4)
    これはMonacaデバッガーがエラーでない箇所もエラーとして出力していることにより
    発生します。弊社が調査したところ、挙動に問題はございませんので
    よろしくお願い申し上げます。

  • bbicycle

    返信ありがとうございます。

    ということは、エラー表示を無視して
    動きに問題なければそのまま構築しても問題ないと言う事でしょうか?

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事