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