sblmtxt2misc

導入編:Sublime Text 2を使いやすくする4つのステップ

2012年8月28日に書いた、以前のブログからの引用です。
また、2013年5月にURLが変更になっています。

今回は導入編です!

※「4つ」と書いていますが、かなり長編です。ご注意ください

また、私自身がまだSublime Text 2を使い始めて1週間ほどですので、設定方法に間違いなどがあるかもしれません。

Sublime Text 2 関連の記事では、Macのものが充実しているようなので、今回はWindows向けな内容にさせていただきます。MacとWinとで同じ環境にできます。

目次

  1. Package Controlをインストール
  2. UIを調整する
  3. 機能を追加する
  4. SublimeLinterの設定をする

Package Controlをインストール

まずSublime Text 2を起動したら、拡張機能を管理しやすくするために先ずはパッケージコントロールをインストールします。Ctrl + `を押してコンソール画面を表示し、以下の呪文を入力しましょう。
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'

sublime001

入力する場所は上の画像を参照ください。

これでパッケージコントロールがインストールされます!たったこれだけです。画像のSublime Text 2が黒かったり、グリッド表示されているのは、次項で!

UIを調整する

先ずは自分好みのカラースキームに変更しましょう!
Preferences → Color Scheme」から、変更できます。

私は、長時間作業する場合に背景が暗い色であった方がいいのでサイドカラムの色も変更しています。ちなみにこちらの「Soda Theme」を使用しています。
こちらを例にして、さっそく導入してみましょう!

先ずは、前項でインストールしたパッケージコントロールを起動します。
Ctrl + Shift + P」を押します。

sublime002

上記の画像にあるように、先ず出てきたダイアログにinstallと入力し、Enter。その後、「Theme」と入力するといくつも出てくるので、その中から「Theme – Soda」を選択します。

これで、インストールされました。
簡単ですね!

次は、これを適用しましょう。
Preferences → Settings – User
を選択します。すると Preferences.sublime-settings というファイルが開いたと思います。そこに

と入力。その後、SublimeText2を再起動すればテーマが適用されます。カラースキームはその場で反映されますが、テーマは再起動が必要なので、ご注意。

サイドカラムを使う

先ず「View → Side Bar → Show Side Bar」でサイドカラムが表示されます。

次に、カラム表示やグリッド表示にする場合は「View → Layout」から選択します。

Dwのファイルリストをサイドカラムに表示させることも可能です。
サイドカラムにフォルダをスポッとドラッグしてあげれば、それだけで FOLDERS という項目が追加され、リストが表示されます。

また、カラム間の表示ファイルは GROUP の項目で一目で分かるようになっています。

機能を追加する

見た目から入っちゃいましたが、そろそろ機能を追加していきます。
先ほどのテーマインストールと同じように、パッケージコントロールから全て可能です。「Ctrl + Shift + P」を押して「 install 」と入力してEnter。
そのあと、目的のパッケージをインストールします。試しにCSSスニペットをインストールしてみましょう!「 CSS 」と入力してみます。出てきたリストの中から「 CSS Snipets 」を選択しましょう!
sublime003

これだけで、CSSのコードヒントが表示されるようになります!

よっしゃー!これで便利になったぞー!
…と思いきや、これだけだとCSS3が表示されませんでした(`;ω;´)

しかし、パッケージコントロールからは見つけることができず…
で、困ったときのグーグル先生に聞いてみたらありました!

Sublime-Text-2-CSS3-Snippets

ここからダウンロードしたら、手動で追加します。
パッケージが格納されているフォルダはWindows7の場合
ドライブ:\Users\ユーザー名\AppData\Roaming\Sublime Text 2\Packages
にありますので、ここにフォルダごと解凍してあげます。その後、SublimeText2を再起動しましょう。

そしてCSS3を入力しようとすると…
sublime004
ちゃんと表示されてますね!

こんな感じで、自分好みにどんどんパッケージを追加していきます!
私が追加したパッケージは

  • HTML・HTML5
  • CSS・CSS3
  • jQuery・jQuery Mobile
  • Local History
  • Lorem Ipsum
  • PHP Unit
  • SFTP
  • SideBarEnhancements
  • SublimeLinter
  • TrailingSpaces
  • ZenCoding

です!

軽い補足として…

Local History

こちらはファイルの履歴管理が可能になります。
ロールバックすることができるようになるので、いざとなったときのデバッグに便利ですね!

Lorem Ipsum

こちらは英語のダミー文をパッと入力することができるようになります。サンプルテキストを流し込みたいときに便利ですね!

SideBarEnhancements

こちらはサイドバーの機能を拡張することができるパッケージ。
ひとまず入れておいて損はないかと思います!

TrailingSpaces

こちらは、コード中の余分なスペースを色つきで表示してくれます。
インストール後に「Settings – User」に

と入力してあげましょう!

ZenCoding

言わずと知れたZenCoding。
SublimeText2でも問題なく使えちゃいます!
知らない!っていう方は、ぜひ調べてみてください!一度使えば、コーディングの際に無くてはならない存在になります(`・ω・´)

SublimeLinter

わざと最後に回した、このパッケージ。
こちらは、コードエラーを表示してくれるパッケージなのですが、インストールするだけではまだ使えません。色んな言語でも動作するように準備や設定が必要になってきます。

これについては、次項で!

SublimeLinterの設定をする

この設定がちょっと簡単じゃないかもしれません。
まず、ローカルに「Node.js」というものをインストールする必要があります。

Node.js

Node.js」とはいわゆるサーバサイドJavascriptで、「イベントループ」と呼ばれるアーキテクチャを用いて、非同期処理を行います。

…だそうです。
もっと勉強します(`;ω;´)

でも昨今、よく見かける技術です。
LESSなどをコンパイルする際にも使用されていますね。

インストールを終えたら、コマンドプロンプトを管理者権限で実行します。そこで node -v と入力してみましょう。
sublime005
こんな感じに、バージョンが表示されましたか?

なお、これで一緒に「 npm 」という、Node.js用のパッケージマネージャも同梱されています。

これを使い、JShintをインストールします。
前回と同じく、コマンドプロンプトで行います。

コマンドプロンプトを管理者権限で起動したら
npm install -g jshint
と入力します。実際の画面は下記の画像
sublime006

これで、Enterを押せば
sublime007

ここまでの設定で、Sublime Text 2上ではJavascriptのバリデーション(エラーのチェック)が出来るようになっています!試しにやってみると…
sublime008
こんな感じ!エラー部分にマークがつくようになりました!

もし「これと同じような表示にならないよー」って方は

Preferences → Package Settings → SublimeLinter → Settings Default

を開き、

上記にもあるように、それぞれ「false」を true に変えましょう!

しかし、環境によっては初期設定のままではPHPのバリデーションが動かないかもしれません。

というのは PHPのPATH がWindowsの環境変数に設定されていないためにPHPモジュールが呼び出されず、このようなことが起こっています。

PHPバリデーションが動かない方は「システムの詳細設定」を確認してみてください。

「システムの詳細設定」の確認方法

  1. スタートメニューを開く
  2. コンピューター」を右クリック
  3. プロパティ」を選択
  4. 左メニューの「システムの詳細設定」をクリックすると「システムのプロパティ」というウィンドウが開かれます。
    そして
  5. 詳細設定」タブをクリック
  6. 環境変数」をクリック
  7. システムの環境変数項の中にある「Path」を編集
  8. 「php.exe」のあるディレクトリまでのパスを追加する

sublime009
実際の画面はこんな感じ!
私の場合は、Eドライブに「XAMPP」がインストールされています。なので、ディレクトリまでのパスは

e:\xampp\php

となります。「php.exe」までは入れません。また、ディレクトリパスの直前に「;(セミコロン)」を必ず付け忘れないようにしてください。

PHPのパスが通っているかの確認

ここまでの作業が正常に行われていれば、先ほどのNode.jsのバージョンを確認したようにコマンドプロンプトを再び起動し

php -v

と入力すれば
sublime010
上記のように、PHPのバージョンが表示されるはずです!

ここまでくればもう安心!
さっそくSublime Text 2を起動してPHPバリデーションを見てみましょう!

sublime011

…(`;ω;´)

Ctrl + ` 」でコンソールログを確認してみます。

sublime012
どうやら、PHPは読み込まれている様子。でもなぜかモジュールが呼び出されていない。PHPのフォルダ内を確認してみても、エラーが出ているファイルは全て存在するっていう…。

で、しばらく考えてみたんですが、あることに気がつきました。
さきほどのエラー画面なんですが、ドライブパスだけが省略されているんですよねー…
sublime013
環境変数には書いたのになんでだろう(`;ω;´)

※ここからは正攻法じゃないと思います

「じゃぁ試しにCドライブ(システムドライブ)に、モジュールだけコピーしてみよ!」とダメ元でやってみました。
C:\xampp\php
このように、C直下にファイルを置いてみたら…

sublime014
なんとか動きました-!

違うドライブがうまく参照できてなかったみたい…なんでだろう?

一先ず、これでPHPの開発環境の準備が出来上がりました。
この方法以外にも、色んなパッケージもあってバリデーションを違う手法でチェックするものもあるのですが、私はこの「SublimeLinter」での方法が一番効率的に感じたので、こちらを紹介させていただきました。もし他にも、こんなのがあるよー!って方がいらっしゃいましたらコメントかTwitterの方で教えていただけると嬉しいです!


最後に

以上で導入編も終わりとなりますが、前回記事でも書かせていただいたように、昨今色んなIDEがあります。Netbeansなども有名ですね。他のソフトのこんなところがオススメ!なお話を見かけたら、バシバシ導入して生産性の向上に努めたいものですね!

長くなりました。
良きクリエイティブライフを!!

(¦3[▓]

12 thoughts on “導入編:Sublime Text 2を使いやすくする4つのステップ