#目次

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

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

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

Widgetの説明 Part3

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

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

###メニューから設定する場合
右メニューのMaster DataのEditを選択し、

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

項目	選択する内容
Type	URL
URL	表示したいWebURL(https://www.yahoo.co.jp/)
Method	get
今回はページを表示するだけなので、`get`を選択します。
ページに値を渡したり登録や更新処理を行う場合は、`post`を選択して下さい。

OKを押して完了です。

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

    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を呼ぶように設定します。

すると、動画のようにWebサイトが表示されました。
ZoomをONにすると、browserWidgetの拡大を許可します。
BounceをOnにすると、画面を下or上まで引き伸ばすと跳ね返ってくるようなアクションが有効になります。

pic.twitter.com/AxZDtArAWS
— Kony (@Kony12763790) May 14, 2020

##2-2. Konyで作成したWebアプリを表示する場合
Konyで作成したWebアプリは、デフォルトでズームができないような設定になっています。
Konyで作成したWebアプリのConsoleを開くと、
user-scarableが0(=no)になっていることがわかるかと思います。

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

evaluateJavascriptメソッドとは？

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

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

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アプリ側のコード

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を選択します。
→
アクション画面が開くので、先ほど作成したfunctionを呼ぶように以下のように記載してください。

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

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

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