Python Web UIフレームワークのススメ

Python Web UIフレームワークのススメ
─Streamlitを使ってデスクトップアプリ化─

「PyCon Kyushu 2024」 2024年5月25日

株式会社CMSコミュニケーションズ
代表取締役　寺田 学 (Manabu TERADA)

Transcript

1. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UIフレームワーク のススメ ─Streamlitを使ってデスクトップアプリ化─ 株式会社CMSコミュニケーションズ 代表取締役　寺田 学 (Manabu TERADA) 「PyCon Kyushu 2024」 2024年5月25日
2. copyright © 2024 CMS Comunications Inc. all rights reserved. 全体像
3. copyright © 2024 CMS Comunications Inc. all rights reserved. 記事が公開されている: 今日はデモ多め 文章 で読みたい方 gihyo.jp Python Monthly Topics 2024年4月 Python Web UIフレームワークで作るデスクトップアプリ https://gihyo.jp/article/2024/04/monthly-python-2404
4. copyright © 2024 CMS Comunications Inc. all rights reserved. 講演の流れ • Python Web UIフレームワークとは • Python Web UIフレームワーク比較 • stliteを使った、サーバレスアプリの作り方 • マルチプラットフォームのデスクトップアプリへの 応用 • ビルド環境について
5. copyright © 2024 CMS Comunications Inc. all rights reserved. 自己紹介
6. copyright © 2024 CMS Comunications Inc. all rights reserved. 自己紹介 寺田 学 (Manabu TERADA) • Pythonエンジニア • Podcast 「terapyon channel」(https://podcast.terapyon.net) • 主な関連書籍（共著・監修・監訳） ◦ Pythonデータ分析 実践ハンドブック (インプレス: 2023年9月) ◦ Pythonによるあたらしいデータ分析の教科書第 2版（翔泳社:2022年10月） ◦ Python実践レシピ (技術評論社: 2022年1月) ◦ スラスラわかるPython第2版（翔泳社:2021年11月） ◦ 機械学習図鑑（翔泳社 : 2019年4月）
7. copyright © 2024 CMS Comunications Inc. all rights reserved. 主な役職 寺田 学 (Manabu TERADA) 株式会社 CMSコミュニケーションズ 代表取締役 • Pythonエンジニア • 一般社団法人PyCon JP Association 理事 • 一般社団法人Pythonエンジニア育成推進協会顧問理事 • Python Software Foundation (PSF) Fellow • 国立大学法人一橋大学 社会学研究科 元客員准教授(2022)
8. copyright © 2024 CMS Comunications Inc. all rights reserved. Python技術支援のコンサルサービス (株)CMSコミュニケーションズのサービス
9. copyright © 2024 CMS Comunications Inc. all rights reserved. PyCon US 2024 に参加してきた
10. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UIフレームワーク　　　 とは • Pythonのコードのみ • フロントエンド技術は隠蔽化 • フォーム入力から結果表示
11. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UI フレームワークとは 特徴 • Pythonのコードのみで構成 • フロントエンド（HTML/CSS/JavaScript）を意識しない • バックエンドAPIや通信などを意識しない • フォーム入力から結果表示ができるインタラクティブ • グラフ表現などをインタラクティブに表示
12. copyright © 2024 CMS Comunications Inc. all rights reserved. 大枠としてフレームワークのアプリ比較 Web UIフレームワーク • Streamlit • Gradio • Dash • Panel • 他 サーバサイドフレームワーク • Django • Flask • FastAPI • Pyramid • Zope • 他 vs
13. copyright © 2024 CMS Comunications Inc. all rights reserved. 大枠としてフレームワークの機能比較 Web UIフレームワーク • Pythonコードのみ • フロントエンド隠蔽化 • 通信の隠蔽化 • 自由度は限定的 サーバサイドフレームワーク • フロントエンドは別で • 通信方式を決める • RDBと連携すること多い • 自由度が高い vs
14. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UIフレームワークの良さ • 素早くWebアプリを作れる • Pythonのコードだけで作れる • JupyterLabなどのコードをWebアプリ化が容易 • ホスティングも容易で複雑な設定が不要
15. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UIフレームワーク 比較 • 主なフレームワークを列挙 • 簡単に特徴を紹介
16. copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UIフレームワークの種類 • 10個以上のプロジェクトがある • 新しいものが日々開発されている印象 • 今年は、Web UIフレームワークの祭りといった感じ • 好きなものを見つけて試して欲しい
17. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitの概要 • 定番ツール MLモデルPoCから自動化まで 開発元 Snowflake Inc. 公式サイト https://streamlit.io/ PyPI https://pypi.org/project/streamlit/ 最新バージョン 1.35.0 サーバサイド技術 Tornado フロントエンド技術 React ライセンス Apache Software License
18. copyright © 2024 CMS Comunications Inc. all rights reserved. Gradioの概要 • AI系で人気 AI/MLデモからアプリまで 開発元 Hugging Face 公式サイト https://www.gradio.app/ PyPI https://pypi.org/project/gradio/ 最新バージョン 4.31.2 サーバサイド技術 FastAPI フロントエンド技術 Svelte ライセンス Apache Software License
19. copyright © 2024 CMS Comunications Inc. all rights reserved. Dashの概要 • ダッシュボードで人気 データストリーム対応 開発元 Plotly 公式サイト https://plotly.com/dash/ PyPI https://pypi.org/project/dash/ 最新バージョン 2.17.0 サーバサイド技術 Flask フロントエンド技術 React ライセンス MIT License
20. copyright © 2024 CMS Comunications Inc. all rights reserved. Panelの概要 • PyData系開発 データ系のパネルアプリ 開発元 Holoviz 公式サイト https://panel.holoviz.org/ PyPI https://pypi.org/project/panel/ 最新バージョン 1.4.2 サーバサイド技術 Tornado フロントエンド技術 React ライセンス BSD License
21. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitを使った、 　　　　　アプリの作り方 • Streamlit アプリ • ローカルで実行
22. copyright © 2024 CMS Comunications Inc. all rights reserved. リッチUIアプリパート
23. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの作成 サンプルアプリ • 名称：st-matrix-chart • 目的：Streamlitで二次元のマトリックスを表示する • 機能： ◦ Excelのデータから列を選択し、プライオリティ・マトリックスの ような二次元可視化を行う • レポジトリ: ◦ https://github.com/terapyon/st-matrix-chart
24. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの完成形(1)
25. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの完成形(2)
26. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの起動 $ pip install -r requirements.txt アプリの起動 $ streamlit run st_matrix_chart/streamlit_app.py ブラウザでアプリが表示
27. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリ デモ
28. copyright © 2024 CMS Comunications Inc. all rights reserved. コード説明は記事で gihyo.jp Python Monthly Topics 2024年4月 Python Web UIフレームワークで作るデスクトップアプリ https://gihyo.jp/article/2024/04/monthly-python-2404
29. copyright © 2024 CMS Comunications Inc. all rights reserved. マルチプラットフォームの デスクトップアプリへの応用 • デスクトップアプリ化 • ビルドコマンド
30. copyright © 2024 CMS Comunications Inc. all rights reserved. サーバレスアプリとデスクトップパート
31. copyright © 2024 CMS Comunications Inc. all rights reserved. デスクトップアプリ化 デスクトップアプリ化の方法 • 利用ツール：@stlite/desktop ◦ https://github.com/whitphx/stlite/blob/main/packages/desktop/README.md • PythonのコードをWebAssembly化するPyodideを利用 • Electronアプリとなる • 設定：package.json を書く ◦ https://github.com/terapyon/st-matrix-chart/blob/main/package.json
32. copyright © 2024 CMS Comunications Inc. all rights reserved. デスクトップアプリ化コマンド $ npm install アプリの起動 $ npm run dump st_matrix_chart -- -r requirements.txt $ npm run serve アプリが立ち上がる
33. copyright © 2024 CMS Comunications Inc. all rights reserved. ローカルで実行 デモ
34. copyright © 2024 CMS Comunications Inc. all rights reserved. ビルド環境について • GitHub Actionsでビルド
35. copyright © 2024 CMS Comunications Inc. all rights reserved. デスクトップアプリビルドパート
36. copyright © 2024 CMS Comunications Inc. all rights reserved. ビルド環境 GitHub Actionsでビルド • ローカル環境だと、マルチOSに対応させるのが大変 • クラウドでビルドできると便利 • 設定: build.yml ◦ https://github.com/terapyon/st-matrix-chart/blob/main/.github/workflows/build.yml • GitHubリリースにファイルを置く
37. copyright © 2024 CMS Comunications Inc. all rights reserved. デスクトップアプリ化コマンド リリース手順 % git tag v1.0.0 # tagを作る % git push origin v1.0.0 # tagをPush Web UIでリリースを v1.0.0 を作る
38. copyright © 2024 CMS Comunications Inc. all rights reserved. GitHub Actionsでビルド デモ
39. copyright © 2024 CMS Comunications Inc. all rights reserved. リリース完了 GitHub Releasesでパッケージダウンロード可能 https://github.com/terapyon/st-matrix-chart/releases
40. copyright © 2024 CMS Comunications Inc. all rights reserved. まとめ
41. copyright © 2024 CMS Comunications Inc. all rights reserved. 全体像
42. copyright © 2024 CMS Comunications Inc. all rights reserved. まとめ • Streamlitアプリを作ってみよう。 • @stlite/desktopでデスクトップアプリ化してみよう。 • ビルド環境を整えてみよう。
43. copyright © 2024 CMS Comunications Inc. all rights reserved. ご清聴 ありがとうございました。
44. copyright © 2024 CMS Comunications Inc. all rights reserved. Q&A