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

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

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

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

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

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

でもね

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

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

手順

概要

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

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

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

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

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

画面上部のツールからスクリプトエディタを選択し、
スクリプトの作成を始めます。

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

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

できたら画面上部の関数名を選ぶところから getTable を選び、
デバッグ を叩いて問題なく動きそうなことを確認しましょう。

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

スプレッドシートの内容を取得できるようになったので、ページを構成する HTML を作りましょう。
画面左側の + マークから HTML を作成できます。ちょうど以下の画像の感じです。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 のうち、スクリプトな部分だけを抜き出すと以下のようになります。

      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列
ぱんだ	うさぎ	こあら
ぱんだ	うさぎ	こぶら
ぱんだ	うなぎ	こあら

<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 という名前のはずです）を開き、新しい関数を追加します。

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

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

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

画面右上からアプリを公開すれば OK です。

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

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

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

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