# InAppBrowser プラグイン
テスト環境 ( バージョン番号 ) : [5.0.0](https://github.com/apache/cordova-plugin-inappbrowser/releases/tag/5.0.0)
このプラグインの詳細は、 [こちらの原文 ( GitHub )](https://github.com/apache/cordova-plugin-inappbrowser) をご確認ください。
このプラグインでは、`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;
```
ブラウザのwindow\.open関数を上記のように変更すると、 意図しない副作用が発生する可能性があります（特に、このプラグインが別のプラグインの依存関係としてのみ含まれている場合）。
InAppBrowserウィンドウは、標準のWebブラウザーのように動作し、CordovaAPIにアクセスできません。 このため、サードパーティの（信頼できない）コンテンツをメインのCordova Webビューにロードするのではなく、ロードする必要がある場合は、InAppBrowserをお勧めします。 InAppBrowserはホワイトリストの対象ではなく、システムブラウザでリンクを開くこともありません。
InAppBrowserは、デフォルトでユーザーに独自のGUIコントロール（戻る、進む、完了）を提供します。
## プラグイン ID
```javascript
cordova-plugin-inappbrowser
```
## プラグインの追加方法
このプラグインを使用する場合には、Monaca クラウド IDE の \[ Cordova プラグインの管理 ] 上で、`InAppBrowser` プラグインを[有効](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/cordova_plugin#cordova-puraguin-noinpto)にします。
## プリファレンス
### config.xml
#### InAppBrowserStatusBarStyle \[iOS のみ]
（文字列、オプション `lightcontent`、`darkcontent`、または `default`。デフォルトは「default」）iOS のテキストの色のスタイルを設定します。 「lightcontent」は、暗い背景での使用を目的としています。 「darkcontent」は、iOS 13 以降でのみ使用可能で、明るい背景での使用を目的としています。
```markup
Need help?
Show me a helpful article
Show me a helpful video
Search for other topics
```
ページの `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 コールバック関数のパラメータを調べて、有効かどうかを確認する必要があります。動作しない場合は、ページの `` にエラーメッセージが表示されます。
```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;
// loads in the Cordova WebView
iab.open('local-url.html');
// loads in the Cordova WebView
iab.open('local-url.html', '_self');
// Security error: system browser, but url will not load (iOS)
iab.open('local-url.html', '_system');
// loads in the InAppBrowser
iab.open('local-url.html', '_blank');
// loads in the InAppBrowser
iab.open('local-url.html', 'random_string');
// loads in the InAppBrowser, no location bar
iab.open('local-url.html', 'random_string', 'location=no');
```
### ホワイトリストに登録されたコンテンツ
```javascript
var iab = cordova.InAppBrowser;
// loads in the Cordova WebView
iab.open('http://whitelisted-url.com');
// loads in the Cordova WebView
iab.open('http://whitelisted-url.com', '_self');
// loads in the system browser
iab.open('http://whitelisted-url.com', '_system');
// loads in the InAppBrowser
iab.open('http://whitelisted-url.com', '_blank');
// loads in the InAppBrowser
iab.open('http://whitelisted-url.com', 'random_string');
// loads in the InAppBrowser, no location bar
iab.open('http://whitelisted-url.com', 'random_string', 'location=no');
```
### ホワイトリストに登録されていないURL
```javascript
var iab = cordova.InAppBrowser;
// loads in the 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 system browser
iab.open('http://url-that-fails-whitelist.com', '_system');
// loads in the InAppBrowser
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, no location bar
iab.open('http://url-that-fails-whitelist.com', 'random_string', 'location=no');
```