【完全版】SublimeText3インストールから初期設定&日本語化を徹底解説

20年間WEB制作で生活してきた僕ですが、SublimeTextを使ったことがありません。

20年間、秀丸エディタにお世話になってきた、そんな僕が満を持して(大袈裟ですが)恋に落ちるエディタことSublimeTextを使ってみようと思ったわけですが、もちろんそれなりの理由があります。まあそれは後半に語るとして、まずはアウトプットの意味も込めて、インストールから初期設定&日本語化までをマニュアル化したので参考にしてください。

正確に言うと過去に1度だけ使ったことがあるんですが、作業しているといつの間にか秀丸エディタを立ち上げていて、次第に使わなくなってしまった経緯がありまして、、、日ごろのクセってそう直るもんでもないですよね。

とりあえず、しばらくSublimeTextを使ってみようかと思ってます。

では早速。

まずはSublimeTextをインストール(windows版)

下記URLにアクセスしてソフトをダウンロードします。

https://www.sublimetext.com/

赤枠内の【DOWNLOAD FOR WINDOWS】をクリックすると保存画面がでるので任意の場所に保存します。

僕はソフト系はいつも、マイドキュメントにsoftフォルダを作って保存してます。

今回でいうと、

マイドキュメント>soft>SublimeText

って感じです。

任意の場所に保存が出来たら、保存した.exeファイルをダブルクリックしてインストールを開始します。

「Add to explorer context menu」をチェックすると、エクスプローラーで右クリックしたときに「SublimeText」を選択できるようになります。

僕はとくに何もチェック付けずに全て「Next」をクリックしました。

インストール完了!

これだけはやっておきたいSublimeText初期設定

ググってみると人によって用途の違いや、好みがあるので、まあ何とも言えないんですが、これだけはやっておかないといけない設定があるので1つ1つ解説していきます。

  1. Pakage Controlを導入
  2. 日本語化(やらなくてもOK。僕は英語が苦手なので)
  3. 文字化け対策&日本語入力位置補正
  4. 自分の用途に合わせてプラグインをインストール
  5. SublimeTextの見た目を自由に設定

1.Package Controlを導入!これがなければ何も始まらない必須プラグイン

ただのテキストエディタとして使用するだけなら必要ないかもしれませんが、SublimeTextを導入しようと考えてる人は、HTMLやCSSのコーディングを爆速でキレイに書きたい。PHPをストレスなくスムーズに書きたい。などなど何かしら目的があることでしょう。

SublimeTextの本来の実力を発揮し、恋に落ちるエディタの名にふさわしい高機能エディタの恩恵を受けるには、約5,000ほどあるプラグインを大いに活用する必要があります。

その約5,000もあるプラグインを使うためには、Package Control を最初に入れる必要があります。

てか、インストール時に最初から入れとけよって話ですが、公式に「公開鍵を使用して検証」と記載あったのでセキュリティーとか何か絡んでいるんだと勝手に思っております。

(1)Package Controlってそもそも何?

上でも説明しましたが、早い話、プラグインを管理するためのプラグインだと思ってもらって間違いないです。

つべこべ言わずインストールしろってことです。

(2)Package Controlのインストール方法

インストールは超簡単。

バージョンの低いSublimeTextはコマンドを入れてインストールするみたいですが、最新版をインストールしたならものの数秒で完了します。

メニューバー>Tools>Install Pakage Control…

をクリックしたら完了です。

(3)インストール完了画面

(4)インストールされているか確認

メニューバー>Preferences>Package Control

が表示されます。

Package Controlのインストールが完了したら、今後はPackage Controlを使ってプラグインをインストールし、管理していきます。

2.日本語化について。Japanizeプラグイン導入!これで英語が苦手な僕も安心

はっきり言って僕は英語が苦手です。

英語を勉強したいなと思いながらも、時間がないを言い訳に生きてきたのでなんかもう今さら。。。

なので真っ先に日本語化します。英語が得意な場合、もしくは全然苦にならない優秀な方は英語のままで問題ありませんが、僕のように怠惰な人間はとっとと日本語化しちゃいましょう。

(1)Japanizeのインストール

上図にもあるように

メニューバー>Preferences>Package Control

をクリックすると、下記の画面が表示されるので、「Package Control: Install Package」をクリックしてください。

メニューバー>Tools>Command Pallete(キーボード操作ならCtrl + Shift + P)

から、コマンドパレットを選択してもプラグインをインストールできます。

その場合、入力欄に「Package」と入れると、「Package Control: Install Package」が表示されます。

また、コマンドパレットを閉じたいときは、キーボードの【Esc】キーを押すと閉じます。最初僕も閉じれなくて焦りました。

「Package Control: Install Package」をクリックすると次の画面が表示されます。

(2)Japanizeを検索して実行

入力欄に「japan」と入力すると、「Japanize」が表示されるのでクリックしましょう。

(3)インストール完了

画面に下記のメッセージが表示されます。


Package Control Messages
========================

Japanize
--------

Japanese menu for Sublime Text 3

Sublime Text 3の日本語化プラグインです。
[ゆーがいぶろぐ](http://blog.huwy.org/article/292827228.html)さんの日本語化ファイルがベースです。

適用手順
1.C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
にコピーします。※Defaultフォルダがない場合は作成してください。
2.コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。(念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。)
3.C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu(.jpが付かない方)を、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User
にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
以上です。

適用手順通り進めば日本語化完了なんですが、図があった方が分かりやすいと思うので、適用手順も開設しておきます。

(4)ファイルをコピー

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
にコピーします。※Defaultフォルダがない場合は作成してください。

AppDataが表示されない場合は、フォルダのメニューから「表示」をクリックし、隠しファイルにチェックを付けてください。

■コピーするファイル

(5)ファイルをDefaultフォルダにコピー

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default

に貼り付けます。

僕の場合はDefaultフォルダがなかったので、手動で作成しました。

■Defaultフォルダの中身

(6)ファイル名を変更

Defaultフォルダ内のファイル名の拡張子「.jp」を削除します。

(7)Main.sublime-menuファイルをコピペ

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu (.jpがないファイル)

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User

に張り付けて完了です。

(8)日本語化されてるか確認

ちゃんと日本語化されました。

3.文字化け対策&日本語入力位置補正。

SublimeTextはShift-JISに対応していないので、Shift-JISのデータを開くと文字化けします。

そこで入れておきたいプラグインがこちら

ConvertToUTF8

このプラグインを入れておけば安心です。

ConvertToUTF8の良いところは、ファイルを開くと自動でUTF-8に変換し、さらに保存時には元の文字コードに変換してくれます。

コマンドパレット(Ctrl + Shift + P)を開いて早速インストールしてみてください。

インストール方法はもう分かりますよね。

IMESupport

日本語化した後、日本語入力すると、表示位置が微妙にズレて使いづらくなってしまいます。

下図では、赤枠内にスペースを合わせてるのに、1段下がった位置に表示されています。

IMESupportを入れることで解消されるようですが、windows10の場合、環境によっては余計ズレがひどくなるので臨機応変に対応してください。ちなみに僕は、入れたことでめちゃくちゃズレたので速攻でアンインストールしました(アンインストール後SublimeTextを再起動)。

一応解決方法もあるようですが、あまり良い方法ではないので割愛します。

4.自分の用途に合わせてプラグインをインストール

ここまできたらあとは自分の好きなようにプラグインをインストールすればOK。

ですが、

僕は何も入れてません。

ググればたくさんおすすめプラグインが出てきますが、おすすめだからって片っ端からプラグインを入れてしまうのはちょっとね。

何のプラグインなのか理解もせず、本当に必要なのかも理解せず、結局使わない機能を入れっぱなし状態になってしまうのも嫌ですしね。

その都度必要になったらインストールしていくのが良いですよ。

5.SublimeTextの見た目を自由に設定

SublimeTextではテーマも自由にインストールができます。

美しい配色のテーマ、ブラック背景がカッコイイ、白背景がシンプルで見た目が良い、などお好みで選ぶのも良いですが、僕の場合、好みってよりかは作業効率を優先に選んでます。

つまり、コードが読みやすく、長時間見ていても目が疲れにくいテーマです。

もちろんモニターに左右されるのは言うまでもないですが、僕のように1日12時間以上モニターと向き合ってコードをカタカタ書く人間にとってはテーマはかなり重要です。

個人的にはダーク背景が好みですが、面白い記事を見つけました。

WIRED.jp

スマートフォンやPCの「ダークモード」表示を好む人たちは、このモードが目の疲れを減らし、バッテリー寿命を延ばし、睡眠を改…

人間とコンピューターの相互作用を研究する教授のコックス氏と心理学者マイヤー氏の話を総括すると、白い背景に黒い文字のほうが、正確さもパフォーマンスも高かったと結果が出ています。

一方で、ディスプレイを見る人にとって最大の敵がブルーライトを軽減してくれるのがダークモードである。という意見もある。

さてさて、困りましたね。

困ったあげく2つのテーマを候補に選びました。

1.デフォルト(ダーク系)

2.Ayu(ホワイト系)

Ayu on Package Control

テーマの設定方法

1.インストール

コマンドパレット(Ctrl + Shift + P)から、Package Control: Install Packageを開くいて、テーマの名前を入力。ここでは「ayu」と入力します。

おそらく一番上に出てくるので、クリックしてインストール開始。

※画面に英語で、アイコンをインストールするか?と聞かれると思うので「インストール」をクリック。

2.テーマを反映

テーマを反映するには、ツールバーより

Preferences -> Settings – User(英語版)

基本設定 > 基本設定 – User(日本版)

をクリックすると、設定画面が開きます(設定ファイルが開く)。


{
	"ignored_packages":
	[
		"Vintage"
	],
	"theme": "Default.sublime-theme"
}

↓以下のように書き換える

{
	"ignored_packages":
	[
		"Vintage"
	],
	"theme": "ayu-light.sublime-theme",
	"color_scheme": "Packages/ayu/ayu-light.sublime-color-scheme",
}

設定を保存すると、テーマが変わります。

とりあえず、しばらくこれで作業してみます。

使いづらかったらデフォルトに戻して他のテーマ探します。

これだ!っていうのが見つかったらまた紹介しますね。

プラグインのアンインストール方法(テーマも同じ)

プラグインを入れたはいいけど、やっぱ使わない、気に入らない、思っていたのと違う、などあると思うのでアンインストール方法も記載しておきます。

僕もここまで作業するのに、何回かインストールとアンインストールを繰り返してるので。

アンインストールも簡単です。

アンインストール方法

  1. コマンドパレット(Ctrl + Shift + P)から「remove」と入力。
  2. package Control: Remove Packageを選択します。
  3. インストールされている、プラグイン、テーマが表示されるので、アンインストールしたいものをクリック。

アンインストール完了。

なぜ20年間愛用していた秀丸エディタからSublimeTextに乗り換えようと思ったのか

最後に、説明しておきます。

まずはっきり言っておきますが、秀丸エディタは優秀です。

そりゃ20年間も使ってますからね。良いところも悪いところも知り尽くしてるつもりです。

ほぼ全てのテキスト(html、CSS、JS、PHP、などなど全部)の表示・編集で使用します。

SublimeTextで出来ることは、秀丸エディタでも出来たりします。もちろん全部ができる訳ではないです。そいでもって、若干それらの機能は使いづらさがあるけど(ここ重要)。

ただま、最近秀丸エディタでプロジェクトの管理とか、分割画面とか、タブの開き過ぎだとか、僕の管理の仕方がいけないってゆー意見は無視して、常々思っていた使いづらさを猛烈に感じちゃったわけです。

そんな時にあるエンジニアと電話で話してて、SublimeTextがやっぱ優秀だよね。って言われて、

「ああ、そーいやSublimeTextがあったな」

と。

この人、PHPプログラマでフリーで活躍していて、年収数千万のとんでもない人なんですが、その人も使ってるならと。思ったわけです。

そういった経緯があったので、今回使ってみることにしました。

使ってみた感じは1年後くらいにレビューします笑。

最後に。

秀丸エディタは有料ですが、絶対に使って欲しいエディタなので、秀丸エディタについて別記事で紹介したいと思います。

あと、最後の最後にあれですが、SublimeTextも有料です。

今現在、有料(80ドル)ですが評価版の利用ということで期間・機能無制限で利用できます。

評価版の場合、たまにライセンス購入メッセージが表示されますが【キャンセル】をクリックすればそのまま普通に使えます。

使ってみて、このままSublimeTextを使っていけそうなら、大人なので購入したいと思います。

 

この記事をフォローすると僕のテンションがあがります

    Warning: Undefined array key "twitterId" in /home/webystyle/uzf.jp/public_html/blog/cms/design/themes/wmp/single.php on line 294

Warning: Undefined array key "twitterId" in /home/webystyle/uzf.jp/public_html/blog/cms/design/themes/wmp/footer.php on line 415