にわかプログラマの備忘録

仕事の過程で調べたことを忘れないように記載しています

作って覚えるGAS:献立スロット3

HTMLの作成

HTMLファイルの作成

f:id:sorane0908:20210729153102j:plain
ファイルの追加

「ファイル」の横の+をクリックしHTMLファイルを作成します。
(ファイル名は「index.html」としました)

普通はJavascriptCSSはファイルを分けるのですが、今回はそんなに情報量も多くないので1つのファイルで作っていこうと思います。

HTMLファイルの大枠を作る

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      /* cssを書くところ */
    </style>
  </head>
  <body>
    Hello World!
    <script>
      //javascriptを書くところ
    </script>
  </body>
</html>

レシピ表示などにJQueryを使用する予定なので、最初から読み込んでおきます。
これで、HTMLが表示されれば「Hello World!」が表示されるはずです。
HTMLファイルを表示できるようにしましょう。

GASからHTMLファイルを開くようにする

作成したHTMLファイルにはURLがありません。
今回作成したGASのURLを発行しても現状何も起こりません。
まずはGASにアクセスがあったらHTMLファイルを開くようにします。

そのために、下記の文言をgsファイルに追加します。
(私の場合はcode.gs)

//htmlを表示
function doGet() {
  var toppage=HtmlService.createTemplateFromFile("ファイル名");
  return toppage.evaluate();
}

ファイル名部分には開きたいHTMLファイルの”○○.html”の”○○”だけを入力します。

ここで、アプリを公開(デプロイ)してみましょう。

f:id:sorane0908:20210729155238j:plain
デプロイ

右上のデプロイをクリックし「新しいデプロイ」を選択します。
「Webアプリ」を選択し、説明文などは後からでも変更できるので適当に入力し「デプロイ」をクリックします。
するとURLが発行されると思いますので、それをクリックすると別タブが開き「Hello World!」のHTMLファイルが表示されます。>

f:id:sorane0908:20210729160050j:plain
Hello Warld

今後はHTMLを確認したい場合は「デプロイをテスト」
最終的に公開する場合は「デプロイを管理」を行います。

ボタンと表示場所を作る

HTMLファイル内の各箇所に下記のコードを追加します。
body内

<a id="slot">回す</a>
<div id="display">
  <table>
    <!-- ここにスプレッドシートの情報を出す -->
  </table>
</div>

script内

//IDがslotの要素をクリックしたら
$("#slot").click(function() {
  console.log("ボタンをクリックしました");
});

入力したら「デプロイをテスト」をしてみましょう。
「回す」という文字が表示されていると思います。

そのファイルを右クリックから「検証」を行い、「Console」に「ボタンをクリックしました」と出ていれば成功です。

GASの情報を受け取る

script内

//IDがslotの要素をクリックしたら
$("#slot").click(function() {
  //GASの関数を呼び出す
  google.script.run.withSuccessHandler(listDisplay).kondateSlot();
});
//GASの関数から受け取った情報をもとに行う処理
function listDisplay(list){
  console.log(list);
}

「Console」にGASで作成したlistArrayの情報が出ていれば成功です。

GASの呼び出しは
google.script.run.withSuccessHandler(処理する関数).呼び出す関数();
となっています。
非同期のため、今回はlistDisplayに処理をまとめて記載していきます。

受け取った情報を表示する

Javascriptだけだと面倒なのでJQueryを使って表示させます。
function listDisplay(list)内

function listDisplay(list){
  //tableの子要素を削除する
  $( "#display table" ).empty();
  //listの数だけ処理する
  for(let i = 0; i < list.length; i++){
    //表示するHTMLを作成する
    let description = '<tr><td>';
    description += list[i]["sheetName"];
    description += '</td><td>';
    description += list[i]["name"];
    description += '</td><td>';
    description += list[i]["foodstuff"];
    description += '</td><td>';
    description += '<a href="' + list[i]["recipeURL"] + '" target=”_blank”>レシピリンク</a>';
    description += '</td></tr>';
    //table内に出力する
    $( "#display table" ).append( description );
  }
}

これで見た目はいまいちですが、GASの情報が出力できました。
次は見た目を少しマシにします。
(センスがないので少しだけです)