Notion RSS Readerを OSSとして公開した話

【iCARE Dev Meetup #31】Carely Tech Zine お披露目会
https://icare.connpass.com/event/239937/

Twitter: https://twitter.com/watsuyo_2

Transcript

1. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 Notion RSS Readerを OSSとして公開した話 1 with TypeScript + esbuild + GitHub Actions + Notion 2022/03/17 【iCARE Dev Meetup #31】Carely Tech Zine お披露目会 watsuyo from iCARE Co., Ltd.
2. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 今日の登壇資料はこちら👉 @watsuyo_2 2
3. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 iCARE初のテックマガジン Carely Tech Zine リリース🎉 3
4. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 自己紹介 Twitter: @watsuyo_2 GitHub: @watsuyo Home: watsuyo.dev Front-end Developer @iCARE Co., Ltd. 産業技術大学院大学 2021年4月~ 4
5. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 今日話すこと 1. なぜNotionを選んだのか? 2. esbuild のビルド時間が webpack の40倍だった 3. GitHub Actions を記事取得のクローラーとして使った 4. Notion RSS Reader をOSSとしてリリースした流れ 5
6. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 "Notion RSS Reader"とは? 6
7. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
8. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 "Notion RSS Reader"とは? • 現在の機能 ◦ お気に入りのサイトをNotionに登録 ◦ それらの更新を Notionデータベース に貯めることができる • 今後実装したい機能 ◦ Feedly や Pocket integration との連携 ◦ etc… 8
9. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 公開後にGitHub Starsを頂きました🎉 9
10. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 なぜNotionを選んだのか? 10
11. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 なぜNotionを選んだのか? • UI の実装が不要 • アイデアを少ないコストで実装できる • すぐに試すことができる 11
12. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 技術的な話 12
13. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 技術スタック • Node.js • TypeScript • esbuild • Notion API • GitHub Actions 13
14. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 RSS 記事取得 14
15. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 RSS 記事取得 • RSSとは？ ◦ "ニュースやブログなど各種のウェブサイトの更新情報を配信するための文書フォーマットの総称で ある。"[1] • TypeScriptで "rss-parser" を使う ◦ "rss-parser" : https://github.com/rbren/rss-parser ◦ 詳細👇 15
16. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 esbuild vs webpack5 16
17. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 esbuild vs webpack5 Done in 0.34sec Done in 13.81sec esbuild webpack 17
18. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 Done in 0.34sec Done in 13.81sec esbuild webpack Win 🎉 18 esbuild vs webpack5
19. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 なぜ esbuildは速いのか？ • Go言語で開発され、ネイティブコードにコンパイルされている ◦ "It's written in Go and compiles to native code." • 並列処理が多用されている ◦ "Parallelism is used heavily." • esbuildは、すべてスクラッチで実装されている ◦ "Everything in esbuild is written from scratch" • メモリを効率的に使用している ◦ "Memory is used efficiently." 参考: https://esbuild.github.io/faq/#why-is-esbuild-fast[2] 19
20. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 GitHub Actions を記事取得の クローラーとして使った 20
21. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 GitHub Actions を記事取得のクローラーとして使った • GitHub Actions ◦ "Easy to automate all your software workflows, now with world-class CI/CD". ◦ "Kick off workflows with GitHub events like push, issue creation, or a new release". ◦ "Public branch use is free, private branch use based on quantity". 参考: https://github.com/features/actions 21
22. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 GitHub Actions を記事取得のクローラーとして使った • GitHub Actions に環境変数を登録することで Notionデータベース へ読み書きが できる ◦ 1時間に1回、スクリプトを実行する 22
23. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 Notion RSS Reader をOSSとしてリリース した流れ 23
24. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 Notion RSS Reader をOSSとしてリリースした流れ • ライセンス情報を指定する ◦ "The rights attached to the program must apply to all to whom the program is redistributed without the need for execution of an additional license by those parties." [3] • ツールの使い方とコントリビュートの仕方をREADMEに記述する ◦ リポジトリにアクセスしたユーザーにツールの使い方を伝える ◦ OSSの場合、他のコントリビューターと一緒に開発することになる ◦ そのため、開発環境をどのように作るかを記述することが重要 24
25. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 ライセンス情報 • GitHubでテンプレートに署名するだけ • 今回は MIT license を選択 ◦ 自由な使用、複製、再配布を許可 ◦ "The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software"[4] ◦ 意図的に削除しない限り、作者名とライセンス ファイルはソースに残りますので、特に何もする 必要はない 25
26. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 26
27. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 今日話したこと 27 1. なぜNotionを選んだのか? 2. esbuild のビルド時間が webpack の40倍だった 3. GitHub Actions を記事取得のクローラーとして使った 4. Notion RSS Reader をOSSとしてリリースした流れ
28. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 参考文献 28
29. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 参考文献 [1] "RSS - Wikipedia", https://ja.wikipedia.org/wiki/RSS Mar, 10, 2022 [2] "Why is esbuild fast?", https://esbuild.github.io/faq/#why-is-esbuild-fast Feb, 17, 2022 [3] "The Open Source Definition", Debian Free Software Guidelines (DFSG), 22, 2007, https://opensource.org/docs/osd Feb, 17, 2022 [4] "The MIT License", MIT, 22, 2007, https://opensource.org/licenses/MIT Feb, 17, 2022 29
30. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 質問はTwitterにてお願いします！ 30
31. Notion RSS Reader🎁: https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 ご清聴ありがとうございました 31