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

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

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

0ff63a1cf64b2501566f37581000bd9b?s=128

Hidenori Maehara

May 30, 2018
Tweet

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