Nettuts+ Fetch ってなに？

• Introducing Nettuts+ Fetch | Nettuts+

Nettuts+ Fetchは、名前の通り、Nettuts+からリリースされたSublime Text用のプラグインで、
外部リソースを簡単なコマンドで手元にpullする事ができます。

例えば、普段からよく使うjQueryやリセット用のCSS、
常用するフレームワークや、Wordpress等のCMS等、
設定さえしておけば、コマンド一発（正確には三発）でダウンロード・展開してくれます。

新規プロジェクト用に各種ファイルをセットアップする際に、
一々最新版を公式からダウンロードして設置して…という手間が省ける上、
Sublime Textをメインエディタにすればそのまま作業に移れます。
スタートアップがかなり捗りそうですね。

前準備

Sublime Textのインストール

• Sublime Text – Download

これが無いと何もはじまりはしないので。
2012年1月7日現在ではβ版のバージョン2を入れて見ました。
ちなみに執筆当初1ライセンス$59で、無料でお試しして良いよとの事。

Sublime Package Control のインストール

Sublime Textは「Package Control」という拡張を使うことで
追加のパッケージをサクサク検索・インストール出来ます。
是非入れておきましょう。

Sublime Package Control – a Sublime Text 2 Package Manager by wbond

1. メニューから、“View” > “Show Cnsole” でコンソール窓を表示。
2. 下記の公式のワンライナーを入力してEnter。
3. Sublime Textを再起動して完了。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

（執筆当初のコードです。念の為公式での確認をおすすめします。）

Nettuts+ Fetch を使ってみよう

いよいよ件のプラグインをインストールします。
全入力しなくともコマンドパレットが補完してくれるので楽々安心ですね。

1. コマンドパレットを表示。（Mac:⌘+Shift+p / Win:Ctrl+Shift+p）
2. “Install Package”
3. “Nettuts+ Fetch” を選択・インストール

jQueryとhtml5-boilerplateははじめから設定されているので
試しにこれらをテストしてみましょう。

jQueryを引っ張ってくる (単体ファイル）

1. コマンドパレットを開く。
2. “Fetch” > “Single File” > “jQuery”
3. 現在開いているバッファーがあればそこに、無ければ新たな「untitled」に内容がペーストされます。

html5-boilerplateを引っ張ってくる（zipファイル）

1. 作業用のフォルダを開く。
2. コマンドパレットを開く。
3. “Fetch” > “Package File” > “html5-boilerplate”
4. 複数のフォルダがある場合は、確認を促されます。
5. 選択したフォルダにダウンロードしたzipの内容が展開されます。

設定を足してみよう

設定を足してやれば、勿論その他のパッケージを引っ張って来る事ができます。

1. コマンドパレットを開く
2. “Fetch: Manage remote file”
3. 開かれた設定ファイル（Fetch.sublime-settings）を編集

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
    }
}

これがデフォルトの状態。JSONで管理されているので編集も楽です。

WordPress日本語版の最新バージョンを引っ張ってこれるように設定してみます。
最新版の場所を教えてくれた@understandardさんにこっそり感謝。

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped",
        "wordpress-ja": "http://ja.wordpress.org/latest-ja.zip"
    }
}

これで、“Fetch” > “Package File” > “wordpress-ja” で
Wordpressが好きなフォルダに展開されます。

俺々フレームワーク等もGithubなりGistなりでWeb上にあげておけば簡単にpullできますね。

まとめ

Fetchコマンドもさることながら、このSublime Textというエディタ、かなりよさそうです。
拡張性も高く、既に多くのプラグインがリリースされている他、
Viキーバインドでも使う事ができます。

まだβ版でバグも多いそうですが、今後チェックしていきたいですね。

ちなみに、Windowsでは Notepad++ が使いやすくて重宝してます。

シンタックスファイルを追加する

Vimでは、Sassははじめから使えるのに
Lessのシンタックスファイルはありません。
なので、自分で追加してやらないといけません。

PHPでLessする「lessphp」の作者さんが、
オマケ？として公開してくれているので、こちらを使わせて頂くことに。

lessphp – leaner css in php

「Resources」の「Vim syntax file」から取得出来ます。
取得したless.vimは ~/.vim/syntax に保存。
これで、VimでLessファイルのシンタックスを色分けしてくれるようになったはず。

適当なLessファイルをひらいて

setf less

とかしてテストしてみましょう。

.lessファイルを関連付けする

.vimrc等で、lessファイルの関連付けをしてあげます。

" Less
au BufNewFile,BufRead *.less            setf less

これで拡張子が.lessのファイルを開くと、
lessのシンタックスハイライトが適用されてます。やったね！

less.vimが見つからなかった時は

Sassに比べていささかマイナーなツールではあるので、
そのような事もひょっとしたらあるかもしれません。
そんな時は、Sassの記法がかなり近いのでそちらを編集して使ってみてもよいかも。

基本的には複製させていただき、
変数の書き方だけLessに合わせておきます。

$ cd /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/
$ cat sass.vim > less.vim
$ vim less.vim

sass.vim を複製した less.vim を開き、

syn match sassVariable "$[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

この部分の$を@に書き換える。

syn match sassVariable "@[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

また、ファイル先頭のコメントの部分は、
適当にSassをLessに変更するなどしておきましょう。
これで、setf lessすればLessファイルとしてカラーリングされるようになるはずです。

一部の記法（Mixinとか）はSassとLessで異なるので反映されませんが、
個人的には変数とネストだけ反映されれば十分です。

「公開されているless.vimを紹介しておきながらなんでわざわざ？」と思われましたか？
…苦し紛れのコレを書いてる時にやっとless.vimを見つけたんだからしょうがない。

Less.appは素敵ですよ

いずれ改めて紹介しようとは思ってますが、
MacOSで使える LESS.app For Mac OS X は素晴らしいです。
フォルダごとに管理も出来るし、出力先のパスも指定できる。
Lessniumもこれくらい気の利いたツールにしてみたい…

autocmplpop.vimを導入

AutoComplPop – Automatically opens popup menu for completions : vim online

デフォルトのままのVimでは、やの後に、
, とする事で入力候補をポップアップで表示させる事が出来ます
…が、ちょっとまどろっこしい。

これを自動的にポップアップしてくれるようにしてくれるのが
このAutoComplPopというプラグインです。
導入方法はディレクトリにコピーするだけなので割愛。

尚、当方のUbuntu環境ではl9.vimも必要とされました。
うまく動かなかったら一緒に導入してやりましょう。

L9 – Vim-script library : vim online

導入後の設定

以下が、導入後の設定を極めて分かりやすく紹介してくれている記事。

autocomplpop.vimでリアルタイムにキーワード補完 – ナレッジエース

以下、リンク先の記事より拝借・抜粋させて頂きます。

ポップアップ中でもEnterキーで候補決定しない様に設定

候補を無視して改行を入力したい場合もあるので、
ポップアップ中のEnterキーで決定しないようにします。
修正箇所は、autoload/acp.vimの192行目付近。

if pumvisible()
    " a command to restore to original text and select the first match
    return "\<C-p>"
endif

これだとEnterでポップアップが消えるだけで、その時はまだ改行は挿入されません。
私はこっちのほうが使いやすいのですが、改行を挿入したい場合はvimrcに下記を追記。

inoremap <expr> <CR> pumvisible() ? "\<C-y>\<CR>" : "\<CR>"

他にもTabで候補を巡回する為の設定等も掲載されていましたが、
私は無い方が使いやすかったので、割愛致します。詳しくはリンク先で！

『オプション ‘omnifunc’ は設定されていません』

…なんていうエラーが吐かれた場合の対処について。

当方の環境では挿入モードで「<」を入力中に上記のエラーが吐かれました。
omnifuncというのはオムニ補完、つまり入力補完のポップアップの事らしく、
これを設定してあげれば黙るかな？というわけで設定してみました。

setlocal omnifunc=syntaxcomplete#Complete

無事静かになってくれました。
参考：Ubuntu日本語フォーラム / vim autocomplpop エラーについて

ついでなのでPHPの辞書を突っ込んでおこう

異常に関数の多いPHPこそ入力補完が役に立ちますね。
辞書ファイルはただ改行で候補を連ねるだけなので、簡単に作成出来ます。

参考：Vim で PHP 関数の辞書を作成する方法についてのメモ

上記リンクより抜粋。多謝！
こちらのコードを走らせる事で辞書ファイルを生成出来ます。

<?php
$keywords = array(
    'if', 'else', 'elseif', 'endif', 'while', 'endwhile', 'do', 'as', 'for', 'endfor', 'foreach', 'endforeach',
    'break', 'continue', 'switch', 'endswitch', 'case', 'default', 'declare', 'enddeclare',
    'try', 'catch', 'return', 'exit', 'const', 'class', 'function',
    'require', 'include', 'require_once', 'include_once',
    'abstract', 'final', 'interface', 'private', 'protected', 'public', 'static',
    '__LINE__', '__FILE__', '__DIR__', '__FUNCTION__', '__CLASS__', '__METHOD__', '__NAMESPACE__'
);
$functions  = function_exists( 'get_defined_functions'   ) ? get_defined_functions()   : array();
$constants  = function_exists( 'get_defined_constants'   ) ? get_defined_constants()   : array();
$interfaces = function_exists( 'get_declared_interfaces' ) ? get_declared_interfaces() : array();
$classes    = function_exists( 'get_declared_classes'   ) ? get_declared_classes()  : array();

$arrays = array_merge(
    $keywords,
    $functions['internal'],
//  array_keys( $constants ),   // 定数を補完したい場合はこの行を有効にする
    $interfaces,
    $classes
);
sort( $arrays );
$arrays = array_unique( $arrays );
echo implode( "\n", $arrays );

生成した辞書ファイルをvimrcで登録しておけば完了です。

autocmd FileType php :set dictionary=~/.vim/dict/php.dict

Windowsの場合は下記のような感じ。
“$VIM”はgVim.exeがインストールされているパスです。

autocmd FileType php :set dictionary=$VIM/vimfiles/dict/php.dict

辞書は必要に応じて追加していきましょう。
ActionScriptなんかも欲しいなぁ…

ひとまずこんな感じで、Win/Linux共にまともに動いてくれています。
オムニ補完はバッファの中身のみならず、
辞書を設定しておけば辞書内からも候補を表示してくれる優れもの。
Linxではパスの入力もこれでかなり楽になりますね。

ノートでのコーディングがとても快適になりました！すごいやVim！