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

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

2. @nekobato
From モバイルファクトリー新卒
フロントエンドエンジニア
業務内容
お絵かき 編曲 ミーティング

3. Polidium Electronで作る
透明な存在のアプリのつくりかた

4. 突然ですがアンケート
❓自分の職場は
業務中に動画を鑑賞しててもOK
という方？

5. サブモニタで動画流しながら作業できる？
人の有効視野は
２つのモニタを同時に捉えられない
http://www.sic.shibaura-it.ac.jp/~ma15037/knowledge_terminology_view.html

6. ならば
左右の画面を同時に捉えることは出来ないが、
透明なパネルを前後に重ねることで
２つの画面を有効視野に捉える

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

8. 工夫②
Atom + video-player

9. 特定の作業ウィンドウに依存したくない
- 両方とも機能(?)が貧弱
- ウィンドウ配置に気を配らなければいけない
- 作業の半分はブラウザか実行画面を見てるので、
エディタにツールがくっついてると半分しか見れない

10. Polidium by Electron
近日配布

11. 作業中常に動画を視界に入れるには
最前面表示 & Click-through

12. ここでのClick-through
操作が透過することをここでは言います
正式になんて言うのか知らない

13. Electron v0.36.0からClick-throughに対応
めでたい
https://github.com/atom/electron/blob/master/docs/api/browser-window.md
まだ対応はOS Xのみ

14. ちなみにNW.jsはWin & Macに対応
ただし透明度を100%（完全に不可視）にしないとClick-throughは効かない
https://github.com/nwjs/nw.js/wiki/Transparency

15. ※ NW.jsのドキュメントは微妙に嘘
実際に試してみたら
透明度95%~100%の間ならClick-throughが効いた (on OS X)
辛うじて見えるアプリなら作れる

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

17. click-throughを有効にする

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

19. 常に最前面に表示する

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

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

22. デモ
してる

23. 感想
とてもよい
動画をちゃんと注視しようとしても無理なので気が完全には逸れ
ない
メディアプレイヤーで再生するよりは重いね

24. 課題と展望
Youtubeも見れるようにしたい
あとNicoNicoも
コーデック対応には一工夫必要っぽい

25. 課題と展望
画面に覗き見防止フィルム貼りたい
見ててもバレないところまで突き詰めたい

26. 作ってみた感想
ほぼコピペ
Electronの設定は公式からコピペ
ファイル探索のコンポーネントは以前作ったwebdav UIからコピペ
APIに問い合わせる部分をサーバ側のコードに置き換えるだけ
== =3 → ✨ ✨
合体！ 会社から帰って寝るまでにできた

27. Webの資産が使えるってすごい
コンポーネントがあればコピペで済む
みんなも邪魔っけな透過ウィジェットとか作って遊ぼう

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