PyScriptでGoogleスプレッドシートを読み込み、Pandas、DOMを使ってブラウザ表示できるかどうかを試してみました。非エンジニアです。

コード例

<html>
  <head>
    <title>Pyscript DOM</title>
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
      - pandas
    </py-env>
    </head>
    <body>
      <div id="msg" style="width: 80%; height: 80%; background-color:#ccc"></div>
      <py-script>

import pandas as pd
import js

from pyodide.http import open_url
<!--スプレッドシートを読み込む(スプレッドシートのアクセス権とURLの末尾を変更する必要あり)-->
sheet_url = ("https://docs.google.com/spreadsheets/d/シート名/export?format=csv&gid=0")

url_content = open_url(sheet_url)

excel_data = pd.read_csv(url_content)

<!--ブラウザに表示したいセルを指定（ここでは0行目の「名前」の列を指定）-->
text_1=excel_data.loc[0,"名前"]

<!--ここからDOM（letは記載不要）-->
from js import document

msg = document.getElementById("msg")
msg.innerHTML = text_1

      </py-script>
    </body>
</html>

スプレッドシートの設定

①シート右上の共有ボタンを押し、アクセス権を「リンクを知っている全員」「閲覧者」にする。

②URLの末尾を「edit#gid=0」→「export?format=csv&gid=0」に変更する。

作成のきっかけ

Googleフォームでアンケートを実施しウェブサイトに公開しているのですが、省力化したくてPyScriptを試してみました。

参考にしたサイト

https://pyscript.net/
https://miyashinblog.com/pyscript/