MacでCUIのさくらのレンタルサーバー上にssh+screen+vimでマウスで編集、慣性スクロール可能な開発環境を作成する方法

最近電気代のことも考えて、CentOS 5.5で立てていた自宅サーバーを、さくらのレンタルサーバー(月々500円のスタンダードプラン FreeBSD 8.1)に移行しました。
その際にやった、sshを介して使うscreenとvim、あとvim プラグイン群による、マウス操作可能な開発環境作成についてまとめました。
自分自身、WindowsでもMacOSXでもずっとGVimを使っていたこともあり、どうもオペレーターやテキストオブジェクトを使ってマウスを一切に使わないでVimを利用するスタイルというものが苦手でした。できるけど、そんなに速く編集できない...。
せっかくマウスがあるのだし、マウスを使った範囲指定やMacのトラックパッドを使ったなめらかな慣性スクロールを利用して素早く開発したいですよね。こっちのほうが頭にやさしいです。

例をあげると

<a href="http://hoge"><a>

以上のテキストでカーソルが行頭にある際に、以上のhogeをfugaに編集する場合、

4wci"http://fuga

みたいなのを考えて打つより、hogeをドラッグ選択して

cfuga

の方が楽に編集できますよね。
というわけで、そのような操作が可能な環境の作り方を今から紹介していきます。

最終的にどのような開発環境になるかというと以下のような機能の

sshで繋ぐGUIのないサーバー(UNIX, Linux)上において以下のGUI独特の操作が可能
- クリックによるカーソル移動
- ドラッグによる範囲選択
- ダブルクリックによるタグジャンプ
- 慣性スクロールによるなめらかな文書スクロール
- ウインドウ分割した際のサッシのドラッグによるウインドウ幅調整
screenを利用し、回線切断、シャットダウンの際にも編集状態のセッションを復元可能
EclipseのようなIDEと同様な高度な機能
- プロジェクトツリーの表示と、タブルクリックによる階層探索(project.vim)
- ファイル名も保管する強力なコンテンツアシスト(neocon+Unite.vim)
- ソースコードのアウトライン表示(ctags+taglist.vim)
- 選択領域のコメントアウトのトグル操作切り替え(nerdcommenter)
- 左右ウインドウ分割表示のリポジトリ上のバージョンとの比較(vcscommand.vim)
- zencodingや囲い編集のサポート(zencoding-vimとsurround.vim)

以上のような環境となります。

Eclipseを7年使ってきましたが、そのEclipseに劣らないほどの強力な開発環境だと思いませんか？
Eclipseは起動に1分かかることもありますが、このvimの開発環境、起動に1秒もかかりません。更にクライアントマシンがシャットダウンしても編集状態が残るという素晴らしい環境です。

というわけで、早速準備を始めます。

iTerm2のインストール

Development site for iTerm2
以上のDownloadsからiTerm2_v1_0_0.zipを選択してダウンロードし、アプリケーションフォルダに移動してインストール完了です。ちなみにTerminal.appがあるのに、なぜiTerm2を使うのかというと、

表示色に256色が表示できる(Preference...>Profiles>Colors>Load Presets)
以下のvimのマウス利用オプションが利用できる

" マウスモード有効
set mouse=a
" screen対応
set ttymouse=xterm2

以上2つの理由があるからです。
その他にもタブ管理やウインドウ管理機能が充実してたり、クリップボード履歴を利用する機能があります。興味がある人はいろいろいじってみると面白いです。ただし、Terminal.appに比べると描画が2倍ぐらい遅いです。大量にコンソールにプリントするアプリを動かす際には要注意ですが、普段は気にならないと思います。

sshでさくらのサーバーにログインの後、git+vim+ctags+screenのインストール

次に早速sshでUNIXまたはLinuxサーバーにつないでみましょう。

$ ssh username@www0000.sakura.ne.jp

以上でログインし、入力を求められるのでパスワードを入力します。さくらのレンタルサーバーはFreeBSD 8.1でデフォルトがcshでしたが、そのまま進めていきます。
ちなみに自分はzshに変更していますがその辺はお好みで。まずはホームディレクトリへのソフトウェアのインストールを進めていきます。ここが一番長いですが頑張りましょう。

$ mkdir -p ~/local/source
$ cd ~/local/source
$ wget http://git-core.googlecode.com/files/git-1.7.9.6.tar.gz
$ tar zxvf git-1.7.9.6.tar.gz
$ cd git-1.7.9.6
$ make prefix=$HOME/local
$ make prefix=$HOME/local install
$ cd ..
$ wget http://hp.vector.co.jp/authors/VA025040/ctags/downloads/ctags-5.8j2.tar.gz
$ tar zxvf ctags-5.8j2.tar.gz
$ cd ctags-5.8j2
$ ./configure --prefix=$HOME/local
$ make
$ make install
$ cd ..
$ wget ftp://ftp.vim.org/pub/vim/unix/vim-7.3.tar.bz2
$ tar -jxf vim-7.3.tar.bz2
$ cd vim73
$ ./configure --enable-multibyte --enable-xim --enable-fontset --with-features=big --prefix=$HOME/local
$ make
$ make install
$ cd ..
$ wget ftp://ftp.uni-erlangen.de/pub/utilities/screen/screen-4.0.3.tar.gz
$ tar xzf screen-4.0.3.tar.gz
$ cd screen-4.0.3
$ ~/local/bin/vim pty.c

38行目当たりのsolaris向けのコードをコメントアウト

/* for solaris 2.1, Unixware (SVR4.2) and possibly others */
#ifdef HAVE_SVR4_PTYS
# include <sys/stropts.h>
#endif

無事コメントアウトしたら、

$ ./configure --prefix=$HOME/local
$ make
$ make install
$ ~/local/bin/vim .cshrc

.cshrcを編集して、今回ホームディレクトリにインストールしたものにパスを通したり、環境変数を設定したりします。

alias vi    vim
setenv EDITOR  vim
setenv LANG ja_JP.UTF-8
set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin $HOME/bin $HOME/local/bin)

以上のそれぞれの行を.cshrcに追加、または変更して設定します。

$ source ~/.cshrc

最後にこの設定を読み込みます。
これでひと通りのインストールは完了です。これでgitとvimとctagsとscreenがホームディレクトリ以下にインストールされました。

.screenrcの設定とscreenの利用

次は、早速.screenrcの設定などをしていきます。スクリーンの設定、コマンド一覧は、screenコマンド一覧を参考に。

$ vim ~/.screenrc

これで編集を開始して以下を記入します。

escape ^Tt
startup_message off
zombie 

rdstatus alwayslastline "[%02c] %`%-w%{=b bw}%n %t%{-}%+w"
defencoding UTF-8
encoding UTF-8
termcapinfo * 'hs:ts=\E]2;:fs=\007:ds=\E]0;screen\007'
termcapinfo xterm 'is=\E[r\E[m\E[2J\E[H\E[?7h\E[?1;4;6l'
caption always "%{=r dd}%-Lw%40L>%?%F%{=b dR}%:[%? %n%f %t %?%F%{-}%:]%?%+Lw %?%F%-006=■■%:%=%?"
altscreen on
defscrollback 50000
autodetach on
#multiuser on
#acladd soichiro_yoshimura

この設定は、サーバー時刻を表示するキャプションを設定の他、回線が切れた時にオートデタッチするようにしています。
キーインはCtrl+Tです。スクリーンの利用はコンソールにてコマンドscreen、デタッチはCtrl+T d、再度のアタッチはコマンドscreen -rとなります。これだけ覚えておけばとりあえず使えます。
あと、画面スクロールのためのコピーモードへの入り方は、Ctrl+T [です。残念ながらここではマウスホイール等は使えません、vimやlessと同様のキー操作です(ただ、iTerm2の設定を変えるとスクロールできるようになります、このエントリの最後を参照)。他にも常にログを取ったり、パネルを分割したり、タブを使ったりもできますが、これらは他のレイヤーでも利用できますので、この機能しか使いません。これでMacBookProを閉じてsshが切断されたり、さくらのレンタルサーバーからの強制切断があっても大丈夫です。
というわけで早速screenを利用してみます。

$ screen

これで、途中でサーバーとの接続が不安定になっても自動的にデタッチされるので。切断されたら、sshで繋ぎ直しコマンドscreen -lsでセッションがあることを確認して、コマンドscreen -rで再度アタッチして作業をしましょう。
なお、さくらのレンタルサーバーではsshの接続が一つしかできないこともある時には、sceenのタブ機能が役に立ちます。詳しくは、screenコマンド一覧 3.9.13対応をご覧ください。

.vimrcの設定とvim プラグインのインストール

さて、次は、.vimrcの設定をやっていきます。

$ vim ~/.vimrc

で、.vimrcを編集します。自分の設定は以下の通りですが、好きなようにカスタマイズしてください。

")VimをなるべくVi互換にする
set nocompatible

"""""""""" NeoBundle設定 """"""""""
" https://github.com/Shougo/neobundle.vim
" インストール
" $ mkdir -p ~/.vim/bundle
" $ git clone https://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim
filetype plugin indent off     " required!
if has('vim_starting')
	set runtimepath+=~/.vim/bundle/neobundle.vim/
	call neobundle#rc(expand('~/.vim/bundle/'))
endif

" gitを使ったプラグインマネージャ
NeoBundle 'Shougo/neobundle.vim'

"""""""" github
" 強力な入力補完(Uniteと連携)
NeoBundle 'Shougo/neocomplcache'
" Uniteコマンドによる読み出し等
NeoBundle 'Shougo/unite.vim'
" ,,でトグルでコメントアウト
NeoBundle 'scrooloose/nerdcommenter'
" zendogingプラグイン
NeoBundle 'mattn/zencoding-vim'

""""""" vim-scripts repos
" プロジェクトのツリー表示
NeoBundle 'project.tar.gz'
" 括弧囲みの編集操作
NeoBundle 'surround.vim'
" :Tlistでctagsの一覧表示
NeoBundle 'taglist.vim'
" SVNの差分表示用 http://blog.blueblack.net/item_144
NeoBundle 'vcscommand.vim'

filetype on
filetype indent on
filetype plugin on

"""""""""" 追加設定 """"""""""
"バックスペースキーの動作を決定する
"2:indent,eol,startと同じ
set backspace=2

"行数表示
set number

"新しい行を開始したときに、新しい行のインデントを現在行と同じ量にする
set autoindent

"検索で小文字なら大文字を無視、大文字なら無視しない設定
set smartcase

"(no)検索をファイルの末尾まで検索したら、ファイルの先頭へループする
set nowrapscan

"インクリメンタルサーチを行う
set incsearch

"highlight matches with last search pattern
set hlsearch

"閉じ括弧が入力されたとき、対応する括弧を表示する
set showmatch

"カーソルが何行目の何列目に置かれているかを表示する
set ruler

"新しい行を作ったときに高度な自動インデントを行う
set smartindent

"保存しないで他のファイルを表示することが出来るようにする
set hidden

"カレントバッファ内のファイルの文字エンコーディングを設定する
set fileencoding=utf-8

"Insertモードで<Tab> を挿入するのに、適切な数の空白を使う
"set expandtab

"ファイル内の <Tab> が対応する空白の数
set tabstop=4

"自動インデントの各段階に使われる空白の数
set shiftwidth=4

"行頭の余白内で Tab を打ち込むと、'shiftwidth' の数だけインデントする
set smarttab

"強調表示(色付け)のON/OFF設定
syntax on

" カラースキーマ設定 (~/.vim/colors/wombat.vimが必要)
colorscheme wombat

"ステータスラインを表示するウィンドウを設定する
"2:常にステータスラインを表示する
set laststatus=2

"ステータス行の表示内容を設定する
set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P

"vimのバックアップファイルとスワップファイル
set nobackup
set noswapfile

"バッファをクリップボードにコピー(for OSX, UNIXのgvim用)
set clipboard=unnamed,autoselect

"自動改行オフ
set tw=0

" neocomplcache 起動時に有効化
let g:neocomplcache_enable_at_startup = 1 " 起動時に有効化

" ,, でコメントアウトをトグル
let NERDSpaceDelims = 1
nmap ,, <Plug>NERDCommenterToggle
vmap ,, <Plug>NERDCommenterToggle

"コメントアウトが連続して入力されるのを禁止
autocmd FileType * setlocal formatoptions-=ro

"全角スペースを　で表示
highlight JpSpace cterm=underline ctermfg=Blue guifg=Blue
au BufRead,BufNew * match JpSpace /　/

"タブを見えるように設定
"set list
"set listchars=tab:>-

" サーチハイライトををESC二回で消す
nnoremap <Esc><Esc> :nohlsearch<CR><Esc>

" マウスモード有効
set mouse=a
" screen対応
set ttymouse=xterm2

" 挿入モードとノーマルモードでステータスラインの色を変更する
au InsertEnter * hi StatusLine guifg=DarkBlue guibg=DarkYellow gui=none ctermfg=Blue ctermbg=Yellow cterm=none
au InsertLeave * hi StatusLine guifg=Black guibg=White gui=none ctermfg=Black ctermbg=White cterm=none

"ctagsの埋め込み 各環境であるものを全て記述(なくても問題ない)
set tags=~/.tags,~/.tags.study

という感じにします。あと、カラースキームもiTermのデフォルトのカラープリセットで見やすいwombatに設定します。まだカラースキーマwombat.vimの実体がないので、以下の手順でダウンロードします。

$ mkdir -p ~/.vim/colors
$ cd ~/.vim/colors
$ wget http://www.vim.org/scripts/download_script.php?src_id=6657
$ cd ~

これでOKです。

あとは、必要プラグインのインストールをします。まず、プラグインマネージャのNeoBundleをまずはインストール。

$ mkdir -p ~/.vim/bundle
$ export GIT_SSL_NO_VERIFY=true
$ git clone https://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim

これでNeoBundleがインストールされます。

$ vim

以上でvimを立ち上げて

:NeoBundleInstall

を実行して、先程.vimrcに記述しておいた他の必要なプラグインをすべてインストールします。
これで環境構築は完了です。

project.vimの使い方は、
Project.vim - Vimでのプログラミングを猛烈に支援してくれるプラグイン
以上のサイトが、
ctagsとvimの連携に関しては
Vim でタグジャンプを使ってみる
以上のサイトなどが勉強になります。ぜひうまく利用してみて下さい。
なお、複数行して,,をコマンドするとコメントアウトのトグル操作。で検索のハイライトが消える設定がしてあります。

以上の環境設定でで、sshを介してマウスを使ったscreen+vim開発環境は完成です。じっくりご堪能下さい。
自分はこの設定に加えて言語ごと(JavaScript, Ruby, PHP, Scala)のプラグインなどを入れています。その設定は、GitHub・sifue/dotfilesにもアップしてあるので参考にしてみてください。

ぜひおすすめのGoogle日本語入力の設定

もし、Google日本語入力を使っても良いというのであれば、ぜひ利用したほうが良いです。
なぜかというと、環境設定 > キーの設定 > 編集で、Escを押した際に、IMEを無効にできるからです。これをやっておくとiTerm2上でコマンドラインモードなのに、日本語を入力して、うう..。ということがなくなります。この設定だけは本当におすすめです。
以下のように全ての状態において、Escapeが入力された際に、「キャンセル後IMEを無効化」を設定しておきます。これでで自動的にIMEがオフになります。