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

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

Transcript

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

   View Slide

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
   

   View Slide

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 ʹͯ͠Έͨ݅
   

   View Slide

4. ΈΜͳɺTwitter ޷͖ͩΖʁ 4
   

   View Slide

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

   View Slide

6. TweetDeck ͸࠷ߴͩͥʁ 6
   

   View Slide

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

   View Slide

8. ΈΜͳɺSlack ޷͖ͩΖʁ
   8
   ‣ ๛෋ͳϦΞΫγϣϯ
   ‣ εϨουػೳ
   ‣ ֤छγϣʔτΧοτ
   ‣ ଞΞϓϦͱͷ౷߹
   ‣ etc ... etc ...
   
   ۀ຿΋ޮ཰Խͩͥˑ
   

   View Slide

9. ΈΜͳɺSlack ޷͖ͩΖʁ
   9
   ‣ νϟϯωϧͷ૿Ճ
   ‣ ෳ਺ಉ࣌ฒߦͰਐΉٞ࿦
   ‣ ผνϟϯωϧ͔Βϝϯγϣϯ
   
   ͋͹͹͹͹͹͹ͬ͹
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 16
    ߏ੒ཁૉ
    Electron (Vanilla JS)
    

    View Slide

17. 17
    ߏ੒ཁૉ
    Webview, Custom CSS
    

    View Slide

18. 18
    ߏ੒ཁૉ
    ‣ src/* ߦ਺: 687ߦ
    ‣ ओͳґଘ package
    ‣ electron-builder (Ϗϧυ༻)
    ‣ electron-store (ઃఆอଘ༻)
    ‣ Slack API: ඇ࢖༻
    ‣ Linter: ESLint
    ‣ CI: GitHub Actions w/ Jest, ESLint
    ‣ Liter, CI ౳
    

    View Slide

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
    

    View Slide

20. 20
    Multiple columns like TweetDeck
    

    View Slide

21. 21
    Multiple workspaces
    

    View Slide

22. 22
    Add/Remove columns by button
    

    View Slide

23. 23
    Selectable CSS styles for each column
    

    View Slide

24. 24
    Customizable settings as JSON
    ‣ Main Slack URL
    ‣ Other Workspaces URL
    ‣ Column Settings
    

    View Slide

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

    View Slide

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

    View Slide