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

LT for Ginza.js#7 https://ginzajs.connpass.com/event/154596/

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 ͷදࣔҎ֎Λ΄΅͠ͳ͍ͷͰɺࢫຯ͕গͳ͍ ‣ ϝϯςφϯε͕໘౗ͳͷͰɺґଘΛ࠷খԽ͔ͨͬͨ͠ ‣ յΕͨΓෆศͩͱɺ೔ʑͷۀ຿ʹࢧো͕ग़ΔͷͰ......