1
Help us understand the problem. What are the problem?

posted at

Mac + Node.js + Google Sheets APIでGoogleスプレッドシートを参照

採用系のプロダクトを提供している会社でもろもろ担当する予定のAkibinです。
最近は岡村ちゃんにハマってます。めちゃくちゃいまさら感満載ですが、サイコー!
岡村靖幸 - ビバナミダ

やってみたこと

Node.jsとGoogle Sheets APIでGoogleスプレッドシートの内容をMacから参照してみました。
ここらへんの情報はWebに結構多いですが、古くていまいち手順に手間取ったのとNode.js quickstartのアクセストークン取得部分が大まかなので、自分の備忘録の意味も込めて記事にしてみます。

環境

  • MacOS 12.2.1
  • Node.js v16.14.2
  • npm 8.5.0
  • Google Sheets API v4
  • Visual Studio Code

作業概要

  1. Google Sheets APIを有効にする
  2. アクセストークンを取得
  3. ライブラリのインストール
  4. VS Codeでスクリプト実行時の入力の受け取りをできるようにする
  5. サンプルコードの実行(Node.jsからスプレッドシートの参照)

作業

Google Sheets APIを有効にする

  1. GCP > IAMと管理 > プロジェクトを作成から任意のプロジェクを作成
  2. 作成したプロジェクトを選択してAPIとサービス > ライブラリを開く
  3. Google Sheets APIを有効にする

アクセストークンを取得

Google Sheets APIを使用するにはOAuthでアクセストークンを取得する必要があるようです。まずOAuth 同意画面でOAuthのポリシーとスコープを設定、その後認証情報からアクセストークンを取得します。

  1. APIとサービス > OAuth 同意画面を開く
  2. 今回はGoogleWorkSpaceのアカウントではないので、内部は選択できません。外部を選択して作成
  3. アプリ情報で以下を入力、保存して次へ
    • アプリ名:任意の名前
    • ユーザサポートメール:自身の適当なメールアドレス
    • デベロッパーの連絡先情報:自身の適当なメールアドレス
  4. スコープ(アプリのユーザーに許可を求める権限)を設定します。
    1. スコープを追加または削除をクリック
    2. 今回はスプレッドシートの参照のみなので以下を選択して更新
      Screen Shot 2022-04-04 at 9.29.00.png
    3. 保存して次へ
  5. テストユーザでアプリへのアクセスを許可するユーザを追加します。
    正式にアプリを使用する場合は本番環境に移行する必要がありますが、結構Googleの承認が大変みたいです。今回はテストなのでテストユーザのまま進みます
    1. ADD USERS
    2. アプリを使用するGoogleアカウントのメールアドレスを入れて追加
    3. 保存して次へ
  6. 設定内容を確認してダッシュボードに戻る。次にアクセストークンを取得します。
  7. APIとサービス > 認証情報を開く
  8. 認証情報を作成 > Oauth クライアントID
  9. アプリケーションの種類:デスクトップアプリを選択して、名前に任意の名前を入力。作成
  10. アクセストークンが作成されます。JSONをダウンロードでトークンが記載されたjsonファイルをダウンロード
  11. jsonファイルを作業ディレクトリに移動して名前をcredentials.jsonに変更しておく

ライブラリのインストール

VS Codeのターミナルで以下コマンドを実行してGoogleAPIのNode.jsクライアントライブラリをインストール

npm install googleapis

VS Codeでスクリプト実行時の入力の受け取りをできるようにする

追々実行するNode.js quickstartのサンプルがOAuthトークンをreadlineで受け取ろうとしているが、Visual Studio Codeのコンソールは出力専用なので、VS Codeでスクリプトを実行すると入力の受け取りができないので、launch.jsonの設定を変え、コンソールを外部のものにする必要があるようです。

  1. VSCode画面左の虫ボタンをクリックします。Run and Debugの下のcreate a launch.json fileをクリック
    Screen Shot 2022-04-04 at 10.02.00.png
  2. 「Select Environment」と要求されるので選択肢の中からNode.js(legacy)を選択
  3. 作成されたlaunch.jsonファイルを開き、configurations"console": "externalTerminal"を追加
    Screen Shot 2022-04-04 at 10.05.14.png
  4. あと、programは、後々自分の作業ディレクトリにindex.jsを作成するので、そのパスに更新しておいてください
    Screen Shot 2022-04-04 at 11.16.36.png

サンプルコードの実行(Node.jsからスプレッドシートの参照)

サンプルコードを実行して、サンプルとして公開されているスプレッドシートの値を取得します。
Screen Shot 2022-04-04 at 11.05.06.png

  1. 作業ディレクトリにindex.jsを作成、Node.js quickstartのサンプルコードを貼り付ける
    Screen Shot 2022-04-04 at 10.17.08.png
  2. node index.jsでサンプルコードを実行
  3. ターミナルに認証用のURLが表示されるので、this url:以降のURLをコピーしてブラウザでアクセス
    Screen Shot 2022-04-04 at 10.46.02.png
  4. アカウント選択画面でトークンを取得したアカウントを選択
    Screen Shot 2022-04-04 at 10.24.59.png
  5. 続行をクリック
    Screen Shot 2022-04-04 at 10.56.28.png
  6. 続行をクリック
    Screen Shot 2022-04-04 at 10.25.36.png
  7. Macのlocalhostで何も設定していなければ以下画面が表示されますが、URL部分のcode=から&scopeまでの部分をコピー
    Screen Shot 2022-04-04 at 10.58.36.png
  8. ターミナルに戻りコピーしたコードを貼り付けEnterすると、サンプルスプレッドシートが参照できました!
    Screen Shot 2022-04-04 at 11.01.51.png

こちらもチェックお願いします!

Twitterアカウント
Youtubeチャンネル

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?