18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TechCommitAdvent Calendar 2019

Day 10

Neovim の Terminal で画像表示や動画再生

Last updated at Posted at 2019-12-10

##はじめに

libsixel の登場以来、ターミナルに画像を表示する Sixel Graphics はかなり簡単に扱えるようになりました。

直接表示するだけではなく、DRCS と呼ばれる機能の Sixel 拡張が使用できる端末を用いる事により、その上で動作する Neovim が備えるターミナル上でも sixel での画像表示が可能です。
DRCS のSixel 拡張については @arakiken さんがこちらの記事で詳細に解説してくださっていますが、この記事上で少し触れられている、Neovim の DRCS-Sixel 対応を試してみようと思います。

Neovim の "floating windows" 機能を使えばバッファ上の任意の場所にサイズ指定したウィンドウが開けて、なおかつその上でターミナルが動作するので、DRCS-Sixel 化により好きな場所で画像を表示したり動画を再生したりする事が可能になります。

##環境について

  • OS : Ubuntu 20.04 LTS
  • ターミナルエミュレータ : mlterm version 3.9.0

RLogin や mlterm 等、DRCS-Sixel を使えるターミナルエミュレータを使用してください。

##libsixel のインストール
今は大抵ディストリビューションのパッケージに含まれているのでサクッとインストールしましょう。

~% sudo apt-get install libsixel-bin libsixel-dev

##libvterm のインストール
neovim や vim の :terminal 機能で使われるライブラリです。
「DRCSのSixel拡張について」で紹介されている libvterm は[こちらのリポジトリ]
(https://bitbucket.org/arakiken/libvterm/src/default/)から落としてきてビルド及びインストールが可能ですが、現状の Neovim では libvterm のバージョン0.1以上を要求する為、下記の手順でソースコードを入手・展開しましょう。

~% wget http://www.leonerd.org.uk/code/libvterm/libvterm-0.1.3.tar.gz
~% tar xvzf libvterm-0.1.3.tar.gz

DRCS-Sixel 対応の為の diff は下記です。
https://github.com/neovim/libvterm/compare/nvim...arakiken:sixel
私は今回は手動で差分を適用してみました。ソース修正後ビルドしてインストールします。

~% make
~% sudo make install

##Neovim のインストール
今の Neovim はビルドの過程で libvterm をダウンロードして来て自らに組み込む様な形でターミナルを実装する仕組みになっている様ですが、make の際に下記オプションを指定することでこのバンドル版ではなく、OS にインストール済みの libvterm を使用させる様にします。

~% sudo apt-get install ninja-build gettext libtool libtool-bin autoconf automake cmake g++ pkg-config unzip
~% git clone https://github.com/neovim/neovim.git
~% cd neovim
~% make DEPS_CMAKE_FLAGS='-DUSE_BUNDLED_LIBVTERM=OFF'
~% sudo make install

以上で DRCS-Sixel 対応された Neovim のインストールは完了です。

##画像表示してみる

画像表示には libsixel に含まれる img2sixel というコマンドが使えます。gif アニメもイケますが、中々綺麗に再生されなかったので、[Sixel Graphicsを活用したアプリケーションの御紹介] (https://qiita.com/arakiken/items/3e4bc9a6e43af0198e46) の記事中にある FFmpeg-sixel を使い、mpeg4の動画を使う事にしました。

floating windows を使用するにあたっては、下記の記事を参考にさせて頂きました。
【Neovim】半透明色のウィンドウが開けるようになりました

miku.mp4 という動画を用意した上で、Neovim の設定ファイルに下記を追記します。

$HOME/.config/nvim/init.vim
command! Miku call s:miku()

function! s:miku()
    " 空のバッファを作る
    :let buf = nvim_create_buf(v:false, v:true)
    " そのバッファを使って floating windows を開く
    :call nvim_open_win(buf, v:true, {'relative': 'win', 'height': 30, 'width': 40, 'col': 44, 'row': 14})
    " 透明にする
    :set winblend=100
   " ターミナルを開いてコマンドを実行
    :terminal /usr/local/bin/ffmpeg2 -i ~/Desktop/images/miku.mp4 -f sixel -loglevel quiet -pix_fmt rgb24 -s 240x400 -
endfunction

この状態で Neovimを起動し、:miku とコマンドを打つと

mikumiku.gif

この様に動画が再生されます(すいません、gif動画が非常にモッサリしてますが実際はこんな感じでもっとスムーズに再生されます)。
この仕組みを使えば、以前 Twitter で流行った「一定時間サボるとメンターが出て来て激励するエディタ」に近いものも実現出来ちゃいますよね笑

他にも色々面白い使い方があると思うので、是非試してみてください!

18
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?