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
830
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
AIプログラミング雑キャッチアップ
yuheinakasaka
18
4.3k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
980
CloudNativePGを布教したい
nnaka2992
0
110
Domain-Driven Transformation
hschwentner
2
1.9k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
For a Future-Friendly Web
brad_frost
176
9.6k
A Tale of Four Properties
chriscoyier
158
23k
Embracing the Ebb and Flow
colly
84
4.6k
Automating Front-end Workflow
addyosmani
1368
200k
Facilitating Awesome Meetings
lara
52
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How to Ace a Technical Interview
jacobian
276
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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 ͷදࣔҎ֎Λ΄΅͠ͳ͍ͷͰɺࢫຯ͕গͳ͍ ‣ ϝϯςφϯε͕໘ͳͷͰɺґଘΛ࠷খԽ͔ͨͬͨ͠ ‣ յΕͨΓෆศͩͱɺʑͷۀʹࢧো͕ग़ΔͷͰ......