Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Streamlit Meetup Workshop:Streamlitのコントリビューションに...
Search
Toru Hiyama
December 24, 2023
Programming
0
120
Streamlit Meetup Workshop:Streamlitのコントリビューションに挑戦してみよう
2023/12/21 開催のStreamlit Meetupにて開催したワークショップの投影資料
Toru Hiyama
December 24, 2023
Tweet
Share
More Decks by Toru Hiyama
See All by Toru Hiyama
Snowflake ✕ LangChain でできること
toru_data
0
150
Snowpark for Python を効率的に使いこなすスタートライン(UDF)
toru_data
0
44
SPCSでエンドツーエンドな深層学習に挑戦してみた
toru_data
1
110
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
540
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
310
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
NPOでのDevinの活用
codeforeveryone
0
680
C++20 射影変換
faithandbrave
0
560
ニーリーにおけるプロダクトエンジニア
nealle
0
710
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
PipeCDのプラグイン化で目指すところ
warashi
1
240
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Code Review Best Practice
trishagee
69
18k
GitHub's CSS Performance
jonrohan
1031
460k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Visualization
eitanlees
146
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Facilitating Awesome Meetings
lara
54
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
ワークショップ: Streamlitのコントリビューションに 挑戦してみよう SnowVillage - Team Streamlit 2023/12/21 (木)
本日の仕掛け人 Toru Hiyama Data Engineer @NTT DATA X(Twitter):@toru_data Qiita:@toru_hiyama Akira
Sakatoku Core Staff @KDDI Corporation. X(Twitter): @AkSakatoku Qiita: @ak-sakatoku Yuki Yamanaka Data Engineer @NOVASELL X(Twitter): @yamnaku_ Kohei Komiyama Data Engineer @GENDA Inc. X(Twitter): @kommy_jp Zenn: @kommy339 Mizuho Yashiro Data Engineer @truestar X(Twitter): mizuhoruisui
ワークショップでやること / 流れ • OSSコントリビューションの一連の操作を確認します • Streamlit 自体の開発環境を、GitHub Codespacesに構築します •
Streamlit のソースコードをいじって遊んでみましょう! • 最後に、Pull Request までの流れを確認します これでみんなも、OSS コントリビュータ!👑
早速ですが・・・、開発環境を構築しておきましょう セットアップに時間がかかるため、先に開発環境を構築していきます🔧 下記のGitHubリポジトリにアクセスして、「1. Codespacesの起動」と 「2. Streamlit Contribute環境の構築」の操作を行います https://github.com/THiyama/codespaces-st-contribute 2.の操作を最後まで実行すると10分ほどパッケージの インストールが始まるので、それまで解説をします。
Streamlit 開発環境について Streamlit にコントリビュートするために、Streamlit リポジトリの CONTRIBUTING.mdに開発環境の構築方法が記載されています🖊 • 今回用意した環境は、この CONTRIBUTING.mdに則っています。 •
Ubuntu 20.04 / Node.js / CRACO(Create React App) / Python 3.8 / などなど ❏ GitHub Codespaceについて ❏ 今回みなさんに構築いただいた環境は、 GitHub Codespaceという開発環境です ❏ クラウドベースのインスタントな開発環境なので 素早く・再現性高く・簡単に構築できます ❏ ぜひ今後の開発でも使ってみてね!
OSS コントリビュートって? OSS へのコントリビュートには、コードを書くだけでなく様々な形があります。 • 📢Issueの報告:バグや提案を報告 • 📃ドキュメントの改善:利用ガイドの更新や、セクションの追加 • コードの実装:Issueのバグや提案の実装
• 🤝コミュニティサポート:チャットルームなどでの質問への回答 どれも重要なのは「プロジェクトに価値を提供すること」です。 まずは、ドキュメントの修正や見つけたバグをIssueで登録することなどから 始めてみましょう!🚀
OSSプロジェクトへのコントリビュートは、以下のステップに沿って行われます • プロジェクトのガイドライン、コントリビュートドキュメントを読む • Issueの確認、報告、ディスカッション • コードの実装、Pull Request • コードレビュー、承認
/ 拒否 OSS コントリビュートの流れ 共有リポジトリ フォークリポジトリ フォーク Pull Request クローン Push 🙋 Issue プルリクの確認 メンテナンス
今回のStreamlit コントリビュートの対象 Streamlit コントリビュートというと、大きく分けて2つの種類があります 1. Streamlit 自体へのコントリビュート 2. Streamlit カスタムコンポーネントへのコントリビュート
今回は、1. Streamlit 自体へのコントリビュートを確認することで、いつも使っているOSS のバグや機能拡張、ドキュメント執筆を行う方法を理解します🎓 ➔ カスタムコンポーネントについては、Yuichiroさんや公式ドキュメントその他 Webから情報収集してみましょう!🔍
Streamlitへのコントリビュートをはじめる コントリビュートをはじめるにしても、題材がないとはじまりません。 そこで、今回のテーマを、 「st.snow()❄ があるなら st.fires()🔥 があってもいいじゃないか!」 というものにしましょう。
StreamlitリポジトリにIssueを立てる そうと決まれば、まずすべきことは何でしたか?👀 そう、プロジェクトガイドラインやリポジトリのIssueを確認することでしたね Issueを確認して、同じアイデアを持った人がいれば、アイデアを共有したり、 実装方法を一緒に考えたりしましょう💡 今回はIssueを立てることはしませんが、リポジトリのIssueを確認しておきます https://github.com/streamlit/streamlit/issues
Streamlit の開発をはじめる 開発環境は手元にあるので、早速開発をはじめていきましょう! • メモ「3. Streamlit Contribute作業の開始」に従って作業を進めます • ここでは、ビルドサーバーの起動と、Streamlitアプリの起動を行います ターミナル1:ビルドサーバー
ターミナル2:ビルドサーバー ブラウザ(自動で起動してくるはず)
時間の限り、Streamlit のソースコードをいじってみる ここからは時間の限り Streamlit のソースコードを修正して遊んでみましょう! (15:25まで) • 修正内容/方法は、メモ「4. Streamlitの開発」を参考にしてみてください •
メモ:https://github.com/THiyama/codespaces-st-contribute • コードの修正は、今回のテーマや、上記のメモに縛られなくても大丈夫。 • 気になったことは、どんどん質問・相談・雑談してみましょう • 今日は、Streamlit に興味がある人、Streamlitで開発を行っている人、 さらには、Streamlit コントリビューター、Streamlit Co-founderが集まる不思議な機会です。
st.fires()の実装例と動作の様子 下記のファイルを編集・追加します🔧 • TypeScript ◦ streamlit/frontend/lib/src/components/elements/Fires ◦ streamlit/frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx • Python
◦ streamlit/lib/streamlit/elements/__init__.py ◦ streamlit/lib/streamlit/elements/fire.py ◦ streamlit/lib/streamlit/__init__.py ◦ streamlit/lib/streamlit/delta_generator.py • Protocol Buffers ◦ streamlit/proto/streamlit/proto/Fire.proto ◦ streamlit/proto/streamlit/proto/Element.proto 追加方法は、「4. Streamlitの開発」のパターン2 を参考にしてください
実装が終わったら・・・ ソースコードのテストやリント、Push、そしてPull Requestを行います • 「5. StreamlitにContributeする」を参考に行います • このとき、Pushまでは実施して大丈夫です ◦ Push先は、あくまでみなさんがフォークしたリポジトリです
• しかし、今回は、Pull Requestは行わないようにしてください⚠ ◦ 今回のワークショップでは、Issueでの議論やテストをしっかり行えていません
ワークショップ後のお掃除について • 今回使ったGitHub Codespacesは停止した状態(無課金)で残るので、 適宜削除してください。 • また、自分のGitHubアカウントにフォークしたリポジトリも 適宜削除して問題ありません。
おわりに 今回のワークショップで、OSSにコントリビュートするための流れを一通り学習しました。 また、Streamlitの実装の中身も少しだけ確認することができました。 • お世話になっているOSSのバグを見つけたら、報告してみよう 📢 • まずは、ドキュメントの追加や修正からでも大丈夫 📃 •
これからの OSS Journey⛵ を楽しんでいきましょう!🎉