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

    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