Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,587 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

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

×