Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ElectronでSlackをさらに便利にしちゃう / Slack with Electron
Search
Taiju Aoki
December 09, 2019
Programming
3
810
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.8k
オンプレ to オンプレした話/on-premises2on-premises
blue0513
0
2.9k
GitもCIもテストもないプロジェクトでデプロイを自動化するまでの道 / rebuild of DevOps
blue0513
0
3.1k
Git & GitLab & コードレビューって? / about Git, GitLab, CodeReview
blue0513
0
210
GitHub の README をいい感じにする / Cool Readme
blue0513
3
1.6k
Emacs × Sound やってみた / Emacs with Sound
blue0513
1
960
Slack を TweetDeck にしてみた件 / slackdeck-proto
blue0513
0
2.9k
知ってるとお得な iTerm2 と zsh/bash の小技
blue0513
3
800
クラウド電子カルテを支える魂の技術
blue0513
0
2.3k
Other Decks in Programming
See All in Programming
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
CI改善もDatadogとともに
taumu
0
110
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Formの複雑さに立ち向かう
bmthd
1
720
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
A Tale of Four Properties
chriscoyier
158
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Git: the NoSQL Database
bkeepers
PRO
427
64k
YesSQL, Process and Tooling at Scale
rocio
171
14k
BBQ
matthewcrist
86
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Thoughts on Productivity
jonyablonski
69
4.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Side Projects
sachag
452
42k
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 ͷදࣔҎ֎Λ΄΅͠ͳ͍ͷͰɺࢫຯ͕গͳ͍ ‣ ϝϯςφϯε͕໘ͳͷͰɺґଘΛ࠷খԽ͔ͨͬͨ͠ ‣ յΕͨΓෆศͩͱɺʑͷۀʹࢧো͕ग़ΔͷͰ......