GASを使って無料でスプレッドシートをデータベースにしたwebサイトを作ってみた

##要約
- GASを使えばサーバー代なしでホームページを作成できる
- GASなのでスプレッドシートとの連携も簡単
- ただ、普通のサーバーを使いHTMLCSSファイルをあげた場合と異なる部分もいくつかあり注意が必要

##作ったもの
[クラッシュロワイヤルというスマホゲームの試合動画をまとめたサイト](https://script.google.com/macros/s/AKfycbyC_lofrrgSHvEAWdBdri0WaOAvN1L7z7l6bRik7u8/dev)

必要事項をスプレッドシートに手入力+関数で表示し、それをGASで読み取りHTMLに反映させています。
1枚目がデータ元のスプレッドシート、2枚目が完成したwebサイトです。
![データ元のスプレッドシート](http://drive.google.com/uc?export=view&id=1J251JEC3xEl5KaSuwrIwjgNuEq9Gt9Gt)
![完成したwebサイト](http://drive.google.com/uc?export=view&id=1TrmBcGRuFN7-x4dPYfooqIDe5SxfrhqU)




##簡単な説明


GASでwebサイトを作るには、以下の4つのファイルが必要です。

####最低限必要なファイル
#####1.htmlファイル
[AppsScript](https://script.google.com/home)から新しいプロジェクトを作成し、ファイルを追加する。必要事項は適宜追加してください。
><?!= include('css'); ?>

はcssファイルを読み込むスクリプトです。

```html: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>

で要素を囲む必要があります。

```html:css.html
 <style>

 </style>
```
#####３.gasファイル
元から存在するファイルです。最初から記入されているfunction{}は削除し以下を追加してください

```gas:コード.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ファイル
元から存在していますが、設定を弄らないと出てこないファイルです。内容を以下に変更してください。

```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ファイルに記入する必要がありました。
- たまに画像のように謎のエラーにより表示されないことが発生する（アカウント設定などではなさそう）

![完成したwebサイト](http://drive.google.com/uc?export=view&id=1pXSrmHi6mowX0fnYKwUDkvOG0K_IDH04)
#参考サイト
- https://tonari-it.com/gas-html-tag/
- https://tonari-it.com/gas-web-appli-spreadsheet-append/