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

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

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

LT for M3 TechTalk

Taiju Aoki

July 18, 2019
Tweet

More Decks by Taiju Aoki

Other Decks in Programming

Transcript

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

  2. ࢲ͸୭ʁ blue (@blue_1617) https://blue0513.github.io/show_room/ 2 ࠓظͷΞχϝϦετ ‣ ߥͿΔقઅͷԵঁͲ΋Αɻ ‣ ͔ͭͯਆ्ͩͬͨͨͪ΁

    ‣ Dr. STONE ‣ ൴ํͷΞετϥ ‣ μϯ·ͪ ‣ μϯϕϧԿΩϩ࣋ͯΔʁ ‣ ίοϓΫϥϑτ
  3. ΈΜͳɺTwitter ޷͖ͩΖʁ 3

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

  5. TweetDeck ͸࠷ߴͩͥʁ 5

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

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

    ଞΞϓϦͱͷ౷߹ ‣ etc ... etc ...
  8. ΈΜͳɺSlack ޷͖ͩΖʁ 8 Ұཡੑʹ͚ܽΔ͔ʁ

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

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

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

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

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

  14. 14 ߏ੒ཁૉ Webview, Custom CSS

  15. 15 ߏ੒ཁૉ ‣ main.js: 400ߦ ‣ ґଘ package ‣ electron-builder

    (Ϗϧυ༻) ‣ electron-store (ઃఆอଘ༻) ‣ Slack API: ඇ࢖༻
  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
  17. 17 Multiple columns like TweetDeck

  18. 18 Multiple workspaces

  19. 19 Add/Remove columns by button

  20. 20 Selectable CSS styles for each column

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

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

    ઃఆΠϯϙʔτը໘
  23. ىಈɾ࣮ߦ 23 ‣ ΞϓϦ൛ʢMacOSʣ ‣ CUI ىಈ $ npm install

    $ npm start https://github.com/blue0513/slackdeck-proto/releases
  24. ࠷ޙʹ 24 PR ଴ͬͯΔͥʂ blueࢯ