目次
はじめに
本題
到達目標
- Googleスプレッドシートのデータを取得し、WEBブラウザに表示する
実行環境
- MacBook Pro M1 2020（macOS Monterey 12.3）
- Chromeブラウザ
事前準備
Googleスプレッドシートの利用には、Googleアカウントが必要です。
既に持っている場合は、それを使用してもOKです。
スプレッドシートの作成
データの元を作ります。
Google Driveの任意の場所で右クリックすると以下のようにメニューが表示されるので、そこから「Googleスプレッドシート」を選択します。
シートを作成できたら、データを入力していきます。
今回は試験的にデータを取得できれば良いので、以下のようなデータを作成しました。
今回はこのA2からC4のデータを取得することが目的です。
次に、
・スプレッドシートのタブ名（今回だと「シート1」）
・スプレッドシートのID
を控えておく必要があります。
タブ名は、スプレッドシートのタブの名称のことです。
初期値だと、「シート1」で、今回は変更していないのでそのまま控えます。
問題はスプレッドシートIDがどこかということです。
どこにあるかというと、スプレッドシートのURLの中にあります。
私の作成したスプレッドシートのURLは、
https://docs.google.com/spreadsheets/d/1xLo5ywwtaLnBpc5UbI5Pf0NiqX4ZN80ff76OQjTkVmY/edit#gid=0
でしたが、この中の1xLo5ywwtaLnBpc5UbI5Pf0NiqX4ZN80ff76OQjTkVmY部分がIDです。
最後に、シートを全体公開の状態にします。
スプレッドシートの「共有」ボタンを押します。
シート全体の名称を決められます。
今回は「テストシート」とし、保存しました。
一般的なアクセスの項目を、
・リンクを知っている全員
・編集者
に変更し、完了を押します。
以上で、スプレッドシート側の設定は完了しました。
GCPの登録
スプレッドシートからのデータ取得には、スプレッドシートAPIを使用します。
そのためには、GoogleCloudPlatformでの作業が必要でした。
まずは利用登録から行なっていきます。
規約に同意したらチェックボックスをクリックし、「同意して続行」をクリック。
ポップアップが消えたら、「プロジェクトの選択」をクリックし、以下の画面を開きます。
ここで、「新しいプロジェクト」をクリックします。
プロジェクトの作成画面が開きます。
プロジェクト名は「ss-ge」にしました。（ここは好きなもので大丈夫です）
場所の項目は、今回は触れませんでした。
そのまま作成をクリックします。
無事に作成できれば、メイン画面の右上にチェックマークが表示されます。
早速、「プロジェクトを選択」から、作成したプロジェクトの管理ページに飛びましょう。
GoogleSheetsAPIの設定
プロジェクトの管理ページに飛べたら、次はGoogle Sheets APIを設定していきます。
検索窓に「sheet」と入力すると、MARKETPLACEの項目に「Google Sheets API」が見つかるので、選択。
「有効にする」をクリックして、少し待ちます。。
Google Sheets APIの管理画面が出てきたら、成功です。
認証情報(APIキー)の作成
認証情報を作成しないと、スプレッドシートからのデータ取得はできないので、作っていきます。
左側の全体メニューにある「認証情報」をクリックします。
認証情報のトップ画面に飛んだら、画面上部の「認証情報を作成」を選択します。
「APIキー」を選択。
しばらく待つと、作成されたAPIキーが表示されます。
この後すぐに使うので、メモしておくなりコピーしておくなりした方がいいです。
URLの作成
ここまで幾つかの項目を控えてきたと思います。
・スプレッドシートID
・シートタブ名
・データの範囲
・APIキー
この４つを組み合わせて、URLを作成してきます。
まず、雛形となるURLはこんな感じです。 https://sheets.googleapis.com/v4/spreadsheets/シートID/values/シートタブ名!データの範囲?key=APIキー
ここにそれぞれの項目をはめていきます。
データの範囲については、A2からC4の範囲なので、A2:C4 と入力します。
また、シートタブ名が初期値の場合は数字が半角なので、全角にしないように注意しましょう。
そうして組み合わせたURLを開くと…
ちゃんとデータが取得できています！
Googleフォームと連携しているシートと繋げれば、スプレッドシートを開かなくてもデータの確認ができるなど、活用の幅は広いです。
※記事内に表示・記載しているAPIキーなどは、削除したため使えない状態にしてあります。