GASで動的HTMLページを作成したかった。
GASのHTMLが気になったので試しに作ってみました。コンテンツとしてDog APIを利用させていただきました。
Dog APIを使ってみた。
Dog APIはトークン（認証）なし・ヘッダーオプションなしで利用できるので非常にお手軽です！
Dog API（犬の画像をランダムに1枚返してくれるAPI）
https://dog.ceo/dog-api/
まずは、Dog APIの仕様を確認してみましょう。
Dog APIのエンドポイントにfetchするとjson形式のresponseが返ってきます。
とてもシンプルなjsonで、jsonの中のmessageという名前のプロパティがあり、そのパラメータとして画像urlが格納されているようです。それを使ってWebページに表示してみたいと思います。
GASのHTMLの概要
GASのHTMLはちょっと独特です。
基本的には１つの.gsのGASファイルと１つの.htmlファイルが最小構成となります。
詳しい説明は後述の参考サイトなどを参照ください。
Javascript（GASではない）や、CSSも使うことが出来ます。
実装
Googleドライブにスタンドアローンのプロジェクトを作成し、同じプロジェクト内に下記の2つのファイルを作成します。
コード
main.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
GASでHTMLする時の基本中の基本の構文です。
引数で渡すのはhtmlのファイル名です。ここではindexとしていますが、それ以外の名前を付けた場合は引数の名前も統一する必要があります。
index.html
下記はとりあえず表示できれば良いというコードです。
下記だけをを見ると基本的には普通のHTMLと同じですね。（一部GASならではの書き方もあるようです。）
今回は画像を表示するためにimgタグを動的に作成したいと思います。
createElementでimgタグを生成して、そのsrcにDogAPIから取得した画像アドレスを渡してbodyタグにアペンドします。
<!DOCTYPE html>
<html>
<body>
<script>
const url = "https://dog.ceo/api/breeds/image/random";
function fetchDogImagePath(url){
return fetch(url).then( (res) => res.json());
}
async function fetchDogImage (url){
const response = await fetchDogImagePath(url);
const imageElement = document.createElement('img');
imageElement.src = response.message;
document.body.appendChild(imageElement);
}
fetchDogImage(url);
</script>
</body>
</html>
デプロイする
コードが書けたら、実際に公開するにはデプロイが必要です。
「ウェブアプリケーションとして導入」の設定を行います。
表示されたURLをコピーします。
このURLがWebページのアドレスになります。Execute（実行者）は自分、アクセス者はアノニマスにします。
アクセス者の値を変更するとGoogleアカウントログイン済みのユーザでないとアクセスできなくなります。
アクセスする
↑で発行されたURLをブラウザのアドレスバーにコピペしてアクセスします。
わんちゃんの画像が表示されました。
何度かブラウザをリロードすると、そのたびに画像が変わります。
ブラウザ開発者ツールを使ってHTMLソースを見てみると、imgタグがbodyにアペンドされているのがわかりました。
GASならではのGoogleDriveファイルと連携したページ作成もできるようで面白そうですね！
色々と試してみようと思います。
参考
（いつも隣にITのお仕事）Google Apps ScriptでWebアプリケーションを作る最初の一歩
https://tonari-it.com/gas-web-application-beginner/
余談
HTMLファイル内で GASの新しいV8ランタイムから使用可能なアロー関数を使っていますが、V8ランタイムを無効にした状態でも動作します。
これはHTMLはクライアント側で動くものだからでしょう。
続き
GASで動的HTML② HTML内でGoogleドライブの画像ファイルを表示させる。
https://qiita.com/jooji/items/b89ce338af359742e813