ブラウザwidgetを使ってアプリにWebを表示してみた

#目次
1. はじめに
2. 実装方法
    3. 外部サイトを表示する場合
    4. Konyで作成したWebアプリを表示する場合
3. まとめ


#1. はじめに
今回は、Browser Widgetを使って外部サイトを表示する場合と、
Konyで作成したWebアプリをモバイルアプリのBrowser Widgetで表示する場合をご紹介したいと思います。

Browser Widgetの概要説明についてはこちらで説明していますので、
概要だけ知りたい方はこちらをご参照下さい。

[Widgetの説明 Part3](https://qiita.com/Kony_Team/items/3293efc1fe33893825ec)


#2. 実装方法
Webページを表示するためにはメニューから設定する場合と、
Controllerでコーディングを行う方法と2通りがあります。
どちらか自分に合う方を参考にして作成してみてくださいね。

##2-1. 外部サイトを表示する場合
はじめに、ブラウザを表示したい場所にBrowser widgetを設置してください。

###メニューから設定する場合
右メニューのMaster Dataの`Edit`を選択し、
<img width="382" alt="スクリーンショット 2020-05-14 17.40.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4256d8fd-6787-69b6-7806-402fe4b90912.png">

下記のように指定してください。

|項目|選択する内容|
|:-----------------|:------------------|
|Type |URL|
|URL|表示したいWebURL(https://www.yahoo.co.jp/)|
|Method|get|
今回はページを表示するだけなので、`get`を選択します。
ページに値を渡したり登録や更新処理を行う場合は、`post`を選択して下さい。
<img width="662" alt="スクリーンショット 2020-05-14 17.37.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/04be6b55-be1e-d768-520d-1cf0418710c1.png">

OKを押して完了です。

###Controllerで設定する場合
上記以外にも、FormのControllerで指定することも可能です。
Controllerで設定を行う場合は、以下のように記載してください。

```javascript
    postShow : function(){
    var urlConf = {
      URL : "https://www.yahoo.co.jp/", //外部サイトのURL
      requestMethod : constants.BROWSER_REQUEST_METHOD_GET
    };
    this.view.brw.requestURLConfig = urlConf; //brwはBrowserWidgetのID名
  },
```
関数の記載が完了したら、Formのアクション設定のpostShowを開き、
Invoke OperationでpostShowを呼ぶように設定します。
<img width="480" alt="スクリーンショット 2020-05-14 14.28.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/69b6965c-d4ba-400c-96bb-dcfb25cdcd32.png">

すると、動画のようにWebサイトが表示されました。
ZoomをONにすると、browserWidgetの拡大を許可します。
BounceをOnにすると、画面を下or上まで引き伸ばすと跳ね返ってくるようなアクションが有効になります。
<img width="373" alt="スクリーンショット 2020-05-14 14.03.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/652efac1-f349-36ff-ba04-bd8bdd377a13.png">
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/AxZDtArAWS">pic.twitter.com/AxZDtArAWS</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1260804468456583168?ref_src=twsrc%5Etfw">May 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



##2-2. Konyで作成したWebアプリを表示する場合
Konyで作成したWebアプリは、デフォルトでズームができないような設定になっています。
Konyで作成したWebアプリのConsoleを開くと、
`user-scarable`が0(=no)になっていることがわかるかと思います。
<img width="803" alt="スクリーンショット 2020-05-14 13.25.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/246536e5-d52c-817f-34e5-7eafb3995965.png">

そのため、BrowserWidgetのメソッドである、evaluateJavascriptを使って、
表示するWebアプリのコードを書き変えにいく必要があります。

`evaluateJavascript`メソッドとは？

>機能：文字列の形式のJavaScriptスニペットを受け入れます。スニペットを評価して、結果を文字列として返します。
記載例：<widgetid> .evaluateJavaScript（snippet）
※()内は文字列となります。
参考：https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Browser_Methods.htm#evaluate

[Konyで作成したWebアプリを表示する場合]で紹介したように、
表示したいWebのURLを指定します。
その後、`onPageFinished`アクションでページが読み込まれた後に、
`brw`ウィジェットで指定されたWebページの中で`changeViewport`アクションを呼ぶように設定します。

```javascript:mobile.js
//BrowserWidgetにWebアプリのURLを指定
  postShow : function(){
    var urlConf = {
      URL : "https://sample",  //作成したWebアプリのURL
      requestMethod : constants.BROWSER_REQUEST_METHOD_GET
    };
    this.view.brw.requestURLConfig = urlConf;
  },

  onPageFinished : function(){
    var self = this;
    self.view.brw.evaluateJavaScript("window.JSLib.changeViewport();"); //brwウィジェットの中でchangeViewport();アクションを呼ぶ
  },
```

モバイル側のアクション設定が完了したら、次はWeb側で`changeViewport`のアクションの中身を作成します。
ここでは、拡大を有効にしたいので、`changeViewport`アクションで、`user-scalable=yes`としています。

Webアプリ側のコード

```javascript:web.js
const CmnAppUtils = function(){
  var fromMobile = false;

  const appService = function (eventobject) {    
    window.JSLib = window.JSLib || {};
    window.JSLib.changeViewport = this.changeViewport;
      }
  };  
  
//user-scarableの値を変更する関数
  const changeViewport = function(){
    var self = this;
    self.fromMobile = true;
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes');
    return {fromMobile};
  };

  return {
    changeViewport : changeViewport,
    appService : appService
  };
}();

```
最後に、
モバイルアプリからWebアプリを起動したときにfunctionが呼ばれるように設定を行います。

WebのResponsive Web/Desktopを選択し、右のアクションから`App Service`のeditを選択します。
<img width="250" alt="スクリーンショット 2020-05-14 13.39.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8746f0b2-6e00-1c6b-1c00-1acc6473c3ef.png">  →  <img width="381" alt="スクリーンショット 2020-05-14 13.39.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/35296237-cff0-11dc-c016-060ac407329f.png">
アクション画面が開くので、先ほど作成したfunctionを呼ぶように以下のように記載してください。
<img width="775" alt="スクリーンショット 2020-05-14 13.40.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7c6e7bf4-9dca-0f6e-ca06-51e94ecb31b1.png">

この様にすることによって、
単純にWebアプリを単純に開いたときには、`changeViewport`はコールされず、
モバイルで開いたときのみ`changeViewport`をコールすることができるようになります。

#まとめ
Konyで作成したWebアプリが拡大できない設定になっているのは、意外な落とし穴だったので、
同じようなことで困っている方がいたら、参考にしてみてくださいね。

#参考
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Browser_Methods.htm#evaluate