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

社内テックトークで発表した資料です。メモアプリはまだ作成中...

Transcript

1. electron-vueで 僕が考えた最強のメモアプリを 作ってる話 エムスリー 前原 @maeharin - 2018/5/30 エムスリー社内テックトーク -
2. 自己紹介 • 前原 秀徳 • @maeharin（まえはりん） • エムスリー株式会社 • 4年目 • キャリアチーム エンジニアチームリーダー • Kotlin、 Vue.js、Ruby • 好きな漫画は ベルセルク（心の支え） • 今さらながら NEW GAME!!にハマっています
3. 背景 https://speakerdeck.com/juntaki/sugoi-notewotukututa 同じチーム滝安さん作のWebノート
4. https://sugoi-note.net ブラウザベース。シンプル。
5. しかし 僕にとっての 最強メモアプリは これじゃない!
6. ということで、作った作っている 僕が考えた最強のメモアプリ Cappy
7. デモ
8. どうやって作っているか
9. ボイラープレート
10. electron-vue • vueでelectronアプリを作るボイラープレート • コマンド一発で、初期設定が完了 ◦ よく使うライブラリ ◦ Hot Module Replacement ◦ ESLint ◦ パッケージ機能 ◦ テスト ◦ .travis.yml ◦ など
11. たった3ステップ！ • vue init simulatedgreg/electron-vue my-project • cd my-project && yarn • yarn run dev
13. web技術(html, js, css)で デスクトップアプリ書ける WebでVue.js使うのとほぼ同じ感覚 Hot Module Replacement設定済み
14. babelなどの面倒な設定が 一通り完了している
15. （選択した場合） vue-routerのルーティングあり
16. 画面ショット
17. 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技術
18. electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト キャプチャするスクリーンをユーザーに選 択してもらう
19. electronのdesktopCaptureで DesktopCapturerSourceのリストを取得
20. DesktopCapturerSourceは サムネイル画像を持っている
21. electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト videoタグ キャプチャするスクリーンをユーザーに選 択してもらう DesktopCapturerSourceのidを渡す videoタグのsrcObjectプロパティに MediaStreamを突っ込む => スクリーンがvideoタグに表示される
22. DesktopCapturerSourceの idを渡す WebRTCのMediaStream
23. videoタグ canvas.getContext('2d').drawImage(videoEL,...) 透明なdivでクロップ範囲を決定 クロップ範囲を切り取って、 canvasに表示する videoタグのsrcObjectプロパティに MediaStreamを突っ込む => スクリーンがvideoタグに表示される
24. Video div
25. v-bindでstyleをバインド
26. video要素の特定の位置を クロップしてcanvasに 書き込む
27. canvasタグ canvas.toDataURL() base64 png画像 node.jsのfs.writeFileSync() 保存ボタンが押されたら、 base64に変換 ローカルPCのファイルシステムに保存
28. canvasに表示されている画像 をbase64に変換し、 ローカルのPCに保存
29. マークダウン プレビュー マークダウンか らHTMLへ
30. markdown-it • markdownのパーサ（jsライブラリ） • vscodeなどでも使われている • markdown-it-containerプラグインを使って、パーサを独自に拡 張できる ◦ 特定の記法を、特定の方法でパースし、特定のhtmlタグに 変換できる 例
31. vueでmarkdown-it使うには？ • textareaタグで入力を受け付ける • プレビュー側は、Vueのrender関数にする ◦ ※htmlを動的に生成するので • render関数の中でmarkdown-itを使ってhtmlを生成
34. ちなみに、録画も同じような仕組み
35. electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト WebRTCのMediaRecorder Uint8Arrayオブジェクト webm動画 node.jsのfs.writeFileSync() Blobオブジェクト 画像キャプチャと同じ
36. まとめ • electron-vueでデスクトップアプリ開発が簡単に • 画面ショットや画面録画もWebのAPIを使って実装できる • electron-vue触ってみて！