paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

アニメ見ながらプログラミングするために透過ウィンドウを実装する方法

f:id:paiza:20190704175535p:plain

もじゃ(@s10akir)です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。

今回はプログラミングなどの作業をしつつ、透過ウィンドウでアニメが見られるようにする画期的(?)な方法について書きたいと思います。

実際、私も最近はアニメ視聴中にときどき仕事している感じです。

集中しすぎは非効率(なときもある)

開発経験のある方はわかると思うのですが、手を動かしている時間より、悩んでいる時間の方が長い…ということって多いですよね。

私は、ある意味「集中しすぎないこと」「思考を切り替えること」も大事だと思っています。

長い時間悩み続けていても、同じところばかり見ていたり、間違いに気づけなかったり…ということはよくあります。

たとえば、正しいはずのコードがなぜかうまく動かなくて、数時間悩みコードを見直し続け「もう無理だ〜わからん」と思っていたら、うまく動かない原因は"=="と"="の書き間違いだった…みたいな。(ちなみに私は、実際に先日この間違いのせいで小一時間悩み続けてしまいました)

そういうときって思考を支配されがちなので、一度思い切って問題から離れてリフレッシュしたほうが「アッー!!ここ違ってるやん!!」って早く気づけたりするんですよね。

だからいつでも見れるようにしておきましょう。アニメを。(これが言いたかっただけの前置きでございます)

とはいえアニメに集中してしまうのは本末転倒

作業中に流す動画は、BGV(BackGround Video)と呼ばれてます。BGMの動画版ですね。 あくまで作業効率化の補助なので、アニメを見るのが本命になってはいけません。必要な作業ができていなければ、paizaラーニングのバイトをクビになってしまいますし、バイトをクビになってしまえば、AmazonPrimeVideoに課金するお金が稼げずアニメが見られなくなってしまいます。

BGVを流すために、手っ取り早いのはマルチディスプレイを使うことですね。しかし、実際に使ったことがある方はわかっていただけると思いますが、ひとつの画面で作業をしつつ、別の画面で動画を見る…というのは意外と難しいものです。

結局音だけしか聞いていなかったり、「待って」と思う展開が来たときに画面を見るとシーンが変わっていたりして、巻き戻して見直さなければならなくなってしまいます。で、そうなってくると結局アニメに集中して見てしまったりするわけです。しかし必要な作業ができていなければ、paizaラーニングのバイトをクビになってしまいますし、バイトをクビになってしまえば、AmazonPrimeVideoに課金するお金が稼げずアニメが見られなくなってしまいます。

というわけで、マルチディスプレイはBGV環境としては最適ではありません。

じゃあ同じ画面で小さいサイズで動画を流しておけば?と思うかもしれませんが、それだと大事な作業領域が失われてしまいます。作業効率化のためにアニメを見ているのに、メインの作業を圧迫するようでは本末転倒です。必要な作業ができなていなければ、paizaラーニングのバイトを(略)。

文字通りBackGroundでアニメが見たい

じゃあどないしたらええねんということで、ちょっと見えにくいですが、これが私の実際の作業環境です。

(いまさら幼女戦記を見ましたがめちゃくちゃ面白いですねこれ)

やっていることは単純で

  • フルスクリーンでAmazonPrimeVideoを流しているブラウザの手前に作業するアプリを持ってくる
  • その作業するアプリの透明度を下げてBGの動画を透かす

だけです。

後ろに入れるアプリケーションはいろいろ応用できるので好きなもので見ればよいのですが、AmazonPrimeVideoは自動で次の話を再生してくれるので非常に相性がよいです。

これでメインの作業から意識を逸らすことなく、アニメから得られる情報もほぼほぼ損失なく、視点移動も最小限に抑えることができます。

この方法でBGVを流すと以下のメリットがあります。

  • メインの作業の邪魔にならない
  • 詰まったときも目線の先にアニメがあるので自然に意識を逸らせる
  • たまったアニメを作業しながら消化できる

(うちにも内田真礼さんボイスの狐に来てほしい)

具体的にベンチマーキングしたわけではないので肌感ですが、この環境で作業するようになってから成果を出す効率が上がった感があります。長い時間悩み続けて時間を浪費することもなくなりましたし、ストレスも軽減されていると思います。paizaラーニングでも大きな心で許されているし(じゃなきゃそもそもこんな記事書けないですが)、弊社では効率が上がり成果が出るなら、それが正義なのでございます。

ウィンドウを透過するアプリケーションについて

私はArch Linux + KDEという環境なので、OS標準の機能(※)だけで任意のウィンドウ透過が実現できていますが、各種OSでも同じようにできるアプリケーションがあります。

(※正確には、ウィンドウ透過はOSの機能ではなくKDEが持っている機能なので「DE標準の機能」とするのが正しいのですが、ここではLinux事情に詳しくない方のためにあえてOSと表現しています)

Linuxユーザの方は、KubuntuなどDEにKDEを採用しているLinuxディストリビューションであれば、難しいことを考えなくても設定できますね。

あと、そもそも透過に対応しているアプリケーションも結構あります。(ターミナルエミュレータに多い気がする)

以下、いくつかご紹介しておきます。

Windows

私がWindowsを使うときはこちらを利用させていただいています。対応済みとはされていませんが、Windows10でも動作しました。

MacOS

私がMacユーザではないので検証できていませんが、Issueに「Mojaveで機能した」という投稿がありました。SIPの無効化が必要だったりして、導入がやや難解かと思いますが…。

半透明にして最前面で常駐できるブラウザです。

Linux

KDE以外の環境では

が使えたりします。

まとめ

大事なのは「適度に意識を逸らしつつストレスを軽減させつつ結果としてよいパフォーマンスが発揮できるようにする」ことです。決してアニメをたくさん見るのが目的ではありません。もう説得力ないと思いますが。

もちろんアニメを流すだけでなく、おうちで飼っているワンちゃんの様子などをカメラから送れるようにしておいて、BGVとして流す…といったこともできると思います。

ちなみに私のおすすめBGVは「映画 中二病でも恋がしたい! -Take on Me-」です。内田真礼さんと逃飛行しながら作業したい。





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud