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

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

Transcript

1. electron-vueで
   僕が考えた最強のメモアプリを
   作ってる話
   エムスリー 前原
   @maeharin
   - 2018/5/30 エムスリー社内テックトーク -
   

   View Slide

2. 自己紹介
   ● 前原 秀徳
   ● @maeharin（まえはりん）
   ● エムスリー株式会社
   ● 4年目
   ● キャリアチーム エンジニアチームリーダー
   ● Kotlin、
   Vue.js、Ruby
   ● 好きな漫画は
   ベルセルク（心の支え）
   ● 今さらながら
   NEW GAME!!にハマっています
   

   View Slide

3. 背景
   https://speakerdeck.com/juntaki/sugoi-notewotukututa
   同じチーム滝安さん作のWebノート
   

   View Slide

4. https://sugoi-note.net
   ブラウザベース。シンプル。
   

   View Slide

5. しかし
   僕にとっての
   最強メモアプリは
   これじゃない!
   

   View Slide

6. ということで、作った作っている
   僕が考えた最強のメモアプリ
   Cappy
   

   View Slide

7. デモ
   

   View Slide

8. どうやって作っているか
   

   View Slide

9. ボイラープレート
   

   View Slide

10. electron-vue
    ● vueでelectronアプリを作るボイラープレート
    ● コマンド一発で、初期設定が完了
    ○ よく使うライブラリ
    ○ Hot Module Replacement
    ○ ESLint
    ○ パッケージ機能
    ○ テスト
    ○ .travis.yml
    ○ など
    

    View Slide

11. たった3ステップ！
    ● vue init simulatedgreg/electron-vue my-project
    ● cd my-project && yarn
    ● yarn run dev
    

    View Slide

12. View Slide

13. web技術(html, js, css)で
    デスクトップアプリ書ける
    WebでVue.js使うのとほぼ同じ感覚
    Hot Module Replacement設定済み
    

    View Slide

14. babelなどの面倒な設定が
    一通り完了している
    

    View Slide

15. （選択した場合）
    vue-routerのルーティングあり
    

    View Slide

16. 画面ショット
    

    View Slide

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技術
    

    View Slide

18. electronのdesktopCapturer.getSources()
    electronのDesktopCapturerSourceオブジェクト
    キャプチャするスクリーンをユーザーに選
    択してもらう
    

    View Slide

19. electronのdesktopCaptureで
    DesktopCapturerSourceのリストを取得
    

    View Slide

20. DesktopCapturerSourceは
    サムネイル画像を持っている
    

    View Slide

21. electronのDesktopCapturerSourceオブジェクト
    navigator.mediaDevices.getUserMedia()
    WebRTCのMediaStreamオブジェクト
    videoタグ
    キャプチャするスクリーンをユーザーに選
    択してもらう
    DesktopCapturerSourceのidを渡す
    videoタグのsrcObjectプロパティに
    MediaStreamを突っ込む
    => スクリーンがvideoタグに表示される
    

    View Slide

22. DesktopCapturerSourceの
    idを渡す
    WebRTCのMediaStream
    

    View Slide

23. videoタグ
    canvas.getContext('2d').drawImage(videoEL,...)
    透明なdivでクロップ範囲を決定
    クロップ範囲を切り取って、
    canvasに表示する
    videoタグのsrcObjectプロパティに
    MediaStreamを突っ込む
    => スクリーンがvideoタグに表示される
    

    View Slide

24. Video
    div
    

    View Slide

25. v-bindでstyleをバインド
    

    View Slide

26. video要素の特定の位置を
    クロップしてcanvasに
    書き込む
    

    View Slide

27. canvasタグ
    canvas.toDataURL()
    base64
    png画像
    node.jsのfs.writeFileSync()
    保存ボタンが押されたら、
    base64に変換
    ローカルPCのファイルシステムに保存
    

    View Slide

28. canvasに表示されている画像
    をbase64に変換し、
    ローカルのPCに保存
    

    View Slide

29. マークダウン プレビュー
    マークダウンか
    らHTMLへ
    

    View Slide

30. markdown-it
    ● markdownのパーサ（jsライブラリ）
    ● vscodeなどでも使われている
    ● markdown-it-containerプラグインを使って、パーサを独自に拡
    張できる
    ○ 特定の記法を、特定の方法でパースし、特定のhtmlタグに
    変換できる
    例
    

    View Slide

31. vueでmarkdown-it使うには？
    ● textareaタグで入力を受け付ける
    ● プレビュー側は、Vueのrender関数にする
    ○ ※htmlを動的に生成するので
    ● render関数の中でmarkdown-itを使ってhtmlを生成
    

    View Slide

32. View Slide

33. View Slide

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

    View Slide

35. electronのdesktopCapturer.getSources()
    electronのDesktopCapturerSourceオブジェクト
    navigator.mediaDevices.getUserMedia()
    WebRTCのMediaStreamオブジェクト
    WebRTCのMediaRecorder
    Uint8Arrayオブジェクト
    webm動画
    node.jsのfs.writeFileSync()
    Blobオブジェクト
    画像キャプチャと同じ
    

    View Slide

36. まとめ
    ● electron-vueでデスクトップアプリ開発が簡単に
    ● 画面ショットや画面録画もWebのAPIを使って実装できる
    ● electron-vue触ってみて！
    

    View Slide