Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

watsuyo_2
March 16, 2022

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

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

Twitter: https://twitter.com/watsuyo_2

watsuyo_2

March 16, 2022
Tweet

More Decks by watsuyo_2

Other Decks in Programming

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.

    View full-size slide

  2. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    今日の登壇資料はこちら👉 @watsuyo_2
    2

    View full-size slide

  3. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    iCARE初のテックマガジン
    Carely Tech Zine リリース🎉
    3

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  6. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    "Notion RSS Reader"とは?
    6

    View full-size slide

  7. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2

    View full-size slide

  8. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    "Notion RSS Reader"とは?
    ● 現在の機能
    ○ お気に入りのサイトをNotionに登録
    ○ それらの更新を Notionデータベース に貯めることができる
    ● 今後実装したい機能
    ○ Feedly や Pocket integration との連携
    ○ etc…
    8

    View full-size slide

  9. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    公開後にGitHub Starsを頂きました🎉
    9

    View full-size slide

  10. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    なぜNotionを選んだのか?
    10

    View full-size slide

  11. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    なぜNotionを選んだのか?
    ● UI の実装が不要
    ● アイデアを少ないコストで実装できる
    ● すぐに試すことができる
    11

    View full-size slide

  12. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    技術的な話
    12

    View full-size slide

  13. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    技術スタック
    ● Node.js
    ● TypeScript
    ● esbuild
    ● Notion API
    ● GitHub Actions
    13

    View full-size slide

  14. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    RSS 記事取得
    14

    View full-size slide

  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

    View full-size slide

  16. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    esbuild vs webpack5
    16

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  20. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    GitHub Actions を記事取得の
    クローラーとして使った
    20

    View full-size slide

  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

    View full-size slide

  22. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    GitHub Actions を記事取得のクローラーとして使った
    ● GitHub Actions に環境変数を登録することで Notionデータベース へ読み書きが
    できる
    ○ 1時間に1回、スクリプトを実行する
    22

    View full-size slide

  23. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    Notion RSS Reader をOSSとしてリリース
    した流れ
    23

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  26. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2 26

    View full-size slide

  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としてリリースした流れ

    View full-size slide

  28. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    参考文献
    28

    View full-size slide

  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

    View full-size slide

  30. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    質問はTwitterにてお願いします!
    30

    View full-size slide

  31. Notion RSS Reader🎁:
    https://github.com/watsuyo/notion-rss-reader Twitter: @watsuyo_2
    ご清聴ありがとうございました
    31

    View full-size slide