electron-vueで僕が考えた最強メモアプリ作っている話 / create memo app by electron-vue

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

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を生成

ちなみに、録画も同じような仕組み

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触ってみて！

electron-vueで僕が考えた最強メモアプリ作っている話 / create memo...