Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ElectronでSlackをさらに便利にしちゃう / Slack with Electron
Taiju Aoki
December 09, 2019
Programming
3
430
ElectronでSlackをさらに便利にしちゃう / Slack with Electron
LT for Ginza.js#7
https://ginzajs.connpass.com/event/154596/
Taiju Aoki
December 09, 2019
Tweet
Share
More Decks by Taiju Aoki
See All by Taiju Aoki
本番運用中 Oracle を破壊してしまった話 ~ 破壊と創世 ~ / Oracle Destruction and Creation
blue0513
0
2.2k
オンプレ to オンプレした話/on-premises2on-premises
blue0513
0
2.3k
GitもCIもテストもないプロジェクトでデプロイを自動化するまでの道 / rebuild of DevOps
blue0513
0
2.4k
Git & GitLab & コードレビューって? / about Git, GitLab, CodeReview
blue0513
0
120
GitHub の README をいい感じにする / Cool Readme
blue0513
3
1.4k
Emacs × Sound やってみた / Emacs with Sound
blue0513
2
690
Slack を TweetDeck にしてみた件 / slackdeck-proto
blue0513
1
2.4k
知ってるとお得な iTerm2 と zsh/bash の小技
blue0513
3
610
クラウド電子カルテを支える魂の技術
blue0513
0
2k
Other Decks in Programming
See All in Programming
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
Circuit⚡
monaapk
0
200
Rによる大規模データの処理
s_uryu
2
640
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
230
Cloudflare Workersと状態管理
chimame
3
490
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
120
An Advanced Introduction to R
nicetak
0
1.8k
良質な技術記事を量産する秘訣 / #MeetsPro
jnchito
12
4k
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
130
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
230
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
20
9.9k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Thoughts on Productivity
jonyablonski
49
2.7k
What the flash - Photography Introduction
edds
64
10k
Code Reviewing Like a Champion
maltzj
508
38k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Robots, Beer and Maslow
schacon
154
7.3k
Statistics for Hackers
jakevdp
785
210k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
GitHub's CSS Performance
jonrohan
1020
430k
Transcript
Electron Ͱ Slack Λ͞Βʹศརʹͪ͠Ό͏ @blue_1617
ࢲ୭ʁ 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
͜ͷൃදʁ 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 ʹͯ͠Έͨ݅
ΈΜͳɺTwitter ͖ͩΖʁ 4
ΈΜͳɺTwitter ͖ͩΖʁ 5 Ұཡੑʹ͚ܽΔ͔ʁ
TweetDeck ࠷ߴͩͥʁ 6
TweetDeck ࠷ߴͩͥʁ 7 ֤ΫϥελຖʹΧϥϜΛΘ͚ͯදࣔͰ͖Δ ‣ Ұཡੑ Λ୲อͭͭ͠ɺใΛ ཧ Ͱ͖Δ
ΈΜͳɺSlack ͖ͩΖʁ 8 ‣ ๛ͳϦΞΫγϣϯ ‣ εϨουػೳ ‣ ֤छγϣʔτΧοτ ‣
ଞΞϓϦͱͷ౷߹ ‣ etc ... etc ... ۀޮԽͩͥˑ
ΈΜͳɺSlack ͖ͩΖʁ 9 ‣ νϟϯωϧͷ૿Ճ ‣ ෳಉ࣌ฒߦͰਐΉٞ ‣ ผνϟϯωϧ͔Βϝϯγϣϯ ͋ͬ
ΈΜͳɺSlack ͖ͩΖʁ 10 Ұཡੑʹ͚ܽΔͷ͕Ͱʁ
11 Slack ҰཡੑΑͨ͘͘͠ͳ͍ʁ TweetDeck ෩ͳ Viewer Λ ࡞Ε͍͍ͷͰʁ
12 Slack ҰཡੑΑͨ͘͘͠ͳ͍ʁ TweetDeck ෩ͳ Viewer Λ ࡞Ε͍͍ͷͰʁ ఱ࠽తൃ
13 https://github.com/blue0513/slackdeck-proto ࡞ͬͯΈͨ ~ SlackDeck Proto ~
14 https://github.com/blue0513/slackdeck-proto ࡞ͬͯΈͨ ~ SlackDeck Proto ~
ىಈɾ࣮ߦ 15 ‣ ΞϓϦ൛ʢmacOS, Windowsʣ ‣ CUI ىಈ $ npm
install $ npm start
16 ߏཁૉ Electron (Vanilla JS)
17 ߏཁૉ Webview, Custom CSS
18 ߏཁૉ ‣ src/* ߦ: 687ߦ ‣ ओͳґଘ package ‣
electron-builder (Ϗϧυ༻) ‣ electron-store (ઃఆอଘ༻) ‣ Slack API: ඇ༻ ‣ Linter: ESLint ‣ CI: GitHub Actions w/ Jest, ESLint ‣ Liter, CI
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
20 Multiple columns like TweetDeck
21 Multiple workspaces
22 Add/Remove columns by button
23 Selectable CSS styles for each column
24 Customizable settings as JSON ‣ Main Slack URL ‣
Other Workspaces URL ‣ Column Settings
25 Settings are saved and persisted ΞϓϦ൛Ͱ settings.json ΛΠϯϙʔτ͢Δͱ ࣍ճىಈ࣌ͦͷઃఆΛҾ͖ܧ͙
26 ͱ͔৭ʑ ͳͥ API Λ༻͠ͳ͍ͷʁ ͳͥ React ͱ͔ FW ΛΘͳ͔ͬͨͷʁ
ͳͥϝϯςφϯεΛଓ͚Δͷʁ ‣ API ͷมߋʹΑΔϝϯςφϯε͕໘ͩͬͨ ‣ ެࣜ Web ൛Λ Electron & Webview ͢Δͷָ͕ͩͬͨ ‣ FW Λ͏ͱ PR Λग़͢ϋʔυϧ্͕͕Δͱࢥͬͨ ‣ Webview ͷදࣔҎ֎Λ΄΅͠ͳ͍ͷͰɺࢫຯ͕গͳ͍ ‣ ϝϯςφϯε͕໘ͳͷͰɺґଘΛ࠷খԽ͔ͨͬͨ͠ ‣ յΕͨΓෆศͩͱɺʑͷۀʹࢧো͕ग़ΔͷͰ......