デバッグ

以下のセクションでは、Wikitude SDKのJavaScript APIを使用してARchitect Worldを記述するための基本的な開発ワークフローについて説明します。コーディング、テスト、デバッグのサイクルに関して、各ステップに関する有用な情報を提供します。

  1. 任意のエディタを使用してHTML、JavaScript、およびCSSを記述します。
  2. デスクトップブラウザでテストします。
  3. Web Inspectorなどを使用してデスクトップブラウザでデバッグします。
  4. デバイス上でテストします。
  5. デバイス上でデバッグします。
  6. 上記を繰り返します。

ARchitect Worldの記述には任意のエディタを使用できます。お勧めは、Web開発者向けの便利なプラグインを備えたSublimeです。

次のステップはデスクトップブラウザでコードをテストすることです。Wikitude SDKのJavaScript APIをデスクトップブラウザで使用できるようにするには、ARchitect Desktop Engine(ADE)をインクルードします。ADEの使用方法については、「ARchitect Desktop Engine」のセクションを参照してください。これは拡張現実の可視化に限定されていますが、JavaScriptコードのエラーを見つけるのに役立ち、HTMLやCSS部分に加えた変更の影響を確認する時間を短縮できます。デスクトップブラウザには便利なデバッグツールが付属しており(例: Chromeのデベロッパーツールなど)、これらを使用してJavaScriptコードやARchitect Worldを簡単にデバッグできます。

JavaScriptが適切に機能することを確認したら、次にデバイス上でテストします。ARchitect Worldをロードするアプリケーションを起動するか、アプリケーションをWikitude World Browserアプリケーション内で実行します。

iOSのWikitude World Browser内でARchitect Worldを実行する

Wikitude World Browser for iOSを使用して、iOSデバイス上のARchitect Worldをテストできます。Wikitude World Browserを起動し、画面の左上隅にあるメニューボタンをタップします。

次に[Developer]ボタンをタップし、開発者ログインページを開きます。

Wikitudeアカウントのユーザー名とパスワードを入力し、[Login]ボタンをタップしログインします。まだWikitudeアカウントを持っていない場合は、Wikitudeアカウントを登録してください。

このビューで、[Launch via URL]の下のテキストボックスをタップし、実行するARchitect WorldのURLを入力します。[Launch]ボタンをタップすると、開発中のARchitect Worldを確認できます。

開発中のARchitect Worldが起動したら、デバイス上でのAR体験が意図したとおりであること、関数が期待どおりに動作していることを確認します。問題が見つかった場合は、まずデスクトップブラウザに戻り、デスクトップブラウザで使用可能なデバッグツールを使用してデバッグすることを推奨します。それができない場合は、デバイス上でデバッグを行います。これは現在iOSで可能なかぎりサポートされていますが、デバイス上でデバッグできるのはアプリケーションをXcodeから実行した場合だけです。詳細については、次の「iOSデバイス上でのデバッグ」セクションを参照してください。

また、AR.logger.activateDebugMode()を呼び出すことによってロギングコンソールをアクティブにし、、ロギングコンソールにログメッセージを出力することもできます。詳細については、「ログの出力」のセクションを参照してください。

iOSデバイス上でのデバッグ

ARchitect Worldをデバッグするには、デスクトップブラウザでADEを使用する方法とデバイスでAR.loggerを使用する方法がありますが、それらに加えて、使い慣れたWeb Inspectorツールを使用してARchitect Worldをデバイスで実行しながらデバッグすることもできます。

メモ: 基本的にはデスクトップブラウザでのコーディング・テスト・デバッグサイクルの方が時間がかからないので、まずはADEを使用して、ARchitect Worldのテストを行うことを推奨します。

ARchitect Worldをデバッグできるようにするには、以下のソフトウェアがMacで実行されている必要があります。

  • Xcode 4.5以上
  • iOS 6 SDK以上
  • Safari 6.0以上
  • Safariで「開発者モード」を有効にします。
  • iOSデバイスでWeb Inspectorを有効にします。そのためには、[設定]->[Safari]->[詳細]に進みます。

開発したARchitect Worldのコードを含むJavaScriptファイルを作成します。.htmlファイルのscriptタグ内のJavaScriptコードはデバッグできません。

新しいデバッグセッションの開始

新しいデバッグセッションを開始するには、Safari 6を起動してARchitect Worldを開きます。iOSデバイスでアプリケーションが起動したら、Safariの[開発]メニューオプションをクリックします。ドロップダウンメニューからiOSデバイスを選択し、現在使用可能なUIWebViewインスタンスを選択します。UIWebViewインスタンスを選択すると、Web Inspectorが表示されます。Web Inspectorの構成については、WWDC 2012のセッションビデオ集にあるUIWebViewのデバッグに関するビデオを見てください。

JavaScriptでのブレークポイントの設定

ブレークポイントを設定するには、リソースページでデバッグするファイルを選択します。ファイルを選択した後、Xcodeの場合と同じようにブレークポイントを設定します。JavaScriptの実行がブレークポイントで停止したら、右下にあるXcodeと同じコントロールを使用して関数にステップインしたり、JavaScriptの実行を続行したりできます。詳細については、WWDC 2012のセッションビデオ集にあるUIWebViewのデバッグに関するビデオを見てください。

JavaScriptの実行およびリソースロードのプロファイリング

Web Inspectorには、JavaScriptの実行やリソースのロードをプロファイリングする機能もあります。リソースのロードをプロファイリングするには、キーボードの[Command]+[R]を押します。そうするとUIWebViewが再ロードされ、ロードのプロファイリングが自動的に開始されます。JavaScriptコードをプロファイリングする場合は、プロファイルセクションにあるプロファイルボタンをクリックします。

テストが終了したらプロファイリングを終了し、Web Inspectorで詳細なプロファイルを確認します。メモ: [Command]+[Shift]+[R]を押すと、キャッシュデータを無視してUIWebViewが再ロードされます。