Electronで動画ながら見アプリを作った

話

@nekobatoFrom モバイルファクトリー新卒

フロントエンドエンジニア

業務内容

お絵かき　編曲　ミーティング

Polidium Electronで作る

透明な存在のアプリのつくりかた

突然ですがアンケート

❓自分の職場は

　　業務中に動画を鑑賞しててもOKという方？

サブモニタで動画流しながら作業できる？

人の有効視野は

２つのモニタを同時に捉えられない

http://www.sic.shibaura-it.ac.jp/~ma15037/knowledge_terminology_view.html

ならば

左右の画面を同時に捉えることは出来ないが、

透明なパネルを前後に重ねることで

２つの画面を有効視野に捉える

工夫①半透明iTerm + プレイヤー

工夫②Atom + video-player

特定の作業ウィンドウに依存したくない

- 両方とも機能(?)が貧弱

- ウィンドウ配置に気を配らなければいけない

- 作業の半分はブラウザか実行画面を見てるので、

エディタにツールがくっついてると半分しか見れない

Polidium by Electron

近日配布

作業中常に動画を視界に入れるには

最前面表示　&　Click-through

ここでのClick-through

操作が透過することをここでは言います

正式になんて言うのか知らない

Electron v0.36.0からClick-throughに対応

めでたい

https://github.com/atom/electron/blob/master/docs/api/browser-window.md

まだ対応はOS Xのみ

ちなみにNW.jsはWin & Macに対応

ただし透明度を100%（完全に不可視）にしないとClick-throughは効かない

https://github.com/nwjs/nw.js/wiki/Transparency

※ NW.jsのドキュメントは微妙に嘘

実際に試してみたら

透明度95%~100%の間ならClick-throughが効いた (on OS X)

辛うじて見えるアプリなら作れる

Re: 動画を最前面に表示しながら作業したい

click-throughを有効にする

画面いっぱい（☓全画面）に表示する

常に最前面に表示する

ワークスペースを移動しても表示し続ける

グローバルショートカットキー

デモ

してる

感想

とてもよい

動画をちゃんと注視しようとしても無理なので気が完全には逸れ

ない

メディアプレイヤーで再生するよりは重いね

課題と展望

Youtubeも見れるようにしたい

あとNicoNicoも

コーデック対応には一工夫必要っぽい

課題と展望

画面に覗き見防止フィルム貼りたい

見ててもバレないところまで突き詰めたい

作ってみた感想

ほぼコピペ

Electronの設定は公式からコピペ

ファイル探索のコンポーネントは以前作ったwebdav UIからコピペ

APIに問い合わせる部分をサーバ側のコードに置き換えるだけ

== 　 =3　　→　　　✨ ✨

　合体！　　　　会社から帰って寝るまでにできた

Webの資産が使えるってすごい

コンポーネントがあればコピペで済む

みんなも邪魔っけな透過ウィジェットとか作って遊ぼう

by @nekobato

完最後まで動画をアニメとは言わなかったが