$30 off During Our Annual Pro Sale. View Details »

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

Taiju Aoki
December 09, 2019

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

Taiju Aoki

December 09, 2019
Tweet

More Decks by Taiju Aoki

Other Decks in Programming

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