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

by Manabu TERADA

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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月）

Slide 7

Slide 7 text

copyright © 2024 CMS Comunications Inc. all rights reserved. 主な役職寺田学 (Manabu TERADA) 株式会社 CMSコミュニケーションズ代表取締役 ● Pythonエンジニア ● 一般社団法人PyCon JP Association 理事 ● 一般社団法人Pythonエンジニア育成推進協会顧問理事 ● Python Software Foundation (PSF) Fellow ● 国立大学法人一橋大学社会学研究科元客員准教授(2022)

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

copyright © 2024 CMS Comunications Inc. all rights reserved. Python Web UI フレームワークとは特徴 ● Pythonのコードのみで構成 ● フロントエンド（HTML/CSS/JavaScript）を意識しない ● バックエンドAPIや通信などを意識しない ● フォーム入力から結果表示ができるインタラクティブ ● グラフ表現などをインタラクティブに表示

Slide 12

Slide 12 text

Slide 13

Slide 13 text

copyright © 2024 CMS Comunications Inc. all rights reserved. 大枠としてフレームワークの機能比較 Web UIフレームワーク ● Pythonコードのみ ● フロントエンド隠蔽化 ● 通信の隠蔽化 ● 自由度は限定的サーバサイドフレームワーク ● フロントエンドは別で ● 通信方式を決める ● RDBと連携すること多い ● 自由度が高い vs

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの作成サンプルアプリ ● 名称：st-matrix-chart ● 目的：Streamlitで二次元のマトリックスを表示する ● 機能： ○ Excelのデータから列を選択し、プライオリティ・マトリックスのような二次元可視化を行う ● レポジトリ: ○ https://github.com/terapyon/st-matrix-chart

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

copyright © 2024 CMS Comunications Inc. all rights reserved. ビルド環境 GitHub Actionsでビルド ● ローカル環境だと、マルチOSに対応させるのが大変 ● クラウドでビルドできると便利 ● 設定: build.yml ○ https://github.com/terapyon/st-matrix-chart/blob/main/.github/workﬂows/build.yml ● GitHubリリースにファイルを置く