[Vim]vimdiffで差分を表示・マージして元ファイルとの差分を確認する

よく vimdiff で差分を取るのだけれどマージのコマンドを忘れてしまうので備忘録。

vimdiff file1 file2

まあ、これは基本。
初期設定の vimdiff の配色はすごく目に悪い感じだったので .vimrc に以下の設定をした。

hi DiffAdd    ctermfg=black ctermbg=2
hi DiffChange ctermfg=black ctermbg=3
hi DiffDelete ctermfg=black ctermbg=6
hi DiffText   ctermfg=black ctermbg=7

参考: そんな僕らはコピペプログラマー！: vi・vim : vimdiffの色設定

ココから差分を確認してマージしていくにはマージした行にカーソルを合わせる必要がある。
吹き出しの根本がカーソルのある画面。

新規行の右方向のマージ

左画面の新規行にカーソルを合わせて dp

コマンドさえ覚えていればそこまで問題ない。

diff put で dp

変更行の左方向のマージ

左画面の行にカーソルを合わせて do

こちらもコマンドさえ覚えていれば問題ない。

diff obtain で do

変更行の右方向のマージ

左画面の行にカーソルを合わせて dp

変更行の時も新規行と同様にマージしたい行にカーソルを合わせてコマンドを実行するだけ。

新規行の左方向のマージ

右画面の新規行にカーソルを合わせて dp

コレが一番のクセモノ。
dp, do コマンドを実行するにはマージしたい行にカーソルを合わせる必要があるが、
右画面のファイルで新規の場合は左画面のファイルには存在しない行なのでカーソルを合わせることができない。
そのため、右画面へ移動してマージしたい行にカーソルを合わせて dp コマンドで取り込む必要がある。
左画面から右画面への移動は Ctrl + W, Ctrl + W で行う。逆も同様。

左画面の新規行の下の行にカーソルを合わせて do

この記事を書いていて気がついたのだが、

左画面の新規行(カーソルが置けない)の下の行にカーソルを合わせて do コマンドで取り込むことで、

右画面の新規行を左画面にマージすることができる。
わざわざ左画面から右画面へ移動する必要なんてなかった。

元ファイルとの差分を確認する

:DiffOrig

上の vimdiff 画面で右画面へ移動し、 右画面を :q コマンドなどで終了、閉じた後、
:DiffOrig コマンドを実行すると上の画像のようになる。

左下に [Scratch] と書かれている方が元ファイルである。

先ほどと左右が逆になって左画面だった編集後のファイルが右画面になる。
上のマージ操作で取り込んだもの(変更業の左方向のマージ、新規行の左方向のマージ)が差分として現れている。
これで意図しないマージをしていないか確認することができる。

※注意

Vim のチュートリアルと基本設定 | DevAchieveで解説した
$VIMRUNTIME/vimrc_example.vim の設定をしていないと DiffOrig が使えない。
以下が設定してあれば使用できるので設定しておいたほうが良い。

if !exists(":DiffOrig")
  command DiffOrig vert new | set bt=nofile | r # | 0d_ | diffthis
    \ | wincmd p | diffthis
endif

おまけ

差分のある行への移動

] + c : 次の差分の行へ移動

[ + c : 前の差分の行へ移動

参考
2つのテキストファイルの差分をマージする — 名無しのvim使い
最後に保存してから、どのくらい編集したのかの差分を表示 — 名無しのvim使い

Vim のチュートリアルと基本設定

もっぱら GUI を使っていますが CUI ともお友達にならなきゃいけないので
CUI のエディタである Vim のチュートリアルをやってみました。
また、その中で出た設定ファイルも組み込んでみました。

Vim のチュートリアルは Vim が入っていればたぶん入っていて、
以下のコマンドを実行すれば良いです。
vimtutor ja
全７章からなる Vim の基本的な使い方のチュートリアルです。
30分くらいでできると思うので使う人は是非やってみることをオススメします。

その中で Vim の設定ファイルである .vimrc の例があったのでこちらに少しいじったのを載せておきます。
原文は適当なファイルで以下のコマンドを実行して確認してください。
:read $VIMRUNTIME/vimrc_example.vim

" :read $VIMRUNTIME/vimrc_example.vim

" When started as "evim", evim.vim will already have done these settings.
" "evim" コマンドで開始した場合は設定済みとして読み込まずに終了する。
if v:progname =~? "evim"
  finish
endif

" Use Vim settings, rather than Vi settings (much better!).
" This must be first, because it changes other options as a side effect.
" Vi の設定よりも Vim の設定を使用する。
" これは副作用として他のオプションを変更するため最初に記述する。
set nocompatible

" allow backspacing over everything in insert mode
" 挿入モードの全てにおいてバックスペースを許可する
set backspace=indent,eol,start

if has("vms")
  set nobackup    " do not keep a backup file, use versions instead
else
  set backup      " keep a backup file
endif
set history=50    " keep 50 lines of command line history
                  " コマンドライン履歴を50行保持する
set ruler         " show the cursor position all the time
                  " 常にカーソルのポジションを表示する
set showcmd       " display incomplete commands
                  " 不完全なコマンドを表示する
set incsearch     " do incremental searching
                  " インクリメンタルサーチをする

" Don't use Ex mode, use Q for formatting
" フォーマットに Q を使用する Ex モードを使用しない。
map Q gq

" CTRL-U in insert mode deletes a lot.  Use CTRL-G u to first break undo,
" so that you can undo CTRL-U after inserting a line break.
" 挿入モードでの CTRL-U で たくさん削除する。
" 改行を入れた後の CTRL-U で元に戻せるようにするために、
" まず CTRL-G u を使ってアンドゥを中断してください。
inoremap <C-U> <C-G>u<C-U>

" In many terminal emulators the mouse works just fine, thus enable it.
" 多くのターミナルエミュレータでマウスは良い働きをするので有効化する。
if has('mouse')
  set mouse=a
endif

" Switch syntax highlighting on, when the terminal has colors
" Also switch on highlighting the last used search pattern.
" ターミナルに色がある場合、シンタックスハイライトを ON に変更する。
if &t_Co > 2 || has("gui_running")
  syntax on
  set hlsearch
endif

" Only do this part when compiled with support for autocommands.
" autocommands のサポートが有効な場合のみこの部分を実行する
if has("autocmd")

  " Enable file type detection.
  " ファイルタイプ検出を有効にする。
  " Use the default filetype settings, so that mail gets 'tw' set to 72,
  " 'cindent' is on in C files, etc.
  " Also load indent files, to automatically do language-dependent indenting.
  " デフォルトのファイルタイプ設定を使用する。
  " また、言語ごとのインデントを自動実行するためのインデントファイルを読み込む。
  filetype plugin indent on

  " Put these in an autocmd group, so that we can delete them easily.
  " 削除しやすいように autocmd グループにこれらを記述する。
  augroup vimrcEx
  au!

  " For all text files set 'textwidth' to 78 characters.
  " すべてのテキストファイルについてテキスト幅は 78 文字にセットする。
  autocmd FileType text setlocal textwidth=78

  " When editing a file, always jump to the last known cursor position.
  " ファイルの編集中に常に最後のカーソルポジションにファンプできるようにする。
  " Don't do it when the position is invalid or when inside an event handler
  " (happens when dropping a file on gvim).
  " Also don't do it when the mark is in the first line, that is the default
  " position when opening a file.
  autocmd BufReadPost *
    \ if line("'\"") > 1 && line("'\"") <= line("$") |
    \   exe "normal! g`\"" |
    \ endif

  augroup END

else

  set autoindent    " always set autoindenting on
                    " 常にオートインデントを ON にする。

endif " has("autocmd")

" Convenient command to see the difference between the current buffer and the
" file it was loaded from, thus the changes you made.
" 変更前と変更後の diff を確認する便利コマンド
" Only define it when not defined already.
" すでに定義されていない場合のみ定義する。
if !exists(":DiffOrig")
  command DiffOrig vert new | set bt=nofile | r # | 0d_ | diffthis
    \ | wincmd p | diffthis
endif

訳文は怪しいところがチラホラ。意味や動きがよくわかってない設定もチラホラ。
とりあえず設定を書いて読み込むと Vim がカラーついて便利になると思います。

僕は直接コレを ~/.vimrc には書きたくなかったので .vimrc.ex を用意して .vimrc から読み込むことにしました。
参考: Vim-users.jp - Hack #108: vimrc で外部ファイルを取り込む
構造は以下のとおりです。

.vimrc
.vim
└── .vimrc.ex

" 基本的な Vim の設定(必ず最初に読み込む)
if filereadable(expand('~/.vim/.vimrc.ex'))
  source ~/.vim/.vimrc.ex
endif

" 以下、その他の自分で追加した設定

使い方も覚えてちょっと便利になったので少しずつ改良していきたいです。

[SublimeText]Emmetを使いこなすためのショートカットキー

Emmet には便利なショートカットキーがあるのでまとめておく。
Actions | Emmet Documentation

Expand Abbreviation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで
説明した事ができる。詳しく書いているのでぜひ見てほしい。

Match Tag Pair

[SublimeText2]Bracket Highlighterで括弧を強調表示する | DevAchieveの括弧内全選択のHTML限定版。
キーひとつで範囲広げたりできるのでHTMLメインならEmmetの方が便利。

Sublime Text 2 では単語選択のショートカットとかぶっているのためか、ショートカットキーが異なる。

Ctrl + d: 選択範囲拡大

Ctrl + j: 選択範囲縮小

Go to Matching Pair

開始タグと終了タグを行き来できる。

Sublime Text 2 では開いているタブ一覧をパレットで開くショートカットキーと被るため、

Ctrl + Shift + t で開始タグと終了タグを行き来する。

Wrap with Abbreviation

後から要素を略語で囲める。自動でインデントを下げてくれて便利。

Sublime Text 2 では頭文字をとって Ctrl + w でコンソール？が開くので

記入していけば変換されていき、展開結果のプレビューが見れる。
エンターを押せば変換を確定する。

Wrapping individual lines

複数行選択すれば各行に対して囲みタグ展開できる。
ドキュメントでは複数行のテキストからリストタグを囲みタグ展開している。

Controlling output position

$# を使えばテキストを使いまわせるので凄く便利。

First
Second
Third
Forth

<ul>
    <li><a href="" title="First">First</a></li>
    <li><a href="" title="Second">Second</a></li>
    <li><a href="" title="Third">Third</a></li>
    <li><a href="" title="Forth">Forth</a></li>
</ul>

Go to Edit Point

前後の編集点を移動できる。
Sublime Text 2 でもショートカットは同じ。

Ctrl + Option + →: 次の編集点に移動

Ctrl + Option + ←: 前の編集点に移動

Select Item

アイテム(タグ、属性名="属性値"、属性値)を選択する。
Sublime Text 2 でもショートカットは同じ。

Command + Ctrl + .: 次のアイテムに移動

Command + Ctrl + ,: 前のアイテムに移動

CSSでも利用可能で、セレクタ、プロパティ: 値、値全体、複数ある場合は個別の値を移動できる。

Toggle Comment
コメントアウト/アンコメントできる。※コメントアウトの対義語はアンコメントらしい。

Command + /: コメントアウト/アンコメント切り替え

Split/Join Tag
XML の空要素タグを分割したり結合したりできるらしい。HTML では出番がない。
参考:
HTML5の空要素タグの文法 - 徒書
scriptタグは空要素っぽく閉じると，FirefoxやIEで読んでもらえない ::ハブろぐ

Remove Tag

親のタグを除去する。

Sublime Text 2 では Command + ' らしいのだが動かなかった。

仕方ないので自分で Ctrl + r に設定した。

Merge Lines

選択された複数行を1行にする。
Sublime Text 2 には何故か設定が入っていなかったので以下の設定をキーバインドに追加した。

{
    "keys": ["super+m"],
    "args": {"action": "merge_lines"},
    "command": "run_emmet_action"
}

Command + m を潰すことによって最小化を防ぐ狙いもあり。

Update Image Size
画像ファイル名の上で実行すると画像サイズを保管してくれる。
静的ページを制作する場合は最高に便利だろうなー。
ファイルパスに PHP のコードが入った場合は動かなそうだけど試してないからわからない。

Evaluate Math Expression

計算をしてくれる。通常の計算式の他に \ で 四捨五入( round(a/b) ) が行われる。
流石にカッコつき計算式とかは無理だったので単純な計算のみ。
HTML/CSS で行う計算は単純な四則演算のみなので問題ない。

Sublime Text 2 でも Command + Shift + y で計算できる。

Increment/Decrement Number

数値をインクリメント/デクリメントする。
キャレットが数値の上でないと反応しないので px とかの単位部分でも反応して欲しい気がする。
あと Sublime Text 2 では動かなかった。
微調整は Google Chrome developer tool でやるし、普通に打ったほうが速いからいらないかも。

Reflect CSS Value

CSS の値の変更を展開する。
ベンダープレフィックス系の値を Command + b で一括で変更できるので便利。

Encode/Decode Image to data:URL

画像を base64 エンコード/デコードする。

Sublime Text 2 では Ctrl + Shift + d でできるらしい。

Emmet 関連記事

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve
Emmet v1.0がリリース！ナンバリング展開が逆順に対応！ | DevAchieve
[SublimeText]Emmetで高速HTML/CSSコーディング CSS編 | DevAchieve

[SublimeText2]Goto Documentationでドキュメントジャンプ

kemayo/sublime-text-2-goto-documentation · GitHub
フォーカスの当たった単語のドキュメントに飛ぶためのコマンドを提供するプラグイン。
以下のプログラミング言語をサポートしている。

• PHP
• JS / CoffeeScript
• Python
• Clojure
• Go
• Smarty
• Ruby on Rails

作者はプラグインが自動的にキーバインドを追加するのは嫌いらしいので自分で追加する必要がある。
key Bindings - User に以下のように書けば良い。

{ "keys": ["super+shift+h"], "command": "goto_documentation" }

だんだん使い勝手が良くなってきた。

追記

中身見たら拡張が簡単そうだったのでCSSのドキュメントジャンプ関数を追加した。

def css_doc(self, keyword, scope):
    open_url('http://docs.webplatform.org/wiki/css/properties/%s' % keyword.lower())

例えば opacity の上で実行するとhttp://docs.webplatform.org/wiki/css/properties/opacityに飛ぶ。
まだドキュメントはアルファ版らしいけど今後に期待ということで飛べるようにしておく。

[SublimeText2]SublimeCodeIntelで更にIDE化

Kronuz/SublimeCodeIntel · GitHub
ユーザー定義変数/関数の補完や定義元ジャンプができるようになる。

定義元ジャンプ: Command + F3 または Alt押しながらクリック
ジャンプ前の場所に戻る: Command + Alt + Ctrl + ←

標準関数について定義元ジャンプを実行するとステータスバーに関数の説明が出る。
出来ればドキュメントに飛んでくれたら嬉しいけどまぁ十分。

[SublimeText2]PHPDoc形式のコメントを補完してくれるPhpDoc

SublimeText/PhpDoc · GitHub
Docコメント/**を入力すると改行した時に次の行に * が補完される。
PHPDocのタグ(Tags - PHPDoc - Wikipedia, the free encyclopedia)の補完も
サポートしているようで@を入力してctrl + spaceを押すと
アノテーションの一覧が出るのでtabで確定すると色々補完される。
IDE でもここまでの補完はしてくれないかも？PHPを使う人は入れておくと便利。

[SublimeText2]SublimeLinterでSublimeTextをIDE化

SublimeText2で他のIDEを置き換えようとしているのだが
まず初めにエラー表示は基本だよねーということで導入してみた。
SublimeLinter/SublimeLinter · GitHub

Package Control から Install Package で SublimeLinter を探してインストール。
Perl, PHP, Ruby なら特に何もしなくてもたぶん使える。
保存するだけでエラーチェックしてくれる。

ショートカットキー

任意実行: command + ctrl + l
次のエラー: command + ctrl + e
前のエラー: command + ctrl + shift + e

設定

{
    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": true,

    // Set to true to highlight annotations
    "sublimelinter_notes": true
}

行数のところにマークつけるのと TODO, README, FIXME をハイライトするのだけ変えた。
エラー箇所ポップアップは保存するたびにポップアップしてきてウザったかったのでやめておいた。

Color Scheme

User Color Scheme の array タグの中に以下を入れると設定が反映される。
Annotations は 緑背景の黒字にした。オレンジ系にしたかったけど変なアウトラインの色が入るから微妙だった。
他はSublimeLinter/SublimeLinter · GitHubに載っていたまま。

<!-- SublimeLinter -->
    <dict>
        <key>name</key>
        <string>SublimeLinter Annotations</string>
        <key>scope</key>
        <string>sublimelinter.annotations</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#339966</string>
            <key>foreground</key>
            <string>#000000</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Error Outline</string>
        <key>scope</key>
        <string>sublimelinter.outline.illegal</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#FF4A52</string>
            <key>foreground</key>
            <string>#FFFFFF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Error Underline</string>
        <key>scope</key>
        <string>sublimelinter.underline.illegal</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#FF0000</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Warning Outline</string>
        <key>scope</key>
        <string>sublimelinter.outline.warning</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#DF9400</string>
            <key>foreground</key>
            <string>#FFFFFF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Warning Underline</string>
        <key>scope</key>
        <string>sublimelinter.underline.warning</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#FF0000</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Violation Outline</string>
        <key>scope</key>
        <string>sublimelinter.outline.violation</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#ffffff33</string>
            <key>foreground</key>
            <string>#FFFFFF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>SublimeLinter Violation Underline</string>
        <key>scope</key>
        <string>sublimelinter.underline.violation</string>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#FF0000</string>
        </dict>
    </dict>
<!-- /SublimeLinter -->

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

CSSセレクタのルールでHTMLを記述できるEmmetが凄い！

Sublime Text 2 を使い始めた理由の半分が
Emmet で高速 HTML/CSS コーディングしたかったからだ。
Emmet の凄さを見ればきっとあなたも使いたくなるだろう。
百聞は一見に如かずだ。
Emmet Documentationでその凄さを見てきてほしい。
Sublime Text 2 へのインストールは sergeche/emmet-sublime · GitHub から。
ここではHTML展開の基本をまとめたいと思う。

トリガー

タブまたはCtrl+Eで以下のような変換ができる。

HTMLの展開

要素名

タグ名を入力してトリガー発動するだけ。タグ名でなくてもタグっぽく展開する。

ネスト演算子

子: >

ul>li

<ul>
    <li></li>
</ul>

兄弟: +

div+div

<div></div>
<div></div>

親: ^

ul>li^div

<ul>
    <li></li>
</ul>
<div></div>

複数回も可能

div>ul>li^^div

<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

掛け算: *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

グループ: ()

table>(tr>(th+td))*3

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

属性演算子

id と class

ul#nav>li.item

<ul id="nav">
    <li class="item"></li>
</ul>

複数クラスを指定することも可能

div.btn-group>button.btn.btn-primary*2

<div class="btn-group">
    <button class="btn btn-primary"></button>
    <button class="btn btn-primary"></button>
</div>

カスタム属性

img[src alt="プロフィール画像"]

<img src="" alt="プロフィール画像">

ナンバリング

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

ゼロパディングも設定可能

ul>li.item$$*3

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

テキスト: {}

{詳しくは}+a{こちら}+{。}

詳しくは<a href="">こちら</a>。

テキストは親を変更しない。それによって意図しない結果が展開されることがある。

span{詳しくは}+a{こちら}+{。}

<span>詳しくは</span><a href="">こちら</a>。

span タグの中に a タグを書きたい場合は以下のように書く。

span>{詳しくは}+a{こちら}+{。}

<span>詳しくは<a href="">こちら</a>。</span>

暗黙的なタグ名

タグ名を入力せずに展開するとその場所によってタグ名が自動的に指定される。

ブロック要素内: div
インライン要素内: span
ul, ol 要素内: li
table, thead, tbody, tfoot 要素内: tr
tr 要素内: td
select, optgroup 要素内: option

ダミーテキスト: Lorem Ipsum

ダミーテキストとして “Lorem Ipsum” generator を使用することができる。

lorem または lipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam dolor vitae blanditiis totam a nemo. Aperiam necessitatibus numquam cum eligendi molestias corporis sunt facere molestiae autem omnis magnam earum.

単語数を決めて展開することもできる。

lorem10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptas.

上記の暗黙的なタグ名解決を利用することができる。

ul>lorem2.item*2

<ul>
    <li class="item">Lorem ipsum.</li>
    <li class="item">Dolores ratione.</li>
</ul>

次回

次回はCSS編を予定。HTMLも凄いけどCSSも凄い！使いこなして高速コーディングしたい。

SublimeText2でPHPファイルをビルド&Build Systemを使いこなす

SublimeText2でPHPを実行できると何かと便利だと思うので設定する。
PHPはインストール済みとする。
MacならPHPがインストールされていると思うので大丈夫だと思う。

参考: Build Systems — Sublime Text Unofficial Documentation

設定

Sublime Text 2 >Tools > Build System > New Build System... から
設定ファイルを新規作成して以下のJSONをコピペすると良い。

{
    "cmd": ["php", "$file"],
    "selector": "source.php"
}

$file が現在のファイルを指し示す。
selector で source.php と書いておくとPHPファイルで Tools > Build System > Automatic の際に
自動的にPHPと認識してビルドしてくれる。

ビルド

PHPファイルを開いて command + B でビルドできる。

標準入力の処理があるPHPファイルを実行する

競技プログラミングのテストケースをファイルとして持っておき、
それを実行したいPHPファイルにパイプで渡してCLI(Command Line Interface)で実行すれば
コードを書き換えることなく競技プログラミング用のテストが出来る。

{
    "cmd": ["cat $file_path/test.txt | php $file | diff - $file_path/answer.txt -u"],
    "selector": "source.php",
    "shell": true
}

$file_path は実行したファイルのディレクトリ。コマンドが急に俺のスキルを越えていったので解説。

1. cat $file_path/test.txtでテストケースを標準出力に流しこむ
2. パイプで標準入力として受け取りphp $fileで実行
3. 結果の標準出力をパイプで受け取り、diff - $file_path/answer.txt -uで正誤チェック

標準入力とファイルの diff を取る場合は - を指定するらしい。オプションで diff 表示形式変更可能。
参考: UNIXの部屋 コマンド検索:diff (*BSD/Linux)

上のようにコマンドを区切っていたらどうにもエラーになるので
"shell": true にしてコマンドを全部いっぺんに渡している。

答えまで準備するのは面倒な場合は以下のように途中で渡すのをやめれば良い。

{
    "cmd": ["cat $file_path/test.txt | php $file"],
    "selector": "source.php",
    "shell": true
}

これでシームレスにコーディングと実行ができ、快適な競技プログラミングができるでしょう！

Build Systemを使いこなす

{
    "selector": "source.php",
    "variants": [
        {
            "cmd": ["php $file"],
            "name": "php build",
            "shell": true
        },
        {
            "cmd": ["cat $file_path/test.txt | php $file"],
            "name": "php run test case",
            "shell": true
        },
        {
            "cmd": ["cat $file_path/test.txt | php $file | diff - $file_path/answer.txt -u"],
            "name": "php check answer",
            "shell": true
        }
    ]
}

上で書いたコマンドを使い分けたい場合は1ファイルに"variants"に配列で指定すれば良い。
ここでは1階層目に"cmd"を記述しなかったので command + B を押しても何も起こらない。
コマンドパレットで Build: php build とか候補が出るようになるのでこちらで使い分けると良い。

[SublimeText2]スニペットを作成する

SublimeText2のスニペットが使いたくなったので設定もそこそこに作成してみた。
参考: Sublime Text 2で自分用のスニペットを作る方法 | prime factor

Tools > New Snippet.. からでも作れるし(デフォルトで入力されているけど)、
普通に新規ファイル作成でも作ることができる。

構造

snippet: 以下の要素を入れる親要素。
content: スニペット展開後の内容。リテラルとしての $ は \$ にエスケープする必要がある。
tabTrigger: スニペットを呼び出す際の名前。
scope: よくわからないけど source.python と書いてあると python のソース内で有効になるらしい。
Scopes - Syntax Definitions — Sublime Text Unofficial Documentationによると
TextMate の Scope Selector をインスパイアしているらしい。
TextMate Manual » Scope Selectorsを読めば何かわかるかもしれない。
description: 入力補完リストに表示される説明。

<snippet>
    <content><![CDATA[]]></content>
    <tabTrigger></tabTrigger>
    <scope></scope>
    <description></description>
</snippet>

ちなみにスニペットにインデントを含む場合は常にタブを使えって書かれている。
タブなら設定の translateTabsToSpaces が true なら自動的にスペースに変換してくれるらしい。
が、自分はインデントはスペース派で、スニペットを誰かと共有する予定もないので無視してスペースで書いた。

拡張子

.sublime-snippetをつけて保存する。

保存場所

[Sublime Text 2]/Packages以下ならどこでもいいようだ。
わかりやすく [Sublime Text 2]/Packages/User の中に Snippets フォルダを作って
言語ごとにフォルダ作って管理しておくといいかもしれない。

例

[競技プログラミング][PHP][AtCoder]鉛筆リサイクルの新技術で作ってたスニペットを晒すとこんな感じ。

<snippet>
    <content><![CDATA[
function println(\$var, \$line = null){
    if(is_null(\$line)){
        echo \$var . PHP_EOL;
    }else{
        echo \$line . ':' . \$var . PHP_EOL;
    }
}
]]></content>
    <tabTrigger>f_println</tabTrigger>
    <scope>source.php</scope>
    <description>競技プログラミング用出力関数</description>
</snippet>

これでPHPのソース内で f_println を入力してタブを押すだけでこの関数が展開される。すごく便利。

少し不満な点はコードを選択して右クリックメニューとかショートカットキーとかで
シームレスにスニペットを作成できない点。(まだ使い始めで知らないだけかもしれないが…。)

スニペットのフォーマットを覚えるのが嫌だったので
スニペットのテンプレートを展開するスニペットを作ろうとしたけど展開しても空文字になって挫折した。
上の不満点もあるし、プラグインを作ってみたい。

[SublimeText2]Bracket Highlighterで括弧を強調表示する

facelessuser/BracketHighlighter · GitHub

• 括弧 (),[],<>,{} のカスタマイズ可能なハイライト
• タグのカスタマイズ可能なハイライト
• 引用符のカスタマイズ可能なハイライト
• タグ、括弧、または引用符のマッチングの有効/無効の選択
• 言語に基づくタグ、括弧、または引用符のホワイトリスト/ブラックリストマッチングの有効/無効の選択
• ショートカットによって使われた歳のステータスバーにマッチング間の行数と文字カウントの表示
• カッコの中身の最初と最後にカーソルを移動できるショートカット
• カッコの中身を全選択するショートカット
• 引用符のスタイルを変更するショートカット
• マルチセレクトが動く
• ブラケット関連プラグイン
• カスタムガターアイコンが設定可能
• 文字列の中の括弧をハイライト
• 文字列括弧の括弧エスケープモードのトグル(regex|string)
• 実験的なCFMLのサポート

使えそうなショートカットキー

Shift + command + B, Shift + command + B: タグ間の行数と文字数

Shift + command + B, Shift + command + J: 括弧の切り替え

Shift + command + B, Shift + command + W: 引用符の切り替え

Shift + command + B, Shift + command + [: 括弧内を折りたたみ

Shift + command + B, Shift + command + S: 括弧の内容を全選択

alt + up: 開始括弧にフォーカス alt + down: 終了括弧にフォーカス

設定のDIff

// Higlight brackets of tag only instead of entire tag
+    // metaタグなどの空要素タグの全体をハイライトするかどうか。読みにくいのでタグ部分のみにする。
-    "tag_brackets_only" : false,
+    "tag_brackets_only" : true,

     // Match brackets only when cursor is between the brackets
+    // 括弧の間にカーソルがあるときだけ括弧にマッチする。
+    // ハイライトでキャレットが内外どちらにいるかわからなくなるため内側の時のみハイライトする。
-    "match_brackets_only_when_between": false,
+    "match_brackets_only_when_between": true,

読みやすいし便利。

[Sublime Text 2]Sublime Package Controlをインストールする

Sublime Text 2はパッケージと呼ばれるプラグインをインストールすることで
カスタマイズすることが可能なのだが、
そのパッケージを簡単に検索、インストール、アップデート、アンインストールできる
Sublime Package Control というものがある。
Sublime Package Control – a Sublime Text 2 Package Manager by wbond

たくさんのパッケージをインストールすると
管理できなくなりそうなので最初に入れておきたい。

インストール方法

Sublime Text 2を起動し、Ctrl+Shift+@でコンソールを出して
Installation – Sublime Package Control – a Sublime Text 2 Package Manager by wbondにある
コードを貼り付けて実行するだけ。最後に再起動が必要。

使い方

Usage – Sublime Package Control – a Sublime Text 2 Package Manager by wbond
Sublime Text 2でCommand+Shift+pでコマンドパレットを開くことができるので
Package Control:とか打つとできる事がわかる。

Package Control: Install Package

コマンドパレットで実行するとPackage Control経由でインストールできるパッケージが表示される。
選択してエンターを押せば再起動せずにインストールが出来る。

Package Control: Remove Package

コマンドパレットで実行するとインストールされているパッケージが表示される。
選択してエンターを押せば簡単にアンインストールできる。

他の使い方は適宜使用したら追記予定。

ターミナルからSublime Text 2を起動するための設定

僕は zsh を使用しているので違うシェルの人は読み替えてください。
vi ~/.zshrc

alias st="/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl"

source ~/.zshrc

これで、あんまりないかもしれないけど
ターミナルからSublime Text 2で開きたい時のためにエイリアスの設定ができたので
st hoge.txtとか打てばSublime Text 2が起動して編集できる。
起動が軽快で素晴らしい。

Sublime Text 2の設定をDropboxで共有する

Sublime Text 2は個人で複数台のPCにインストールして利用することが
許可されているので(Sublime Text 2 - Sales FAQ)
複数台のPCにインストールしようと思うが、設定は共通にしておきたい。
Sublime Text 2によるストレスフリーな開発環境 | ntcncp.netを参考に
設定を共通化してみようと思う。
環境は両方ともMacなのでWindowsの人はできるか知らないけど読み替えてください。

設定をDropboxに移行

ターミナルで以下のコマンドを実行する。
mkdir ~/Dropbox/Settings/
まずはDropboxフォルダに設定を入れるフォルダを作成する。
mv ~/Library/Application\ Support/Sublime\ Text\ 2/ ~/Dropbox/Settings/
上記のフォルダにSublime Text 2の設定などが入ったフォルダを丸ごと移動する。
ln -s ~/Dropbox/Settings/Sublime\ Text\ 2/ ~/Library/Application\ Support/Sublime\ Text\ 2
Dropboxに移した設定などのファイルにシンボリックリンクを張り、
Sublime Text 2が設定などを参照してもDropboxに置いた設定などを読めるようにする。

元に戻したかったら以下のコマンドでシンボリックリンクを削除して
rm -rf ~/Library/Application\ Support/Sublime\ Text\ 2
以下のコマンドで元の場所に戻せば良い(はず)。
mv ~/Dropbox/Settings/Sublime\ Text\ 2/ ~/Library/Application\ Support/Sublime\ Text\ 2/

他のMacでDropboxの設定を反映

他のMacでSublime Text 2をインストールしたら以下のコマンドで既存の設定などのファイルを削除する。
rm -rf ~/Library/Application\ Support/Sublime\ Text\ 2/
-rf をつけると Sublime Text 2以下のフォルダにあるファイルを再帰的に削除してくれる。
ln -s ~/Dropbox/Settings/Sublime\ Text\ 2/ ~/Library/Application\ Support/Sublime\ Text\ 2
Dropboxに置いてある設定などのファイルからシンボリックリンクを張れば
他のMacでもDropboxに置いてある設定などのファイルを参照してくれる。

これで複数台のMacで設定を一本化できるのでやっておいて損はない。

Sublime Text 2の設定とDiffの取り方

Sublime Text 2とは

凄く便利で使いやすいと最近エンジニアの間に話題になっているエディタです。
なんかめっちゃ色々できて良いらしいので使い始めることにしました。
Sublime Text: The text editor you'll fall in love withからダウンロードできます。
恋に落ちるエディタと自称するだけあってかなり評判いいです。

ライセンス料は$59ですが試用版でも無期限で使えるようです。
今後リリース予定のSublime Text 3はアップデートにお金がかかるらしいです。
Sublime Text 2 - Sales FAQ

おそらくSublime Text 2ユーザーは割安なアップデート料を払えばよくて
新規になると値上がりしてて手を出しにくくなるのが
この手のソフトウェアにありがちなパターンだと思うので今のうちに買っておくのが良いかもしれません。
PayPalで支払いができて今なら5000円切るので更に円安になる前に買っておくのがお得かと思います。

Sublime Text 2の設定

Sublime Text 2 > Preferences > Settings - User (command + ,)で設定ファイルを開きます。
開いても殆ど何も書かれていなくて何を設定すればいいのかわからないので
Sublime Text 2 > Preferences > Settings - Defaultから Settings - User にまるっとコピペしました。
設定に関してはSublime Text 2 のDefault設定ファイルを眺める - blue_ham_cake1024のブログと
Y.A.M の 雑記帳: Sublime Text 2 の設定を参考にして変更してみました。

// フォントの指定
-    "font_face": "",
+    "font_face": "consolas",

// フォントサイズ
-    "font_size": 12,
+    "font_size": 14,

// 指定した幅のところで縦線が入ります。配列形式で複数指定できます。
-    "rulers": [],
+    "rulers": [100, 120],

// スペースをタブに変換
-    "translate_tabs_to_spaces": false,
+    "translate_tabs_to_spaces": true,

// 折り返しを強制
-    "word_wrap": "auto",
+    "word_wrap": true,

// その代わりに幅は広めに
-    "wrap_width": 0,
+    "wrap_width": 120,

// ミニマップ上でのファイルの現在の表示範囲をボーター表示
-    "draw_minimap_border": false,
+    "draw_minimap_border": true,

// 現在の行をハイライト
-    "highlight_line": false,
+    "highlight_line": true,

// 空白類の表示を常に
-    "draw_white_space": "selection",
+    "draw_white_space": "all",

// インデントのラインをキャレットの色とは異なる色で表示
-    "indent_guide_options": ["draw_normal"],
+    "indent_guide_options": ["draw_active"],

// 保存時に末尾の空白を除去
-    "trim_trailing_white_space_on_save": false,
+    "trim_trailing_white_space_on_save": true,

// 保存時に最後の行が改行文字になるようにする
-    "ensure_newline_at_eof_on_save": false,
+    "ensure_newline_at_eof_on_save": true,

// 文字コードを特定できない場合に自動的に指定する文字コード(ASCII, UTF-8, UTF-16は自動判定してくれる)
-    "fallback_encoding": "Western (Windows 1252)",
+    "fallback_encoding": "Shift-JIS",

// デフォルトの改行コード
-    "default_line_ending": "system",
+    "default_line_ending": "windows",

// Shift + Tab で行のどこでもアンインデント
-    "shift_tab_unindent": false,
+    "shift_tab_unindent": true,

// 変更したファイルはタブバーでファイル名をハイライト
-    "highlight_modified_tabs": false,
+    "highlight_modified_tabs": true,

// 開いているファイルが無くなったらアプリケーションを閉じる
-    "close_windows_when_empty": false,
+    "close_windows_when_empty": true,

Sublime Text 2でのDiffの取り方

Diffを取りたい2つのファイルを含むフォルダをFile > Open...で開き、
2つのファイルを選択(Macだったらコマンドキー押しながらファイルをクリック)して、
右クリックでDiff Files...をクリックするとDiffが取れます。

ということで上の設定はデフォルト設定とユーザー設定をDiffを取ったものでした。
これから色々使ってみようと思います！

サクラエディタでUTF-8をデフォルトの文字コードにする

サクラエディタ - http://sakura-editor.sourceforge.net/
サクラエディタのデフォルトの文字コードはShift-JISなのでUTF-8に変更します。

FileReopenUTF8(0);

上の内容を記述した jsファイルを新規作成します。
サクラエディタを開き、設定＞共通設定＞マクロで、
参照ボタンを押して先程の jsファイルの存在するフォルダを指定し、
下のFileのプルダウンメニューから jsファイルを指定します。
その下の自動実行の「新規/開ファイル後」にチェックを入れて設定ボタンを押しましょう。

以上で設定は完了です。
次からは新規作成字サクラエディタを開いた時にデフォルトでUTF-8で開いてくれます。
(※元々UTF-8でないファイルを開くとUTF-8として開かれて一部文字化けするので注意)