and one+

IT系の雑なメモを残していくブログです

【Google サイト】簡易スタッツサイトをオープンする

日本プロバスケットボールリーグ、通称「Bリーグ」。個人運用のスタッツサイトがこのたび更新を停止するとの報があり、代替手段として、どのくらいの労力がかかるのかをテストするために実現の方針と性能を確認することにした。

結論から言うと、以下の記事の内容は あまりお勧めできるものではなく、後日再調整する予定のものをご確認いただくほうがよい。

行き当たりばったり

詳しい検討に入る前に、それまで試しに運用していた Google サイトでは可能なのかを検証してみることにした。

sites.google.com

これはもともとコロナ禍において中止試合とその代替試合を管理するために企図された。毎日めまぐるしく開催状況が変わるため「何月何日」に「第何節」の試合が「中止|開催」されたことが、多くの人に分かりづらくなっていた。

その情報が必要なのはその試合が開催される時までであり シーズン終了後には何の意味もなさないことが予想されたので、質を捨て スピード重視にて Google サイト を選択した。構築~公開までのコストが低いからだ。

 

Google サイト

Google サイトはフロントエンドになるサイトを提供するのみで、ページの遷移しか管理しない。実データは「Google スプレッドシート」で管理している(後述)。

Google サイトの構築方法に迷う人はおそらくいないが おおよその手順を書いていくと、「ホーム」ページと各ページを用意、各ページにコンテンツを載せて、遷移のためのボタンを配置し、公開するだけ。

 

1 サイト作成すれば自動的にモバイル用のサイトを配置してくれる。しかし そのぶん細かい設定はできず、実際 モバイルでは「スタッツが全く見るに堪えない問題」を未だに解決できずにいる。

(PCサイト)

 

(モバイルサイト)

 

Google スプレッドシート

サイトのコンテンツはスプレッドシートの図表にリンクを張っているだけ。

例えば 先ほど出てきたレバンガ北海道の元データは下のようになっている。

上の画像の中下ほどにある、行ごとに色がついている表 がサイトで表示している実体。

これは「表グラフ」というグラフの一種で、シート全体を公開するのではなく 表を図(グラフ)のように必要な部分だけを切り抜いて公開することができる。参照データを表示するのみで、元々のデータは 重なっているあたりにあるセルのデータを見ている。(「↓ フィルタリング結果」以下)

 

そしてフィルタリング結果自体も、

={query('シート名'!A:H,"select * where A like '%"&B3&"%'",false);query(hoge)}

のような形で、クエリ関数で参照し 結合したデータを表示している。大元のデータは更に別のシートにあり、全選手を1枚のシートにて管理し 北海道に関係する選手のみ取得することにしている。

 

良かったこと

  • 無料
  • 構造が簡単
  • Google 間でデータ取得ができる

手早く作る という最大の課題は解決した。しかし、使っているうちに限界も見えた。

 

悪かったこと

  • モバイル端末での表示崩れ(ほぼ PC のみしか用を為さない)
  • 多段での参照のため、表示までが極端に遅い
  • たまにリクエスト過剰の応答不能を返す
  • Google スプレッドシート には 1ファイルに最大作成セル数がある
  • 新規ページ作成時、Google スプレッドシート にリンクを張ろうとして接続できないことがある(長時間)
  • Google スプレッドシート でクエリ検索結果が0だったものを結合すると結果がエラーになる。同じ構文のままでは安心できない。
  • ユーザーの手によるソート順変更ができない
  • カラムの幅など、カスタマイズ性の限界

いろいろ感じる面はあれど、ざっくり、これらのすべての原因は Google スプレッドシートを参照していることに関連する。

本来は DB から SQL で取りたいのに、スプレッドシートという Excel 然としたアプリケーションにアクセスしているぶん 表示も遅いし、アクセスに負荷がかかるし、データ量も少ない。

 

方針

Google サイトの限界を確認し、WordPress などを検討する中で、スタッツサイトをどう構築するべきかの指針が見えてきた。

  • 各チームのページを分離しリンクを張る という考え方は正しい
  • ブログの各ページを 日記ではなく「各チームのページ」として扱えばよい
  • データ速度向上のためには DB をシステム側に持つ必要がある
  • ただしそれは「DBとして正規化されたものの構築」というよりは、「表示用の CSV のアップロード行為」に近い
  • アップロード回数は少ないほどよい

 

上記の仮定を基に、Google スプレッドシートGoogle データポータルに置き換えてみてどうかを試す。速度が出なければオンライン設置の MySQL などを検討する予定。AWS も使えそうだけど、単純に html と CSSphpPython もいけそう)の世界の知識は必要になるので お勉強中。