# InAppBrowser プラグイン

テスト環境 ( バージョン番号 ) : [3.2.0](https://github.com/apache/cordova-plugin-inappbrowser/releases/tag/3.2.0)

{% hint style="info" %}
このプラグインの詳細は、 [こちらの原文 ( GitHub )](https://github.com/apache/cordova-plugin-inappbrowser) をご確認ください。
{% endhint %}

このプラグインでは、`cordova.InAppBrowser.open()` を使用して、InAppBrowser ウィンドウ ( InAppBrowser 提供の Web ブラウザー ) を開きます。

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
```

## window\.open

`cordova.InAppBrowser.open()` 関数は、`window.open()` 関数を代替する関数です。次の記述をすれば、既存の `window.open()` を使用して、InAppBrowser ウィンドウを開くことができます。

```javascript
window.open = cordova.InAppBrowser.open;
```

InAppBrowser を使用して開いたウィンドウ ( InAppBrowser ウィンドウ ) は、標準の Web ブラウザーと同じ動作をします。ただし、Cordova API へのアクセスはできません。使用方法としては、提供元不明のコンテンツを読み込む場合に、Cordova WebView の代わりに、InAppBrowser を使用するなどが考えられます。なお、InAppBrowser には、ホワイトリストは適用されません。また、system browser ( システムブラウザー ) 上で、リンクを開くこともありません。\[ 翻訳者メモ ： system browser は、OS 標準のブラウザーを指しているものと思われます ( 他の選択肢としては、Android のシステムブラウザーがありました )。また、原文では、「 system's web browser 」、または、「 system browser 」 などと異なる言葉が使用されていますが、どちらもシステム標準のブラウザーを指しているものと思われます。なお、翻訳文では、前者は、「 システム標準の Web ブラウザー 」、後者は、「 system browser 」 ( 原文のまま ) としています。]

InAppBrowser では、ユーザー用の独自の GUI ( 戻る・進む・中止 ) を、デフォルトで提供しています。

後方互換性を維持するため、このプラグインでは、`window.open` をフック ( hook ) しています。ただし、`window.open` にこのようなフックを使用すると、想定外の副作用がでる場合もあります ( 特に、別のプラグインとの間に依存関係がある場合など )。`window.open` へのフックは、将来的には廃止される予定ですが、それまでは、次のようにして、手動でも、デフォルトの挙動に戻すことができます。

```javascript
delete window.open // Reverts the call back to its prototype's default
```

`window.open` は、グローバルスコープに属していますが、InAppBrowser が使用できるのは、`deviceready` イベントの発火後になります。

```javascript
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("window.open works well");
}
```

## プラグイン ID

```javascript
cordova-plugin-inappbrowser
```

## プラグインの追加方法 ( Monaca 上での処理 )

このプラグインを使用する場合には、Monaca クラウド IDE の \[ Cordova プラグインの管理 ] 上で、`InAppBrowser` プラグインを[有効](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/cordova_plugin#cordova-puraguin-noinpto)にします。

## API の解説

### cordova.InAppBrowser.open

`InAppBrowser` の新規インスタンス内、現在開いているブラウザーのインスタンス内、または、system browser ( システムブラウザー ) 内で、URL を開きます。

```javascript
var ref = cordova.InAppBrowser.open(url, target, options);
```

* **ref**: ターゲットが 、`'_blank'` に設定されているときの`InAppBrowser` ウィンドウへのリファレンス。 *(InAppBrowser)*
* **url**: 読み込みをする URL。Unicode 文字が URLに含まれる場合、`encodeURI()` を使用して変換します。 *(String)*
* **target**: URL の読み込み先として使用するブラウザーの種別。任意のパラメーターです。デフォルトは、`_self` となります。 *(String)*
  * `_self`: ホワイトリストに対象の URL が登録されている場合には、Cordova WebView を開きます。それ以外の場合には、`InAppBrowser` を開きます。
  * `_blank`: `InAppBrowser` を開きます。
  * `_system`: システム標準の Web ブラウザー ( system's web browser ) を開きます。
* **options**: `InAppBrowser` で使用する、任意のオプションです。デフォルトは、`location=yes` となります。 *(String)* `options` で使用する文字列に、空白は使用できません。また、各設定 ( 名前と値の組み合わせ ) の間を、コンマで区切る必要があります。各設定の名前では、大文字・小文字を区別しません。

  すべてのプラットフォームは、以下の値をサポートしています。

  * **location**: `yes` または `no` を設定すると、`InAppBrowser` のロケーションバーを、それぞれ、表示または非表示にできます。

  Android 専用 :

  * **hidden**: `yes` に設定した場合、ブラウザーの 「 作成 」 とページの読み込みを行いますが、表示はしません。読み込みが完了すると、loadstop イベントが発火します。省略または `no` ( デフォルト ) に設定した場合、通常通り、ブラウザーを開き、読み込みを行います。
  * **beforeload**: beforeload イベントを有効にして、ブラウザに実際にロードされるページを変更するように設定します。受け入れられる値は、GET リクエストのみをインターセプトする、POST リクエストでインターセプトする、または GET と POST リクエストの両方をインターセプトする `yes` です。POST リクエストは、現在サポートされておらず、無視されることに注意してください（ `beforeload=post`　を設定すると、エラーが発生します ）。
  * **clearcache**: `yes` に設定した場合、新規のウィンドウを開く前に、ブラウザーの cookie を削除します。
  * **clearsessioncache**: `yes` に設定した場合、新規のウィンドウを開く前に、セッションの cookie を削除します。
  * **closebuttoncaption**: \[X] の代わりに閉じるボタンのキャプションとして使用する文字列を設定します。この値は、自分でローカライズする必要があることに注意してください。
  * **closebuttoncolor**: 有効な 16 進色文字列に設定します。( 例：#00ff00 )。テキストまたはデフォルトの \[X] に関係なく、閉じるボタンの色をデフォルトから変更します。この設定は、location を `yes` に設定している場合にのみ有効です。
  * **footer**: `yes` に設定した場合、フッターに閉じるボタンが iOS の完了ボタンと同様に表示されます。 閉じるボタンはヘッダーと同じように表示されるため、closebuttoncaption と closebuttoncolor を使用してプロパティを設定します。
  * **footercolor**: #00ff00 または #CC00ff00（#aarrggbb）などの有効な 16 進数の色の文字列に設定した場合、フッターの色がデフォルトから変更されます。 この設定は、footer を `yes` に設定している場合にのみ効果があります。
  * **hardwareback**: `yes` に設定した場合、ハードウェア標準の 「 戻る 」 ボタンを使用して、前のページに戻ります ( InAppBrowser に記録されているページ遷移の履歴を使用 )。「 前のページ 」 が存在しない場合には、InAppBrowser が閉じます。デフォルト値は `yes` です。「 戻る 」 ボタンを使用して、InAppBrowser を閉じたい場合には、`no` に設定します。
  * **hidenavigationbuttons**: `yes` に設定した場合、ロケーションツールバーのナビゲーションボタンが非表示になります。ユーザーがロケーションを `yes` に設定している場合にのみ有効です。 デフォルト値は `no` です。
  * **hideurlbar**: `yes` に設定した場合、ロケーションツールバーの URL バーが非表示になります。ユーザーが location を `yes` に設定した場合にのみ有効です。 デフォルト値は `no` です。
  * **navigationbuttoncolor**: 有効な 16 進数の色文字列に設定します（ 例：#00ff00 ）。両方のナビゲーションボタンの色がデフォルトから変更されます。 この設定は、location を `yes` に設定し、hidenavigationbuttons を `yes` に設定していない場合にのみ効果があります。
  * **toolbarcolor**: 有効な 16 進数の色文字列に設定します（ 例：#00ff00 ）。これにより、ツールバーの色がデフォルトから変更されます。 ユーザーの この設定は、location が yes に設定されている場合にのみ有効です。
  * **lefttoright**: `yes` に設定した場合、ナビゲーションボタンと閉じるボタンの位置が入れ替わります。 具体的には、ナビゲーションボタンは左に、閉じるボタンは右に移動します。
  * **zoom**: `yes` に設定した場合、Android ブラウザーのズームコントロール ( 制御バー ) が表示されます。`no` に設定した場合、非表示になります。デフォルト値は `yes` です。
  * **mediaPlaybackRequiresUserAction**: `yes` または `no` に設定して、 HTML5 の audio または video の自動再生を、有効または無効にします ( デフォルトは `no` )。
  * **shouldPauseOnSuspend**: InAppBrowser WebViewでのバックグラウンドオーディオを停止するためにアプリで一時停止/再開させるには `yes` に設定します。（ これは、[CB-11013](https://issues.apache.org/jira/browse/CB-11013) のような Google Play の問題を避けるために必要な場合があります。）
  * **useWideViewPort**: WebViewが、`viewport` タグのサポートを有効にするか、`wide viewport` を使用するかを設定します。設定の値が `no` の場合、レイアウト幅は常に端末非依存（CSS）ピクセルの WebView コントロールの幅に設定されます。値が `yes` で、ページに viewport タグが含まれている場合、タグで指定された幅の値が使用されます。ページにタグが含まれていないか、幅が指定されていない場合は、wide viewport が使用されます。（ デフォルトは `yes` です ）。
  * **fullscreen**: InappBrowser WebView をフルスクリーンで表示するかどうかを設定します。フルスクリーンモードでは、ステータスバーは非表示になります。デフォルト値は `yes` です。

  iOS 専用 :

  * **usewkwebview**: InappBrowser に WKWebView エンジンを使用するには、`yes` に設定します。 UIWebView を使用するには、省略するか、`no`（ デフォルト ）に設定します。 注：`usewkwebview=yes`を使用するには、WKWebView エンジンプラグインを Cordovaプロジェクトにインストールする必要があります（ 例：cordova-plugin-wkwebview-engine または cordova-plugin-ionic-webview）。
  * **hidden**: `yes` に設定した場合、ブラウザーの 「 作成 」 とページの読み込みを行いますが、表示はしません。読み込みが完了すると、loadstop イベントが発火します。省略または `no` ( デフォルト ) に設定した場合、通常通り、ブラウザーを開き、読み込みを行います。
  * **beforeload**: beforeload イベントを有効にして、ブラウザに実際にロードされるページを変更するように設定します。受け入れられる値は、GET リクエストのみをインターセプトする、POST リクエストでインターセプトする、または GET と POST リクエストの両方をインターセプトする `yes` です。POST リクエストは、現在サポートされておらず、無視されることに注意してください（ `beforeload=post`　を設定すると、エラーが発生します ）。
  * **clearcache**: `yes` に設定した場合、新規のウィンドウを開く前に、ブラウザーの cookie を削除します。
  * **clearsessioncache**: `yes` に設定した場合、新規のウィンドウを開く前に、セッションの cookie を削除します。
  * **cleardata**: `yes` に設定した場合、新しいウィンドウが開く前にブラウザのローカルストレージ全体（ Cookie、HTML5 ローカルストレージ、IndexedDB など ）がクリアされます。
  * **closebuttoncolor**: デフォルトの \[完了] ボタンの色から変更するには、有効な 16 進数の色の文字列として設定します（ 例：#00ff00 ）。 ツールバーが無効になっていない場合にのみ適用されます。
  * **closebuttoncaption**: **Done** ボタンのラベルに使用する文字列を設定します。この値は、各自でローカライズする必要があります。
  * **disallowoverscroll**: `yes` または `no` に設定すると ( デフォルトで `no` )、UIWebViewBounce プロパティを、それぞれ、オンまたはオフにします。
  * **hidenavigationbuttons**: `yes` または `no` に設定して、ツールバーのナビゲーションボタンをオンまたはオフにします（ デフォルトは `no` ）。 ツールバーが無効になっていない場合にのみ適用されます。
  * **navigationbuttoncolor**: デフォルトの色から変更するには、有効な 16 進数の色文字列として設定します（ 例：#00ff00 ）。ナビゲーションボタンが表示されている場合にのみ適用されます。
  * **toolbar**: `yes` または `no` に設定した場合、`InAppBrowser` のツールバーを、それぞれ、表示または非表示にします ( デフォルトは `yes` )。
  * **toolbarcolor**: ツールバーのデフォルトの色から変更するには、有効な 16 進数の色文字列として設定します（ 例：#00ff00 ）。ツールバーが無効になっていない場合にのみ適用されます。
  * **toolbartranslucent**: `yes` または `no` に設定した場合、ツールバーが半透明（ 半透明 ）になります（ デフォルトは `yes` ）。 ツールバーが無効になっていない場合にのみ適用されます。
  * **lefttoright**: `yes` に設定した場合、ナビゲーションボタンと閉じるボタンの位置が入れ替わります。 具体的には、閉じるボタンは右側に、ナビゲーションボタンは左側に移動します。
  * **enableViewportScale**: meta タグを使用した、ビューポート ( viewport ) の尺度変更を、有効 ( `yes` ) または無効 ( `no` ) にします ( デフォルトは `no` )。
  * **mediaPlaybackRequiresUserAction**: `yes` または `no` に設定して、 HTML5 の audio または video の自動再生を、有効または無効にします (デフォルトは `no`)。
  * **allowInlineMediaPlayback**: `yes` または `no` に設定して、端末標準のメディア再生用インターフェイスではなく、ブラウザーウィンドウ内でのインライン再生を許可するか設定します。HTML の `video` 要素には `webkit-playsinline` 属性を指定する必要があります ( デフォルトは `no` )。
  * **keyboardDisplayRequiresUserAction**: JavaScript の `focus()` を使用して、form 要素がフォーカスされたとき、キーボードを表示するかを、`yes` または `no` で設定します ( デフォルトは `yes` )。
  * **suppressesIncrementalRendering**: レンダリング処理の開始時期を設定します。表示するコンテンツをすべて受け取った後に行うのであれば `yes` に設定します ( デフォルトは `no` )。
  * **presentationstyle**: presentation styleを設定する場合は、`pagesheet`、`formsheet`、`fullscreen` のいずれかを設定します (デフォルトは `fullscreen` )。
  * **transitionstyle**: transition style を設定する場合は、`fliphorizontal`、`crossdissolve`、`coververtical` のいずれかを設定します ( デフォルトは `coververtical` )。
  * **toolbarposition**: `top` または `bottom` に設定して、ツールバーの表示位置 ( ウィンドウの上・下 ) を指定します ( デフォルトは `bottom` )。
  * **hidespinner**: ローディングインジケータの可視性を変更するには、`yes` または `no` に設定します（ デフォルトは `no` ）。

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
```

### InAppBrowser

ターゲットが `'_blank'` に設定されているときに `cordova.InAppBrowser.open` の呼び出しから返されたオブジェクトです。

#### メソッド

* addEventListener
* removeEventListener
* close
* show
* hide
* executeScript
* insertCSS

### InAppBrowser.addEventListener

`InAppBrowser` からイベントリスナーを登録します。 （ ターゲットが `'_blank'` に設定されている場合のみ使用可能 ）

```javascript
ref.addEventListener(eventname, callback);
```

* **ref**: `InAppBrowser` ウィンドウへのリファレンス *(InAppBrowser)*
* **eventname**: リスナーを設定するイベント *(String)*
  * **loadstart**: `InAppBrowser` が URLの読み込みを始めたときに発火するイベント
  * **loadstop**: `InAppBrowser` が URLの読み込みを終えたときに発火するイベント
  * **loaderror**: URL の読み込み時に、`InAppBrowser`がエラーを検出したときに発火するイベント
  * **exit**: `InAppBrowser` ウィンドウを閉じるときに発火するイベント
  * **beforeload**: InAppBrowser が URL をロードするかどうかを決定するとき発火するイベント（ オプション beforeloadが 設定されている場合のみ）。
  * **message**: InAppBrowser Webview 内にロードされたページから投稿されたメッセージを InAppBrowser が受信した時に発火するイベント。
* **callback**: イベントが発火したときに実行される関数。`InAppBrowserEvent`オブジェクトを、パラメーターとして、この関数に渡します。

### 例

```javascript
var inAppBrowserRef;

function showHelp(url) {

    var target = "_blank";

    var options = "location=yes,hidden=yes,beforeload=yes";

    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);

    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);

    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);

    inAppBrowserRef.addEventListener('beforeload', beforeloadCallBack);

    inAppBrowserRef.addEventListener('message', messageCallBack);
}

function loadStartCallBack() {

    $('#status-message').text("loading please wait ...");

}

function loadStopCallBack() {

    if (inAppBrowserRef != undefined) {

        inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;" });

        inAppBrowserRef.executeScript({ code: "\
            var message = 'this is the message';\
            var messageObj = {my_message: message};\
            var stringifiedMessageObj = JSON.stringify(messageObj);\
            webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);"
        });

        $('#status-message').text("");

        inAppBrowserRef.show();
    }

}

function loadErrorCallBack(params) {

    $('#status-message').text("");

    var scriptErrorMesssage =
       "alert('Sorry we cannot open that page. Message from the server is : "
       + params.message + "');"

    inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);

    inAppBrowserRef.close();

    inAppBrowserRef = undefined;

}

function executeScriptCallBack(params) {

    if (params[0] == null) {

        $('#status-message').text(
           "Sorry we couldn't open that page. Message from the server is : '"
           + params.message + "'");
    }

}

function beforeloadCallBack(params, callback) {

    if (params.url.startsWith("http://www.example.com/")) {

        // Load this URL in the inAppBrowser.
        callback(params.url);
    } else {

        // The callback is not invoked, so the page will not be loaded.
        $('#status-message').text("This browser only opens pages on http://www.example.com/");
    }

}

function messageCallBack(params){
    $('#status-message').text("message received: "+params.data.my_message);
}
```

#### InAppBrowserEvent のプロパティ

* **type**: eventname ( イベント名)。`loadstart`、`loadstop`、`loaderror`、`message`、`exit`のいずれかとなります。 *(String)*
* **url**: 読み込んだ URL *(String)*
* **code**: エラーコード ( `loaderror` が発生した場合のみ ) *(Number)*
* **message**: エラーメッセージ ( `loaderror` が発生した場合のみ )*(String)*
* **data**: メッセージの内容。( message イベントの場合のみ ) 。 文字列化されたJSONオブジェクト。*(String)*

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
```

### InAppBrowser.removeEventListener

`InAppBrowser` からイベントリスナーを削除します。 （ ターゲットが `'_blank'` に設定されている場合のみ使用可能 ）

```javascript
ref.removeEventListener(eventname, callback);
```

* **ref**: `InAppBrowser` ウィンドウへのリファレンス *(InAppBrowser)*
* **eventname**: リスナーの登録を解除するイベント *(String)*
  * **loadstart**: `InAppBrowser` が URLの読み込みを始めたときに発火するイベント
  * **loadstop**: `InAppBrowser` が URLの読み込みを終えたときに発火するイベント
  * **loaderror**: URL の読み込み時に、`InAppBrowser`がエラーを検出したときに発火するイベント
  * **exit**: `InAppBrowser` ウィンドウを閉じるときに発火するイベント
  * **message**: InAppBrowser Webview 内にロードされたページから投稿されたメッセージを InAppBrowser が受信した時に発火するイベント。
* **callback**: イベントが発火したときに実行される関数。`InAppBrowserEvent`オブジェクトを、この関数に渡します。

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);
```

### InAppBrowser.close

`InAppBrowser` ウィンドウを閉じます。

```javascript
ref.close();
```

* **ref**: `InAppBrowser` ウィンドウへのリファレンス *(InAppBrowser)*

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.close();
```

### InAppBrowser.show

非表示で実行されている InAppBrowser ウィンドウを表示します。 InAppBrowser ウィンドウ がすでに表示されている場合には、この関数を呼んでも効果ありません。

```javascript
ref.show();
```

* **ref**: InAppBrowser ウィンドウへのリファレンス (InAppBrowser)

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();
```

### InAppBrowser.hide

InAppBrowserウィンドウを非表示にします。 InAppBrowserがすでに非表示の場合、この呼び出しは無効です。

```javascript
ref.hide();
```

* **ref**: InAppBrowser ウィンドウへのリファレンス (InAppBrowser)

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank');
// some time later...
ref.hide();
```

### InAppBrowser.executeScript

`InAppBrowser` ウィンドウ上に、JacaScript コードをインジェクト ( inject/注入 ) します。（ターゲットが `'_blank'` に設定されている場合のみ使用可能）

```javascript
ref.executeScript(details, callback);
```

* **ref**: `InAppBrowser` ウィンドウへのリファレンス *(InAppBrowser)*
* **injectDetails**: 実行するスクリプトの詳細。`file` または `code`キーを指定します。*(Object)*
  * **file**: インジェクトするスクリプトの URL
  * **code**: インジェクトするスクリプトのテキスト
* **callback**: JavaScript コードのインジェクト後に実行する関数
  * インジェクトしたスクリプトの形式が `code` の場合、callbackに、`配列` 形式のパラメーターが 1つ渡され実行されます。このパラメーターは、インジェクトしたスクリプトの実行結果( 戻り値 )です。複数行のスクリプトに関しては、最後のステートメント (statement ) の戻り値、または、最後に評価 ( evaluate ) した表現 (expression ) が、引き渡すパラメーターとなります。

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeScript({file: "myscript.js"});
});
```

### InAppBrowser.insertCSS

CSSを `InAppBrowser` ウィンドウに挿入します。（ターゲットが `'_blank'` に設定されている場合のみ使用可能）

```javascript
ref.insertCSS(details, callback);
```

* **ref**: `InAppBrowser` ウィンドウへのリファレンス *(InAppBrowser)*
* **injectDetails**: 実行するスクリプトの詳細。`file` または `code`キーを指定します。 *(Object)*
  * **file**: インジェクトするスタイルシートの URL
  * **code**: インジェクトするスタイルシートのテキスト
* **callback**: CSS のインジェクト後に実行する関数

#### サポート対象のプラットフォーム

* Android
* iOS

#### 例

```javascript
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "mystyles.css"});
});
```

## サンプル: InAppBrowserでヘルプページを表示する

このプラグインを使用すると、アプリ内で役立つドキュメントページを表示できます。 オンラインヘルプドキュメントを表示し、アプリケーションを終了することなく閉じることができます。

以下は、これを行うためのサンプルです。

* [ユーザーにヘルプを求める方法を提供する](#yzniherupuwomeruwosuru)
* [ヘルプページを読み込む](#herupupjiwomimu)
* [ユーザーにページの準備ができていることを知らせる](#yznipjinogadekiteirukotoworaseru)
* [ヘルプページを表示する](#herupupjiwosuru)
* [ページエラーを処理する](#pjierwosuru)

### ユーザーにヘルプを求める方法を提供する

アプリでこれを行う方法はたくさんあります。 ドロップダウンリストは簡単な方法です。

```markup
<select id="help-select">
    <option value="default">Need help?</option>
    <option value="article">Show me a helpful article</option>
    <option value="video">Show me a helpful video</option>
    <option value="search">Search for other topics</option>
</select>
```

ページの `onDeviceReady` 関数でユーザーの選択肢を収集し、適切な URL を共有ライブラリファイルのヘルパー関数に送信します。 ヘルパー関数は showHelp() です。次にその関数を記述します。

```javascript
$('#help-select').on('change', function (e) {

    var url;

    switch (this.value) {

        case "article":
            url = "https://cordova.apache.org/docs/en/latest/"
                        + "reference/cordova-plugin-inappbrowser/index.html";
            break;

        case "video":
            url = "https://youtu.be/F-GlVrTaeH0";
            break;

        case "search":
            url = "https://www.google.com/#q=inAppBrowser+plugin";
            break;
    }

    showHelp(url);

});
```

### ヘルプページを読み込む

`open` 関数を使用してヘルプページを読み込みます。hidden プロパティを yes に設定しているため、ページコンテンツが読み込まれた後にのみブラウザを表示できます。 こうすることで、ユーザーはコンテンツが表示されるのを待つ間に空白のブラウザが表示されなくなります。 loadstop イベントが発生すると、コンテンツがいつロードされたかがわかります。 loadstop イベントを処理します。

```javascript
function showHelp(url) {

    var target = "_blank";

    var options = "location=yes,hidden=yes";

    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);

    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);

    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);

}
```

### ユーザーにページの準備ができていることを知らせる

ブラウザがすぐに表示されないため、loadstart イベントを使用して、状況メッセージ、進行状況バー、またはその他のインディケーターを表示できます。 これは、コンテンツが途中であることをユーザーに保証します。

```javascript
function loadStartCallBack() {
    $('#status-message').text("loading please wait ...");
}
```

### ヘルプページを表示する

`loadstopcallback` イベントが発生すると、コンテンツがロードされたことがわかり、ブラウザを表示させることができます。 このような仕掛けは、より良いパフォーマンスの印象を作り出すことができます。 実は、コンテンツが読み込まれる前にブラウザを表示するかどうかにかかわらず、読み込み時間は同じです。

```javascript
function loadStopCallBack() {

    if (inAppBrowserRef != undefined) {

        inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;" });

        $('#status-message').text("");

        inAppBrowserRef.show();
    }

}
```

`insertCSS` 関数の呼び出しに気づいたかもしれません。これは、今回のサンプルの主な目的ではありませんが、この場合、ページのフォントサイズが一定のサイズになっていることを確認しています。この関数を使用して、任意の CSS スタイル要素を挿入できます。 プロジェクト内の CSS ファイルを指すこともできます。

### ページエラーを処理する

場合によっては、ページがなくなったり、スクリプトエラーが発生したり、ユーザーにはリソースを表示する権限がありません。どのようにその状況を処理するかは、開発者側の設計に完全に依存します。ブラウザにそのメッセージを表示させるか、別の方法で提示することができます。

エラーをメッセージボックスに表示させたいと思います。 `alert` 関数を呼び出すスクリプトを注入することで、これを行うことができます。これは Windows デバイス上のブラウザでは機能しないため、executeScript コールバック関数のパラメータを調べて、有効かどうかを確認する必要があります。動作しない場合は、ページの `<div>` にエラーメッセージが表示されます。

```javascript
function loadErrorCallBack(params) {

    $('#status-message').text("");

    var scriptErrorMesssage =
       "alert('Sorry we cannot open that page. Message from the server is : "
       + params.message + "');"

    inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);

    inAppBrowserRef.close();

    inAppBrowserRef = undefined;

}

function executeScriptCallBack(params) {

    if (params[0] == null) {

        $('#status-message').text(
           "Sorry we couldn't open that page. Message from the server is : '"
           + params.message + "'");
    }

}
```

## 詳細情報

### ローカルURL（アプリ内のソース）

```javascript
var iab = cordova.InAppBrowser;

iab.open('local-url.html');                  // loads in the Cordova WebView
iab.open('local-url.html', '_self');         // loads in the Cordova WebView
iab.open('local-url.html', '_system');       // Security error: system browser, but url will not load (iOS)
iab.open('local-url.html', '_blank');        // loads in the InAppBrowser
iab.open('local-url.html', 'random_string'); // loads in the InAppBrowser
iab.open('local-url.html', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
```

### ホワイトリストに登録されたコンテンツ

```javascript
var iab = cordova.InAppBrowser;

iab.open('http://whitelisted-url.com');                  // loads in the Cordova WebView
iab.open('http://whitelisted-url.com', '_self');         // loads in the Cordova WebView
iab.open('http://whitelisted-url.com', '_system');       // loads in the system browser
iab.open('http://whitelisted-url.com', '_blank');        // loads in the InAppBrowser
iab.open('http://whitelisted-url.com', 'random_string'); // loads in the InAppBrowser

iab.open('http://whitelisted-url.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
```

### ホワイトリストに登録されていないURL

```javascript
var iab = cordova.InAppBrowser;

iab.open('http://url-that-fails-whitelist.com');                  // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', '_self');         // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', '_system');       // loads in the system browser
iab.open('http://url-that-fails-whitelist.com', '_blank');        // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', 'random_string'); // loads in the InAppBrowser
iab.open('http://url-that-fails-whitelist.com', 'random_string', 'location=no'); // loads in the InAppBrowser, no location bar
```

関連項目:

* [サードパーティー製プラグイン](https://ja.docs.monaca.io/reference/third_party_phonegap)
* [基本プラグイン](https://ja.docs.monaca.io/reference/core-cordova-plugins)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/reference/core-cordova-plugins/cordova_9.0/inappbrowser.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.