Googleスプレッドシートからデータ取得してみた

# 目次
#### はじめに
- [到達目標](#到達目標)
- [実行環境](#実行環境)
- [事前準備](#事前準備)

#### 本題
- [スプレッドシートの作成](#スプレッドシートの作成)
- [GCPの登録](#gcpの登録)
- [GoogleSheetsAPIの設定](#googlesheetsapiの設定)
- [認証情報(APIキー)の作成](#認証情報apiキーの作成)
- [URLの作成](#urlの作成)

## 到達目標
- Googleスプレッドシートのデータを取得し、WEBブラウザに表示する
![スクリーンショット 2022-06-16 14.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/ca251421-8b29-6a36-04b3-afff16854c24.png)



## 実行環境
- MacBook Pro M1 2020（macOS Monterey 12.3）
- Chromeブラウザ

## 事前準備
Googleスプレッドシートの利用には、Googleアカウントが必要です。
既に持っている場合は、それを使用してもOKです。

## スプレッドシートの作成
データの元を作ります。
Google Driveの任意の場所で右クリックすると以下のようにメニューが表示されるので、そこから「Googleスプレッドシート」を選択します。
![スクリーンショット 2022-06-16 13.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/1134fa05-9241-ab83-8f8b-c6abdc262712.png)

シートを作成できたら、データを入力していきます。
今回は試験的にデータを取得できれば良いので、以下のようなデータを作成しました。
![スクリーンショット 2022-06-16 13.52.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/5bbd4a94-ac80-8de0-baee-106478c83778.png)

今回はこのA2からC4のデータを取得することが目的です。

次に、
・スプレッドシートのタブ名（今回だと「シート1」）
・スプレッドシートのID
を控えておく必要があります。

タブ名は、スプレッドシートのタブの名称のことです。
初期値だと、「シート1」で、今回は変更していないのでそのまま控えます。

問題はスプレッドシートIDがどこかということです。
どこにあるかというと、スプレッドシートのURLの中にあります。
私の作成したスプレッドシートのURLは、
`https://docs.google.com/spreadsheets/d/1xLo5ywwtaLnBpc5UbI5Pf0NiqX4ZN80ff76OQjTkVmY/edit#gid=0`
でしたが、この中の`1xLo5ywwtaLnBpc5UbI5Pf0NiqX4ZN80ff76OQjTkVmY`部分がIDです。

最後に、シートを全体公開の状態にします。

![スクリーンショット 2022-06-16 15.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/f3533aab-2f79-5112-ac4e-5f1f674d6476.png)
スプレッドシートの「共有」ボタンを押します。

![スクリーンショット 2022-06-16 15.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/7a93c014-d3cd-43b0-c1d4-edb1aca11388.png)
シート全体の名称を決められます。
今回は「テストシート」とし、保存しました。

![スクリーンショット 2022-06-16 15.17.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/26a358ea-9671-e8ba-b413-4997640c14d7.png)
一般的なアクセスの項目を、
・リンクを知っている全員
・編集者
に変更し、完了を押します。


以上で、スプレッドシート側の設定は完了しました。


## GCPの登録
スプレッドシートからのデータ取得には、スプレッドシートAPIを使用します。
そのためには、GoogleCloudPlatformでの作業が必要でした。

[GoogleCloudPlatform](https://cloud.google.com/gcp/?hl=ja&utm_source=google&utm_medium=cpc&utm_campaign=japac-JP-all-ja-dr-bkws-all-super-trial-e-dr-1009882&utm_content=text-ad-none-none-DEV_c-CRE_540744635217-ADGP_Hybrid%20%7C%20BKWS%20-%20EXA%20%7C%20Txt%20~%20GCP%20~%20General_cloud%20platform-google%20cloud%20platform-en-KWID_43700030990911667-aud-1589252136926%3Akwd-26415313501&userloc_1009301-network_g&utm_term=KW_google%20cloud%20platform&gclid=Cj0KCQjwhqaVBhCxARIsAHK1tiMF_qn3g4yfiyqYQ0nA_nrp9LCC9Lh13OzBGG1wZMI6D9gDWNzMBpkaAvoWEALw_wcB&gclsrc=aw.ds)

まずは利用登録から行なっていきます。
![スクリーンショット 2022-06-16 14.08.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/84b89ee6-c672-b56a-9ac9-3cfadc09e39e.png)

規約に同意したらチェックボックスをクリックし、「同意して続行」をクリック。

 ![スクリーンショット 2022-06-16 14.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/2a3e3d26-343b-440c-3b12-b8f0b5fbe158.png)
ポップアップが消えたら、「プロジェクトの選択」をクリックし、以下の画面を開きます。
 ![スクリーンショット 2022-06-16 14.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/ff614d42-a276-6136-ff53-61f3adae9447.png)
ここで、「新しいプロジェクト」をクリックします。

![スクリーンショット 2022-06-16 14.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/d2708094-9eb4-a9b7-1155-3948fa30ffb2.png)
プロジェクトの作成画面が開きます。
プロジェクト名は「ss-ge」にしました。（ここは好きなもので大丈夫です）
場所の項目は、今回は触れませんでした。
そのまま作成をクリックします。

![スクリーンショット 2022-06-16 14.10.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/95090d55-c51d-7e61-fa29-bcf2c0b28a93.png)
無事に作成できれば、メイン画面の右上にチェックマークが表示されます。
早速、「プロジェクトを選択」から、作成したプロジェクトの管理ページに飛びましょう。

## GoogleSheetsAPIの設定
プロジェクトの管理ページに飛べたら、次はGoogle Sheets APIを設定していきます。

![スクリーンショット 2022-06-16 14.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/cc08326c-d306-cc63-06fb-e3769b60dbe4.png)
検索窓に「sheet」と入力すると、MARKETPLACEの項目に「Google Sheets API」が見つかるので、選択。

![スクリーンショット 2022-06-16 14.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/907a7006-9abb-68a2-6418-7bc980dbe92e.png)
「有効にする」をクリックして、少し待ちます。。

![スクリーンショット 2022-06-16 14.12.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/d63144ef-0402-712a-c05d-2ebefae1103b.png)
Google Sheets APIの管理画面が出てきたら、成功です。

## 認証情報(APIキー)の作成
認証情報を作成しないと、スプレッドシートからのデータ取得はできないので、作っていきます。
左側の全体メニューにある「認証情報」をクリックします。

![スクリーンショット 2022-06-16 14.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/fae539bb-4f44-c062-4843-c92e74b3ef8a.png)
認証情報のトップ画面に飛んだら、画面上部の「認証情報を作成」を選択します。

![スクリーンショット 2022-06-16 14.14.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/7ba5fa26-db99-71cd-faa2-73bff01860b9.png)
「APIキー」を選択。

![スクリーンショット 2022-06-16 14.14.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/d2a55c48-580f-7751-169d-a90eb2f94da5.png)
しばらく待つと、作成されたAPIキーが表示されます。
この後すぐに使うので、メモしておくなりコピーしておくなりした方がいいです。

## URLの作成
ここまで幾つかの項目を控えてきたと思います。
・スプレッドシートID
・シートタブ名
・データの範囲
・APIキー
この４つを組み合わせて、URLを作成してきます。

まず、雛形となるURLはこんな感じです。 `https://sheets.googleapis.com/v4/spreadsheets/シートID/values/シートタブ名!データの範囲?key=APIキー`

ここにそれぞれの項目をはめていきます。
データの範囲については、A2からC4の範囲なので、A2:C4 と入力します。
また、シートタブ名が初期値の場合は数字が半角なので、全角にしないように注意しましょう。

そうして組み合わせたURLを開くと…

![スクリーンショット 2022-06-16 15.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2253738/75f03714-c80f-8725-5e5b-666e8c33618f.png)

ちゃんとデータが取得できています！
Googleフォームと連携しているシートと繋げれば、スプレッドシートを開かなくてもデータの確認ができるなど、活用の幅は広いです。

※記事内に表示・記載しているAPIキーなどは、削除したため使えない状態にしてあります。