Googleスプレッドシートでウェブサイトの情報を管理する

#概要
ブログをつくる場合はWordPressといったCMSを使用するのが一般的です。
ただ、サイトによっては、大掛かりな管理は必要ないけど、のせる情報をハードコーディングしたくない場合があるかと思います。そんな時に使えるGoogleスプレッドシートで情報を管理する方法を紹介します。
今回はnode.jsを使用してGoogleスプレッドシート（Google Sheets API）からデータを取得するため、「[google-spreadsheet](https://www.npmjs.com/package/google-spreadsheet)」というnode.jsのパッケージを使用しています。

#設定する
こちらの方法に沿って設定を行います。（Googleのアカウントを持っている前提で進めます）
https://www.npmjs.com/package/google-spreadsheet#service-account-recommended-method

## 1. Google APIsでプロジェクトをつくる

https://console.developers.google.com/cloud-resource-manager
新しくプロジェクトを作成します。
![アートボード 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/51b14c96-8463-8018-316b-1fc5dabad4fc.png)
名前は適当に。
![アートボード 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/1919d384-0faf-8247-f016-1b24e7cc70dc.png)
追加されたら、左上のアイコンからプロジェクトの画面に移動します。
![アートボード 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/3410816f-3f7d-6c6c-f1b8-a219159714cc.png)

## 2. プロジェクトにAPIを追加する

左のメニューからライブラリを選びます。
![アートボード 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/c6aa1d75-fd3c-5e0e-a600-5d6d5f344f3d.png)
検索メニューから`Google Sheets API`を検索し、「有効にする」を選択します。
![アートボード 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/83d83105-8dfe-3083-2f66-76acf7364ea1.png)

## 3. サービスアカウントを作成し、秘密鍵ファイル（json）をつくる

Google Sheets API画面の左メニューから認証情報を選び、サービスアカウントを作成します。
![アートボード 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/8e877418-c31e-2548-ddc8-084d6c94e94a.png)
適当な名前でサービスアカウントをつくります。
![アートボード 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/2166f659-d185-f3b9-8588-86902e9cefbc.png)
役割は「オーナー」を選択します。
![アートボード 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/80a6c3c8-3398-1abf-f857-a2584f07d4f2.png)
完了する前に「キーを作成」します。
![アートボード 16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/e5e1cf39-63aa-9add-aa7a-e86c0a804c91.png)
「JSON」を選択し、作成します。
![アートボード 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/3245cee6-02b0-7810-2e3a-7c32d38056be.png)
ダウンロードされた秘密鍵のJSONは大切に保存してください。
![アートボード 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/0c4a2f9b-af25-1282-c383-829f5fdaaf80.png)


## 4. Googleスプレッドシートの共有設定に追加する

秘密鍵ファイル内にある`client_email`をGoogleスプレッドシートの共有先に設定します。
![アートボード 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/6828badf-903b-4934-a7d0-de51b64a400c.png)
![アートボード 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163452/96facc8f-a5d9-a1bd-969e-9a65659dd2fa.png)




#実装する
今回は、Googleスプレッドシートから取得した情報をjsonファイルとして書き出します。

## 1. 必要なパッケージをインストールする

node.jsは`v11.13.0`を使用します。

```
mkdir google-sheets-api-sample
cd google-sheets-api-sample/
npm init -y
npm install google-spreadsheet async
```

## 2. コードを書く
今回、スプレッドシートの１行目をオブジェクトのkeyとして取得し、２行目以降をvalueに入れてオブジェクトにしました。
セルの情報をどう扱い、どのようなjsonを書き出すかは、`workingWithCells`の中で設計しています。

```javascript:sample.js
const GoogleSpreadsheet = require('google-spreadsheet');
const async = require('async');
const fs = require('fs');

const doc = new GoogleSpreadsheet('<spreadsheet key>');  //スプレッドシートのURLから/d/の後の文字列を取得
let sheet;

async.series([
  function setAuth(step) {
    const creds = require('./google-generated-creds.json');  //秘密鍵のjsonの場所を指定
    doc.useServiceAccountAuth(creds, step);
  },
  function getInfoAndWorksheets(step) {
    doc.getInfo(function(err, info) {
      sheet = info.worksheets[0];
      step();
    });
  },
  function workingWithCells(step) {
    let key_list = [];
    let output = [];
    //1-3行目、1-4列目までを取得
    const max_col = 3;
    sheet.getCells({
      'min-row': 1,
      'max-row': 4,
      'min-col': 1,
      'max-col': max_col,
      'return-empty': true
    }, function(err, cells) {
      //1行目からkeyを取得 
      for (let i=0; i<max_col; i++) {
        key_list[i] = cells[i].value;
      }
      //2行目以降をオブジェクト化
      for (let j=1; j<cells.length / max_col; j++) {
        let col_data = {};
        for (let k=0; k<max_col; k++) {
          col_data[key_list[k]] = cells[max_col * j + k].value;
        }
        output.push(col_data);
      }
      //json書き出し
      fs.writeFileSync('./data.json', JSON.stringify(output));
    });
  },
], function(err) {
  if (err) {
    console.log('Error: ' + err);
  }
});
```
## 3. 実行する

```
node sample.js
```
これで`data.json`が生成されます。


# まとめ
この技術を使用して、魚の漢字を覚えるサイトを作成しました。
漢字のデータをGoogleスプレッドシートで管理しています。
https://kanji-of-fish.com/

今回、googleスプレッドシートからデータを読み込み、jsonファイルを作成する方法を紹介しましたが、Google Sheets APIを使用すれば、シートに情報を書き込むことや、新しくシートを作成することも可能です。「サイトで使用するデータを外部で管理したい」といった要望がありましたら、使用してみてください。