Community

Applies only to Mobile Apps

Chromeを使用した高度なモバイルアプリトラブルシューティング

Last updated
Save as PDF

このトピックでは、Production環境などのようにOutSystemsのデバッグ機能が使用できない高度なモバイルアプリトラブルシューティングシナリオについて説明しています。OutSystemsのデバッグ機能を使用してWebやモバイルアプリをデバッグする方法の詳細については、「アプリケーションをデバッグする」をご覧ください。

アプリケーション内で何が生じているかを分析し、プラットフォームが生成したJavaScriptコードをデバッグするための機能を備えたGoogle ChromeのDeveloper Toolsを使用すると、モバイルアプリの問題をトラブルシューティングすることができます。これを実行するには、可能であればデスクトップブラウザでモバイルアプリのプレビューを使用するか、まずデスクトップブラウザをモバイルアプリを実行中のモバイルデバイスに接続します。

Chrome Developer Toolsを使用したトラブルシューティングプロセス効率化のヒントは、複数あります。詳細については、下記の「トラブルシューティングのヒント」セクションをご覧ください。

Chromeを使用したトラブルシューティング

Chromeデスクトップブラウザでモバイルアプリの問題をトラブルシューティングできるのは、ネイティブプラグインを使用していない場合、またはすべてのネイティブプラグインに、モバイルアプリを実際のモバイルデバイス以外で正しく動作させるためのフォールバックが用意されている場合です。

トラブルシューティング可能な問題

ブラウザ上でクライアントコードが実行されているため、ブラウザの開発ツールを使用してデバッグを行えます。デバッグの対象は以下のとおりです。

クライアント画面アクション
クライアントアクション
イベントハンドラ
例外ハンドラ

プラットフォームにより生成されたJavaScriptコードの詳細については、「生成されたJavaScriptコードアーキテクチャ」セクションをご覧ください。

トラブルシューティングを開始する

パブリッシュ直後から、ロジックや画面を確認したりローカルストレージを表示したりして、モバイルアプリのトラブルシューティングをすることが可能になります。以下の手順を実行します。

デスクトップ上でChromeブラウザ（最新版を使用）を開きます。
F12キーを押すなどしてChrome Developer Toolsを開き、デバッグとトラブルシューティングを開始します。

Chrome Developer Toolsから提供されているデバッグ機能の詳細については、Googleの「Chrome DevToolsでJavaScriptをデバッグする」をご覧ください。

クライアントアクションをデバッグするには、Ctrlキーを押しながらアプリケーションを使用して、アクションをトリガーします。これにより、実行するすべてのクライアントアクションにブレークポイントが自動的に設定されます。Chrome Developer Toolsの使用にあたって役立つ他のヒントについては、以下をご覧ください。

ローカルストレージデータを表示する

デスクトップのChromeブラウザでアプリのトラブルシューティングを実行中、ローカルストレージのデータを表示することができます。

ローカルエンティティのデータを表示するには、以下の手順を実行します。

モバイルアプリを（デスクトップの）Chromeブラウザでプレビューしながら、F12キーを押すなどしてChrome Developer Toolsを開きます。
［Application］タブに移動し、アプリのWebSQL/<YourModuleName>モジュールに移動します。
ツリーノードを展開し、アプリケーションで定義されたローカルエンティティのリストを表示します。
1つを選択してデータを表示します。

アプリケーションのローカルエンティティのテーブルには「OSUSR_」というプレフィックスが、OutSystemsのテーブルには「OSSYS_」というプレフィックスが付きます。

OSSYS_ENTITYテーブルは、各アプリケーションテーブルに関する内部情報を保存します。OSSYS_LOGは、ネットワーク接続が不可能な場合にログをローカルに保存するために使用されます。

クエリを実行する_

ローカルエンティティでクエリを実行するには、以下の手順を実行します。

左のツリーから<YourModuleName>を選択します。
右側にあるコンソールにSQLクエリを書き込みます。

デスクトップブラウザに接続されたデバイスでトラブルシューティングする

モバイルデバイス上でモバイルアプリを実行しながらトラブルシューティングするには、OutSystems Nowを使用するか、アプリケーションパッケージ経由でOutSystems Nowを前もってインストールしておきます。これは、モバイルアプリのプラグイン動作をトラブルシューティングする際に有効です。

モバイルデバイスでこのようなトラブルシューティングができるのは、Androidアプリのみです。

デスクトップブラウザとデバイスを接続する

前提条件:

モバイルデバイスのバージョンはAndroid 4.0以降。
PCにインストールされたGoogle Chromeのバージョンは32以降。
デスクトップのChromeのバージョンがモバイルデバイスのChromeバージョンより新しいこと。
モバイルアプリをアプリケーションパッケージ経由でモバイルデバイスにインストールしている場合、Debugビルドタイプで生成する必要がある。

デバイスでのデバッグを有効にするには、以下の手順を実行します。

［Settings］を開き、［Developer Options］オプションを探します。

注記: オプションが表示されない場合、以下の手順に従ってください。
1.デバイスの［Settings］に移動し、［About］を選択します。
2.ビルド番号の上部を7回タップします。
デバイスに［Developer Settings］オプションが表示されます。それでも表示されない場合は、対応方法の掲載されたドキュメントをご覧ください。
［Settings > Developer Options］を選択します。
有効スライダをOnにスライドします。
［USB Debugging］オプションを有効化します。
セキュリティポップアップを許可します。

デバイスとデスクトップのChromeブラウザを接続するには、以下の手順を実行します。

デバイスをUSBでPCと接続します。
デバイスにUSBモード設定のオプションがある場合、PTP（またはCameraモード）に設定します。
デスクトップのChromeブラウザを開き、以下のURLに移動します。
chrome://inspect/#devices

_注記: _デバイスが表示されない場合、コンピュータ上のUSBドライバが認識されていない可能性があります。
WebViewのURLの隣にあるinspectリンクをクリックします。

これで、デバイス上でアプリを表示してWebViewのコンテンツを検査・デバッグすることができます。

Chrome Developer Toolsから提供されているデバッグ機能の詳細については、Googleの「Chrome DevToolsでJavaScriptをデバッグする」をご覧ください。

モバイルアプリがOutSystems Nowに付属のサポート対象プラグインのみを使用している場合、上記の手順に従ってデスクトップブラウザをデバイスに接続すると、OutSystems Nowモバイルアプリを使用してトラブルシューティングを行うことができます。この方法を使用すると、アプリケーションパッケージ経由でモバイルアプリをインストールする必要がありません。

トラブルシューティングのヒント

トラブルシューティングを効果的に行うためのヒントは以下のとおりです。

クライアントアクションをデバッグするには、Ctrlキーを押しながらアプリケーションを使用して、アクションをトリガーします。これにより、実行されたすべてのクライアントアクションで自動的にブレークポイントが設定されます。
JavaScriptコードの認識性と判読性を向上させるには、［Sources］タブにある［Pretty Print］ボタンをクリックします。
非同期アクション確認のために判読性の高いスタックトレースを取得するには、［Sources］タブにあるAsyncチェックボックスにチェックを入れます。
［Cnsole］タブでエラーを探します。右側にあるリンクをクリックすると、エラーが発生しているJavaScriptの場所に移動します。
アプリケーションがエラーページへのリダイレクトを完了すると、［Console］タブのログは消えます。保持しておく場合、［Preserve log］オプションをクリックします。
パフォーマンスのトラブルシューティングをするには、Chrome Developer Toolsの［Performance］タブを使用します。CPUやネットワークの使用率が0%の状態で長い待機時間が過ぎている場合、アプリがデータ（Aggregateまたはデータアクションの結果）を待機しているか、ネイティブプラグイン操作の完了を待機している可能性があります。
低品質なネットワークをシミュレートするには、［Network］タブの帯域制限機能を有効にします。Chromeに帯域制限をかけた状態で、ブラウザに実際のデバイスを接続してテストを行うと、予期しない結果となる可能性があります。デバイス上のモバイルアプリのモバイルネットワークを2Gモードのみに設定してテストすることも可能です。

JavaScriptコードアーキテクチャを生成する

モバイルアプリは、サーバーおよびクライアント（モバイルデバイス）で実行されるコードとアセットを生成します。クライアント側では、このコードはJavaScripとなり特定のアーキテクチャを有します。このドキュメントでは、ファイルとその役割、またService Studioのアクション用に定義された各フロー要素について生成されるコードについて説明しています。このコンテンツは、クライアント側で生成されたコードのトラブルシューティングや確認に有効です。

生成されたJavaScriptファイル

クライアント用に生成されたJavaScriptファイルを検索するには、Chrome DevToolsのスクリプトフォルダを展開します。

Client JavaScript file location

強調表示されたセクションの説明を、以下のテーブルにまとめました。生成されたJavaScriptファイルの数が異なる可能性や、ここで提供されている情報が最新ではない可能性もあります。ご注意ください。

JavaScriptファイルの役割

ファイル	説明
モジュールファイル
`<ModuleName>.controller.js`	`<ModuleName>`モジュールのグローバルクライアントアクション
`<ModuleName>.entities.js`	`<ModuleName>`モジュールのローカルエンティティを操作するSQLコード
`<ModuleName>.model.js`	`<ModuleName>`モジュールのローカルエンティティの定義（参照先のエンティティも含む）
`<ModuleName>.languageResources.js`	`<ModuleName>`モジュールで定義されている検証メッセージ
UIフローファイル
`<ModuleName>.<UIFlowName>.controller.js`	`<UIFlowName>`フローの例外ハンドラ
画面ファイル、ブロックファイル
`<ModuleName>.<UIFlowName>.<ScreenName>.mvc.js` `<ModuleName>.<UIFlowName>.<BlockName>.mvc.js`	アクションとイベント、変数の定義、画面要素/ブロック要素のウィジェットレンダリングコードを含む