More than 3 years have passed since last update.

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

Last updated at 2021-01-08Posted at 2021-01-08

はじめに

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

実装方法

完成イメージはこのような画面になります。

HTMLファイルを作成

まずはじめに、HTMLファイルを作成します。
左メニューのプロジェクトタブを開き、Webを開いてください。

Localfiles => New => HTML Fileを選択すると、
HTMLファイルが作成されます。

作成したHTMLファイルの上で右クリックすると、名前が変更できます。
今回は、home.htmlと名前を設定しました。

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を選択。

方法②：home.html上で右クリックをして、Launch in external browserを選択

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

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を選択し、名前を変更します。

ファイルを開き、コーディングをします。
今回ボタンクリック時にアラートを出す処理を入れたいので、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>