Google スプレッドシートを HTML で見る

# スプレッドシートで書いて HTML で見たい！

## スプレッドシートで書かれた文書って読みにくいですよね

スプレッドシートで書かれた文書って読みにくいですよね。
縦幅・横幅が短いならまだいいのですが、長くなると急に読みにくくなります。表示範囲が限られるんです！

編集するときは Google スプレッドシートで共同編集してガンガン書けるのですが、
いざ落ち着いて書いた内容を読みたいときにちょっとつらいです。

## スプレッドシートを HTML で見れたらいいのでは

HTML で見れるならブラウザの機能で好きにスクロールできます。
見た目についても CSS である程度コントロールできます。
いいことづくめです。

## でもね

用途によっては Google Sites とかもあるのでスプレッドシートにこだわる意味はないです。
ないしは環境によっては Wiki とか GitHub や GitLab で管理すればいいってこともあるでしょう。
GitHub Pages 等を使えば HTML での公開も容易です。
それでも編集をスプレッドシートでやって、閲覧を HTML でやりたい理由がある場合にご一考いただければ。

また、頻繁に変わるものではない かつ スプレッドシートで編集している状態に近い見た目で見せたいのであれば PDF で出力したものを共有するほうがよいでしょう。

# 手順

## 概要

スプレッドシートで表を作り、その内容を GAS で読み込めるようにする。
特定の URL にアクセスしたらスプレッドシートの内容を読み込み、HTML の Table 形式で吐き出したものを GAS に返させる

## スプレッドシートで表を作る

いつもどおり表を作ってください。

この際、データを入れない列と行は削っておくことをおすすめします。
後で HTML にするときに「何も考えず全部表示する！」とすればよくなるからです。楽ちん。
使わない列・行を選択し右クリックすれば「列・行XXXXを削除」という選択肢が出てきますからこれを叩けば消せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633175/a17ed836-ea03-e77f-7615-889fe531ac2f.png)

## 表の内容を取得するスクリプトを用意する

画面上部のツールからスクリプトエディタを選択し、
スクリプトの作成を始めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633175/29ece600-fa74-6cb8-5332-41fa1bec5430.png)

エディタが開いたら以下の内容を書き込みます。

```javascript
function getTable() {
  return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}
```

できたら画面上部の関数名を選ぶところから `getTable` を選び、
`デバッグ` を叩いて問題なく動きそうなことを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633175/01d24cb6-74fb-902f-ea89-b1189feaef5e.png)

## HTML のテンプレートを作成する

スプレッドシートの内容を取得できるようになったので、ページを構成する HTML を作りましょう。
画面左側の + マークから HTML を作成できます。ちょうど以下の画像の感じです。HTML ファイルの名前は適当に決めましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633175/2ce53dd2-4e79-f8b6-5ec4-dd6f7e49080b.png)

作ったら以下の感じで書きます。
以下はただの HTML ではなく、テンプレートとして使われる HTML な点に注意してください。
普通の HTML では `<? ?>` とか `<?= ?>` とかは見られませんものね。

```html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table border="1">
    <?
      const data = getTable();
      const content = data.forEach((row)=>{ ?>
        <tr>
        <? const columns = row.forEach((field)=>{ ?>
          <td>
          <?= field ?>
          </td>
        <?
        }); ?>
        </tr>
      <? }); ?>
    </table>
  </body>
</html>
```

`<? ?>` で囲んだエリアの中ではスクリプトを実行します。ところどころ途切れてしまっても構いません。
上述の HTML のうち、スクリプトな部分だけを抜き出すと以下のようになります。

```javascript
      const data = getTable();
      const content = data.forEach((row)=>{
        // <tr> がそのまま出力される
        const columns = row.forEach((field)=>{
        //   <td> がそのまま出力される
          field // <?= と ?>
        //   </td> がそのまま出力される
        });
        // </tr> がそのまま出力される
      });
```

しかし、実行されたスクリプトそのものは HTML として描画されません。
HTML として描画されるのは `<?= ?>` で囲まれたエリアのみです。

スプレッドシートの内容（＝ `getTable()` の結果）が以下の場合、HTML のテンプレートは次のように出力されます。

| A列 | B列 | C列 |
|:----|:----|:----|
| ぱんだ | うさぎ | こあら |
| ぱんだ | うさぎ | こぶら |
| ぱんだ | うなぎ | こあら |

```html
<tr>
  <td>
    ぱんだ
  </td>
  <td>
    うさぎ
  </td>
  <td>
    こあら
  </td>
</tr>
<tr>
  <td>
    ぱんだ
  </td>
  <td>
    うさぎ
  </td>
  <td>
    こぶら
  </td>
</tr>
<tr>
  <td>
    ぱんだ
  </td>
  <td>
    うなぎ
  </td>
  <td>
    こあら
  </td>
</tr>
```

## HTTP アクセスしたら HTML のテンプレートを使って HTML を表示できるようにする

`getTable` 関数を宣言したファイル（デフォルトだと `コード.gs` という名前のはずです）を開き、新しい関数を追加します。

```javascript
function doGet() {
  // 先につくった HTML のファイル名を入れます。template.html なのであれば template。.html は抜いてください
  const fileName = 'template';
  return HtmlService.createTemplateFromFile(fileName).evaluate();
}
```

HTTP の GET メソッドでこのスクリプトにアクセスされると `doGet` が呼ばれます。
つまり、テンプレートから生成された HTML を返せるようわけです。

## HTTP アクセスできるようにする

画面右上からアプリを公開すれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633175/64eed040-f80c-2b4f-2475-42a6ce01beb0.png)

新しいデプロイをクリックすると「新しいデプロイ」と書かれたウィンドウが出てきます。
まずは右上の「種類の選択」をクリックし、「ウェブアプリ」を選んでください。
すると以下の3つが出てきますので適当に設定してください。

* 説明：アプリの説明
* 次のユーザとして実行：自分
* アクセスできるユーザ：Google アカウントを持つ全員

これでデプロイを実行すれば公開完了です。
終わった後、「ウェブリンク」なる URL が提供されます。ここにアクセスすれば表を閲覧できます。