要約
- GASを使えばサーバー代なしでホームページを作成できる
- GASなのでスプレッドシートとの連携も簡単
- ただ、普通のサーバーを使いHTMLCSSファイルをあげた場合と異なる部分もいくつかあり注意が必要
作ったもの
クラッシュロワイヤルというスマホゲームの試合動画をまとめたサイト
必要事項をスプレッドシートに手入力+関数で表示し、それをGASで読み取りHTMLに反映させています。
1枚目がデータ元のスプレッドシート、2枚目が完成したwebサイトです。
簡単な説明
GASでwebサイトを作るには、以下の4つのファイルが必要です。
最低限必要なファイル
1.htmlファイル
AppsScriptから新しいプロジェクトを作成し、ファイルを追加する。必要事項は適宜追加してください。
!= include('css'); ?>
はcssファイルを読み込むスクリプトです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<?!= include('css'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<base target="_top">
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
2.cssファイル**
新しいファイルを追加してください。
< style>
で要素を囲む必要があります。
css.html
<style>
</style>
３.gasファイル
元から存在するファイルです。最初から記入されているfunction{}は削除し以下を追加してください
コード.gs
function doGet() {
const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput.setTitle("TopPlayer'sMatch");
return htmlOutput;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
4.jsonファイル
元から存在していますが、設定を弄らないと出てこないファイルです。内容を以下に変更してください。
appsscript.json
{
"timeZone": "Asia/Tokyo",
"dependencies": {},
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "ANYONE_ANONYMOUS"
},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [
"https://www.googleapis.com/auth/spreadsheets.currentonly",
"https://www.googleapis.com/auth/spreadsheets"
],
"runtimeVersion": "DEPRECATED_ES5"
}
スプレッドシートを引用した部分
まずスプレッドシート何行目までデータが入っているかを取得しiに入れ、そこからfor文で回してデータの数だけ要素を作ります。
今回はスプレッドシートの１列目に選手名、３列目に遷移先のURL、４列目に画像のURLを入れていたのでそのまま各要素に入れています。
<div class="col_3">
<?
var myData = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
for(var i=1;i<myData.length;i++){
output.append('<div class="card">' +
'<div class="content-img">'+
'<img src="'+ myData[i][3] + '" />'+
'</div>'+
'<p class="playername"> プレイヤー名 </p> ' +
'<p>' + myData[i][0] + '</p>' +
'<a href="' + myData[i][2] + '"></a>' +
'</div>'); }?>
</div>
GASでwebサービスを作るメリット
- 無料でwebサイト公開までできる
- スプレッドシートとの連携が楽
- データベースが簡単で難しい知識がなくてもスプレッドシートが使えればOK
GASでwebサービスを作るデメリット
- 画面上に「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」という表示がデフォルトで出てしまう
- 普通のHTMLでできることができない場合がある。OGPの設定はHTMLのようにmetaタグに記入する方法ではできませんでした。タイトルもHTMLファイルにではなくGASファイルに記入する必要がありました。
- たまに画像のように謎のエラーにより表示されないことが発生する（アカウント設定などではなさそう）
