eyecatch_st2

sublimeかわいいよsublime(;´Д`)【Sublime Textの(初期)設定環境を晒す】

最近周りで禁煙者が増加していることより、今月からショートホープのパッケージデザインが変わったことの方が微妙な心持ちのショートホープです。

Web制作の仕事をしているならば、何かしら「エディタ」を利用していることと思う。最近かなりのシェアで利用されていると思われるのがSublime Textだ。動作が軽い、便利機能がてんこ盛り、パッケージをインストールしてさらなる機能追加が容易で拡張性に富む、などメリットは大きい。MacとWinどちらでも使えることを知って飛びついたが、実はショートカットのキーの組み合わせが全く違っていた(´・ω・`)

調べてみたらもう1年半以上使っていた(使い始めたのはこの勉強会に参加した日から)ものの、最初にあれこれ設定したあとはほぼその設定のまま来てしまっていたので、ここらでちょっと自分の設定を見直しがてら使っている設定状況を晒してみようと思う。


2015.1.16 追記

この記事のSublime Text3版の追記として、Re: sublimeかわいいよsublime(;´Д`)【Sublime Textの(初期)設定環境を晒す】を公開しているので参照されたし。


最初に簡単にインストールから使いはじめるまでの流れなど。

インストール

このへんは既に相当数のブログで紹介されているからさらっとおさらい程度に。

なにはともあれ、まずSublime Textのサイトにアクセス。

st2_page

現在の最新版はSublime Text2.0.2とある。Sublime Text3もDLできるがβ版との表記。この記事を執筆している時点ではビルド3059が最新のようだ。3のほうがさらにサクサク走って快適という声もあるが、僕自身は発表直後にDLして少し触ったきりで、メインではまだSublime Text「2」を使っている。ちなみに3は別アプリとして同時起動可能なので両刀使いにもなれる。てか、発表されてからもうだいぶ経つはずだがなんで未だにβ版…?

st2_dl

ダウンロードページに移動したら、「Download」と表示されているすぐ下の、各OSごとのリンクをクリックする。Mac、Win、LinuxいずれもここからDLする。自分がアクセスした機種に適合するものはOS名の前の○が●になっているはず。Macなら.dmg、WinならSetup.exeがDLされるのでダブルクリック。

まず起動する。真っ黒のそっけない起動画面。

st2_firstview

ちなみに無料でも使用することは可能だが、たまに「登録して!」っていうアラートが出る。お小遣いで買える程度の金額なので、もし気に入ったなら是非購入して今後の開発費の援助をしよう。

『Package Control』

何よりもまず一番最初にすること。


2015.1.16 追記

下記の手順で作業をしようという方へ。現時点では自動でリダイレクトするので気にする必要はないのだが念のため。『Package Control』のサイトのURLが https://packagecontrol.io に変更になったのに伴い、インストールのページのURLも現在は https://packagecontrol.io/installation となっている。


https://sublime.wbond.net/installationをブラウザで開き、

st2_package_control

↑のタブでSublime text2か3を選んでコマンドをコピー。

st2_commandcopy

Sublime Textに戻ったらメニューの「View > Show Console」(ショートカットは【ctrl+`】)でコンソールを開いて、

st2_command

先ほどコピーしたコマンドをそのままペーストして【enter】。

st2_command_enter

コンソールがこんな表示

st2_commandrun

になったらインストール完了なのでSublime Textをいったん再起動する。

これまでSublime Textを解説しているブログ記事などでもほぼ必ず、まず最初にこの『Package Control』のインストールが説明されている。ここまでは何も考えずに一番最初の起動手順の一つとしてやっておくといい。

初期設定

そっけない起動画面をまず少し使いやすく設定。

サイドバー表示

「View > Side Bar > Show Open Files」をクリックしてサイドバーを表示させる。

st2_sidebar

例えばフォルダごとサイドバーに放りこめばフォルダがまるごとプロジェクトとして認識される。ファイルを開く際にいちいちFinderと行ったり来たりする必要は一切ない。

画面分割

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

st2_column

HTML/CSSコーディングなんかは2画面分割にしといて該当部をそれぞれで表示させると捗る。

st2_twocolumn

複数カラム表示の場合でのフォーカス移動は【cmd(ctrl) + 1 / + 2】。1で左、2で右にフォーカスが移るが、テンキーは無効ぽいのでメインのキーボード上の数字キーで。

ちなみに、スクショで分かる通りプルダウンにはそれぞれショートカットのキーが表示してあるのでよく使うコマンドを覚えておくと便利。

超強力なコマンド管理ツール『Command Palette』

ここからは最初にインストールした『Package Control』を使う。そしてこれから大活躍するのが『Package Control』でインストールされる『Command Palette』。

st2_commandpallet

これを起動するショートカットは【cmd(Winはctrl) + Shift + p】。大概のことはここからできてしまう。

例えば機能を追加したいからプラグインを入れたいってときは【cmd(ctrl) + Shift + p】で『Command Palette』を開いてキーワード(この場合は「install」)を入力していくとどんどん候補が表示されていく。

st2_packageinstall

この例ではキーワードの「inst」まで入力したら「Package Control:Install Package」がハイライトされているので【enter】。ちょっと待つと以下の画像のようにインストールできるパッケージが表示されるのでまたキーワードを入力していく…の繰り返し。これだけww

st2_scheme

例えば「Sass」のプラグインを入れたいと思ったらこんな感じで候補があれやこれやと出てくる、という次第。

st2_sass

また、学習機能も強力。いったん『Command Palette』を閉じて、また最初から『Command Palette』から何かインストールしようとすると、「in」とか「ins」あたりでもう「Package Control:Install Package」がショートホープハイライトされる。楽ちん。

テーマ

早速『Command Palette』で「Package Control:Install Package」に進む。「theme」と入れてみると「Theme – ◯◯」というファイルがいくつもヒットする。

st2_theme

簡単に言うとこれが全体の色味を変えるもの。今回のスクリーンショットは僕の環境なので黒ベースの地味なものばかりだが、中には白ベースの明るいテーマもある。いろいろ試して自分が好きなものを使うのが吉。ここは機能に影響するところではないが、気分も変わるし気に入ったものが一番。

『Package Control』からテーマをインストールしたら、これを認識させるためにちょいと一手間。Macなら「Sublime Text2 > Preferences > Settings – User」、Winなら「Preferences > Settings – User」を開く。

最初の状態ではカラなのでただの真っ黒い画面だと思うが、ここに以下のコードをコピペして「◯◯◯」の部分を先ほどインストールしたテーマ名に変更する。

テーマ名を自分の選んだものに合わせて修正したものを記述し、再起動すればテーマが認識される。

昨日までよくわかっていなかったのだが、どうも上記手順は「一番最初にテーマを変える時だけSettings -Userに書かなきゃいけない」ということのようだ。テーマをインストール後にメニューの「(MacはSublime Text2 > )Preferences > Color Scheme」からいまインストールしたテーマが選択可能になっていたら、それを選ぶだけで当該テーマが適用された。ここはちょっと確実ではないので要検証。テーマによって違う、あるいはPackage Control経由でインストールしたら違う、ということかもしれない。教えてエロいひと!

カラースキーム

これはソースコードのカラーリングを変えられるもの。普段どんな言語を使ってるかによっても違うと思うので、これも好みで。テーマのインストールとセットになったカラースキームもあるし、同じように『Command Palette』からも入れられるが、カラースキームはもともとSublime Text本体にもいろいろプリインストールされてるのでそこから選べば早い。メニューの「(MacはSublime Text2 > )Preferences > Color Scheme」から選択可能。いま見たら色々スキームも増えてるからきっともっといいものもあると思うが、僕はMonokai Brightという定番スキームのphpの部分のカラーリングだけ変えたオレオレスキームを使っている。ちょいと僕の設定を晒しておく…と思ってソースを貼ってみたら超長かったorz リンクだけにしておくので、興味があったら覗いてみてほしい。

Monokai Bright Modified.tmTheme

こんな感じでオレオレ環境を簡単に用意できるところも面白い。ちなみに独自のカラースキームを追加する場合は、Macなら[ユーザ/(ユーザ名)/ライブラリ/Apprication Support/Sublime Text2/Packages/User]、Winなら[user/AppData/Roaming/Sublime Text2/Packages/User]まで掘って、テーマファイル(先程の僕の例ならば『Monokai Bright Modified.tmTheme』ファイル)をペーストして、テーマの場合と同様にPrefereces.sublime-setting – Userに追記する。スキーム名を自分の選んだものに合わせるのは先程のテーマと同じ。

両方書いたらこんな↑感じ。ちなみに.jsonファイルとして記述しているが、他のファイルも含めカラーリングのために便宜上.jsonファイルなどとして記述しているので、実際Sublime Textに記述するときはそれぞれのファイルの拡張子(?)に合わせることをお間違いなく。

この流れで、いま僕のPrefereces.sublime-setting – Userに書いてあるものを晒す。もしかしたら最新の環境では動かない、なんてのがあるかもしれないので、使ってみたいと思う記述があったら念のためググってみることをオススメする(他力本願

ちなみにMacとWinで若干設定が違っているが、主なところはフォント程度。Inconsolata LoveなのでMac、WinどちらもInconsolataを使っている。Macの「Ricty」というのはInconsolataとMigu 1Mの合成フォント。Winでも入れようと思ってたのにすっかりそのままorz

キーリマップ

ソース入力の際の省力化のための機能も最初からある。例えば僕が書いてるのはこんなの。

これを見れば何が書いてあるか簡単にわかると思うが、【 Shift + enter 】で<br />、【 ctrl + enter 】で<br>を出力するようにしている。xhtmlファイルをいじらなきゃいけない時も、これなら間違えることなく対応できる。こんなショートカットが簡単に追加出来るだけでもSublime Textを使う価値があると思う。

キーリマップは、メニューから「(MacはSublime Text2 > )Preferences > Key Bindings – User」を開いて記述する。

スニペット

これもまためちゃくちゃ捗る。自分でどんどん追加できるのも便利で簡単。

これはちょっと簡単な例だが、基本的な書き方はこのとおりなので、これを真似して書くもよし、ググって誰かの設定をコピペするもよし、どんどん自分仕様にしていけるのがとても気持ちいい!ちなみに上記の例では、HTMLを書いてる時に「@tar」とタイプして【tab】で決定するとそこに「target=”_blank”」が出力される。最後の「scope」のコメントアウトを外せば、「HTMLファイルでのみ」有効になる。

このファイルを『snippet-target.sublime-snippet』という感じで名前をつけて、Macなら[ユーザ/(ユーザ名)/ライブラリ/Apprication Support/Sublime Text2/Packages/User]、Winなら[user/AppData/Roaming/Sublime Text2/Packages/User]フォルダへ入れれば即使える。

ここまで説明したものは、実はほとんどがSublime Textの元々の機能で追加できるもの。これだけでも相当高機能だということはお分かりいただけたと思う。逆に、何も設定しなければこれだけの機能を使わずに宝の持ち腐れになってしまう。ちょっとまとまった時間が取れる時に是非これら設定の追加に挑戦してみてほしい。

大詰め(だが息切れ)、機能拡張プラグイン

気軽に書き始めたつもりが結構なボリュームになってしまったので、とりあえずもう入ってるのはとにかく全部晒すww 投げやりww 中には使ってないものもあるが、自分の使用目的に合わせて各自選択してほしい。ちなみに自分の使い方はHTML/CSS/Jacascript/PHP/WordPressのコーディング。

さて、気軽にちょっとだけ晒すはずが結構てんこ盛りになってしまったうえに、説明が相当足りてないんじゃないかとwww ひと通りの設定は晒したものの、言ってみればこの辺りはほんの初期設定にすぎない。例えばどのプラグイン使うとこんなとこが便利!とかの説明も入れられると良かった…。

Sublime Textに限った話しではなく、制作者なら少なからず制作環境に使うツールに対するこだわりはあるのではないかと思う。プログラマのVim対Emacsの宗教戦争は未だに続いているしw、Web制作でも特にエディタはVimを始めとして最近ではAdobeのBracket、GithubのAtomなど新しいものもどんどん開発されているし興味もあるが、いまはSublime Textに全く不満はない。あ、あえて言うならMacとWinでショートカットを統一したいかな…。

久しぶりに環境を再確認してみて「使ってないのも結構あるし、ちょっと整理しつつアップデートしたいなー」と思ってたらこんな素敵な本が発売されるじゃないですか!しかもなんと明日3/20発売! この記事の執筆時点ではまだ読んでいないので中身はわからないwが、錚々たる著者・監修者が名を連ねているのでこれは(0゜・∀・)wktk。この記事を読んでちょっとでもSublime Textに興味が湧いた、という人は是非手に取ってみよう。(ステマだが何ももらってません

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

しかーも!出版イベントも企画されている!90分でのライブセッティング!キャンセル待ちだがまだ間に合うかも?Ustreamでのライブストリームも予定されているらしい!いそげ!(ステマだが何もry

CPI x CSS Nite「After Dark」(9)Sublime Text』(2014年4月17日開催)

こんなスゴい本とスゴいイベントがあるんならこんな記事書く必要まったくなかったんジャネーノorz まぁちょっと予習するくらいのつもりで読んでもらえればw

最後に。上記の書籍の出版に合わせて、書籍のFacebookページ上で『あなたのSublime Textを見せてください』というイベントが開催中。Sublime Textの利用者が自分の画面の設定をスクリーンショットで晒してみる、というもの。テーマやカラースキーム、フォントなどまさに十人十色で見ているだけでも面白い。既に利用している人は是非自分の環境を晒しにw、ちょっと興味が出てきた人はこの記事の味気ないスクリーンショットよりきれいで見やすいテーマが多くアップされているので、参考にしてみるといいだろう。

いやー、中身が薄い割に長い記事だったorz

3 thoughts on “sublimeかわいいよsublime(;´Д`)【Sublime Textの(初期)設定環境を晒す】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です