Google Sheetとマークダウンで、ダッシュボード Webアプリを構築する

スプレッドシートは、直感的な操作性と柔軟な入力が特徴で、多くのチームでデータ管理に用いられていると思います。その中でもGooglesスプレッドシートはクラウドでの共同編集が魅力ですが、Google Sheet APIを用いることで外部システムとの連携が可能になります。
本記事では、Googleスプレッドシートをデータソースに、ダッシュボードをWebアプリを構築します。

作るもの

本チュートリアルでは、Googleシートで営業データをマニュアル管理している状況を想定し、Google Sheet APIを用いてデータを取得、Morphフレームワークを用いてデータ可視化を備えたダッシュボードを作成します。

https://youtu.be/FG00NTMcFlE

Morphとは？

Morphは、PythonとマークダウンでWebアプリを構築できるフレームワークです。
https://www.morph-data.io/ja/
ドキュメント: https://docs.morph-data.io/
サービスサイト: https://www.morph-data.io/ja/
関連記事: https://zenn.dev/morph_tech_blog/articles/efa64d2b0c652d

Google Sheet APIのセットアップ

まずは、Google Sheet APIのセットアップを行います。一通りの手順を動画で収録したので、こちらを参考に、サービスアカウントのJSONファイルを取得してください。
https://youtu.be/U0I00Ycqcbc

1. Google Sheet APIを有効にする
Google Developers Consoleにログインし、新規プロジェクトを作成、Google Sheets APIを有効化してください。
2. サービスアカウントを発行し、JSONをダウンロード
API とサービス > 認証情報 のページから、新規のサービスアカウントを発行します。
サービスアカウントの「キー」タブから新規のキーを作成、JSON形式でダウンロードしておきます。
3. 対象のスプレッドシートにサービスアカウントを招待する
スプレッドシートの「共有」ボタンから、サービスアカウントを追加します。これによってサービースアカウントから当該のスプレッドシートのデータにアクセスすることができるようになります。

プロジェクトの初期化

アプリケーションフレームワークとして Morphを使います。Morphを使うには、Python 3.9以上、Node.js 18以上がインストールされている必要があります。
詳細なセットアップ方法については、ドキュメントをご覧ください。

パッケージのインストール

pip install morph-data

プロジェクトの初期化

morph new sheet-app

追加のパッケージのインストール

pip install gspread oauth2client

Google Sheet APIをPythonからコールする

1. スプレッドシートのデータをDataFrameに変換する

src/python/get_sales_from_sheet.py

import pandas as pd
import gspread
from oauth2client.service_account import ServiceAccountCredentials
import os
import morph
from morph import MorphGlobalContext

# 認証情報を読み込んで環境変数にセット
auth = os.path.join(os.path.dirname(__file__), "../credential.json")
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = credentials
# 要求するスコープを設定
scope = ['https://spreadsheets.google.com/feeds']
# APIクライアントを初期化
credentials = ServiceAccountCredentials.from_json_keyfile_name(auth, scope)
client = gspread.authorize(credentials)

@morph.func
def get_sales_from_sheet(context: MorphGlobalContext):
    spread_sheet = client.open_by_key("シートID") # シート全体を取得
    raw_data = spread_sheet.worksheet("シート名")　# 特定のシートを変数に格納
    all_data = raw_data.get_all_values()
    # DataFrameへ。
    df = pd.DataFrame(all_data[1:], columns=all_data[0])
    return df 

2. DataFrameからPlotlyでチャートを作る

src/python/sales_chart.py

import plotly.express as px
import pandas as pd
import morph
from morph import MorphGlobalContext

@morph.func
@morph.load_data("get_sales_from_sheet") # 関数名を指定して結果を読み込む
def sales_chart(context: MorphGlobalContext):
		# get_sales_from_sheetの結果を取得
    df = context.data["get_sales_from_sheet"]
    # 'Total_Sales' 列を数値に変換
    df['Total_Sales'] = pd.to_numeric(df['Total_Sales'], errors='coerce')
    # 集計
    df = context.data["get_sales_spreadsheet"].groupby("Product").sum(["Total_Sales"]).reset_index()
    # チャートを作成
    fig = px.bar(df, x="Product", y="Total_Sales")
    return fig

ここでMorphの推しポイントなのですが、このように @morph.load_data というアノテーションを用いることで、他の関数の結果を読み込むことができます。

普通にPython関数を呼ぶのと何が違うの？というと、SQLやマークダウンなど、Morphフレームワークで扱うPython以外のファイル形式も同じ仕組みで取り回すことができるのです。

3. 画面を構築

src/pages/sales_dashboard_app.md

# 売上分析シート

<Grid cols="2">
  <div>
    ## テーブル表示
    <DataTable loadData="get_sales_spreadsheet" height={300} />
  </div>
  
  <div>
    ## グラフ表示
    <Embed loadData="chart_sales_data" height={300} />
  </div>
</Grid>

Morphクラウドにデプロイ

ローカルで構築したアプリケーションをwebに公開する場合は、セルフホストする以外にMorphクラウドへデプロイするという方法を取ることが可能です。Morphクラウドへのデプロイは、morph_project.yml の設定をして morph deploy を実行することで完了します。詳細は下記のドキュメントを参考にしてください。
ドキュメントはこちら：https://docs.morph-data.io/docs/ja/deploy/deploy

以上の手順を踏まえることで、スプレッドシートのデータを可視化したダッシュボードをweb上に公開することができました。スプレッドシートのデータ変更をリアルタイムに反映し、元データを手違い等で変更されるリスクなく、ダッシュボードだけを安全に共有することができます。ぜひ試してみてください！