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

ElectronでSlackをさらに便利にしちゃう / Slack with Electron

Taiju Aoki
December 09, 2019

ElectronでSlackをさらに便利にしちゃう / Slack with Electron

Taiju Aoki

December 09, 2019
Tweet

More Decks by Taiju Aoki

Other Decks in Programming

Transcript

  1. Electron Ͱ Slack Λ͞Βʹศརʹͪ͠Ό͏ @blue_1617

  2. ࢲ͸୭ʁ blue (@blue_1617) https://blue0513.github.io/show_room/ 2 Rails, JavaScript, Scala etc ΤϜεϦʔ:

    Ϋϥ΢υిࢠΧϧςνʔϜॴଐ GitHubͱ͔ ‣ slackdeck-proto : Slack ͷ TweetDeck ෩ Viewer ‣ minideck : TweetDeck ͷ͍͍ײ͡ͷ Viewer ‣ phantom-inline-comment: Emacs ͷ package ‣ point-history: Emacs ͷ package ‣ instant-maximized-window: Emacs ͷ package
  3. ͜ͷൃද͸ʁ 3 Slack Λ೔ৗతʹ࢖͏ΤϯδχΞ͕ ۀ຿ޮ཰Λ্͛ΔͨΊʹ Slack Λศརʹ͢Δ࿩ https://github.com/blue0513/slackdeck-proto https://qiita.com/blue0513/items/94f719b8c714eb4283b6 https://speakerdeck.com/blue0513/slackdeck-proto

    Qiita: TweetDeck ෩ Slack Viewer Λ࡞ͬͯΈͨ GitHub: SlackDeck-Proto M3 TechTalkʢࣾ಺LTʣ: Slack Λ TweetDeck ʹͯ͠Έͨ݅
  4. ΈΜͳɺTwitter ޷͖ͩΖʁ 4

  5. ΈΜͳɺTwitter ޷͖ͩΖʁ 5 Ұཡੑʹ͚ܽΔ͔ʁ

  6. TweetDeck ͸࠷ߴͩͥʁ 6

  7. TweetDeck ͸࠷ߴͩͥʁ 7 ֤ΫϥελຖʹΧϥϜΛΘ͚ͯදࣔͰ͖Δ ‣ Ұཡੑ Λ୲อͭͭ͠ɺ৘ใΛ ੔ཧ Ͱ͖Δ

  8. ΈΜͳɺSlack ޷͖ͩΖʁ 8 ‣ ๛෋ͳϦΞΫγϣϯ ‣ εϨουػೳ ‣ ֤छγϣʔτΧοτ ‣

    ଞΞϓϦͱͷ౷߹ ‣ etc ... etc ... ۀ຿΋ޮ཰Խͩͥˑ
  9. ΈΜͳɺSlack ޷͖ͩΖʁ 9 ‣ νϟϯωϧͷ૿Ճ ‣ ෳ਺ಉ࣌ฒߦͰਐΉٞ࿦ ‣ ผνϟϯωϧ͔Βϝϯγϣϯ ͋͹͹͹͹͹͹ͬ͹

  10. ΈΜͳɺSlack ޷͖ͩΖʁ 10 Ұཡੑʹ͚ܽΔͷ͕໰୊Ͱ͸ʁ

  11. 11 Slack ΋ҰཡੑΑͨ͘͘͠ͳ͍ʁ TweetDeck ෩ͳ Viewer Λ ࡞Ε͹͍͍ͷͰ͸ʁ

  12. 12 Slack ΋ҰཡੑΑͨ͘͘͠ͳ͍ʁ TweetDeck ෩ͳ Viewer Λ ࡞Ε͹͍͍ͷͰ͸ʁ ఱ࠽తൃ૝

  13. 13 https://github.com/blue0513/slackdeck-proto ࡞ͬͯΈͨ ~ SlackDeck Proto ~

  14. 14 https://github.com/blue0513/slackdeck-proto ࡞ͬͯΈͨ ~ SlackDeck Proto ~

  15. ىಈɾ࣮ߦ 15 ‣ ΞϓϦ൛ʢmacOS, Windowsʣ ‣ CUI ىಈ $ npm

    install $ npm start
  16. 16 ߏ੒ཁૉ Electron (Vanilla JS)

  17. 17 ߏ੒ཁૉ Webview, Custom CSS

  18. 18 ߏ੒ཁૉ ‣ src/* ߦ਺: 687ߦ ‣ ओͳґଘ package ‣

    electron-builder (Ϗϧυ༻) ‣ electron-store (ઃఆอଘ༻) ‣ Slack API: ඇ࢖༻ ‣ Linter: ESLint ‣ CI: GitHub Actions w/ Jest, ESLint ‣ Liter, CI ౳
  19. 19 ػೳ ‣ Multiple columns like TweetDeck ‣ Multiple workspaces

    ‣ Add/Remove columns by button ‣ Selectable CSS styles for each column ‣ Customizable settings as JSON ‣ Settings are saved and persisted
  20. 20 Multiple columns like TweetDeck

  21. 21 Multiple workspaces

  22. 22 Add/Remove columns by button

  23. 23 Selectable CSS styles for each column

  24. 24 Customizable settings as JSON ‣ Main Slack URL ‣

    Other Workspaces URL ‣ Column Settings
  25. 25 Settings are saved and persisted ΞϓϦ൛Ͱ͸ settings.json ΛΠϯϙʔτ͢Δͱ ࣍ճىಈ࣌΋ͦͷઃఆΛҾ͖ܧ͙

  26. 26 ޻෉ͱ͔৭ʑ ͳͥ API Λ࢖༻͠ͳ͍ͷʁ ͳͥ React ͱ͔ FW Λ࢖Θͳ͔ͬͨͷʁ

    ͳͥϝϯςφϯεΛଓ͚Δͷʁ ‣ API ͷมߋʹΑΔϝϯςφϯε͕໘౗ͩͬͨ ‣ ެࣜ Web ൛Λ Electron & Webview ͢Δͷָ͕ͩͬͨ ‣ FW Λ࢖͏ͱ PR Λग़͢ϋʔυϧ্͕͕Δͱࢥͬͨ ‣ Webview ͷදࣔҎ֎Λ΄΅͠ͳ͍ͷͰɺࢫຯ͕গͳ͍ ‣ ϝϯςφϯε͕໘౗ͳͷͰɺґଘΛ࠷খԽ͔ͨͬͨ͠ ‣ յΕͨΓෆศͩͱɺ೔ʑͷۀ຿ʹࢧো͕ग़ΔͷͰ......