LANG SELRCT

コードを書く場所についてはこちら

2018年8月4日土曜日

HtmlServiceでviewportを使いたい


.addMetaTag()を使います


コード.gsにこのように書くと動いてくれました
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index")
                    .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}


.htmlファイルの<head></head>の中に以下のように書いても動いてくれない
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">



コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index")
                    .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}
意訳
この機能がやること
指定したHTMLファイルを表示する
メタタグのviewportを追加する




index.html
<!DOCTYPE html>
<html>
  <body>
    <button id="bt">button</button>
  <script>
  document.getElementById("bt").onclick = bt_clicked;
  
  function bt_clicked(){
    alert("clicked!");
  }
  </script>
  </body>
</html>

意訳
 


ボタンを配置する

ボタンがクリックされたらbt_clickedを実行する

この機能がやること
clicked!という文字列をアラートに出す







実行結果

スマホで上記のWebアプリを開くと

buttonをタップするとこのようにアラートが出る



補足


viewportを設定しないとこのような表示になる



上部に表示されているこれを消す方法は今のところないようです(2018/08/04現在)

issueには上がっているようです
https://issuetracker.google.com/issues/63521070