Slack を TweetDeck にしてみた件 / slackdeck-proto

LT for M3 TechTalk

Transcript

1. Slack Λ TweetDeck ʹͯ͠Έͨ݅
   @blue_1617
   

   View Slide

2. ࢲ͸୭ʁ
   blue (@blue_1617)
   https://blue0513.github.io/show_room/
   2
   ࠓظͷΞχϝϦετ
   ‣ ߥͿΔقઅͷԵঁͲ΋Αɻ
   ‣ ͔ͭͯਆ्ͩͬͨͨͪ΁
   ‣ Dr. STONE
   ‣ ൴ํͷΞετϥ
   ‣ μϯ·ͪ
   ‣ μϯϕϧԿΩϩ࣋ͯΔʁ
   ‣ ίοϓΫϥϑτ
   

   View Slide

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

   View Slide

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

   View Slide

5. TweetDeck ͸࠷ߴͩͥʁ 5
   

   View Slide

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

   View Slide

7. ΈΜͳɺSlack ޷͖ͩΖʁ
   7
   ‣ ๛෋ͳϦΞΫγϣϯ
   ‣ εϨουػೳ
   ‣ ֤छγϣʔτΧοτ
   ‣ ଞΞϓϦͱͷ౷߹
   ‣ etc ... etc ...
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 12
    
    ׬શউརͨ͠ blue ࢯ
    ࡞ͬͯΈͨ ~ SlackDeck Proto ~
    ✌
    

    View Slide

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

    View Slide

14. 14
    ߏ੒ཁૉ
    Webview, Custom CSS
    

    View Slide

15. 15
    ߏ੒ཁૉ
    ‣ main.js: 400ߦ
    ‣ ґଘ package
    ‣ electron-builder (Ϗϧυ༻)
    ‣ electron-store (ઃఆอଘ༻)
    ‣ Slack API: ඇ࢖༻
    

    View Slide

16. 16
    ػೳ
    ‣ 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

17. 17
    Multiple columns like TweetDeck
    

    View Slide

18. 18
    Multiple workspaces
    

    View Slide

19. 19
    Add/Remove columns by button
    

    View Slide

20. 20
    Selectable CSS styles for each column
    

    View Slide

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

    View Slide

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

    View Slide

23. ىಈɾ࣮ߦ 23
    ‣ ΞϓϦ൛ʢMacOSʣ
    ‣ CUI ىಈ
    $ npm install
    $ npm start
    https://github.com/blue0513/slackdeck-proto/releases
    

    View Slide

24. ࠷ޙʹ 24
    
    PR ଴ͬͯΔͥʂ
    blueࢯ
    

    View Slide