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.4k
システムリニューアルと サーバーサイドKotlin
maeharin
4
7.1k
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年4月度サービス・アップデート
oracle4engineer
PRO
0
170
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
820
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
340
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
290
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.7k
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.8k
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.3k
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
260
C++26アップデート 2025-03
faithandbrave
0
1.1k
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
500
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
890
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
200
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Practical Orchestrator
shlominoach
187
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
Six Lessons from altMBA
skipperchong
28
3.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Navigating Team Friction
lara
185
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
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触ってみて!