Tweet
Tweet

Slide 1

Slide 1 text

Slack Λ TweetDeck ʹͯ͠Έͨ݅ @blue_1617

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ΈΜͳɺTwitter ޷͖ͩΖʁ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

TweetDeck ͸࠷ߴͩͥʁ 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 ߏ੒ཁૉ Electron (Vanilla JS)

Slide 14

Slide 14 text

14 ߏ੒ཁૉ Webview, Custom CSS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Multiple columns like TweetDeck

Slide 18

Slide 18 text

18 Multiple workspaces

Slide 19

Slide 19 text

19 Add/Remove columns by button

Slide 20

Slide 20 text

20 Selectable CSS styles for each column

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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