# InAppBrowser プラグイン

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

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

```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;
```

ブラウザのwindow\.open関数を上記のように変更すると、 意図しない副作用が発生する可能性があります（特に、このプラグインが別のプラグインの依存関係としてのみ含まれている場合）。

InAppBrowserウィンドウは、標準のWebブラウザーのように動作し、CordovaAPIにアクセスできません。 このため、サードパーティの（信頼できない）コンテンツをメインのCordova Webビューにロードするのではなく、ロードする必要がある場合は、InAppBrowserをお勧めします。 InAppBrowserはホワイトリストの対象ではなく、システムブラウザでリンクを開くこともありません。

InAppBrowserは、デフォルトでユーザーに独自のGUIコントロール（戻る、進む、完了）を提供します。

## プラグイン ID

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

## プラグインの追加方法

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

## プリファレンス

### config.xml

#### InAppBrowserStatusBarStyle \[iOS のみ]

（文字列、オプション `lightcontent`、`darkcontent`、または `default`。デフォルトは「default」）iOS のテキストの色のスタイルを設定します。 「lightcontent」は、暗い背景での使用を目的としています。 「darkcontent」は、iOS 13 以降でのみ使用可能で、明るい背景での使用を目的としています。

```markup
  <preference name="InAppBrowserStatusBarStyle" value="lightcontent" />
```

## 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 進色文字列に設定します。( Example：#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 進数の色文字列に設定します（ Example：#00ff00 ）。両方のナビゲーションボタンの色がデフォルトから変更されます。 この設定は、location を `yes` に設定し、hidenavigationbuttons を `yes` に設定していない場合にのみ効果があります。
  * **toolbarcolor**: 有効な 16 進数の色文字列に設定します（ Example：#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 専用 :

  * **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 進数の色の文字列として設定します（ Example：#00ff00 ）。 ツールバーが無効になっていない場合にのみ適用されます。
  * **closebuttoncaption**: **Done** ボタンのラベルに使用する文字列を設定します。この値は、各自でローカライズする必要があります。
  * **disallowoverscroll**: `yes` または `no` に設定すると ( デフォルトで `no` )、UIWebViewBounce プロパティを、それぞれ、オンまたはオフにします。
  * **hidenavigationbuttons**: `yes` または `no` に設定して、ツールバーのナビゲーションボタンをオンまたはオフにします（ デフォルトは `no` ）。 ツールバーが無効になっていない場合にのみ適用されます。
  * **navigationbuttoncolor**: デフォルトの色から変更するには、有効な 16 進数の色文字列として設定します（ Example：#00ff00 ）。ナビゲーションボタンが表示されている場合にのみ適用されます。
  * **toolbar**: `yes` または `no` に設定した場合、`InAppBrowser` のツールバーを、それぞれ、表示または非表示にします ( デフォルトは `yes` )。
  * **toolbarcolor**: ツールバーのデフォルトの色から変更するには、有効な 16 進数の色文字列として設定します（ Example：#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` )。
  * **presentationstyle**: presentation styleを設定する場合は、`pagesheet`、`formsheet`、`fullscreen` のいずれかを設定します ( デフォルトは `fullscreen` )。
  * **transitionstyle**: transition style を設定する場合は、`fliphorizontal`、`crossdissolve`、`coververtical` のいずれかを設定します ( デフォルトは `coververtical` )。
  * **toolbarposition**: `top` または `bottom` に設定して、ツールバーの表示位置 ( ウィンドウの上・下 ) を指定します ( デフォルトは `bottom` )。
  * **hidespinner**: ローディングインジケータの可視性を変更するには、`yes` または `no` に設定します（ デフォルトは `no` ）。

#### 例

```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');
```

### iOS Quirks

iPadOS 13の導入以来、iPad は、コンテンツモード / ユーザーエージェントを最適なブラウジング体験に適応させようとしています。 これにより、iPad のユーザーエージェントが Macintosh に設定され、ユーザーエージェントの文字列スニッフィングを使用してモバイルデバイスとして iPad を検出することが困難になる可能性があります。 これは、config.xml の PreferredContentMode 設定で変更できます。

```markup
  <preference name="PreferredContentMode" value="mobile" />
```

上記の例では、ユーザーエージェントに iPad を含めるように強制しています。 もう1つのオプションは、desktop を使用してユーザーエージェントを Macintosh に変えることです。

### 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)*

#### 例

```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`

  オブジェクトを、この関数に渡します。

#### 例

```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)*

#### 例

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

### InAppBrowser.show

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

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

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

#### 例

```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)

#### 例

```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 ) が、引き渡すパラメーターとなります。

#### 例

```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 のインジェクト後に実行する関数

#### 例

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


---

# 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-12.0/inappbrowser-puraguin.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.