Electronで 動画ながら見アプリを作った
-
Upload
hayato-koriyama -
Category
Engineering
-
view
1.249 -
download
3
Transcript of Electronで 動画ながら見アプリを作った
![Page 1: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/1.jpg)
Electronで動画ながら見アプリを作った
話
![Page 2: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/2.jpg)
@nekobatoFrom モバイルファクトリー新卒
フロントエンドエンジニア
業務内容
お絵かき 編曲 ミーティング
![Page 3: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/3.jpg)
Polidium Electronで作る
透明な存在のアプリのつくりかた
![Page 4: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/4.jpg)
突然ですがアンケート
❓自分の職場は
業務中に動画を鑑賞しててもOKという方?
![Page 5: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/5.jpg)
サブモニタで動画流しながら作業できる?
人の有効視野は
2つのモニタを同時に捉えられない
http://www.sic.shibaura-it.ac.jp/~ma15037/knowledge_terminology_view.html
![Page 6: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/6.jpg)
ならば
左右の画面を同時に捉えることは出来ないが、
透明なパネルを前後に重ねることで
2つの画面を有効視野に捉える
![Page 7: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/7.jpg)
工夫①半透明iTerm + プレイヤー
![Page 8: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/8.jpg)
工夫②Atom + video-player
![Page 9: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/9.jpg)
特定の作業ウィンドウに依存したくない
- 両方とも機能(?)が貧弱
- ウィンドウ配置に気を配らなければいけない
- 作業の半分はブラウザか実行画面を見てるので、
エディタにツールがくっついてると半分しか見れない
![Page 10: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/10.jpg)
Polidium by Electron
近日配布
![Page 11: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/11.jpg)
作業中常に動画を視界に入れるには
最前面表示 & Click-through
![Page 12: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/12.jpg)
ここでのClick-through
操作が透過することをここでは言います
正式になんて言うのか知らない
![Page 13: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/13.jpg)
Electron v0.36.0からClick-throughに対応
めでたい
https://github.com/atom/electron/blob/master/docs/api/browser-window.md
まだ対応はOS Xのみ
![Page 14: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/14.jpg)
ちなみにNW.jsはWin & Macに対応
ただし透明度を100%(完全に不可視)にしないとClick-throughは効かない
https://github.com/nwjs/nw.js/wiki/Transparency
![Page 15: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/15.jpg)
※ NW.jsのドキュメントは微妙に嘘
実際に試してみたら
透明度95%~100%の間ならClick-throughが効いた (on OS X)
辛うじて見えるアプリなら作れる
![Page 16: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/16.jpg)
Re: 動画を最前面に表示しながら作業したい
![Page 17: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/17.jpg)
click-throughを有効にする
![Page 18: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/18.jpg)
画面いっぱい(☓全画面)に表示する
![Page 19: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/19.jpg)
常に最前面に表示する
![Page 20: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/20.jpg)
ワークスペースを移動しても表示し続ける
![Page 21: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/21.jpg)
グローバルショートカットキー
![Page 22: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/22.jpg)
デモ
してる
![Page 23: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/23.jpg)
感想
とてもよい
動画をちゃんと注視しようとしても無理なので気が完全には逸れ
ない
メディアプレイヤーで再生するよりは重いね
![Page 24: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/24.jpg)
課題と展望
Youtubeも見れるようにしたい
あとNicoNicoも
コーデック対応には一工夫必要っぽい
![Page 25: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/25.jpg)
課題と展望
画面に覗き見防止フィルム貼りたい
見ててもバレないところまで突き詰めたい
![Page 26: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/26.jpg)
作ってみた感想
ほぼコピペ
Electronの設定は公式からコピペ
ファイル探索のコンポーネントは以前作ったwebdav UIからコピペ
APIに問い合わせる部分をサーバ側のコードに置き換えるだけ
== =3 → ✨ ✨
合体! 会社から帰って寝るまでにできた
![Page 27: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/27.jpg)
Webの資産が使えるってすごい
コンポーネントがあればコピペで済む
みんなも邪魔っけな透過ウィジェットとか作って遊ぼう
![Page 28: Electronで 動画ながら見アプリを作った](https://reader031.fdocument.pub/reader031/viewer/2022020108/58732b371a28ab596c8b59a9/html5/thumbnails/28.jpg)
by @nekobato
完最後まで動画をアニメとは言わなかったが