GrafanaのデータソースプラグインにGoogle Sheetsを追加する

# はじめに

GrafanaのデータソースにGoogle Sheetsを指定することができるようになったので、さっそく試してみた。

https://grafana.com/grafana/plugins/

![GS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d515b62a-407b-5c2b-4bdb-6e3b0f136fa9.jpeg)

# aptコマンドでGrafanaパッケージをインストールする

ラズパイ、または、UbuntuへGrafanaパッケージをインストールする前提で手順を書きます。

apt-keyコマンドでGrafanaパッケージの公開鍵を登録します。

```bash
$ wget -q -O - https://packages.grafana.com/gpg.key | sudo apt-key add -
$ echo "deb https://packages.grafana.com/oss/deb stable main" | sudo tee /etc/apt/sources.list.d/grafana.list
```

aptコマンドでGrafanaパッケージをインストールします。

```bash
$ sudo apt update
$ sudo apt install -y grafana
```
## データソースプラグインをインストールする

grafana-cliコマンドでGoogle Sheetsデータソースプラグインをインストールします。
プラグインをインストールする前にGrafanaを起動していた場合は、プラグインをインストール後にgrafana-serverプロセスを再起動する必要があります。

```bash
$ grafana-cli plugins install grafana-googlesheets-datasource
✔ Downloaded grafana-googlesheets-datasource v1.1.3 zip successfully

Please restart Grafana after installing plugins. Refer to Grafana documentation for instructions if necessary.
```

## Grafanaを起動する

```bash
$ sudo systemctl start grafana-server
```

## Grafanaを再起動する

```bash
$ sudo systemctl restart grafana-server
```

## Grafanaを停止する

```bash
$ sudo systemctl stop grafana-server
```

# dockerコマンドでGrafanaをインストールする

dockerコマンドでGrafanaをインストールする前提で手順を書きます。

```bash
$ docker run -d -p 3000:3000 --name=grafana grafana/grafana:latest
```

Grafanaへ初回ログイン時にadminユーザのパスワードを変更する必要があるため、Grafanaインストール時にadminユーザ名とパスワードを指定することができます。

```bash
$ docker run -d -p 3000:3000 --name=grafana -e "GF_SECURITY_ADMIN_USER=admin" -e "GF_SECURITY_ADMIN_PASSWORD=password" grafana/grafana:latest
```

## データソースプラグインをインストールする

grafana-cliコマンドでGoogle Sheetsデータソースプラグインをインストールします。
dockerコマンドでコンテナIDを確認してログインします。(下記の例では、コンテナIDはd4a380064126)

```
$ docker ps
CONTAINER ID   IMAGE                    COMMAND     CREATED             STATUS             PORTS                    NAMES
d4a380064126   grafana/grafana:latest   "/run.sh"   About an hour ago   Up About an hour   0.0.0.0:3000->3000/tcp   grafana
$ docker exec -it d4a380064126 bash
```

grafana-cliコマンドでGoogle Sheetsデータソースプラグインをインストールします。

```bash
$ cd bin
$ grafana-cli plugins install grafana-googlesheets-datasource
✔ Downloaded grafana-googlesheets-datasource v1.1.3 zip successfully

Please restart Grafana after installing plugins. Refer to Grafana documentation for instructions if necessary.
```

コンテナからログアウトして、コンテナを再起動します。

```bash
$ exit
$ docker restart d4a380064126
```

## dockerコマンドでgrafanaをインストールする時に合わせてデータソースプラグインをインストールする場合

```bash
$ docker run -d -p 3000:3000 --name=grafana -e "GF_SECURITY_ADMIN_USER=admin" -e "GF_SECURITY_ADMIN_PASSWORD=password" -e "GF_INSTALL_PLUGINS=grafana-googlesheets-datasource" grafana/grafana:latest
```

# Google Sheetsデータソースの追加手順

ブラウザでGrafanaのログイン画面を表示し、adminユーザでログインします。
(初回ログイン時にadminユーザのパスワードを変更する必要があります)

![login.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/566c5240-2895-ca46-b8da-76fdf69c4d07.jpeg)

「Configuration」→「Data sources」を選択します。

![config_datasource.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2cc6e402-47ae-57af-738d-33153b39ea4a.jpeg)

「Add data source」ボタンを押します。

![add_button.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/07d57631-6280-4bf0-7906-245eab27bbfb.jpeg)

下へスクロールして、「Google Sheets」を選択します。

![datasource.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7ff7ff41-2c17-89ee-ac8d-f32d969d0dd6.jpeg)

「Name」と「API Key」を設定して、「Save & test」ボタンを押します。
(Google Sheetsへのアクセスに必要な「API Key」の登録方法については、次の項目で説明します)

![api_key.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ce317ded-c71d-e964-50c6-41107c8f177b.jpeg)

正常に登録されると「Success」と表示されます。

![Success.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/559e30dd-0bcb-ed28-eb22-d5456cae45e1.jpeg)

「Back」ボタンを押して、「Data sources」に追加されたことを確認します。

![datasource_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/030176dd-ade5-072b-3881-7547c25e2b79.jpeg)

## APIキーの登録方法

Google Cloud Platformのコンソール画面へアクセスします。

https://console.cloud.google.com

左上のメニューから「APIとサービス」→「認証情報」を選択します。

![認証情報.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/bb8abd5e-2881-8dd9-4e83-3088939d6fb1.jpeg)

「認証情報を作成」→「APIキー」を選択します。

![認証情報を作成_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/cd636360-6b2c-5cf7-3e39-e6b30cc7afc2.jpeg)

ポップアップ画面が表示されるので、自分のAPIキーの情報をGrafanaへ登録します。
登録したら「閉じる」を押します。

![APIキーを作成完了_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a73977b3-d8d4-8237-f9e3-38e0b91d758e.jpeg)

作成したAPIキーは制限がない状態ですので、APIキーを選択して編集します。

![APIキーの編集.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d1d38f89-ddc0-3851-e8e4-0bfabab320e3.jpeg)

APIの制限で「キーを制限」を選択します。
「Select APIs」のプルダウンメニューから「Google Sheets API」を選択します。

![APIの制限_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4d20cf1c-4e4c-f7e0-ea55-5396fb3db4a9.jpeg)

![プルダウンメニュー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7cb725b9-0422-6945-ddd0-722acca4ac61.jpeg)

「OK」を押してプルダウンメニューを閉じます。
選択中のAPIにGoogle Sheets APIが表示されていることを確認して、「保存」ボタンを押します。

![APIの制限_設定完了.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3b8e1ca6-6730-bd2f-dc8b-d3c92d349a2c.jpeg)

⚠️マークが✅マークに変わっていれば問題ありません。

![APIキー作成_完了.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/455b0bf4-0566-abe0-af38-bdc34072a14a.jpeg)

# Google Sheetsの読み込み

以下のようなGoogle Sheetsを読み込む場合を例に説明します。

![Google_Sheets_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ef0916f8-1a25-82d0-1ef3-b42f2b92a61a.jpeg)

「Explorer」を選択します。

![explorer_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d5c304da-3151-21cc-f1ea-a9607e1be7ea.jpeg)

データソースのプルダウンメニューから「Google Sheets」を選択します。

Spreadsheet IDにシートIDを入力します。
例.
Google SheetsのURLの{シートID}の部分

```text
https://docs.google.com/spreadsheets/d/{シートID}/edit#gid=0
```

Rangeに「シート名!セル:セル」または「シート名!列:列」の形式で入力します。
例. 
シート名「left」でA列からB列まで選択　→　left!A:B

![explorer_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/5210711d-62c7-be27-56e8-ab04a8dceb78.jpeg)

Google Sheetsの読み込みが正常に完了すると、Tableにデータが表示されます。

![explorer_1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0d3c0aea-870a-aabd-bb04-042bb06da83b.jpeg)

## グラフ表示する

ダッシュボードにグラフ表示します。「Add to dashboard」ボタンを押します。

![explorer_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0334f822-d1be-4303-83c2-f139d3a08129.jpeg)

ポップアップ画面が表示されますので、「Open dashboard」ボタンを押します。

![popup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ecc62dcf-95c9-51c3-6974-8717811339b3.jpeg)

ダッシュボード画面が表示されます。New Panelのプルダウンメニューから「Edit」を選択します。

![dashboard.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/bb86dd41-485d-7b80-e5bc-45c4bcd5aa06.jpeg)

![new_panel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e42661f8-2ca4-3942-a784-22c938ce3d65.jpeg)

Edit Panel画面が表示されます。表示タイプのプルダウンメニューから「Graph (old)」を選択します。

![Edit_panel_1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/43d58681-70f7-b741-d593-e62f47df6c01.jpeg)

![Edit_panel_2_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a948ce0d-29c8-ab33-0e4e-04e37c7c6ea6.jpeg)

線グラフが表示されることを確認します。「Apply」ボタンを押して設定を保存します。

![Edit_Panel_3_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/77c628f5-a464-0308-c773-eb9cf420e31e.jpeg)

ダッシュボード上で線グラフが表示されます。

![スクリーンショット 2022-05-29 21.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b18f278e-da09-de01-91af-39e623cf5f44.png)