Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
electron-vueで僕が考えた最強メモアプリ作っている話 / create memo app by electron-vue
Hidenori Maehara
May 30, 2018
Technology
0
2.2k
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
37k
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
maeharin
18
43k
10年前のレガシーシステムをサーバーサイドKotlinでフルリニューアルしている話 #jjug_ccc #ccc_g2
maeharin
17
20k
KotlinとSpring BootとDoma2でAPIサーバーを作る #m3kt
maeharin
5
5.5k
システムリニューアルと サーバーサイドKotlin
maeharin
4
5.8k
Other Decks in Technology
See All in Technology
エアドロップ for オープンソースプロジェクト
epicsdao
0
260
230120 ガンダムの事例にみる自動化の対象 Haruka Oh!さん
comucal
PRO
0
120
インフラ技術基礎勉強会 開催概要
toru_kubota
0
140
SPA・SSGでSSRのようなOGP対応!
simo123
2
140
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
990
ERC3525 Semi-Fungible token
sbtechnight
0
330
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
140
2年で10→70人へ! スタートアップの 情報セキュリティ課題と施策
miekobayashi
1
200
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
0
130
AI Builderについて
miyakemito
0
770
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
180
証明書って何だっけ? 〜AWSの中間CA移行に備える〜
minorun365
3
2k
Featured
See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Designing for humans not robots
tammielis
245
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Designing Experiences People Love
moore
130
22k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Adopting Sorbet at Scale
ufuk
65
7.8k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
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触ってみて!