【HTML,CSSマークアップ】Mac に Sublime Text 3 をインストールして、日本語化する方法

最近HTML、CSSの勉強を始めまして、HTML、CSSを書くにあたりテキストエディタが必要なわけですが、なにか便利なエディタはないかと探していました。
HTML、CSSを勉強するにあたって、参考にさせていただいている人が多く使っているテキストエディタが「Sublime Text 3（サブライムテキスト）」です。

有名なテキストエディタですのでご存知な方も多いかと思いますし、私ももともとSublime Text 3の存在は知っていたのですが、「日本語に対応していないため」、英語アレルギーがある私にとっては導入することに抵抗がありました。

そもそも他にも便利なテキストエディタあるわけですし、わざわざSublime Text 3である必要は。。。ただ、みなさん使われているということは、それなりの理由があるのも事実。。。

というわけで、重い腰をあげて思い切ってインストールしてみました。

他の方が書かれているブログやサイトなどを参考にさせていただいたのですがが、インストールするにあたりつまづく点もあったため、今回はインストールの方法を解説していきたいと思います。

Sublime Text 3を日本語化させることで、使用感はめちゃ良いのでオススメです。

Sublime Text 3をインストールする際、大事な点は3点だけ。

Sublime Text 3をインストールする際、日本語に対応していないためつまづく点が多いのですが、重要な点は3つだけです。

Sublime Text 3をMacにインストールする。

さっそくインストールしていきたいと思います。
まずは、公式サイトからSublime Text 3をダウンロードします。

Sublime Text 3のページ上の「DOWNLOAD FOR MAC」のボタンをクリックします。

Mac内の任意のフォルダに保存します。

ダウンロードしたdmgファイルをダブルクリックしてインストールを開始します。
ダブルクリック後に表示される小窓内にて、「sublime Text.app」ファイルを「Applications」ファイルにドラッグアンドドロップします。

Mac内のLaunchPadに、Sublime Text 3が表示されていることを確認します。

これでSublime Text 3本体のインストールは完了です。
しかし、このままだとSublime Text 3内は英語表記のままとなっています。
では、次に「Sublime Text 3」を「日本語化」していきます。

「Package Control」をインストールする。

Subime Text 3のインストール完了後、「Package Control（パッケージコントロール）」をインストールします。
「Package Control」は、「パッケージ管理ツール」でして、Subime Text 3上で使用する「パッケージ（プラグイン）」を管理するためのものです。
Subime Text 3を日本語化する「日本語化パッケージ」を管理するために、「Package Control」のインストールは必須です。

「Package Control」のインストール方法ですが、Sublime Text 3上で行います。

Sublime Text 3を起動します。
※初回起動時のみ、下記画像のような英語で表記された小窓が表示される場合があります。
Sublime Text 3の更新状況が記載されているページですので、☓ボタンで閉じていたければと思います。

Sublime Text 3が起動したことを確認します。

Sublime Text 3上、画面上部のメニュー内にある「View」から「Show Console」をクリックし「Console（コンソール）」を表示させます。

画面下部にConsole（コンソール）が表示されたことを確認します。

Console（コンソール）を開いたら、Package Controlをインストールするため、以下のURLからインストールコードの記載されてるページへ行きます。

ページ内左側にあるテキストをコピーします。
※今回インストールしているのは「Sublime Text 3」なので、ページ内のタブも「SUBLIME TEXT 3」を選択します。

Sublime Text 3に戻り、コピーしたテキストをConsole（コンソール）内の入力欄（下記画像赤枠部分）に貼り付けて、エンターキーを押して実行させます。

実行が完了したら、Sublime Text 3上、画面左上の「Sublime Text」から「Preference」に「package Control」があることを確認します。

package Controlのインストールはこれで完了です。
次にSublime Text 3を日本語化していきましょう。

Sublime Text 3を日本語化する。

Sublime Text 3を日本語化させる方法ですが、下記の2つを行うことで完全に日本語化させることができます。

「メニューバー」は日本語化されてるのですが、「メニューの中」は英語表記のままなので、このまま使えないことはないのですが、格好はよくないし英語が分からないと使いづらいですよね・・・。

なので、「メニューの中」も日本語化させます。

日本語化パッケージ（Japanize）をインストールする。

Sublime Text 3上、画面左上の「Sublime Text」から「Preference」→「package Control」をクリックします。
クリックすると、下記画像のような小窓が表示されるので、入力欄に「Install Package」と入力してエンターキーを押します。

読み込みが完了したら、小窓が表示されるので、小窓内の入力欄に「Japanize」と入力してエンターキーを押します。

読み込みが完了したら、メニューバーが日本語化されたことが確認できると思います。

「メニューの中」も日本語化させる。

メニューバーが日本語化できたので、「メニューの中」も日本語化させていきます。
「メニューの中」を日本語化させるには、MacにインストールされているSublime Text 3のファイル内容を置き換えさせることによって日本語化させることができます。

日本語化パッケージ（Japanize）のインストールが完了した際に、手順が表示されるので、その手順に沿って設定していきます。

Mac内のFinderのメニューバーから「移動 > フォルダへ移動」を選択し、表示された入力欄に下記テキストを入力しエンターキーを押します。

表示されたページはSublime Text 3のアプリそのもののフォルダの中にある「Packages」というフォルダの中のファイルを表示しています。

「Packages」フォルダの中に入り、「Japanize」フォルダと「User」フォルダがあることを確認します。
「Packages」フォルダの中に「Default」フォルダを作成します。

「Japanize」フォルダ内にある「.jp」と付いているファイルを、「Default」フォルダへコピーします。

「Default」フォルダへコピーしたファイル名から、すべて「.jp」を取ります。(拡張子を「.jp」から「.sublime-menu」へ変更)

以上で設定は完了です。
メニューバーから「ファイル」など選択してみて、「メニューの中」が日本語化されているか確認してみましょう。

補足：「Preferences」から「Package Control」が選択できない場合

日本語化させたことが原因な可能性が高いのですが、Sublime Text 3上「Preferences」をクリックしても何も反応せず、「Package Control」を選択、起動させることができないということがあります。

原因が分からないのですが、解決策としてはメニューバー「基本設置」から「Package Control」を起動させることが可能です。
パッケージ（プラグイン）などをインストールさせたい場合、ひとまずこちらから「Package Control」を起動させると良いです。

まとめ

というわけでMac に Sublime Text 3 をインストールして、日本語化する方法をご紹介しました。
実際に使用してみた感想ですが、Atomや他のエディターと比べても「動作が軽い」ですね。これだけでもインストールする意味があるのではないかと思います。
使っている人が多いので、なにか問題が起きた際も解説記事などを探しやすいですし。
また、プラグインを使用することで、もっと使いやすいテキストエディタにパワーアップさせることも可能です。