Google スプレッドシートは一言でいうとGoogle版Excelです。
Googleが提供しているCloudサービスで無料で利用することが出来ます。
作成したスプレッドシートをGoogleのAPIである【Google Sheets API v4】を利用することで、jsonデータとして読み込み、また編集更新が可能になるAPIをjavascriptで動かしてみます。
環境
・JavaScript
・Google Sheets
・Google Sheets API v4
手順
GoogleスプレッドシートAPIをオンにする
１．Google Sheets APIを使うためにGoogle APIsの利用登録します
https://console.developers.google.com/start/api?id=sheets.googleapis.com
※各所ブログでGoogle Cloud PlatFormに登録が必要と言われてるけどGoogleアカウントでログイン出来てればいらない（ぽい）
２．プロジェクトの作成
「１」で登録が完了したら引き続きプロジェクトの作成を行います。
２－１．「新しいプロジェクト」を押下します。
２－２．新しいプロジェクトの情報を入力し「作成」ボタンを押下します。
３．OAuth クライアントIDの発行
「２」でプロジェクトが作成できたらOAuth 2.0 クライアント IDを発行します。
３－１．認証情報を作成＞OAuth クライアントIDを押下します。
３－２．初回の場合「同意画面を設定」ボタンを押下します。
３－３．OAuth画面が自身のサイトやアプリケーションであるという情報の表示設定をします。
ユーザーに表示するサービス名を入力し、「保存」ボタンを押下します。
３－４．引き続きOAuth クライアントIDを作成します。
・アプリケーションの種類に「ウェブアプリケーション」を選択
・名前を入力
・承認済みのJavaScript生成元にJavaScriptでAPIを利用するサイトのドメインを設定
※ここでドメイン設定が出来ていないとあとでAPI実行時エラーが発生します。
入力が完了したら「作成」ボタンを押下します。
４．APIキーの発行
「３」でOAuth クライアントIDが作成できたらAPIキーを発行します。
４－１．認証情報を作成＞APIキーを押下します。
４－２．APIキーが発行されます。
５．発行の確認
下記画面のようにAPIキー、OAuth クライアントIDが設定されていればOKです。
６．Spread APIの有効化
APIキーを発行したあと、使うAPIを有効化する必要があります。
６－１．ダッシュボード＞APIとサービスの有効化を押下します。
６－２．検索で「Spread」と検索し、「Google Sheets API」を選択します。
６－３．「有効にする」ボタンを押下します。
６－４．APIが有効化されたことを確認します。
サンプルページの作成
１．Google Spread APIの利用ガイドからサンプルコードをHTMLファイルとして保存します。
https://developers.google.com/sheets/api/quickstart/js
２．作成したHTMLファイルを編集し、<YOUR_CLIENT_ID＞、<YOUR_API_KEY>
作成したOAuth クライアントIDとAPIキーで置き換え、保存します。
３．完成したHTMLファイルを「３－４」で設定したドメインサイトに配備します。
４．サイトに配備したHTMLファイルをブラウザ上で表示し、以下の画面が出れば成功です。
参考
Google Spread API利用ガイド
今回作成したHTMLで表示しようとしているスプレッドシート
https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit