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

No content

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

No content

No content

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

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