Scala + sbt + Sublime Text で 始める Play2

インストール

Homebrew で scala, sbt, play をインストール

$ brew install scala
$ brew install sbt
$ brew install play

$ scala -version
Scala code runner version 2.11.1 -- Copyright 2002-2013, LAMP/EPFL
$ sbt --version
sbt launcher version 0.13.5
$ play
[info] Loading global plugins from /Users/ssl001/.sbt/0.13/plugins
[info] Loading project definition from /Users/ssl001/Documents/workspace_play/hello-play/project
[info] Set current project to hello-play (in build file:/Users/ssl001/Documents/workspace_play/hello-play/)
           _
     _ __ | | __ _ _  _
    | '_ \| |/ _' | || |
    |  __/|_|\____|\__ /
    |_|            |__/

play 2.2.3 built with Scala 2.10.3 (running Java 1.6.0_65), http://www.playframework.com

Sublime Text 3 で sublimescala/sublime-ensime をインストール

Cmd+Shift+P -> Package Control: Install Package

Ensime

ENSIME Server (ensime/ensime-src)をインストール

Download releases

$ cd ~/Library/Application Support/Sublime Text 3/Packages/Ensime
$ mkdir Server
$ mv ~/Downloads/ensime_2.10.0-0.9.8.9/* Server

sbt に Ensime プラグイン(ensime/ensime-sbt-cmd)を追加

~/.sbt/0.13/plugins/plugin.sbt に以下を追加(ファイルがなければ作成)

addSbtPlugin("org.ensime" % "ensime-sbt-cmd" % "0.1.2")

sbtコマンドによる.ensimeファイルの作成

$ play new hello-play
$ cd hello-play
$ sbt
> ensime generate

以降、Sublime Text で Cmd+Shift+P -> Ensime: startup で補完が効くようになる

Sublime Text 3 で guillaumebort/play2-sublimetext2 をインストール

Cmd+Shift+P -> Package Control: Install Package

Play 2.0

Sublime Text 3 で jarhart/SublimeSBT をインストール

Cmd+Shift+P -> Package Control: Install Package

SublimeSBT

実行

Cmd+Shift+P -> SBT: Run

参考

最強!?Ensimeを利用したSublime Text3のScala開発環境(playでもliftでも) - Qiita
PANAXIOM — Sublime Text 2 with SBT and Play 2

感想

sublime-ensime と SublimeSBT の開発が止まっていてな…
快適とは言い難いので他の IDE を使った方が良いと思うんだ。

[SublimeText] Sublime Text 3 の検索で日本語をエンターすると文字が消えるのを防ぐ

Sublime Text で地味に困るのが検索窓に日本語を入力した時。
エンターを押した瞬間、入力した文字が消えるので全然検索ができない。
ずっと困ったまま放置していたんだけど
たまたま Twitter で解決方法が流れてきたのでメモ。

参考

Sublime Textの検索窓に日本語を入力する方法
Sublime Text 3 で日本語を検索したとき文字が消える不具合を直す - MEMOGRAPHIX

キーマップを変更してエンターで動作しないようにする

参考元ではコメントアウトされていましたが使えないのは面倒なので
ctrl + enter に全て置き換えました。

// Find panel key bindings
{ "keys": ["ctrl+enter"], "command": "find_next", "context":
    [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},
{ "keys": ["shift+enter"], "command": "find_prev", "context":
    [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},
{ "keys": ["alt+enter"], "command": "find_all", "args": {"close_panel": true},
     "context": [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},

// Replace panel key bindings
{ "keys": ["ctrl+enter"], "command": "find_next", "context":
    [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
},
{ "keys": ["shift+enter"], "command": "find_prev", "context":
    [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
},
{ "keys": ["alt+enter"], "command": "find_all", "args": {"close_panel": true},
    "context": [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
},
{ "keys": ["ctrl+alt+enter"], "command": "replace_all", "args": {"close_panel": true},
     "context": [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
},

// Incremental find panel key bindings
{ "keys": ["ctrl+enter"], "command": "hide_panel", "context":
    [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
},
{ "keys": ["shift+enter"], "command": "find_prev", "context":
    [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
},
{ "keys": ["alt+enter"], "command": "find_all", "args": {"close_panel": true},
    "context": [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
},

SublimeText3で行頭・行末に移動するキーボードショートカット

Sublime Text 3 に移行したのですが、Sublime Text 2 でできていた
Command + ← で行頭に移動、
Command + → で行末に移動ができなくなっていました。
調べてみると Sublime Text 2 でも以下のページのように設定が必要だったみたいです。
Bruno "Clef" : Sublime Text 2 - End and Begin of Line in Mac OS
設定して記事を書いていなかったから設定したことすら忘れていました。
ということで覚え書きです。

Sublime Text 3 では上記のページの記述とは少し異なっていて以下のように記述します。

[
    { "keys": ["super+right"], "command": "move_to", "args": { "to": "hardeol" } },
    { "keys": ["super+left"], "command": "move_to", "args": { "to": "hardbol" } }
]

moveto が move_to になったみたいです。
以上です。

[SublimeText]ステータスバーに改行コードを表示する

久々の Sublime Text 2 についての記事です。
Chrome のタブがタスクな僕は ST2 についてのページがタブに溜まっていたのだけど
Chrome を一回閉じなくてはいけなくなったので Twitter のお気に入りに退避したら
見事に開かなくなった系男子です。

今回は前から思っていた Sublime Text 2 で改行コードが確認できない、
変更できない(←調べてないだけ)問題を解決する記事が流れてきていたので
参考にしてパッケージを入れて解決しました。
参考: Sublime Text 2 でステータスバーに改行コードを表示する // understandard

titoBouzout/LineEndings · GitHub を Package Control でインストールするだけ。
これだけで以下のことができる。

• ステータスバーに改行コードを表示する
• コマンドパレットから改行コードを変更する
• ステータスバーのタブサイズのメニューから改行コードを変更する
• 想定しない改行コードだった時にアラートを表示する
• 現在のウインドウのすべてのビューについてインデントをスペースかタブに変更する
• 現在のウインドウのすべてのビューについて改行コードを変更する
• ファイルを開いた際に自動で改行コードを変更する(※保存はしない)

便利ですね。

[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

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

CSSの展開

HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、
ショートハンド(速記)でスニペットや自動補完を助けてくれます。
それによってCSSでも爆速コーディングが実現可能です。
例えば、m と打って展開すれば margin: ; となるので後は 10px と打てばいいのです。
また、m10 と打って展開すれば margin: 10px; と展開されます。
複数の値を指定したい場合は m10-20 のように
ハイフン区切りで入力することで margin: 10px 20px; と展開出来ます。
マイナスのマージンを指定する場合は m-10 と打てば margin: -10px; と展開出来ます。
複数の値でマイナスを含む場合は m10--20 のようにすれば
ハイフンとマイナスを自動判定して margin: 10px -20px; のように展開してくれます。

単位補完

値から単位を補完してくれます。
整数ならpx(m10 → margin: 10px;)、
少数ならem(m1.5 → margin: 1.5em;)が補完されます。
単位にはそれぞれエイリアスがあり、p → %, e → em, x → ex, r → rem で変換されます。
m10p20e30e40r なら margin: 10% 20em 30ex 40rem; となります。
px以外は複数の値を区切るハイフンは不要です。つけてしまうとマイナスになってしまいます。

z-index, line-height, opacity, font-weight は単位が要らないプロパティなので
単位なしで展開されます。
設定で css.unitlessProperties を上書きすることで動作を変更することができます。
詳しくは preferences.json | Emmet Documentation を見てください。

色コード展開

シャープの後の16進数の文字の長さによって展開のされ方が変わります。
例

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

初期設定では自動短縮されるようになっているので #ffcc00 は #fc0 になってしまいます。
Sublime Text 2では設定で以下のように設定すれば自動短縮を無効に出来ます。

"preferences": {
    "css.color.short": false
}

詳しくは preferences.json | Emmet Documentation を見てください。

!important

!をつけることで !important を補完することができます。

m10! → margin: 10px !important;

その他にも大量の補完が存在し、全てを紹介することはできないので
各自で emmet-sublime/emmet/snippets.json at master · sergeche/emmet-sublime · GitHub を確認してください。
結構想像がつくようなものばかりなので暗記しなくてはいけないようなものではないです。
あるかな？ぐらいの気持ちで展開すると良い感じに展開してくれます。

ベンダープレフィックスの補完

CSSの新機能を使用する際には各ブラウザが独自の実装をしている場合、
それぞれベンダープレフィックスというものを付けなければいけません。
Emmet ではハイフンを付けて展開することで自動でベンダープレフィックスを補完してくれます。

-bdrs

-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;

Sublime Text 2 だとパイプの位置にカーソルが合うので入力しやすいです。
もちろん -bdrs4 とすれば 4px まで補完されます。

ベンダープレフィックスの説明には border-radius がよく使われるけど
border-radius はもうベンダープレフィックスいらないのに何故でしょう…？

もっと詳しくは Vendor prefixes | Emmet Documentation から。

Gradients

長ったらしい background-image: linear-gradient をベンダープレフィックス付きで展開してくれます。

lg(left, blue, red)

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), to(red));
background-image: -webkit-linear-gradient(left, blue, red);
background-image: -moz-linear-gradient(left, blue, red);
background-image: -o-linear-gradient(left, blue, red);
background-image: linear-gradient(left, blue, red);

W3C の linear-gradient は to キーワードが必要です(でした？)。
CSS Image Values and Replaced Content Module Level 3
Gradients | Emmet Documentationによると W3C spec では to キーワードが要らなくなったみたいです。
(※ソースどこ？知ってる人教えて下さい。)

Emmet の lg() もそれに対応しています。が、それによってドキュメントのデモがバグってしまっています。
展開後のカラーを一つ変えて展開すると他のカラーも同様に変わるというデモだったのですが、
バグって動かないので Try it yourself で試してみてください。
そして Sublime Text 2 の Emmet でも動きません。
うん。linear-gradient めんどくさい。使うのやめよう。

Fuzzy search

良い感じに展開してやるからチートシート見とけ。(超訳)
by Fuzzy search | Emmet Documentation

さいごに

前回の記事：[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

前回の記事からだいぶ期間が空いたけど面倒くさかったとかそういうことはない。
決してそんなわけではない。
あと、最後めんどくさくなったとかそんなこともない。
Gradients がバグってて萎えたとかそんなことはない。

次はたぶんActions | Emmet Documentation をまとめる。

[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を取ったものでした。
これから色々使ってみようと思います！