👑

[Web] Streamlitのアプリケーションを作った話

2022/10/18に公開

概要

PythonのライブラリであるStreamlitを用いて麻雀サークル向けのアプリケーションを作成しました. その経緯やStreamlitの特徴, アプリケーションを作成して感じたこと等をまとめています.

作成した経緯

私が運営している麻雀サークルには以前から点数計算が苦手な人がある程度の人数いました. そこで以前にLineBotを作成したのですが, デプロイ先のHerokuが無料サービスを終了するとのことで, デプロイ先を変えるか, 別のアプリケーションをつくるかの選択を迫られていました.

自分の考えを整理してみたところ以下が要件でした.

  • 時間の都合上HTML/CSS JavaScriptはなるべく書きたくない
  • Python3で書きたい
  • 出来れば無料でデプロイしたい

そこで何か作れそうなサービスはないか調べてみたところ, 丁度学習していたstreamlitを使えばCloudで公開することが出来ると分かったのでstreamlitで新しく作成することにしました.

Streamlitの特徴

streamlitはPythonのライブラリでデータの可視化をするアプリケーションを簡単に作ることが出来ます. ドキュメントの説明が非常に丁寧にされており, 初学者でもプログラムを書きやすいと思われます.

特徴としてpandas.DataFrame等のオブジェクトを簡単にアプリケーションで表示することが出来ます. 具体的には以下の様に書きます.

app.py
df = pd.DataFrame(
   np.random.randn(50, 20),
   columns=('col %d' % i for i in range(20)))

st.dataframe(df)  # Same as st.write(df)

https://docs.streamlit.io/library/api-reference/data/st.dataframe

TeXやcodeblock, Markdownも対応しているので書きたいものが書けないという事態は滅多に発生しないと思います.

一方でStreamlitでは複雑なプログラムを書くことは難しいです. 例えばButton Componentの中にButton Componentを書いたときにうまく動かないことがあります.

Streamlit Cloud

下記に書いてある通りなのですが, GitHubのレポジトリとmain branchを登録してデプロイボタンを押すと自動でデプロイしてくれます.
https://streamlit.io/cloud

アナリティクスの画面も見やすいです
streamlit cloud analitics page

Streamlit cloudではリソースに制約があるのでご注意ください

Content Limit
Resources per app 1 GB
Private apps 1 app
Public apps Unlimited

実装で工夫したところ

麻雀の点数計算を練習しやすくする為に点数計算テストを作成しました. その際にStreamlitで完結させるため, SessionとButton, checkbox使った実装をしています. 具体的には下記のような実装をしました.

  1. session.question, session.answerを初期化(答えも同時に得ることがポイント)
  2. session.questionを表示し, session.answerをチェックボックスで隠す
  3. 閲覧者がチェックボックスを外したらsession.question, session.answerを更新

作成し終わった今見ると簡単に見えますが, 実際はどの動作なら動くのかドキュメントベースで探していたので時間がかかりました.

使ってみた感想

図表の表示に特化されているだけあって見やすいサイトを作ることが出来ます.
pandas.DataFrameのUI

スマートフォンでも触りやすいUIということもあり, サークルのメンバーも練習用に使っていただけているようです. また, HTML/CSS JavaScriptを書いていないので実装も2~3日で終わりました. この辺りはフレームワークの恩恵を受けることが出来ていると感じています.

一方で前述したクイズ機能はドキュメントをよく読む必要があり, 実装に時間がかかりました. 今回は無事実装出来ましたが, 複雑なアプリケーションを作る場合であれば別の手段を考慮するべきだと感じました.

今後の開発予定

以前から麻雀の押し引きを可視化してみたいと考えていたので押し引き表や放銃の危険度の可視化を行いたいと考えています.

本プロジェクト GitHubレポジトリ
https://github.com/ShunDeveloper/streamlit_app

ApplicationのURL
https://shundeveloper-streamlit-app-app-2lj3e1.streamlitapp.com/

Discussion