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-vueで僕が考えた最強メモアプリ作っている話 / create memo...
Search
Hidenori Maehara
May 30, 2018
Technology
0
2.4k
electron-vueで僕が考えた最強メモアプリ作っている話 / create memo app by electron-vue
社内テックトークで発表した資料です。メモアプリはまだ作成中...
Hidenori Maehara
May 30, 2018
Tweet
Share
More Decks by Hidenori Maehara
See All by Hidenori Maehara
How to Test Server-side Kotlin #kotlinfest
maeharin
11
40k
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
maeharin
18
44k
10年前のレガシーシステムをサーバーサイドKotlinでフルリニューアルしている話 #jjug_ccc #ccc_g2
maeharin
17
23k
KotlinとSpring BootとDoma2でAPIサーバーを作る #m3kt
maeharin
5
6.5k
システムリニューアルと サーバーサイドKotlin
maeharin
4
7.2k
Other Decks in Technology
See All in Technology
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
230
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
280
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
AI関数が早くなったので試してみよう
kumakura
0
120
20250807_Kiroと私の反省会
riz3f7
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
GitHub's CSS Performance
jonrohan
1031
460k
The Language of Interfaces
destraynor
158
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
89
9.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
How STYLIGHT went responsive
nonsquared
100
5.7k
Transcript
electron-vueで 僕が考えた最強のメモアプリを 作ってる話 エムスリー 前原 @maeharin - 2018/5/30 エムスリー社内テックトーク -
自己紹介 • 前原 秀徳 • @maeharin(まえはりん) • エムスリー株式会社 • 4年目
• キャリアチーム エンジニアチームリーダー • Kotlin、 Vue.js、Ruby • 好きな漫画は ベルセルク(心の支え) • 今さらながら NEW GAME!!にハマっています
背景 https://speakerdeck.com/juntaki/sugoi-notewotukututa 同じチーム滝安さん作のWebノート
https://sugoi-note.net ブラウザベース。シンプル。
しかし 僕にとっての 最強メモアプリは これじゃない!
ということで、作った作っている 僕が考えた最強のメモアプリ Cappy
デモ
どうやって作っているか
ボイラープレート
electron-vue • vueでelectronアプリを作るボイラープレート • コマンド一発で、初期設定が完了 ◦ よく使うライブラリ ◦ Hot Module
Replacement ◦ ESLint ◦ パッケージ機能 ◦ テスト ◦ .travis.yml ◦ など
たった3ステップ! • vue init simulatedgreg/electron-vue my-project • cd my-project &&
yarn • yarn run dev
None
web技術(html, js, css)で デスクトップアプリ書ける WebでVue.js使うのとほぼ同じ感覚 Hot Module Replacement設定済み
babelなどの面倒な設定が 一通り完了している
(選択した場合) vue-routerのルーティングあり
画面ショット
electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト videoタグ canvas.getContext('2d').drawImage(videoEL,...) canvasタグ canvas.toDataURL() base64 png画像
node.jsのfs.writeFileSync() 透明なdivでクロップ範囲を決定 キャプチャするスクリーンをユーザーに選 択してもらう クロップ範囲を切り取って、 canvasに表示する 保存ボタンが押されたら、 base64に変換 ローカルPCのファイルシステムに保存 DesktopCapturerSourceのidを渡す videoタグのsrcObjectプロパティに MediaStreamを突っ込む => スクリーンがvideoタグに表示される Web技術
electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト キャプチャするスクリーンをユーザーに選 択してもらう
electronのdesktopCaptureで DesktopCapturerSourceのリストを取得
DesktopCapturerSourceは サムネイル画像を持っている
electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト videoタグ キャプチャするスクリーンをユーザーに選 択してもらう DesktopCapturerSourceのidを渡す videoタグのsrcObjectプロパティに MediaStreamを突っ込む =>
スクリーンがvideoタグに表示される
DesktopCapturerSourceの idを渡す WebRTCのMediaStream
videoタグ canvas.getContext('2d').drawImage(videoEL,...) 透明なdivでクロップ範囲を決定 クロップ範囲を切り取って、 canvasに表示する videoタグのsrcObjectプロパティに MediaStreamを突っ込む => スクリーンがvideoタグに表示される
Video div
v-bindでstyleをバインド
video要素の特定の位置を クロップしてcanvasに 書き込む
canvasタグ canvas.toDataURL() base64 png画像 node.jsのfs.writeFileSync() 保存ボタンが押されたら、 base64に変換 ローカルPCのファイルシステムに保存
canvasに表示されている画像 をbase64に変換し、 ローカルのPCに保存
マークダウン プレビュー マークダウンか らHTMLへ
markdown-it • markdownのパーサ(jsライブラリ) • vscodeなどでも使われている • markdown-it-containerプラグインを使って、パーサを独自に拡 張できる ◦ 特定の記法を、特定の方法でパースし、特定のhtmlタグに
変換できる 例
vueでmarkdown-it使うには? • textareaタグで入力を受け付ける • プレビュー側は、Vueのrender関数にする ◦ ※htmlを動的に生成するので • render関数の中でmarkdown-itを使ってhtmlを生成
None
None
ちなみに、録画も同じような仕組み
electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト WebRTCのMediaRecorder Uint8Arrayオブジェクト webm動画 node.jsのfs.writeFileSync() Blobオブジェクト 画像キャプチャと同じ
まとめ • electron-vueでデスクトップアプリ開発が簡単に • 画面ショットや画面録画もWebのAPIを使って実装できる • electron-vue触ってみて!