ブラウザウィジェットでローカルファイルを表示する方法

#目次
1. はじめに
2. 実装方法
    3. HTMLファイルを作成
    4. CSSファイルを作成
    5. JSファイルを作成
    6. CSSとJSファイルをHTMLに組み込み
    7. ブラウザウィジェットにローカルファイルを指定
3. まとめ

#はじめに
ブラウザウィジェットでは、公開されているWebブラウザのページを指定して表示することができます。
その他にも、Visualizer上で作成されたHTMLファイルも表示することが可能ですので、
今回はその方法についてご紹介していきたいと思います！

#実装方法
完成イメージはこのような画面になります。
![スクリーンショット 2021-01-07 13.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3ec6e7a7-4a47-11e0-db33-b1de42ae649b.png)


## HTMLファイルを作成

まずはじめに、HTMLファイルを作成します。
左メニューのプロジェクトタブを開き、Webを開いてください。
![スクリーンショット 2021-01-06 17.32.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bbdc7223-0077-2cd6-b1e0-565eb3c74c35.png)

**Localfiles => New => HTML File**を選択すると、
HTMLファイルが作成されます。
![スクリーンショット 2021-01-06 17.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/650cc64a-7ebe-88a5-b2e4-1eb88c588121.png)

作成したHTMLファイルの上で右クリックすると、名前が変更できます。
今回は、home.htmlと名前を設定しました。
![スクリーンショット 2021-01-06 17.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9987fa34-538a-9a15-c4c5-963dfcd07bed.png)

HTMLを開いて、コーディングしましょう。

```home.html
  <!DOCTYPE html>
  <html>
      <head>
      </head>
      <body>
          <div class="container">
            <h2>Welcome to Kony!</h2>
            <p>This is tutorial how to use local file for browser widget.</p>
            <button type="button" onclick="onClickBtnNow()"> Show Alert </button>
          </div>
      </body>
  </html>
```

完成したら、HTMLファイルのプレビューを2通りの方法で確認できます。
方法①：home.html上で右クリックをして、**Open Preview**を選択。
![スクリーンショット 2021-01-07 13.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fe290952-612c-1793-677a-b4d503a15446.png)

方法②：home.html上で右クリックをして、**Launch in external browser**を選択
![スクリーンショット_2021-01-07_13_21_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6acc53eb-a01a-f4d8-b063-8265bd527357.png)

HTMLファイルが正しく作成されているかどうか、
すぐチェックしたい時に確認すると良いと思います:fist:

## CSSファイルを作成
次にCSSファイルを作成していきましょう。

先ほどと同様、**Localfiles => New => CSS File**.を選択してください。
home.cssと名前を変更しました。

CSSファイルにも同様に、コーディングをしてきます。

```home.css
  body{
    height : 100vh;
    display : flex;
    align-items: center;
  }
  .container{
      width : 80%;
      margin : auto;
      text-align : center;
  }
  h2{
    color : #2887f2;
  }
  p{
    color : #646e83;
  }
  button[type="button"]{
    width : 130px;
    height : 30px;
    border-radius : 30px;
    background : #40a8f6;
    outline : none;
    color : white;
    border : none;
  }
  button[type="button"]:hover{
    background : #25699c;
  }
```

## JSファイルを作成
次にJSファイルを同様に作成していきましょう。
**Localfiles => New => JS File**を選択し、名前を変更します。
![スクリーンショット 2021-01-06 17.59.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/47f808bf-6bb9-0b33-6316-53caf256ff41.png)

ファイルを開き、コーディングをします。
今回ボタンクリック時にアラートを出す処理を入れたいので、alertの処理を追加しました。

```home.js
  function onClickBtnNow() {
    alert("Welcome to Kony!");
  }
```

##CSSとJSファイルをHTMLに組み込み
ここまでで全てのファイルが揃ったので、
HTMLにレイアウトとアクションを適用するために、
HTMLファイルを開き、以下のように追加してください。

```home.html
<!DOCTYPE html>
<html>
  <head>
    <link  rel="stylesheet" href="home.css" /> //追加
    <script type="text/javascript" src="home.js"></script> //追加
  </head>
  <body>
    <div class="container">
      <h2>Welcome to Kony!</h2>
      <p>This is tutorial how to use local file for browser widget.</p>
      <button type="button" onclick="onClickBtnNow()"> Show Alert </button>
    </div>
  </body>
</html>
```

##ブラウザウィジェットにローカルファイルを指定
HTMLファイルにレイアウトと動きを持たせることができたので、
最後の仕上げとして、ブラウザウィジェットに作成したHTMLファイルを指定します。

左メニューのProjectタブを開き、
Responsive Web/ Desktop => Formsを右クリック => New Formを選択し、
新しいフォームを作成します。
![スクリーンショット 2021-01-06 18.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0bd256f8-ae92-416f-97dc-1d5d986ba123.png)

フォームができたら、
Default LibraryからBrowserを選択し、フォーム内に設置してください。

Browser Widgetを選択した状態で、
右メニューのBrowserタブ => Master DataのEditをクリック
![スクリーンショット 2021-01-06 18.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6bec2dd9-ec08-4073-37e8-9bea2c9e7093.png)

このような画面が開くので、
Typeのプルダウンで、`Local File`を選択してください。
![スクリーンショット 2021-01-06 18.12.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c49eea5a-e1d5-30bd-99e3-2f2994278a49.png)

どのファイルを指定するか選択ができるため、
虫メガネマークをクリック
![スクリーンショット 2021-01-06 18.16.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d7b3c0ed-2f66-84fe-31e8-f5672390ca9e.png)

対象のHTMLファイルを選択してください。
![スクリーンショット 2021-01-06 18.15.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/71a59365-97d7-f69b-f526-600910307324.png)

ここまでで、ブラウザウィジェットにローカルファイルを指定する方法は以上となります！ 

最後に、どのように表示されるか見てみましょう！

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/BhsEGex1eV">pic.twitter.com/BhsEGex1eV</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1347040705420554243?ref_src=twsrc%5Etfw">January 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

HTMLで指定した内容が表示され、
ボタンをクリックするとアラートが表示されることがわかります:ok_hand_tone1:

#まとめ
Visualizerで作成したHTMLファイルや外部のHTMLコンテンツをアプリに入れたい場合など、
今回紹介した方法で実装ができますので、是非活用してみてくださいね！

#参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/AddLocalHTMLContent.htm