GASでサンプルのWebページを公開
オンライン上でサンプルのWebページをHTML, CSS, JavaScriptのコードを含めて見せたいときはCodepenやJSFiddleが使用されることが多いが、IT企業によってはこれらが使用禁止になっていることがある。
コードを書いている人だとHTML, CSS, JavaScriptのサンプルコードを見た目や動作込みで見せたい場合はこれらが使用できないと都合が悪いことがある。
しかし、IT企業であればGoogleスプレッドシートおよびGoogle Apps Script(GAS)は使用可能の場合がほとんどなので、これらを代用として使用することが可能だ。(無料)
サンプルのWebページを公開する方法
まず、アドレスバーにsheet.newを入力して新規スプレッドシートを開く。
新規スプレッドシートを開いたらツールからスクリプトエディタを選択して開く。
スクリプトエディタを開いたら以下のコードを貼り付ける。
doGet()は公開したウェブアプリケーションのURLへのアクセス時に実行される。
要約するとURLへのアクセスがあったらindex.htmlを返すというコードになる。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
index.htmlファイルも必要になるのでスクリプトエディターのファイル => New => HTMLファイルを選択して新規HTMLを作成する。
新規HTML作成後のHTMLファイル内は下記のようになっている。この状態だと何も表示されないので、「TEST」のような適当なテキストを入れておく。
説明のためのサンプルなので簡素にしたが、style、link、scriptタグも使用可能で、外部からファイルを読み込むことも可能なので覚えておくとよいだろう。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
TEST
</body>
</html>
あとは「公開 => ウェブアプリケーションとして導入」を選択して「Who has acess to the app」を「Only myself」から「全ユーザー」に変更してDeployボタンを押すだけ。
公開用のURLが表示されるので、そこにアクセスすればGoogleアカウントでログインしているユーザーであれば誰でも閲覧可能になる。
Templated HTMLの使用方法
先程のコードを以下のように書き換えるとテンプレートタグが使用できるようになる。
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
例えばindex.htmlに「今年は年」と記述すれば「今年は2020年」と表示される。
ifやforも使用できるので以下のように条件分岐も可能だ。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? if (new Date().getFullYear() === 2020) { ?>
<h1>今年は2020年です。</h1>
<? } else { ?>
<h1>今年は2020年ではありません！</h1>
<? } ?>
<ul>
<?
var data = ['foo', 'bar', 'baz'];
for (var i = 0; i < data.length; i++) {
?>
<li><?= data[i] ?></li>
<? } ?>
</ul>
</body>
</html>
JavaScriptっぽい記述だがforEachなど使用できないメソッドもあるので注意。
スプレッドシートから値を取得する
先程はdata配列の値を表示させていたが、GASを使用すればGoogeスプレッドーシートのセルに入力した値も表示できる。
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1c4l2qtpsJaVs1lw3ezg6DKR_Npg8_u2gvfKr6XA5tNQ')
.getActiveSheet()
.getRange('A1:A3')
.getValues();
}
<ul>
<? var data = getData(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
<li><?= data[i] ?>
<? } ?>
</ul>
openByIdはGoogeスプレッドーシートのURLのID。
今回のスプレッドシートだとURLが下記のようになっているので太字の部分がID。
https://docs.google.com/spreadsheets/d/1c4l2qtpsJaVs1lw3ezg6DKR_Npg8_u2gvfKr6XA5tNQ/edit?usp=sharing
スプレッドシートのセルの内容を更新すればHTMLの内容もリロードすれば変わるのでコードを書かないディレクターやデザイナーにセルの値を変えてページをチェックしてもらうこともできる。
HTMLファイルにHTMLファイルを読み込む
GASではHTMLファイルは作成できるがCSSやJSファイルは作成できない。
しかしinclude関数を作成してstyleタグやscriptタグを含むcss.htmlやjs.htmlを作成して読み込むことができる。
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
function include(file) {
return HtmlService.createHtmlOutputFromFile(file)
.getContent();
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body>
<h1>Hello</h1>
<?!= include('js'); ?>
</body>
</html>
<!-- css.html -->
<style>
h1 {
color: #c00;
}
</style>
<!-- js.html -->
<script>
var h1 = document.querySelector('h1');
h1.addEventListener('click', function() {
alert('Hello');
});
</script>
https://script.google.com/macros/s/AKfycbzhvM-DjHhHEBYXpvx2f1CAGW7cMwVXo1em6YpNMjf5LhqIpP5o/exec
