PhoneGap/Cordova で inappbrowser を使う

#概要

かなり前、PhoneGap/Cordovaアプリからブラウザを呼び出す方法として、以下を書きました。

[PhoneGap リンクをブラウザで開く](http://qiita.com/tsunet111/items/38c8beed858aaf165ce9)

この方法自体は、今でも動きますが…
iOSに関しては、この方法でブラウザを開くと、Apple審査で落ちるようになりました。
同じプラグインで、アプリ内ブラウザを開く必要があります。
※最近、Facebookアプリもtwitterアプリもアプリ外に出ないようになっているのは、このAppleポリシーのためです。

PhoneGap/Cordovaでアプリ内ブラウザを実現するプラグイン「inappbrowser」を動かしてみたメモです。


#環境
Win→Android PhoneGap 6.4.3
Mac→iOS PhoneGap 6.2.5

かなり古くなってしまいましたが、[この記事](http://qiita.com/tsunet111/items/2ab7a1bfdf58a08af38f)の環境をベースにしています。


#プラグインの組み込みと呼び出し方

※ 以下、PowerShellからコマンド入力
※ Cordovaで環境作られている方は、```phonegap``` を ```cordova``` に読み替えてください。

新しいアプリ作成

```
phonegap create test170418
cd test170418
```

プラグイン組み込み

```
phonegap plugin add cordova-plugin-inappbrowser
```

ベースのHTML（www/index.html）を書き換えてみます。

アプリ内ブラウザの立ち上げは、window.openで、ターゲットを _blank にして開きます。
いろいろ試せるように、linkOpen という関数を作成。

```html
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <button onclick="linkOpen(1)">LINK 1</button><br>
        <button onclick="linkOpen(2)">LINK 2</button><br>
        <button onclick="linkOpen(3)">LINK 3</button><br>
        <button onclick="linkOpen(4)">LINK 4</button><br>
        <button onclick="linkOpen(5)">LINK 5</button><br>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();

function linkOpen(_num){
  switch(_num){
    case 1:
      //オプションなし
      window.open('https://www.google.co.jp/','_blank','');
      break;
    case 2:
      //アドレス表示
      window.open('https://www.google.co.jp/','_blank','location=yes');
      break;
    case 3:
      //アドレス非表示
      window.open('https://www.google.co.jp/','_blank','location=no');
      break;
    case 4:
      //アドレス表示、閉じるボタンのキャプション変更（iOSのみ）
      window.open('https://www.google.co.jp/','_blank','location=yes,closebuttoncaption=おしまい');
      break;
    case 5:
      //アドレス表示、ツールバー非表示（iOSのみ）
      window.open('https://www.google.co.jp/','_blank','location=yes,toolbar=no');
      break;
  }
}

    </script>
</body>

```

#結果
##Android 6.0

アドレスバーのダサさ、どうにかならないものか:frowning2:

起動
![2017-04-18 09.30.22.png](https://qiita-image-store.s3.amazonaws.com/0/24420/52ea2cc0-a773-11f2-3e72-6c6f5b19a249.png)

LINK 1
![2017-04-18 09.30.30.png](https://qiita-image-store.s3.amazonaws.com/0/24420/626b929b-7684-08f0-3133-abbe009cdc63.png)

LINK 2
![2017-04-18 09.30.47.png](https://qiita-image-store.s3.amazonaws.com/0/24420/32e8f2ab-d66e-13da-9a9c-b37f2bc1a731.png)

LINK 3
![2017-04-18 09.31.01.png](https://qiita-image-store.s3.amazonaws.com/0/24420/c32d06b4-e9d4-ec27-dc2b-2c3961aaece1.png)

##iOS 9.3（古くてすみません...）

起動
![Simulator Screen Shot 2017.04.18 18.54.17.png](https://qiita-image-store.s3.amazonaws.com/0/24420/b58bae80-f172-715e-8d5b-0ed885ce4320.png)

LINK 1
![Simulator Screen Shot 2017.04.18 18.54.29.png](https://qiita-image-store.s3.amazonaws.com/0/24420/758aa302-fb8e-22ff-f78f-df2884a7e637.png)

LINK 2
![Simulator Screen Shot 2017.04.18 18.54.37.png](https://qiita-image-store.s3.amazonaws.com/0/24420/b7a632e3-41cd-f7f3-bd63-60570b0d25b9.png)

LINK 3
![Simulator Screen Shot 2017.04.18 18.54.46.png](https://qiita-image-store.s3.amazonaws.com/0/24420/54464dbb-f627-745d-ae82-306024170888.png)

LINK 4
![Simulator Screen Shot 2017.04.18 18.54.59.png](https://qiita-image-store.s3.amazonaws.com/0/24420/228d6198-521b-5b61-dab2-e35c893619f0.png)

LINK 5
![Simulator Screen Shot 2017.04.18 18.55.14.png](https://qiita-image-store.s3.amazonaws.com/0/24420/4c9388b4-b0cf-c570-91e4-57d311f56a0c.png)

LINK 5は、元の画面に戻る手段がないです。。。


#参考
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/