Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
electron-vueで僕が考えた最強メモアプリ作っている話 / create memo...
Search
Hidenori Maehara
May 30, 2018
Technology
0
2.4k
electron-vueで僕が考えた最強メモアプリ作っている話 / create memo app by electron-vue
社内テックトークで発表した資料です。メモアプリはまだ作成中...
Hidenori Maehara
May 30, 2018
Tweet
Share
More Decks by Hidenori Maehara
See All by Hidenori Maehara
How to Test Server-side Kotlin #kotlinfest
maeharin
11
40k
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
maeharin
18
44k
10年前のレガシーシステムをサーバーサイドKotlinでフルリニューアルしている話 #jjug_ccc #ccc_g2
maeharin
17
23k
KotlinとSpring BootとDoma2でAPIサーバーを作る #m3kt
maeharin
5
6.5k
システムリニューアルと サーバーサイドKotlin
maeharin
4
7.2k
Other Decks in Technology
See All in Technology
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
280
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
190
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
240
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
330
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
260
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
220
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
210
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
290
Kiroから考える AIコーディングツールの潮流
s4yuba
4
650
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
170
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for Performance
lara
610
69k
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
BBQ
matthewcrist
89
9.8k
Thoughts on Productivity
jonyablonski
69
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Why Our Code Smells
bkeepers
PRO
337
57k
Into the Great Unknown - MozCon
thekraken
40
2k
Transcript
electron-vueで 僕が考えた最強のメモアプリを 作ってる話 エムスリー 前原 @maeharin - 2018/5/30 エムスリー社内テックトーク -
自己紹介 • 前原 秀徳 • @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
None
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() base64 png画像
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タグに表示される
Video div
v-bindでstyleをバインド
video要素の特定の位置を クロップしてcanvasに 書き込む
canvasタグ canvas.toDataURL() base64 png画像 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を生成
None
None
ちなみに、録画も同じような仕組み
electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト WebRTCのMediaRecorder Uint8Arrayオブジェクト webm動画 node.jsのfs.writeFileSync() Blobオブジェクト 画像キャプチャと同じ
まとめ • electron-vueでデスクトップアプリ開発が簡単に • 画面ショットや画面録画もWebのAPIを使って実装できる • electron-vue触ってみて!