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
asken AI勉強会(Android)
tadashi_sato
0
150
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
190
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
120
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
AWS認定を取る中で感じたこと
siromi
1
130
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
150
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
110
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
450
Connect 100+を支える技術
kanyamaguc
0
160
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
150
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
2.1k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Raft: Consensus for Rubyists
vanstee
140
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Scaling GitHub
holman
459
140k
KATA
mclloyd
30
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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触ってみて!