$30 off During Our Annual Pro Sale. View Details »

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

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

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

Hidenori Maehara

May 30, 2018
Tweet

More Decks by Hidenori Maehara

Other Decks in Technology

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