$30 off During Our Annual Pro Sale. View Details »

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

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

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

「PyCon Kyushu 2024」 2024年5月25日

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

Manabu TERADA

May 25, 2024
Tweet

More Decks by Manabu TERADA

Other Decks in Technology

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. 記事が公開されている:

    今日はデモ多め 文章 で読みたい方 gihyo.jp Python Monthly Topics 2024年4月 Python Web UIフレームワークで作るデスクトップアプリ https://gihyo.jp/article/2024/04/monthly-python-2404
  3. copyright © 2024 CMS Comunications Inc. all rights reserved. 講演の流れ

    • Python Web UIフレームワークとは • Python Web UIフレームワーク比較 • stliteを使った、サーバレスアプリの作り方 • マルチプラットフォームのデスクトップアプリへの 応用 • ビルド環境について
  4. 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月)
  5. copyright © 2024 CMS Comunications Inc. all rights reserved. 主な役職

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

    Web UIフレームワーク    とは • Pythonのコードのみ • フロントエンド技術は隠蔽化 • フォーム入力から結果表示
  7. copyright © 2024 CMS Comunications Inc. all rights reserved. Python

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

    Web UIフレームワーク • Streamlit • Gradio • Dash • Panel • 他 サーバサイドフレームワーク • Django • Flask • FastAPI • Pyramid • Zope • 他 vs
  9. copyright © 2024 CMS Comunications Inc. all rights reserved. 大枠としてフレームワークの機能比較

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

    Web UIフレームワークの良さ • 素早くWebアプリを作れる • Pythonのコードだけで作れる • JupyterLabなどのコードをWebアプリ化が容易 • ホスティングも容易で複雑な設定が不要
  11. copyright © 2024 CMS Comunications Inc. all rights reserved. Python

    Web UIフレームワーク 比較 • 主なフレームワークを列挙 • 簡単に特徴を紹介
  12. copyright © 2024 CMS Comunications Inc. all rights reserved. Python

    Web UIフレームワークの種類 • 10個以上のプロジェクトがある • 新しいものが日々開発されている印象 • 今年は、Web UIフレームワークの祭りといった感じ • 好きなものを見つけて試して欲しい
  13. 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
  14. 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
  15. 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
  16. 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
  17. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitを使った、

         アプリの作り方 • Streamlit アプリ • ローカルで実行
  18. copyright © 2024 CMS Comunications Inc. all rights reserved. Streamlitサンプルアプリの作成

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

    $ pip install -r requirements.txt アプリの起動 $ streamlit run st_matrix_chart/streamlit_app.py ブラウザでアプリが表示
  20. 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
  21. copyright © 2024 CMS Comunications Inc. all rights reserved. マルチプラットフォームの

    デスクトップアプリへの応用 • デスクトップアプリ化 • ビルドコマンド
  22. 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
  23. copyright © 2024 CMS Comunications Inc. all rights reserved. デスクトップアプリ化コマンド

    $ npm install アプリの起動 $ npm run dump st_matrix_chart -- -r requirements.txt $ npm run serve アプリが立ち上がる
  24. 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リリースにファイルを置く
  25. 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 を作る
  26. copyright © 2024 CMS Comunications Inc. all rights reserved. リリース完了

    GitHub Releasesでパッケージダウンロード可能 https://github.com/terapyon/st-matrix-chart/releases
  27. copyright © 2024 CMS Comunications Inc. all rights reserved. まとめ

    • Streamlitアプリを作ってみよう。 • @stlite/desktopでデスクトップアプリ化してみよう。 • ビルド環境を整えてみよう。