Googleスプレッドシートでmetaを管理しよう。(前編)

大規模サイトを構築する時に全体のmeta管理をするのは、非常に大変です。
今回紹介する方法で管理すればヒューマンエラーのリスクがかなり軽減されるのではないでしょうか。

今回の記事ではgulpのタスクとして一旦、Googleスプレッドシートの値を元にjsonファイルを作成するプログラムを作成するところまで記していこうと思います。

後編の記事はpugのタスクを追加してjsonのデータを元にmetaが入るプログラムを紹介します。
今回用でgulp環境を構築しているためタスクの管理が雑多なのでご了承ください。
 
 

作業前準備

今回の内容はほぼこちらの記事を参考にしたものとなるので、準備の工程は記事を参考に進めてください。(GCPのくだりです)
gulpも動く環境であることも前提としています。
 
 

動作環境

$ node -v
v10.13.0

$ npm -v
6.4.1

 
 

ディレクトリ構造


 
 

package.json

{
  "name": "sheet_api_for_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "fs": "0.0.1-security",
    "google-auth-library": "^1.4.0",
    "googleapis": "^30.0.0",
    "gulp": "^3.9.1",
    "gulp-util": "^3.0.8",
    "readline": "^1.3.0",
    "util": "^0.10.3"
  }
}

 

 

gulpfile.js

const fs = require('fs');
const gulp = require('gulp');
const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});
const {google} = require('googleapis');
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets'];
const TOKEN_DIR = __dirname;
const TOKEN_PATH = TOKEN_DIR + '/api_token.json';

gulp.task('sheet', () => {
  fs.readFile(TOKEN_DIR + '/client_secret.json', (err, content) => {
    if(err){
      console.log(err);
    }
    else {
      const credentials = JSON.parse(content);
      const clientSecret = credentials.installed.client_secret;
      const clientId = credentials.installed.client_id;
      const redirectUrl = credentials.installed.redirect_uris[0];
      const oauth2Client = new google.auth.OAuth2(clientId, clientSecret, redirectUrl);

      fs.readFile(TOKEN_PATH, (err, token) => {
        if (err) {
          storeToken(oauth2Client);
        } else {
          createJson(oauth2Client, JSON.parse(token));
        }
      });
    }
  });

  function storeToken(auth){
    const authUrl = auth.generateAuthUrl({
        access_type: 'offline',
        scope: SCOPES
    });

    console.log('下記URLにアクセスしてください:\n', authUrl);

    rl.question('コードを貼り付けてください: ', (code) => {
      rl.close();

      auth.getToken(code, (err, token) => {
        if (err) {
          console.log('アクセストークンの取得中にエラーが発生しました', err);
        }
        else {
          auth.credentials = token;

          try {
            fs.mkdirSync(TOKEN_DIR);
          } catch (err) {
            if (err.code != 'EEXIST') throw err;
          }

          fs.writeFileSync(TOKEN_PATH, JSON.stringify(token));
          console.log('トークンが保存されました ' + TOKEN_PATH);
          createJson(auth, token);
        }
      });
    });
  }

  function createJson(auth, token){
    auth.credentials = token;
    const sheets = google.sheets('v4');

    sheets.spreadsheets.values.get({
      auth: auth,
      spreadsheetId: '{{ スプレッドシートのidを入れてください }}',
      range: '{{ シート名を入れてください }}'
    }, (err, response) => {
      if(err){
        console.log('err: ' + err);
      }
      else{
        let val    = response.data.values;
        let y_len  = val.length;
        let x_len  = val[0].length;
        let _obj   = {};

        for (var i = 1; i < y_len; i++) {
          let _pos = _obj[val[i][0]] = {};
          for (var k = 1; k < x_len; k++) {
            _pos[val[0][k]] = val[i][k];
          }
        }

        _obj = JSON.stringify(_obj, null, 2);

        fs.writeFileSync(TOKEN_DIR + '/meta.json', _obj);
        console.log('生成されました');
      }
    });
  }
});

{{ }}で囲っている部分はご自分の環境を確認の上入れてください。
 
 

スプレッドシート


 
 

実行

gulp sheetコマンドを実行するとまずはトークンを取得する処理が始まります。

urlからコードを取得するとapi_token.jsonが作成されその後、スプレッドシートの値を元にmeta.jsonが作成されます。

{
  "/index.html": {
    "title": "TOP",
    "keyword": "top,keyword",
    "description": "top_description"
  },
  "/hoge/index.html": {
    "title": "HOGE",
    "keyword": "hoge,keyword",
    "description": "hoge_description"
  },
  "/hoge/hoge/index.html": {
    "title": "HOGEHOGE",
    "keyword": "hoge2,keyword",
    "description": "hoge2_description"
  },
  "/fuga/index.html": {
    "title": "FUGA",
    "keyword": "fuga,keyword",
    "description": "fuga_description"
  },
  "/fuga/fuga/index.html": {
    "title": "FUGAFUGA",
    "keyword": "fuga2,keyword",
    "description": "fuga2_description"
  }
}

token作成処理は初回のみなので次回からはその処理は省略されます。
api_token.jsonは当然個人ごとにそれぞれ管理するものなので、gitignoreファイルに追記しましょう。

前編は終わりです。
 
Googleスプレッドシートでmetaを管理しよう。(後編)