Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࢲ͸୭ʁ 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

Slide 3

Slide 3 text

͜ͷൃද͸ʁ 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 ʹͯ͠Έͨ݅

Slide 4

Slide 4 text

ΈΜͳɺTwitter ޷͖ͩΖʁ 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

TweetDeck ͸࠷ߴͩͥʁ 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 ߏ੒ཁૉ Electron (Vanilla JS)

Slide 17

Slide 17 text

17 ߏ੒ཁૉ Webview, Custom CSS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 Multiple columns like TweetDeck

Slide 21

Slide 21 text

21 Multiple workspaces

Slide 22

Slide 22 text

22 Add/Remove columns by button

Slide 23

Slide 23 text

23 Selectable CSS styles for each column

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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