読者です 読者をやめる 読者になる 読者になる

Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

Sublime Text 2 のインストールに関する覚書

Sublime Text 2 は大変強力なエディタでウェブ制作界隈では非常に有名なエディタです。 デフォルトで備わっている機能だけでも強力な編集機能があります。 パッケージと呼ばれるプラグインをインストールすることにより、HTML や CSS の入力補完する機能を追加したり、Sass や Compass と言った CSS フレームワーク機能なども利用することができます。

この度、新しい MacBook Pro に入れ直さないといけなかったので1からやり直しましたが、久しぶりにセットアップすると分からないことがたくさんあって大変でした。 自分のための作業の覚書を残しておこうと思います。

「Sublime Text 2」は次からダウンロードします。 http://www.sublimetext.com/2

基本英語版なのでまず、日本語化するプロセスから。

1. Sublime Text 2 の日本語化

インストールされた Sublime Text 2 を日本語化する場合ある2つの設定ファイルを書き換える必要があります。 私は Mac 版なのでここにメモしておきますが、Windows 版の方はリンク先を参考にしておいてください。

なお、Mac の場合、処理するファイルは隠しディレクトリーとなっており、ユーザフォルダー以下になっています。

User / ライブラリ / Application Support / Sublime Text2 / Packages / Default

ここの階層にある、「Main.sublime-menu」「Context.sublime-menu」をバックアップをとってから、次の URL からダウンロードした同じファイルで上書きしてください。 それだけで日本語化されます。 英語表記のままでいい人はここは読み飛ばしてください。

次のサイトにアクセスして「Context.sublime-menu」をまず見つけてダウンロードしてください。 Windows アプリケーションと書いてありますが、Mac でも使えます。

【Windowsアプリケーション】Sublime Text 2 メニュー日本語化: ゆーがいぶろぐ http://blog.huwy.org/article/292827228.html

「Main.sublime-menu」ファイルだけは ページ下の改訂履歴の2013/04/16版に書かれているモノがおそらく最新版のようです。「https://docs.google.com/file/d/0B_dAu5x064QTVm12dXJGMzNScmc/edit?usp=sharing」からダウンロードしたモノで「Main.sublime-menu」を上書きしてください。

2. PackageControl をインストール

次に Sublime Text 2 を強化するために PackageControl をインストルします。 これをインストールすると、様々なパッケージ(プラグイン)がインストールできるようになり HTML や CSS のコーディングの効率化がはかれます。

[view] → [ShowConsole(表示 → コンソール)] の一番下に次のコードをコピペして「Enter」 Sublime Text 2 を再起動する。

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')

3. パッケージのインストール方法

次のコマンドを入力して、パッケージの検索モードにします。 「shift」+「command」+「p」で表示されるランチャーで『Package Controll: Install Packag』を検索して、「Enter」キー。

-- 追加パッケージ例 -- 例としてEmmet (旧 Zen-Coding)をインストールしてみます。 検索ボックス欄に「emmet」と入力すると「Emmet」が絞り込まれて表示されるのでそれを選びます。

ちなみに Emmet は、html などの入力を補完してくれます。例えば、「 html:5 」や「 ul>li*5 」などと入力して、「control + E」をすると、然るべき HTML が書き出されます。

「html:5」+「control + E」 の場合

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

「ul>li*5」+「control + E」 の場合

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

4. Emmet の書き出す文字情報を書き換える

しかし、Emmet で「html:5」を実行した場合は、言語設定が「英語(en)」のままのため毎回日本語の設定「ja」に書き直すのも面倒ですよね。 そこで Emmet の設定ファイルを書き直しておきます。

新規テキスト ドキュメント (128).txt: Sublime Text 2 : Emmet プラグインが出力する HTML の言語を修正する http://128txt.blogspot.jp/2012/12/sublime-text-2-emmet-html.html

Emmet プラグインをインストールしたら、メニューから [Sublime Text 2] → [Preferences] → [Package Settings] → [Emmet] → [Settings - User] と辿って、ユーザ設定ファイルを開きます。

開いたら、4, 5行目の言語設定を以下の通り日本語に修正入力して保存してください。

{
     "snippets": {
          "variables": {
               "lang": "ja",
               "locale": "ja-JP",
               "charset": "UTF-8",
               "indentation": "t",
               "newline": "n"
          }
     }
}

5. フォントの設定を替えます。

先日やっと追加しましたが、「Ricty」というフリーフォントを追加しました。

これを使うと通常のフォントで見比べにくいモノが次のように見えます。 次のは画像ですが、フォント「Osaka」と「Ricty」というフォントを見比べたものです。

左側が Osaka 右側が Ricty です。 Ricty だと「iIloO0z7」の見分けがつきやすい特徴があるだけでなく、日本語特有の全角スペースが入っているときにも見分けがつきやすいところもとても優れています。 画像の1番下「a b」の間にはそれぞれ全角スペースが入っています。

Sublime Text 2 でのフォントを切り替える場合は次の設定ファイルに次の1行を追加するだけです。 [Sublime Text 2] → [Preference] → [Setting - User(基本設定-ユーザ)]

{
    // フォントの指定
    "font_face": "Ricty Discord Regular",
    // フォントサイズの指定
    "font_size": 14,
     // 停止したいパッケージ
    "ignored_packages":
    [
        "Vintage"
    ]
}

「//」はコメントを表しています。

Sublime Text 2 の使い方参考サイト