IT系技術ブログ

【Google Sheets】API v4を使ってJavaScriptでデータを読み取ってみる

Google スプレッドシートは一言でいうとGoogle版Excelです。

Googleが提供しているCloudサービス無料で利用することが出来ます。

作成したスプレッドシートをGoogleのAPIである【Google Sheets API v4】を利用することで、jsonデータとして読み込み、また編集更新が可能になるAPIをjavascriptで動かしてみます。

環境

・JavaScript

・Google Sheets

・Google Sheets API v4

手順

GoogleスプレッドシートAPIをオンにする

1.Google Sheets APIを使うためにGoogle APIsの利用登録します

https://console.developers.google.com/start/api?id=sheets.googleapis.com

※各所ブログでGoogle Cloud PlatForm登録が必要と言われてるけどGoogleアカウントでログイン出来てればいらない(ぽい)

2.プロジェクトの作成

「1」で登録が完了したら引き続きプロジェクトの作成を行います。

2-1.「新しいプロジェクト」を押下します。

2-2.新しいプロジェクトの情報を入力し「作成」ボタンを押下します。

3.OAuth クライアントIDの発行

「2」でプロジェクトが作成できたらOAuth 2.0 クライアント IDを発行します。

3-1.認証情報を作成>OAuth クライアントIDを押下します。

3-2.初回の場合「同意画面を設定」ボタンを押下します。

3-3.OAuth画面が自身のサイトやアプリケーションであるという情報の表示設定をします。

ユーザーに表示するサービス名を入力し、「保存」ボタンを押下します。

3-4.引き続きOAuth クライアントIDを作成します。

・アプリケーションの種類に「ウェブアプリケーション」を選択

・名前を入力

・承認済みのJavaScript生成元にJavaScriptでAPIを利用するサイトのドメインを設定

※ここでドメイン設定が出来ていないとあとでAPI実行時エラーが発生します。

入力が完了したら「作成」ボタンを押下します。

4.APIキーの発行

「3」でOAuth クライアントIDが作成できたらAPIキーを発行します。

4-1.認証情報を作成>APIキーを押下します。

4-2.APIキーが発行されます。

5.発行の確認

下記画面のようにAPIキー、OAuth クライアントIDが設定されていればOKです。

6.Spread APIの有効化

APIキーを発行したあと、使うAPIを有効化する必要があります。

6-1.ダッシュボード>APIとサービスの有効化を押下します。

6-2.検索で「Spread」と検索し、「Google Sheets API」を選択します。

6-3.「有効にする」ボタンを押下します。

6-4.APIが有効化されたことを確認します。

サンプルページの作成

1.Google Spread APIの利用ガイドからサンプルコードをHTMLファイルとして保存します。

https://developers.google.com/sheets/api/quickstart/js

2.作成したHTMLファイルを編集し、<YOUR_CLIENT_ID>、<YOUR_API_KEY>

作成したOAuth クライアントIDAPIキーで置き換え、保存します。

3.完成したHTMLファイルを「3-4」で設定したドメインサイトに配備します。

4.サイトに配備したHTMLファイルをブラウザ上で表示し、以下の画面が出れば成功です。

参考

Google Spread API利用ガイド

https://developers.google.com/sheets/api/quickstart/js

今回作成したHTMLで表示しようとしているスプレッドシート

https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit

モバイルバージョンを終了