作って覚えるGAS:献立スロット3
HTMLの作成
HTMLファイルの作成
「ファイル」の横の+をクリックしHTMLファイルを作成します。
(ファイル名は「index.html」としました)
普通はJavascriptやCSSはファイルを分けるのですが、今回はそんなに情報量も多くないので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”の”○○”だけを入力します。
ここで、アプリを公開(デプロイ)してみましょう。
右上のデプロイをクリックし「新しいデプロイ」を選択します。
「Webアプリ」を選択し、説明文などは後からでも変更できるので適当に入力し「デプロイ」をクリックします。
するとURLが発行されると思いますので、それをクリックすると別タブが開き「Hello World!」のHTMLファイルが表示されます。>
今後は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の情報が出力できました。
次は見た目を少しマシにします。
(センスがないので少しだけです)