動画駆動プログラミング

最近動画を見ながらプログラミングできることに気づいたので、その方法について書いていきたいと思います。

Google Chromeにピクチャーインピクチャーが実装されたので、YouTubeの動画の上で右クリックしてピクチャーインピクチャーを選択すれば以下の画像のようになります。

この方法は簡単でよいのですが私の環境でCPU 60パーセントも使うたいへん重い処理なので常用する気にはなりません。画質を480pに設定してもCPU 40パーセントは持っていかれます。とても便利な機能ですが、動画を一つずつ選択するのが面倒ですしブラウザのタブをコントロールのために一個専有するのがあまり美しくないと思います。動画を垂れ流しながら作業をしてもよいと感じるためにはもっと軽い処理でなければなりません。

最も負荷が少なく動画を見れるmpvを使用してピクチャーインピクチャーを実現し、CPU 10パーセントまで落とせたので動画を見ながらプログラミングする動画駆動プログラミングをやってみようと思います。

mpvで動画駆動プログラミングをするとこの画像のようになります。コンサートやスポーツなどを見ながらプログラミングできるのはかなりよい感じです。プログラミング動画を見ながらプログラミングするのもよいでしょう。動画はドラッグして動かせるので動画が邪魔になったときだけ少しずらしてEmacsを見れます。 mpvにフォーカスがある状態のときにはmpvのショートカットfで画面をフルスクリーンにできるので、通常はプログラミングしておいていい場面になったときだけフルスクリーンで見るというメリハリをつけることもできます。

3つ同時に使うこともできるのでコンサートを3つ掛け持ちすることもできます。掛け持ちしたい人はいなそうですが…。

Bachを聞きながらsnookerを見るのはかなりいい感じです。もはやプログラミングしていないのでツッコミどころ満載です。

映像をカットして音楽だけ聞く場合でCPU 3パーセントまで落とせたので音楽プレイヤーとしても使えますし、プレイリストをfzfで選択できるようにしたので使い勝手も公式のピクチャーインピクチャーより便利になりました。

mpv-video

プレイリストをfzfで選択してプレイリスト内の動画をシャッフルして再生します。

mpv-music

プレイリストをfzfで選択して映像をカットしたプレイリスト内の音楽をシャッフルして再生します。プレイリストは指定したディレクトリ(この例では~/backup/youtube)に.m3uの拡張子をつけたファイルを以下のような書式で複数置いておきます。 YouTubeの動画のURLを改行区切りで並べておくだけです。アーティストごとやテーマごとにファイルにしておくのがよいでしょう。

Bach.m3uの例

#Bach - Concert for Violin a-minor - Julia Fischer - Baltic Sea Youth Philharmonic
https://www.youtube.com/watch?v=sDyDHvZKl8g
#Bach: Piano Concerto in D-Minor, BWV 1052 - Amsterdam Sinfonietta & Beatrice Rana
https://www.youtube.com/watch?v=A_yGiFHbQR0
#J. S. Bach - Double Violin Concerto in D minor BWV 1043 Krakowska Młoda Filharmonia
https://www.youtube.com/watch?v=0tN7hgkNF14
#Johann Sebastian Bach - Chaconne, Partita No. 2 BWV 1004 | Hilary Hahn
https://www.youtube.com/watch?v=QqA3qQMKueA
#Bach - Ascension Oratorio, BWV 11 - Gardiner
https://www.youtube.com/watch?v=mJeqUaqfkYk
#Bach - Easter Oratorio, BWV 249 - Gardiner
https://www.youtube.com/watch?v=a5ICH1gK5fQ
#Johann Sebastian Bach: Cantata BWV 113 - Magdalena Kožená, John Eliot Gardiner
https://www.youtube.com/watch?v=KcosBkNGjPI

とりあえず一つの動画だけ見たいときは第一引数にURLを渡します。

mpv-video 'https://www.youtube.com/watch?v=sDyDHvZKl8g'

musicでも同じです。

mpv-music 'https://www.youtube.com/watch?v=sDyDHvZKl8g'

install

fzfとmpvとyoutube-dlをインストールします。例はArch Linuxです。mpvのバージョンは0.29.1です。0.30.0だとmpvを最前面に固定できないバグがあります。¹

sudo pacman -S mpv fzf
pip install --user youtube-dl

.zshrcか.bashrcでPATH="$HOME/.local/bin:$PATH"を追記してyoutube-dlにPATHを通して、 .zshrcか.bashrcに以下の関数を設定すれば使用できるようになります。

function mpv-music() {
    local PLAYLISTDIR=~/backup/youtube
    if [ $# = 0 ]; then
		mpv --no-video --ytdl-format="worstvideo+bestaudio" --quiet --shuffle \
	    --playlist=$(ls $PLAYLISTDIR/*.m3u | fzf-tmux -d --reverse --no-sort +m --prompt="Playlist > ") &	
		sleep 10
		cd -
    elif [ $# = 1 ]; then
		mpv --no-video --ytdl-format="worstvideo+bestaudio" --quiet $1 &
		sleep 10
		cd -
    else
		echo 'usage: mpv-music [youtube-url]'
    fi
}


function mpv-video() {
    local PLAYLISTDIR=~/backup/youtube
	if [ $# = 0 ]; then
		mpv --ontop=yes --border=no --autofit=600 --geometry=100%:100% --ytdl-format="[height<=480]+bestaudio" --quiet \
	    --shuffle --playlist=$(ls $PLAYLISTDIR/*.m3u | fzf-tmux -d --reverse --no-sort +m --prompt="Playlist > ") &
		sleep 10
		cd -
    elif [ $# = 1 ]; then
		mpv --ontop=yes --border=no --autofit=600 --geometry=100%:100% --ytdl-format="[height<=480]+bestaudio" --quiet=yes $1 &
		sleep 10
		cd -
    else
		echo 'usage: mpv-video [youtube-url]'
    fi
}


function mpv-quit() {
    pkill -SIGUSR1 -f mpv
}

mpv-videoの画質は右下に表示するのに十分なだけのクオリティでよいので[height<=480]としていてmpvの画質を落としています。 1920×1080の解像度のノートパソコンならこれで十分な画質です。動画のサイズは–autofit=に渡す値で調整してください。 mpv-musicは画質をworstにして無駄なデータを持ってこないようにしています。 mpv-videoはmpvにフォーカスがある状態でqで止めることができます。 mpv-musicはGUIでフォーカスを当てることができないのでmpv-quitコマンドで終了させます。 mpv-quitコマンドはmpv-videoにも有効です。