Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Sublime Text入門(1)

Sublime Text入門(1)

テキストエディター「Sublime Text」の導入

2014年6月30日

Sublime Textが選ばれている理由とは? バージョン2と3はどちらを使えばよいかや、インストール方法、お勧めの環境設定など、Sublime Textの導入に関するポイントをまとめる。Windows&Mac対応。

okayama-js 前川 昌幸(position: absolute;
  • このエントリーをはてなブックマークに追加

Sublime Textが選ばれている理由

 Sublime Textは、2008年に初版がリリースされ、その後、2011年にリリースされたバージョン2により広く人気が出たテキストエディターである。販売元はオーストラリアのSublime HQ Pty Ltdだ。日本でも2011年の終わりから関心を集め、2012年には主にWeb制作やRubyなどのLL言語を対象にしたブログなどで取り上げられる機会が増え、広く認知されるようになった。また、2014年にはSublime Textを対象にした書籍(『Web制作者のためのSublime Textの教科書』)が発売されるなど現在でも注目を集めている。ちなみに、Sublime Textについて触れられる際に「恋に落ちるテキストエディター」と表現されることがあるが、それはSublime Textのサイトのタイトルタグに書かれている「Some things users love about Sublime Text」からである。

GoogleトレンドによるSublime Textの検索動向
図1.1 GoogleトレンドによるSublime Textの検索動向

2011年の終わりぐらいから関心が集まっていることがうかがえる。また、中国・韓国・インドなどのアジア圏、イギリス・フランス・ドイツなどのヨーロッパ圏でも同様の傾向を示しており、全世界的に関心を集めている。

 このように関心を集めている理由として以下が挙げられている。

  • 強力なテキスト編集機能Sublime Textのサイトの動画にあるような複数選択などのマークアップ・プログラミングにフォーカスしたテキスト編集機能。
  • ソースコードへのアクセスの良さ: 「Goto Anything」機能により、ソースコード内のシンボル/行/ファイルなどへのアクセスだけでなく、プロジェクト内のファイルをまたいだ素早い移動のサポート。
  • カスタマイズ性の高さ: 設定ファイルがJSON形式のファイルを編集する方式で、プログラミングなどを普段行っている利用者には手早く行え、さらに項目もプログラムの動作からショートカットに至るまで多岐に渡っている。また、スニペットなどもファイルで管理する方式なので、共有や移行が容易。さらに、プラグインのためのAPIが公開され、Pythonで機能拡張を作成できる。自分で作成することも可能だが、公式に登録されているさまざまなプラグインパッケージが2014年6月時点で2000を超えており、それらを組み合わせるだけでも強力な環境を自身で構築できる。
  • 対応言語の多さ: インストール時点のデフォルトでActionScript、AppleScript、ASP、batch files、C、C++、C#、Clojure、CSS、D、Diff、 Erlang、Go、Graphviz(DOT)、Groovy、Haskell、HTML、Java、JSP、JavaScript、JSON、LaTeX、Lisp、Lua、Makefiles、Markdown、MATLAB、Objective-C、 OCaml、Perl、PHP、Python、R、Rails、Regular Expressions、reStructuredText、Ruby、Scala、shell scripts(Bash)、SQL、Tcl、Textile、XML、XSの言語をすでにサポートしているが、さらにパッケージを導入することで対応言語を追加できる。例えば、2014年6月2日にアップルが発表したSwiftについても言語パッケージが現地時間の同日中に公式パッケージとしてリリースされている。

 また、筆者自身は、スマートフォンなどの普及によりWebサイト/Webアプリケーションの制作において大きな変化が起きている時期に、注目を集め発展したテキストエディターであることも大きな要因と考えている。近年、いわゆるフロントエンドのトレンドが大きく変化している中で、ツールや求められるテクノロジの変化が激しい時期に、APIが公開され、プラグイン作成などが容易で柔軟性の高いSublime Textが、過去の遺産に引きずられることなくコミュニティの中で発展してきたというのも大きな要因の1つではないだろうか。

バージョン2と3

 2014年6月時点では、公式にリリースされているバージョンは2.0.2であるが、同時に次期バージョンである3ベータもダウンロード可能となっている。バージョン2と3の間では見た目や基本的な機能に大きな違いは見られないが、設定項目の追加や一部機能の強化などが行われている。その他に大きな変化として、プラグインの動作のために搭載しているPythonのバージョンが2から3へと変更されている。このPythonのバージョンの違いは大きく、それぞれのバージョンを対象にしたプラグインがもう一方では動作しないという状況を生み出している。

 そのため、いまだにSublime Textのバージョン3はベータ版であるにもかかわらず、バージョン2への対応を打ち切るプラグインが続出しているという状況がある。

 そのような現状や、ベータ版が大きなバグなどを抱えているといった問題も特に見られないといったことも鑑みて筆者としては、これからSublime Textを利用しようとするのであれば3ベータを選択することをお勧めする。また、この連載も3ベータを前提に解説を行う。

 また、本稿では特に触れないがベータ版とは別に開発バージョンであるDev版というものもある。

ダウンロードとインストール

 特にインストールついては解説する点もないが、本稿では3ベータを前提に解説を行うので、これからインストールするのであれば3ベータのダウンロードページからダウンロードして行う。また、バージョン2と3ベータは別のアプリケーションとしてインストールされるので、2が上書きされることもなければ、同時起動も可能なのでバージョン2を利用している場合も、特に問題なく3ベータの試用は可能である。

 また、Windows版についてはUSBメモリなど外部の記憶デバイスにインストールできるポータブル版も存在する。

Sublime Text3ベータのダウンロードページ
図2.1 Sublime Text3ベータのダウンロードページ

ライセンスについて

 Sublime Textは有料で、2014年6月現在では70米ドルである(Sublime Text3へのアップグレード権も含む)。また、ユーザー単位のライセンスになるので、複数のPC、複数のOSでも1つのライセンスで利用できる。

 ライセンスを購入して登録処理を行うまでは評価利用ができる。これは期間・機能無制限で利用できる。一定のタイミングでライセンス購入のメッセージが表示されるが、それ以外は基本的に利用に支障はない。

ライセンス入力画面
図2.2 ライセンス入力画面ライセンスは購入後、メールで送られてくるので、それをライセンス登録画面にコピー&ペーストする。
購入確認メッセージ
図2.3 購入確認メッセージライセンスを登録していない場合、ファイルの保存時などに一定の割合でこのようなメッセージが表示される。

まず行うこと

 インストールが完了した時点で、シンプルなテキストエディターとして利用可能であるが、より便利に利用できるように下記を押さえておくとよい。

カラースキーマの変更

 デフォルトの状態で利用もできるが、やや文字色と背景色の色が近く、スクリーンショットなどが見づらいため基本的な色構成を変更する。

  • Windows:[Preferences]-[Color Scheme]
  • Mac: [Sublime Text]-[Preferences]-[Color Scheme]

 メニューバーから上記の項目にアクセスすると、デフォルトで利用できる色構成が選択できるので、今回は「Dawn」を選択する。これにより以下のように色構成が変更される。

デフォルトの画面
図3.1 デフォルトの画面
「Dawn」選択後
図3.2 「Dawn」選択後

 カラースキーマやUIパーツなどを変更できるテーマもパッケージとして提供されているので、一通り操作を覚えたら、さらに自分好みにカスタマイズしていくとよいだろう。

環境設定

 前述の通り、Sublime Textの設定はJSON形式の設定ファイルを編集する形で行う。

  • Windows: [Preferences]-[Settings - User]
  • Mac: [Sublime Text]-[Preferences]-[Settings - User](ショートカット: Ctrl.キー)
  • コマンドパレットCtrl(Win)Command(Mac)Shiftpキー -> 「Preferences:Settings - User」を入力して選択

 インストールを行ってすぐの状態では、ここにはコメントのみが記述されている状態だが、上記のカラースキーマの変更を行った状態であれば、カラースキーマの設定のみが記述された状態で開かれる(図4.1)。

カラースキーマのみ設定が記述されている状態のユーザー設定
図4.1 カラースキーマのみ設定が記述されている状態のユーザー設定

 この状態では実際に設定を行うにも、どのように記述すればよいか分からない。

  • Windows: [Preferences]-[Settings - Default]
  • Mac: [Sublime Text]-[Preferences]-[Settings - Default]
  • コマンドパレットCtrl(Win)Command(Mac)Shiftpキー -> 「Preferences:Settings - Default」

 上記のようにして開いたJSONファイルに、デフォルトの状態の設定が全て記述されている(図4.2)。そのファイル内容を確認し、変更する対象の設定を「Settings - User」にコピーなりして上書きする。

図4.2 デフォルトの状態の設定を表示した状態

英語で記述されているが、内容はそれほど難解ではない。また、Web上や書籍などに日本語訳もあるのでそちらを参照してもよい。

 ここでは設定項目について詳しく解説しないが、何点がピックアップして紹介する。

  • font_face: 利用するフォントを指定する。
  • font_size: フォントのサイズを指定する。
  • highlight_line: キャレットが存在する行をハイライトする。

【コラム】設定でのTips

 Ctrl(Win)option(Mac)キーで単語単位の移動が行えるが、Sublime Textのデフォルトの状態では日本語の文章であれば一気に文末まで移動してしまう。句読点やかっこなどで移動を止めたい場合は、word_separatorsに区切りにしたい文字を追加すればよい。

JSON
"word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?<b>。、 ()「」</b>",
リスト1.1 word_separatorsの設定例

他に移動を止めたい文字がある場合は追加する。

Package Controlのインストール

 Sublime Textでプラグインパッケージを導入して利用することは、「前提」と言っても過言ではないが、Sublime Text自体はプラグインパッケージを管理する機能を持っていない。そのため、まずはPackage Controlのインストールを下記の手順で行う。

  1. Installation - Package Controlにアクセスし、表示されているコード(図5.1の選択状態の部分を参照)をコピーする。バージョンでコードが違うので利用しているバージョン向けのコードであることを確認する
Package Conrol導入のために提供されているコード
図5.1 Package Conrol導入のために提供されているコード

必ず、このページのコードを利用すること。

  1. Ctrl(Win)Control(Mac)`キー、またはメニューバーで、[View]-[Show Console]を選択し、コンソールを表示する
  2. 表示されたコンソールの下部にある入力欄にコピーしたコードをペーストし、Enterキーで実行する(図5.2)
図5.2 コンソールにペーストした状態

ペースト後、実行する。

  1. 実行完了後、Sublime Textを再起動する

 インストールが完了すると、コマンドパレットからプラグインパッケージをインストールできるようになり、インストールの際に再起動の必要もなくなる。

パッケージのインストール手順

 それでは、必須パッケージの1つであるSideBarEnhancementsのインストールを行う手順を紹介する。同様の手順で他のパッケージ(後述の「Japanize」や「IMESupport」)もインストールが可能だ。

  1. Ctrl(Win)Command(Mac)Shiftpキーでコマンドパレットを呼び出し、「install」と入力すると「Package Control: Install Package」が表示されるので選択する(図5.3)
コマンドパレットで「Package Control: Install Package」を呼び出す
図5.3 コマンドパレットで「Package Control: Install Package」を呼び出す
  1. しばらくすると(公式パッケージのリストの読み込みを行っている)、パネルが表示されるので、「sidebar」など打ち込むと「SideBarEnhancements」が表示されるので、選択する(図5.4)
  2. インストールが開始される。
「SideBarEnhancements」をインストールする
図5.4 「SideBarEnhancements」をインストールする
  1. インストール完了後、サイドバーが左側に自動的に表示され、[FOLDERS]の配下にファイル一覧が表示されるので、任意のファイル項目を右クリックしてみよう。するとコンテキストメニューが増えており、SideBarEnhancementsパッケージが反映されているのが確認できる。
インストール後のサイドバーのコンテキストメニュー
図5.5 インストール後のサイドバーのコンテキストメニュー

サイドバーでのコンテキストメニューの内容が変わっている。

日本語環境の設定

 Sublime Textを日本語環境で利用するには、何点か注意するポイントがある。まず、メニューなどが英語で表示されているが、他言語化は行われていないので、メニューを日本語化したい場合は、sublimetext_japanizeというパッケージを導入し(Package)、リンク先の手順を行う。次の画面は日本語化した画面の表示例である。

メニューの日本語化を行った状態
図6.1 メニューの日本語化を行った状態

Sublime Text 3で変更されたメニューに関しては日本語化されていない。

 ただし、追加するパッケージなどのメニューは日本語化されない。また、利用法などを検索した場合には英語メニューを前提とした解説が行われていることがほとんどなので、メニューの日本語化を行わずに利用しているユーザーは多い(筆者もメニューの日本語化は行っていない)。

 また、文字コードはUTF-8のみの対応となっているので、ConvertToUTF8パッケージをインストールすることで、EUCやShift-JISといったエンコードに対応できるようになる。ただし、Macに関してはCodecs33パッケージを別途インストールする必要がある。

Windows固有の設定

 Windowsでは日本語入力時にインラインでIMEが利用できないという問題がある(図7.1)。

日本語がインラインで入力できない状態
図7.1 日本語がインラインで入力できない状態

 それではテキストエディターとして非常に利用しづらいので、IMESupportを導入する(図7.2が導入後の例)。疑似的なインライン入力なので、完全ではないが、テキストエディターとして大きな支障のない形で利用できるようになる。ただし、位置ずれなどが起きる可能性があるので、その点は留意した上で利用すること。

IMESupport導入後の状態
図7.2 IMESupport導入後の状態

まず導入しておくパッケージ

 前述したパッケージの他に、導入をお勧めするパッケージを紹介する。利用の際に対象とする言語や環境などでさまざまなパッケージを利用することになるが、ここで挙げたパッケージはどのような用途でも有用だろう。

  • SublimeCodeIntel: コード入力時の補完機能などの強化パッケージ
  • BracketHighlighter: ブラケット(=< >のような角かっこ)類のハイライトを行う
  • Terminal: CLI(コマンドライン・インターフェース)を作業中のファイルの位置で開く

 次回はSublime Textの基本的な使い方について説明する。

Sublime Text入門(1)
1. 【現在、表示中】≫ テキストエディター「Sublime Text」の導入

Sublime Textが選ばれている理由とは? バージョン2と3はどちらを使えばよいかや、インストール方法、お勧めの環境設定など、Sublime Textの導入に関するポイントをまとめる。Windows&Mac対応。

Sublime Text入門(1)
2. プログラミングやマークアップで特に役立つ、Sublime Textの標準機能

Sublime Textでは、一般的なテキストエディター機能に加えて、プログラミングやマークアップに有効な機能も提供されている。その中でも特に便利な機能をピックアップして紹介する。

Sublime Text入門(1)
3. 特におすすめしたい、Sublime Textのパッケージ

Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化/無効化、削除の方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!