2020/10/09

OK、Riiiver！今日何回怒った？

どうも、こんにちは！JellyWareです。

Getting Started!! Riiiver tutorialの第18弾となります。

このシリーズは、Riiiverやプログラミングを学び、初心者の方でもEco-Drive Riiiverを活用したオリジナルアプリを理解して作れるようになることを目指します。

今回は、スプレッドシートをデータベース代わりにして怒った回数を記録できるようにします。条件分岐を活用して、怒った回数や実行する時間に応じて処理を変えていきます。

まずは基礎となるところを解説します。

どんなモノができる？

以下が完成品のイメージです。

Eco-Drive Riiiver をアレンジして、今日何回怒ったかをカウントします。同時に、怒った回数を通知させます。スプレッドシートに記録していくので、グラフ化させることもできます。日々の記録から怒りっぽさを自覚して改善していきましょう

API を呼び出す場所はウェブサーバー（node.js、Tomcat など）を選びます。
アクセスするデータの種類はアプリケーションデータを選びます。
App Engine または Compute Engine でこの API を使用する予定はありますか？は、いいえ、使用していませんを選びます。

最後に必要な認証情報をクリックします。

次にこのサービス専用のアカウントを作ります。アカウント名はなんでも大丈夫です。

ロールはProject > 閲覧者を選びます。
キーのタイプはJSONを選びます。

最後に次へをクリックすると認証情報がまとめられたJSONファイルをダウンロードされるので、大切に保管しておいてください。

請求の無効

念の為、GCPでの請求を無効とする設定方法をまとめます。

お支払いをクリックします。

請求先アカウントを管理をクリックします。

左上のマイプロジェクトをクリックします。

対象のプロジェクトの課金を無効にするをクリックすれば、設定変更できます。

今回作成したプロジェクトは、既に無効になっていると思います。

google-spreadsheet

google-spreadsheetとは、上記で設定したGoogle Sheet APIをNode.jsで使用するためのモジュールです。

スプレッドシートの指定
認証処理
スプレッドシートの情報取得
シートの取得
セルに値を記入したり、取得したりする

基本的に上記の流れとなっていて、決まりとして書くコードが少し多いです。

準備

glitchのプロジェクト作成とスプレッドシートの準備をします。

次に、認証に必要な情報を.envに書き込んでいきます。.env内に記載されている内容は、プロジェクト作成者本人しか確認することができません。

まずは.envを開いてSECRETとMADE_WITHを、それぞれprivate_keyとclient_emailに書き換えます。

Variable Valueには、ダウンロードしたJSONファイルに記載されている値を記載してください。

最後にgoogle-spreadsheetをモジュールを追加します。

これでglitch側の準備はOKです。次にスプレッドシートを作成しましょう。

スプレッドシートを作成したら、リンクを知っている全員を編集者に変更します。GoogleアカウントとGCPのアカウントは紐づいていますが、権限が同じになるわけではないので注意してください。

これで準備OKです。

スプレッドシートの指定

まずは、スプレッドシートの指定方法について説明します。スプレッドシートの指定には「スプレッドシートキー」が必要です。

スプレッドシートキーは、URLのhttps://docs.google.com/spreadsheets/d/と/edit#gid=0で挟まれている文字列です。

それでは、実際にコードを確認しましょう。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

今までと異なり、モジュールを読み込む際には{GoogleSpreadsheet}と{}を使う必要があります。理由はimportのフォーマットで決まっているためです。参考

const doc = new GoogleSpreadsheet(spreadSheetKey);

重要なのはこの1行で、読み込んだモジュールとスプレッドシートキーを使って取得したいスプレッドシートを指定します。

認証処理

認証処理には、先ほど.envに追加した情報を使います。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });
}

doSpreadSheet();

スプレッドシートの指定までは同じです。

await doc.useServiceAccountAuth({
    client_email: process.env.client_email,
    private_key: process.env.private_key.replace(/\\n/g, '\n')
});

スプレッドシートの中身を取得するため、useServiceAccountAuth関数を使って認証処理を行います。非同期処理なのでawaitを活用しています。認証に必要な情報としてclient_emailとprivate_keyを渡します。

引数には.envから読み込んだ値を追加しています。glitchではprocess.env.名前と記載するだけで値を取得できます。またprivate_keyの値は改行コード\nが文字列になっているのでreplace関数を使って文字コードに置換しています。

（非同期処理については、こちらをご参照ください）

スプレッドシートの情報取得、シートの取得

認証処理に成功すると、スプレッドシートの情報を取得できるようになります。タイトルや各シートの情報などが含まれています。

また、合わせてシートの取得も行います。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });
    
    // スプレッドシートの情報取得
    await doc.loadInfo();
    
    // シートの取得
    const sheet = doc.sheetsByIndex[0];
}

doSpreadSheet();

認証処理までは同じです。

// スプレッドシートの情報取得
await doc.loadInfo();

loadInfoを使って取得します。非同期処理のためawaitが必要です。

この処理を挟まないと以降の処理が実行できないので気をつけてください。

// シートの取得
const sheet = doc.sheetsByIndex[0];

シートを取得します。doc.sheetsByIndex[0];の0を変更することで指定するシートを変更できます。

指定する数値とシートは、タブの位置と関係しています。左側から0、1、2…となります。

ヘッダーの追加

ここまでは、glitchで実行されても何も起きなかったと思います。それでは取得したシートに書き込みを行っていきます。

まずは、1行目に書き込みを行います。google-spreadsheetでは、1行目を「ヘッダー（見出し）」として扱えます。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });

    // スプレッドシートの情報取得
    await doc.loadInfo(); 

    // シートの取得
    const sheet = doc.sheetsByIndex[0];

    // ヘッダーの追加
    await sheet.setHeaderRow(["日にち", "怒った回数"]);
}

doSpreadSheet();

上記のコードを試してください。

成功すると、このようにシートに記入されます。

await sheet.setHeaderRow(["日にち", "怒った回数"]);

setHeaderRow関数を使用することでヘッダーを追加できます。引数は配列にしてください。また、非同期処理なのでawaitが必要です。

行の追加

行の追加を行います。先ほど追加したヘッダーは削除しないでください。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });

    // スプレッドシートの情報取得
    await doc.loadInfo(); 

    // シートの取得
    const sheet = doc.sheetsByIndex[0];

    // 行の追加
    await sheet.addRow([new Date(), 0]);
}

doSpreadSheet();

setHeaderRowがaddRowに変更されただけです。同じく、引数は配列で非同期処理です。

このように最終行に追加されていきます。

最終行の取得

最終行の取得を行います。シートは、2行目のA2 B2セルに何かしら入力されていればOKです。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "xxxxxxxxxxxxx"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });

    // スプレッドシートの情報取得
    await doc.loadInfo(); 

    // シートの取得
    const sheet = doc.sheetsByIndex[0];

    // 行情報の取得
    const rows  = await sheet.getRows();

    // 最終行の各セルの取得
    const lastDate = rows.slice(-1)[0]["日にち"];
    const angryNumber = rows.slice(-1)[0]["怒った回数"];

    console.log(lastDate);
    console.log(angryNumber);
}

doSpreadSheet();

シートの取得までは同じです。シートの最終行の値が出力されます。

// 行情報の取得
const rows  = await sheet.getRows();

まずは、行全体を取得しています。各行の情報がオブジェクトで、それらが配列でまとめられています。以下のようなイメージです。

[
      {
          "行数": 1
          "日にち": "8月26日",
          "怒った回数": 0   
      },
      {
          "行数": 2
          "日にち": "8月27日",
          "怒った回数": 3   
      },
      {
          "行数": 3
          "日にち": "8月28日",
          "怒った回数": 5   
      }
  ]

各見出しに対するセルの入力情報がまとめられている、最終行は最後にあるのがポイントです。

// 各セルの取得
const lastDate = rows.slice(-1)[0]["日にち"];
const angryNumber = rows.slice(-1)[0]["怒った回数"];

結果としてこのようにすることで値を取得できます。slice関数については後ほど解説します。

行の更新

行の更新を行います。シートは、2行目のA2 B2セルに何かしら入力されていればOKです。

// モジュール読み込み
const {GoogleSpreadsheet} = require("google-spreadsheet");

// スプレッドシートキー
const spreadSheetKey = "14vt56dNjbMj2RrLQSz4o6WlfhwnwzVW4hB3nymRBHEo"; // ここを差し替える

// スプレッドシートの指定
const doc = new GoogleSpreadsheet(spreadSheetKey);

const doSpreadSheet = async () => {
    // 認証
    await doc.useServiceAccountAuth({
        client_email: process.env.client_email,
        private_key: process.env.private_key.replace(/\\n/g, '\n')
    });

    // スプレッドシートの情報取得
    await doc.loadInfo(); 

    // シートの取得
    const sheet = doc.sheetsByIndex[0];

    // 行情報の取得
    const rows  = await sheet.getRows();

    // 最終行の怒った回数を取得
    const angryNumber = rows.slice(-1)[0]["怒った回数"];

    // 行の更新
    rows.slice(-1)[0]["怒った回数"] = 1;
    await rows.slice(-1)[0].save();
}

doSpreadSheet();

最終行の取得までは同じコードです。

rows.slice(-1)[0]["怒った回数"] = 1;
await rows.slice(-1)[0].save();

取得した時と同様にrows.slice(-1)[0]['怒った回数']を使用していますが、今度は代入しています。

そして、save関数を使用することで更新がシートに反映されます。

これでgoogle-spreadsheetモジュールの使い方については終了です。他にも色々活用できるので興味がある方は調べてみてください。

slice関数

先ほど使用したslice関数について解説します。

const array = [1, 2, 3, 4];
const lastArray = array.slice(-1);

console.log(lastArray) // [4] と出力される

slice関数は、引数を-1とすることで、配列の最後の要素を抜き出して新しい配列を作成できます。

上記だと、[1, 2, 3, 4]という配列から4が抜き出されて[4]という配列が作成されます。

const array = [1, 2, 3, 4];
const lastArray = array.slice(-1);
const last = lastArray[0];
console.log(last) // 4 と出力される

配列の中身を取り出したい場合は、インデックスで0を指定すればOKです。

rows.slice(-1)[0]["怒った回数"]

スプレッドシートでは、さらにヘッダーを指定することで最終行の「怒った回数」を取得していました。

new Date()

タイムスタンプで使用していたnew Date()について少し説明します。

const date = new Date();
console.log(date);

2020-08-27T03:16:13.439Zという形式で日時を取得できます。また、この時間は「協定世界時」という世界基準となる時間で、日本時間より9時間遅いです。

const date = new Date();
const jstTime = date.getHours() + 9;
date.setHours(jstTime);// 日本時間に変換
console.log(date);

日本時間に変換するには9時間増やす必要があります。

dateに対してgetHours()を使用することで「時間」を取得できます。これに9を足して日本時間にします。そして、dateに対してsetHoursを使用することで、引数で指定した時間へ上書きできます。上記ではjstTimeで上書きしています。

次に「年」「月」「日」のみを抜き出して、形式を整えます。

const date = new Date();
date.setHours(date.getHours() + 9);// 日本時間に変換
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();

console.log(`${year}年${month}月${day}日`);

2020年8月27日という形式に変換しました。

dateに対してgetFullYear() getMonth getDate を使用することで「年」「月」「日」をそれぞれ取得できます。

ただし、月に関しては 0 ~ 11 と1つずれているので+ 1が必要です。英語圏では日本のように月を数字で表すのが一般的ではないため、配列のように0からスタートしています。

今回は、一旦ここまでとします。次回、実際に作成した「Piece JSON」と「Piece Func」について解説します。

ご覧くださいましてありがとうございました。

学習コンテンツ一覧はこちら

OK、Riiiver！今日何回怒った？

どんなモノができる？

目次

Google Cloud Platform

アカウント作成

プロジェクト作成

APIの有効化

認証情報の取得

請求の無効

google-spreadsheet

準備

スプレッドシートの指定

認証処理

スプレッドシートの情報取得、シートの取得

ヘッダーの追加

行の追加

最終行の取得

行の更新

slice関数

new Date()

OK、Riiiver！ 今日何回怒った？

どんなモノができる？

目次

Google Cloud Platform

アカウント作成

プロジェクト作成

APIの有効化

認証情報の取得

請求の無効

google-spreadsheet

準備

スプレッドシートの指定

認証処理

スプレッドシートの情報取得、シートの取得

ヘッダーの追加

行の追加

最終行の取得

行の更新

slice関数

new Date()

OK、Riiiver！今日何回怒った？