【Docker】コンテナ内でneovimを使ってIDEみたいな気分で開発したい【見た目IDE】 #Docker

対象者

Dockerコンテナ内でvimでIDEみたいに開発したいという人

まとめ

Dockerでcentos6.9入れる
centos6.9にneovim入れる
neovimのプラグインNERDTreeを入れる
最後にDockerfileを置いてありますので上記3つの話はわかってて速攻環境つくりたい人はDockerfileの章に飛んじゃってください

コンテナ内で開発するときも見た目はIDEはそっくり!
見た目以外の機能面の話は次回以降の記事で書こうと思っています。

自身の環境

項目	内容
OS	macOS Sierra
OS version	10.12.4
docker	Docker version 17.03.1-ce, build c6d412e
docker pullするOS	CentOS:6.9

まずはcentOSをpull

$ docker pull centos:6.9

これでcentOS6.9のイメージを入手できます。
次に

$ docker run -it --name test centos:6.9

とするとtestという名前のコンテナが立ち上がり、

[root@7ed0424bd284 /]#

みたいな感じになってるかと思います！

ここで試しにviでphpのファイルを作ってみましょう！

[root@7ed0424bd284 /]# cd
[root@7ed0424bd284 ~]# mkdir qiita_php
[root@7ed0424bd284 ~]# vi test.php

test.php

<?php

// greetingという名前をつけた関数
function greeting($name) {
    $message = 'Hello, '. $name. '!'; // 処理

    return $message; // 結果を返す
}

$message = greeting('Tom');
echo $message; // 'Hello, Tom!'

【PHP】関数というqiita記事からphpのプログラムをコピペいたしました。

IDEとの見た目の差

IDE(PhpStorm)

ローカルのmacでPhpStormでtest.phpを作って開いてみます。

左にファイルエクスプローラがあって、下にはターミナルがあるって感じ。
コードにも色がついてて見やすいですね！

vi

......
さすがにviはせこすぎました

neovim

centOS6にneovimいれるのちょっと大変です

[root@7ed0424bd284 ~]# cd /
[root@7ed0424bd284 /]# yum -y install libtool autoconf automake cmake gcc gcc-c++ make pkgconfig unzip
[root@7ed0424bd284 /]# yum -y install git
[root@7ed0424bd284 /]# git clone https://github.com/neovim/neovim
[root@7ed0424bd284 /]# cd neovim/
[root@7ed0424bd284 /]# make
[root@7ed0424bd284 /]# make install

makeのところがけっこう長かったです。

neovimがはいったところでtest.phpを開いてみましょう！

[root@7ed0424bd284 /]# nvim ~/qiita_test/test.php

色的には随分良くなりました！（あたりまえ）

neovimの環境整備

まずは init.vimというvimでいうところの.vimrcにあたるファイルを編集します。

[root@7ed0424bd284 /]# mkdir -p ~/.config/nvim

[root@7ed0424bd284 /]# nvim ~/.config/nvim/init.vim

~/.config/nvim/init.vim

" プラグインが実際にインストールされるディレクトリ
let s:dein_dir = expand('~/.cache/dein')
" dein.vim 本体
let s:dein_repo_dir = s:dein_dir . '/repos/github.com/Shougo/dein.vim'

" dein.vim がなければ github から落としてくる
if &runtimepath !~# '/dein.vim'
  if !isdirectory(s:dein_repo_dir)
    execute '!git clone https://github.com/Shougo/dein.vim' s:dein_repo_dir
  endif
  execute 'set runtimepath^=' . fnamemodify(s:dein_repo_dir, ':p')
endif

" 設定開始
if dein#load_state(s:dein_dir)
  call dein#begin(s:dein_dir)

  " プラグインリストを収めた TOML ファイル
  " 予め TOML ファイル（後述）を用意しておく
  let g:rc_dir    = expand("~/.config/nvim")
  let s:toml      = g:rc_dir . '/dein.toml'
  let s:lazy_toml = g:rc_dir . '/dein_lazy.toml'
  " TOML を読み込み、キャッシュしておく
  call dein#load_toml(s:toml,      {'lazy': 0})
  call dein#load_toml(s:lazy_toml, {'lazy': 1})
  " 設定終了
  call dein#end()
  call dein#save_state()
endif

" もし、未インストールものものがあったらインストール
if dein#check_install()
  call dein#install()
endif

次にプラグインを管理するファイルであるdein.tomlを作成します

[root@7ed0424bd284 /]# nvim ~/.config/nvim/dein.toml

ちなみにこの段階でdein.vimのインストールが始まるはずです。インストールが終わったらファイル編集画面になります。

~/.config/nvim/dein.toml

[[plugins]]
repo = 'scrooloose/nerdtree'
hook_add = '''
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif
map <C-n> :NERDTreeToggle<CR>
'''

NERDTreeというプラグインを導入します。
このプラグインをいれるとneovimの画面左側にファイルエクスプローラが出現します！

hood_add以降の文はファイル名を指定せずにneovimを起動するとファイルエクスプローラが開き、ファイル名を指定してneovimを起動するとファイルエクスプローラを開かないという設定を書いています。
また、ファイルエクスプローラが開いていない状態でも Ctl + nを押すとファイルエクスプローラを開くということも書かれています。

見た目勝負　第2戦

qiita_phpフォルダに移動して、neovimを起動します！

[root@7ed0424bd284 /]# cd ~/qiita_php
[root@7ed0424bd284 qiita_php]# nvim

左側にファイルエクスプローラが出現しました！！
そこから十字キーでtest.phpにカーソルをあわせEnter!!

だ、だいぶ近い
あとはIDEで下にでていたターミナルですね。

test.phpにカーソルが置かれている状態のときに、 :split と入力
画面が分割され、下の画面にもtest.phpが表示
Ctl-w + j で下の画面に移動
:terminalと入力（これがneovimじゃないとできない）(vimShellとかいれたらvimでも可能）

見た目は完全に追いつきました！！

ついでに分割された画面を移動するコマンドまとめておきます。

コマンド	移動先
Ctl-w + k	上画面
Ctl-w + j	下画面
Ctl-w + l	右画面
Ctl-w + h	左画面

エクスプローラが邪魔なときはCtl+nで消えて、欲しい時はCtl+nをもっかい押すとでてくるはずですので試してみてください。

neovimの環境設定をもっとやる

neovimをインストールしてプラグイン管理をdein.tomlでやってみたという自身の記事でdeopleteというさいっきょ補完プラグインなどをインストールしているdein.tomlなどがあるのでよろしかったらどうぞ。

Dockerfile

はじめから書けよ！！！！ 　っていうのは無しでお願いします。
githubにリポジトリを公開しました。

$ git clone https://github.com/ryo2851/neovim_ide.git
$ docker build -t test neovim_ide/.
$ docker run -it --name sample test

neovimをmakeする時間がかなりかかりますが、これで生成されるsampleコンテナではnvimが使え、NERDTreeも導入された状態になっています。

次回は機能面でもIDEに追いついて行く記事を書きます。

参考

neovimをインストールしてプラグイン管理をdein.tomlでやってみた

【Python環境整備】脱NeoBundle。超便利補完プラグインjedi-vimの環境をdeinで整えて快適になる設定までやる

Vimメモ : Neovimをインストールしてみる

【Docker】コンテナ内でneovimを使ってIDEみたいな気分で開発したい【見た目IDE】

対象者

まとめ