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
200
Snowpark for Python を効率的に使いこなすスタートライン(UDF)
toru_data
0
88
SPCSでエンドツーエンドな深層学習に挑戦してみた
toru_data
1
120
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う
irof
0
270
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
Catch Up: Go Style Guide Update
andpad
0
260
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
CSC305 Lecture 11
javiergs
PRO
0
290
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
ドメイン駆動設計のエッセンス
masuda220
PRO
12
3.1k
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
Cursorハンズオン実践!
eltociear
2
1.2k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Speed Design
sergeychernyshev
32
1.2k
Facilitating Awesome Meetings
lara
57
6.6k
Unsuck your backbone
ammeep
671
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Invisible Side of Design
smashingmag
302
51k
Writing Fast Ruby
sferik
630
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Thoughts on Productivity
jonyablonski
70
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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⛵ を楽しんでいきましょう!🎉