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
12. None

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

32. None
33. None

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