こちらの記事では、かけ~ぼ(家計簿)の利用者の方向けにLooker Studioを利用しておしゃれにダッシュボード化する方法についてご紹介させていただきます!今まで入力してきた家計簿のデータを分析したり、ダッシュボードで共有したりしたい方におすすめです!
どーも、さきやんです!ご覧いただきありがとうございます。
こちらの記事にたどり着いているということは「ダッシュボード化する方法」に興味・関心がある方だと思っています。
まず初めに、この記事の内容を実施してもらうことで「どんなダッシュボードができるのか」ご紹介させていただきます!
収支の全体的な推移を確認↓
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_lookerkakeibo_step00-01.jpg?resize=880%2C422&ssl=1)
費目別の割合などを確認↓
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_lookerkakeibo_step00-02.jpg?resize=880%2C427&ssl=1)
費目別の詳細情報(メモ)を確認↓
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_lookerkakeibo_step00-03.jpg?resize=880%2C424&ssl=1)
ダッシュボードに利用したデータはサンプルですが、いかがでしょうか?
もしかけ~ぼ(家計簿)アプリのデータをこのように可視化したい方は是非ご覧いただければ幸いです!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
こちらの記事は以下のような人におススメだと思います!
- かけ~ぼ(家計簿)アプリを利用している方
- Looker Studioでダッシュボード化したい方
- かけ~ぼのデータをダッシュボードで共有したい方
それではどうぞご覧ください!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_looker-kakeibo_flow_01.jpg?resize=341%2C583&ssl=1)
こちらの記事では、大きく5つのステップで説明させていただきます。
皆さんも5つのステップを実施することでこちらの記事のゴールである「かけ~ぼ(家計簿)の利用者の方向けにLooker Studioを利用しておしゃれにダッシュボード化」できる状態になっていると思います!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも色々と試行錯誤しながら進めておりますので設定していく上でハマった箇所もお伝えしていきたいと思います。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_looker-kakeibo_flow_02.jpg?resize=265%2C583&ssl=1)
5つのステップを説明する前に、事前の準備・構築環境についてご紹介したいと思います。
こちらの利用状況が似たような方であれば参考になる記事だと思います。是非ご覧いただければ幸いです。
Looker studioの初期設定については以下の記事で整理していますのでご参考にしていただければと思います!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/05/38107f6adbafa2d8d396a95687ee0a59.jpg?resize=160%2C160&ssl=1)
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
Looker Studioの初期設定については、作業をしていくと流れで完了しますので事前の対応は必須ではないと思います!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_looker-kakeibo_flow_03.jpg?resize=264%2C574&ssl=1)
それでは、はじめに作業全体の流れについてご紹介します。
こちらの記事では、下図の通りに大きく5つのステップで作業を実施します。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/07/202307_looker-kakeibo_flow_image.jpg?resize=769%2C288&ssl=1)
ダッシュボードで可視化するアプリのデータをクラウド(Google Drive)上にアップロードします。
バックアップされるファイルはcsv形式になっており、Looker Studioのデータソースとして利用するために、csvファイルからGoogleスプレッドシートに変換します。
さきやんの作ったダッシュボードをテンプレートとして利用し、STEP.2で変換したスプレッドシートにデータソースを変更します。
単純にデータソースを変更するだけではうまくダッシュボードが表示できないため、軽微な修正を行い、ダッシュボードが正しく表示されるようにします。
STEP4まででダッシュボード化の作業は完了ですが、今後新しいデータをアプリ上で作っていく場合、データソースを最新にしていく必要があります。手動になってしまいますが、データソースを更新する作業を行います。
このような流れでLooker Studioを利用してかけ~ぼアプリのデータをダッシュボード化します。
Looker Studioとは何か知りたい方は再掲ですが以下の記事をご覧いただければ幸いです!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/05/38107f6adbafa2d8d396a95687ee0a59.jpg?resize=160%2C160&ssl=1)
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_report.jpg?resize=880%2C587)
続いて、Looker Studioでダッシュボード化することによって「できること」を紹介させていただきます。
大きく4つあります。
- 年や月別にデータをビジュアルに確認(分析)できる
- かけ~ぼ(家計簿)アプリのデータをインターネット経由でどこでも確認できる
- 自分以外の家族などにも共有することができる
- Looker Studioの使い方を覚えれば自分でカスタイマイズしてさらに見やすくすることもできる
それぞれ、簡単に補足させていただきます。
かけ~ぼアプリの標準機能でも年や月別のグラフで確認することはできますが、よりビジュアルを意識して以下のように確認(分析)することができます!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/07/202307_lookerkakeibo_step00-02.jpg?resize=880%2C427)
かけ~ぼアプリはアプリがインストールされた端末がないと確認できませんが、Looker Studioを使うと、URLさえわかればインターネットを経由してどこでもどのような端末(ブラウザ)で確認可能です!
作成したダッシュボードを個人やチームと簡単に共有したり公開したりすることができ、以下のような特徴があります。
- レポートの閲覧や編集に他のユーザーを招待することが可能
- スケジュール設定したメールでそれらのリンクを送信することが可能
- Googleサイト、ブログ投稿、マーケティング記事、年次レポートなどの他のページにレポートを埋め込めば、データストーリーを広めていくことが可能
- Looker Studioのファイルを別の編集者と共有すれば、リアルタイムの共同作業が可能
今回はさきやんがダッシュボードのベースを作成しましたが、Looker Studioは自由に編集可能ですので、皆さんも使い方を覚えれば自分なりのダッシュボードを作成することができます!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも個人的に色々とカスタイマイズしていこうと思っています!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_04.jpg?resize=265%2C576&ssl=1)
それでは、実際にダッシュボード化するための手順を説明させていただきます。まずはかけーぼアプリ上でバックアップする作業を実施します。
かけ~ぼアプリ上の右下の「その他」を選択し、「設定」メニューを開きます。
バックアップの中に「バックアップ(CSV入出力)」の項目があるのでそちらを選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step01-01.jpg?resize=843%2C457)
バックアップメニュー画面に遷移するため、保存先を選択します。
ポップアップ画面が表示されるため、「Googleドライブ」を選択し、「接続」ボタンを押します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step01-02.jpg?resize=840%2C458)
続いて、アクセス権の確認がされた場合は「許可」を選択し、対象となるGoogleアカウントを選択します。
Googleアカウントへのリクエスト画面が表示されるため、対象のGoogleアカウントであることを確認し「許可」を押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step01-03.jpg?resize=834%2C457)
特に問題がなければGoogleアカウントの連携が完了します。
最後に操作項目の中で「CSV出力」ボタンを押下してGoogleドライブ上にバックアップを行います。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step01-04.jpg?resize=833%2C458)
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_05.jpg?resize=265%2C576&ssl=1)
次に、Googleドライブ上での作業手順を説明させていただきます。
以下のリンクからGoogleドライブのページへアクセスします。
「マイドライブ」の中に「com.donapon.pisces.cashbook」というフォルダが作られていることが確認できますので、ダブルクリックをしてフォルダの中身を表示させます。
もしフォルダがない場合、①のバックアップ作業がうまくでいていない可能性がありますので、できていない場合は改めて実施してください。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step02-01-1024x465.jpg?resize=880%2C400&ssl=1)
表示されたファイル群がかけ~ぼアプリのバックアップファイルです。
この中で「cashbook_all.csv」ファイルが皆さんの入力された収支に関する全データが含まれたファイルですのでこちらを利用して次の作業を実施します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step02-02-1024x534.jpg?resize=880%2C459&ssl=1)
縦三点リーダ(縦に三つに並んだ点)を選択し、「アプリで開く」を押下、その中で「Googleスプレッドシート」を選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step02-03-1024x539.jpg?resize=880%2C463&ssl=1)
GoogleスプレッドシートでCSVファイルを表示することができます。必要に応じて中身が入っているか確認してみましょう。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step02-04.jpg?resize=619%2C186&ssl=1)
表示できることが確認出来たらこちらのファイルはいったん閉じます。そうすると、対象のフォルダに以下のようにスプレッドシート用のファイルが新しく生成されています。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step02-05.jpg?resize=880%2C471&ssl=1)
これでスプレッドシートに変換する作業は完了です。
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
スプレッドシート上にデータを入れることができればいいので、他にもやり方は色々とあるかと思います!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_06.jpg?resize=265%2C576&ssl=1)
次に、Looker Studio上での作業手順を説明させていただきます。
まずは以下のページにアクセスしてさきやんの作成したLooker Studioのダッシュボードを表示させます。
さきやんオリジナルLooker Studioダッシュボードはこちらをクリック
以下のダッシュボードが表示されるため、右上の縦三点リーダを選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-01-1024x521.jpg?resize=880%2C448&ssl=1)
「コピーを作成」を選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-02.jpg?resize=477%2C264&ssl=1)
初期設定が終わっていない場合は以下のようなが画面が出る場合がありますので、適宜選択して「続行」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-03.jpg?resize=746%2C497&ssl=1)
Looker studioの初期設定にいては以下の記事で整理していますのでご参考にしていただければと思います!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/05/38107f6adbafa2d8d396a95687ee0a59.jpg?resize=160%2C160&ssl=1)
続いて、データソースを選択していきます。元のデータソースは「不明」な状態になっていると思いますので、「新しいデータソース」を選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-04.jpg?resize=731%2C358&ssl=1)
利用可能なデータソースから「cashbook_all – cashbook_all」を選択します。
初期設定状況によりまだ表示されない場合もあると思いますので、そのような方は次の手順をご覧ください。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-05.jpg?resize=737%2C362&ssl=1)
上記で新しいデータソースを選択すると、下部「のデータソースを作成」を選択します。
コネクタの画面が表示されるため、その中から「Googleスプレッドシート」を選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-06.jpg?resize=872%2C338&ssl=1)
Googleスプレッドシートの承認画面が表示されるため、「承認」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-07.jpg?resize=807%2C412&ssl=1)
これで連携は完了になりますが、Googleアカウントの選択画面が表示される場合は対象のGoogleアカウントを選択しましょう!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-08.jpg?resize=578%2C510&ssl=1)
「cashbook_all – cashbook_all」を選択できていることを確認し、「レポートをコピー」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-08-2.jpg?resize=712%2C338&ssl=1)
Googleスプレッドシートの中で対象ワークシートを選ぶ画面が表示されますので、「cashbook_all」を選択します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-09.jpg?resize=857%2C444&ssl=1)
ワークシートも同様に「cashbook_all」を選択し、右上の「接続」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-10-1024x447.jpg?resize=880%2C384&ssl=1)
データソースのフィールドを確認する画面が表示されますが、いったん左上の「接続を編集」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-11-1024x497.jpg?resize=880%2C427&ssl=1)
右上の「再接続」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-12re-1024x437.jpg?resize=880%2C376&ssl=1)
右上の「レポートに追加」ボタンを押下します。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-13.jpg?resize=880%2C340&ssl=1)
左上のダッシュボードタイトルが「かけ~ぼテストのコピー」になっていることを確認し、これで皆さんのかけ~ぼのデータがダッシュボード上で確認できるような状態になりました!
うまく表示できていない部分があると思いますが、次のステップで作業しますので、現時点での皆さんのかけ~ぼのデータがうまく取り込めているのかどうか確認してみましょう!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step03-16-1024x580.jpg?resize=880%2C498&ssl=1)
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
もう少しでダッシュボード化が完了します!長いですが、あと少し是非頑張ってみてください!!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_07.jpg?resize=265%2C576&ssl=1)
(⑤の作業を除き)最後に、うまくダッシュボード上でデータが表示できていないところがありますので、そちらを修正する作業を行います。
全体的に「収支」に関するフィールドがうまく反映できていないことに対しての修正になります。
まずはじめに、「収支」フィールドを追加します。
ここでいう収支とは「収入-支出」とさせていただきます。
ダッシュボード上の右側に「データ」が表示されていますので、右下の「フィールドを追加」項目を選択します。
※ もしフィールドのメニューが表示されていない場合はブラウザをリロードすると表示されます。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-01.jpg?resize=635%2C656&ssl=1)
表示された画面で以下のような作業を実施します。
「フィールド名」に「収支」と入力する。
「計算式」に「収入」をドラック&ドロップし、「-」(マイナス、半角のハイフン)を入力し、「支出」をドラック&ドロップする。
「保存」ボタンを押下し、「完了」ボタンでメニューを閉じる。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-02-1024x360.jpg?resize=880%2C309&ssl=1)
データの一覧に「収支」が追加されていれば作業は完了です。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-02-2.jpg?resize=453%2C414&ssl=1)
続いて、上記で追加したフィールドの「収支」項目を各グラフに反映させていきます。
基本的に「1」のダッシュボードで「収支」のフィールドを利用しているため、そちらの情報を更新していきます。
まず黒のボックス(赤枠)を選択し、右側のデータから「収支」を指標の中で「Record Count」の上にドラック&ドロップします。そうすると、収支の情報が更新されるかと思います。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-03-1024x428.jpg?resize=880%2C368&ssl=1)
これ以降も同様の作業を繰り返し実施するだけです。
左の赤枠のグラフを選択し、右側のデータから「収支」を指標の中で「Record Count」の上にドラック&ドロップします。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-04-1024x445.jpg?resize=880%2C382&ssl=1)
左の赤枠のグラフを選択し、右側のデータから「収支」を指標の中で「Record Count」の上にドラック&ドロップします。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-05-1024x421.jpg?resize=880%2C362&ssl=1)
左の赤枠のグラフを選択し、右側のデータから「収支」を指標の中で「Record Count」の上にドラック&ドロップします。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-06-1024x428.jpg?resize=880%2C368&ssl=1)
左の赤枠のグラフを選択し、右側のデータから「収支」を指標の中で「Record Count」の上にドラック&ドロップします。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-07-1024x434.jpg?resize=880%2C373&ssl=1)
参考までに収支推移(累計)のグラフについては、折れ線グラフの色がずれる場合があります。その場合はスタイルから折れ線グラフの色を変更することが可能です。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_lookerkakeibo_step04-08.jpg?resize=678%2C810&ssl=1)
収支分布のグラフについては、タイトル以外は何も表示されていない状態になっているかと思います。
修正方法が前述と若干異なりますので、個別に記載させていただきます。
左の赤枠のグラフを選択し、右側のグラフから「スタイル」、「バブルの色」の中から「年」を選びます。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/09/202307_lookerkakeibo_step04-12.jpg?resize=783%2C692&ssl=1)
選択するとグラフ上にデータがプロットされる状態になるかと思います!
おめでとうございます!
これで利用するための最低限の作業は完了です!!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんの場合は、個別にカスタマイズして色々なデータを可視化(分析)しようと思っています!
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_08.jpg?resize=265%2C576&ssl=1)
お疲れさまでした!これでこちらの記事のゴールは達成です!
これでご覧の皆様もLooker Studioダッシュボードでかけ~ぼのデータが可視化・分析できる状態が整いました!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_DX_icandoit.jpg?resize=782%2C522)
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/08/202307_looker-kakeibo_flow_09.jpg?resize=265%2C606&ssl=1)
スマホ上でかけ~ぼのデータは常に更新されているかと思います。
残念ながら今回作ったダッシュボードに対しては自動で更新されませんので、手動でデータを更新していただく必要があります。
簡単ですが、これから手順を説明させていただきます。
ステップ1の手順でかけ~ぼ上のアプリから自動でバックアップができる設定になっていますので、以下の①のCSVファイルなどは毎日1回バックアップされて最終更新の日時が変わっているかと思います。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/09/202307_lookerkakeibo_step05-01.jpg?resize=880%2C471&ssl=1)
①のファイルを開き、すべてのデータを全選択してコピーします。
次に②のスプレッドシートを開き、シート状に①のデータを全て貼り付けてファイル更新を行います。
②のスプレッドシート上の更新ができた後に、Looker Studio上で「データを更新」を選択すれば最新のデータに更新されます。
![](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2023/09/202307_lookerkakeibo_step05-02.jpg?resize=686%2C223&ssl=1)
もう少しスマートな更新方法は今後見つけるとして、一応これでデータ更新作業は完了です!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんももう少しスマートに更新できるようにしたいなと思いつつ、自身の家計簿の情報を月1回可視化・分析するだけであればぎりぎり許容範囲内かなと思っていたりします・・・
さいごに、「かけ~ぼ(家計簿)の利用者の方向けにLooker Studioを利用しておしゃれにダッシュボード化する方法」と題して紹介した記事についてまとめさせていただきます。
以上、本記事は終わりになりますので、ここまで読んでいただいた方は誠にありがとうございました!
今後もできれば色々とまとめていきたいと思いますのでよろしくお願いいたします!