NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみた

2019-09-13T18:30:51+09:00

Spread Sheet APIを見てたら、Googleフォームみたいに空いている行に追記できるらしい...
便利そうなので、汎用的に使えるようにNOW APIとしてデプロイできるようにしてみた＆GitHubにも公開してみた。

作ったもの

GitHub: Append Row API using ZEINT NOW and Spread Sheet API

こんな感じで、API叩くとスプレッドシートに追記できる。

使い方: デプロイする

1. git clone

まずはgit clone

$ git clone https://github.com/memory-lovers/append-row-api_zeit-now.git

2. サービスアカウントのキーファイルの配置

credential.jsonというファイル名で、認証情報のキーファイルを配置

3. 追記したいスプレッドシートの権限設定

そのままだとサービスアカウントに書き込み権限がないためエラーに...
そのため、追記したいスプレッドシートの共有権限にサービスアカウントを追加が必要。

サービスアカウントの作成やスプレッドシートの共有設定は、
以下の記事がわかりやすかった...(´ω｀)
「Node.jsでGoogleスプレッドシートを操作する - LCL Engineers' Blog」

3. ローカルで試す

now devコマンドでローカルで動かすことができます。
実行するとhttp://localhost:5001で起動します。

$ now dev -p 5001
// or
$ npm run dev

nowコマンドやアカウントがない場合...

こちらのZEITのページからログイン&アカウント作成!

公式ドキュメントにあるように、インストールとログイン!

# nowコマンドのインストール
$ npm i -g now

# CLIでのログイン
$ now login

3. ZEIT now にデプロイ

nowコマンドでデプロイできます。
プロジェクト名は、now.jsonのnameに書いてあるappend-apiになります。

$ now
// or
$ npm run deploy

使い方: API の呼び出し

デプロイした API は、以下のパラメタを受け取ります

追記するシートの ID: spreadsheetId
追記する内容の配列: values

curl で呼び出すサンプルは以下のとおりです。
URL には、https://append-api.memory-lovers.now.sh
のようなデプロイした URL を設定。

ローカルで起動した場合は、https://localhost:5001を設定。

#!/bin/bash

SHEET_ID='YOUR_SHEET_ID'
URL='API_URL'

curl -i \
-H "Accept: application/json" \
-H "Content-Type:application/json" \
-X POST --data '{ "spreadsheetId": "'$SHEET_ID'", "values": [ ["A", "B", "C"], ["D", "E", "F"] ]  }' \
"$URL/append"

コードはこんな感じ。

主にExpressに関する処理が多いですが、Google APIsを使うのは、
const doAppend = async (spreadsheetId, values) => {のあたりに集約。

import bodyParser from "body-parser";
import Express from "express";
import { google } from "googleapis";
require("./credential.json"); // サービスアカウントの認証情報
const app = Express();

// POSTのBODYにJSONを使うため、body-parserを有効化
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

/**
 * Spread Sheetに行を追加する処理
 * @param {String} spreadsheetId シートID
 * @param {String[][]} values 追記するデータ。2次元配列で指定
 */
const doAppend = async (spreadsheetId, values) => {
  // パラメタのチェック
  if (!spreadsheetId || !values) throw new Error("Error: Invalid Params");

  // Spread Sheet APIを使うための認証処理
  const auth = await google.auth.getClient({
    scopes: ["https://www.googleapis.com/auth/spreadsheets"]
  });
  const sheets = google.sheets({ version: "v4", auth });

  // APIを呼び出して、行の追加処理
  const req = {
    // シートのID
    spreadsheetId: spreadsheetId,
    // A1に追記することを指定
    range: "A1",
    // 追記する形式を指定。
    valueInputOption: "USER_ENTERED",
    // A1に値があったら下方向に空欄を探しにいく
    insertDataOption: "INSERT_ROWS",
    // 追加する行のデータ。2次元配列で指定
    resource: {
      values: values
    }
  };
  await sheets.spreadsheets.values.append(req);
};

// '/append'にアクセスしたら、doAppend関数を呼ぶようにマッピング
app.post("/append", async (req, res) => {
  try {
    // パラメタのチェック
    if (!req.body) throw new Error("Error: Empty Body");

    // パラメタの取得
    const spreadsheetId = req.body.spreadsheetId || "";
    const values = req.body.values || "";

    // 追記処理の呼び出し
    await doAppend(spreadsheetId, values);

    res.end();
  } catch (error) {
    console.error(`Error in append: ${error}`, error);
    res.status(500).send({ error: `${error}` });
  }
});
export default app;

はまったところ...`credential.json`を認識しない...

now.jsonに環境変数GOOGLE_APPLICATION_CREDENTIALSを設定して、
読み込むファイルを指定していたけど、エラーが...

"env": {
  "GOOGLE_APPLICATION_CREDENTIALS": "./credential.json"
}

Error in append: Error: The file at ./credential.json does not exist, or it is not a file.

デプロイされたフォルダを見てみると、credential.jsonが配置されていない...

いろいろ調べてみたところ、ビルドをするので関連のないファイルは配置されないっぽい...
なので、index.jsの冒頭に以下を追加して、読み込むように変更してみたところ、
うまく認識されるようになったヽ(=´▽`=)ﾉ

require("./credential.json"); // サービスアカウントの認証情報

活用事例1: 問い合わせ管理

開発しているWebサービスの問い合わせ効率化のために利用(´ω｀)

Nuxtに用意したフォームで受けた内容をスプレッドシートに転記して管理できるように♪

書籍のリクエスト、できてきた(*´ω｀*)ピタゴラスイッチ的にFirestoreトリガーで、Slackに通知とSpread Sheetに追記ヽ(=´▽`=)ﾉ

これで、だいぶ楽になるはず(*´ω｀*)♪ pic.twitter.com/9SIY2T23u3
— 積読ハウマッチ📚きらぷか (@kira_puka) September 12, 2019

以前、書いた記事のSlackAPIも使い、
通知と管理を一度にできるようになりましたヽ(=´▽`=)ﾉ

活用事例2: 統計情報の収集

定期的にユーザ数やデータ数などを集計してスプレッドシートに追記できるように！
スプレッドシートに追記するとグラフを出せるようになるのですてき(´ω｀)

SpreadSheetAPIとなかよくなれたのでとりあえず、取ってる統計データを入れてみた(*´ω｀*)ここ1週間で、1,300万円分が積まれ、総額2,000万円近く、登録されてた( ﾟдﾟ)!強者達が...集まってきている...((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ#積読ハウマッチ pic.twitter.com/esCqTrQmLK
— 積読ハウマッチ📚きらぷか (@kira_puka) September 11, 2019

個人開発なので常に稼働が足りないですが、
こういった裏方作業的なのも、もっと効率化していけるようになりたい...!!

以上!!

こんなのつくってます！！

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで

「SpreadSheetAPI」の記事 - Crieit

NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみた

作ったもの

使い方: デプロイする

1. git clone

2. サービスアカウントのキーファイルの配置

3. 追記したいスプレッドシートの権限設定

3. ローカルで試す

nowコマンドやアカウントがない場合...

3. ZEIT now にデプロイ

使い方: API の呼び出し

コードはこんな感じ。

はまったところ...`credential.json`を認識しない...

活用事例1: 問い合わせ管理

活用事例2: 統計情報の収集

こんなのつくってます！！

参考にしたサイト様

「SpreadSheetAPI」の記事 - Crieit

NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみた

はまったところ...credential.jsonを認識しない...

はまったところ...`credential.json`を認識しない...