htmlコーディングには欠かせないテキストエディター。みなさんは何を使ってますか？自分は「SublimeText3」というエディターをメインで使っています。プログラマー向けのモダンエディターとしては草分け的存在のエディターとして知られており、長いことパブリックベータだったのですが、2017年9月にようやく正式版となったようです。

優秀なコード補完機能、豊富なパッケージ、軽快な動作など優れた点がたくさんあるので、IT業界でのシェアは高めではないでしょうか。

ちなみに、インストールはとても簡単なのですが、残念ながら日本語化にちょいと手間が掛かります。そこで今回は、自分の備忘録を兼ねて、インストール及び日本語化、またhtmlコーディングに必要な必須パッケージの導入までの手順を扱いたいと思います。

スポンサーリンク




目次

  1. インストール方法
  2. メニューの日本語化
    1. 「Package Control」のインストール
    2. 「Japanize」のインストール
    3. メニュー項目の日本語化作業
  3. Shift_JISを扱いたい場合
    1. 「ConvertToUTF8」のインストール
    2. 「Codecs33」のインストール
  4. SCSSでコードカラーリング機能を使いたい場合
    1. 「SCSS」パッケージのインストール
  5. まとめ

1. インストール方法

まずはオフィシャルサイトからインストーラーをダウンロードします。
https://www.sublimetext.com/3

macOSはピンク枠のところからダウンロードします。

ダウンロードした.dmgファイルをダブルクリックしてインストーラーをマウントさせてください。上記の画面になったら「Sublime Text.app」をアプリケーションフォルダのエイリアスにドラッグします。これでインストールは完了です。このように、インストール自体はとても簡単です。

2. メニューの日本語化

2-1. 「Package Control」のインストール

今度はメニューを日本語化してみましょう。まずはPackage Controlをインストールします。これはパッケージを導入するための便利なツールです。下記のサイトにアクセスします。
https://packagecontrol.io/installation

アクセスしたら、上記のようにコマンド（テキストがブルーに反転している箇所）を選択してコピーしておきます。コピーしたらSublime Text3の画面に戻ってください。

メニューの「View > Show Console」をクリックします。

ウィンドウ下部の二つの白枠の二段目に先ほどコピーしたコマンドをペーストしてください。ペースト後、リターンキーを押下します。これでControl Packageがインストールできました。

2-2. 「Japanize」のインストール

次いで、Install Packegeを呼び出します。キーボードの「⌘キー + Shift + P」をタイプして、「inst…」とタイプしてください。サジェストされてInstall Packegeが見えていますよね？上記のように選択された状態でリターンキーを押下します。↑↓キーで項目を選択することもできます。

上記の画面が表示されたら、今度は「japa…」とタイプします。Japanizeが見えていますね？この状態でリターンキーを押下します。

これでようやくメニューバーが日本語化しました！しかし、この状態では各メニュー内のサブ項目は英語のままなのです…。というわけで、もう少し作業が必要になります。

上記のフォルダを開きます。パスは下記の通り。

Macintosh HD > ユーザ > （ユーザ名） > ライブラリ > Application Support > Sublime Text 3 > Packages

開き方ですが、デスクトップに戻り、Finderメニューの「移動」をクリックした状態で、キーボードの「optionキー」を押下すると「ライブラリ」が追加されますので、そこをクリックします。すると普段は見えない「ライブラリ」が開きますので、あとは「Application Support > Sublime Text 3 > Packages」と進めば、上記と同じフォルダを開くことができます。

開くことができたら、「Default」というフォルダを作って上記の画面と同じようにしてください。ここからがちょっとややこしいです。

「Default」フォルダを作成できたら、今度は「Japanize」を開いて、「*.jp」という拡張子がついたファイルを⌘キーを押しながら全て選択し、「Default」フォルダまでドラッグ。マウスボタンのクリックを離す前にoptionキーを押下してファイルコピーします。

「Default」フォルダ内にファイルがコピーできたことを確認したら、今度は「Default」フォルダ内の各ファイルの「.jp」という拡張子だけを削除します。

作業が完了したら、Sublime Text3を再起動してメニュー項目が日本語化しているか確認してみましょう。上記のようになっていれば成功です！

3. Shift_JISを扱いたい場合

3-1. 「ConvertToUTF8」のインストール

HTML5／CSS3で行なうモダンコーディングでは文字コードは、UTF-8ほぼ一択なのですが、古いhtmlを改修したり修正したりする際には、いまだにShift_JISなどUTF-8以外の文字コードを扱うことがあります。そんな時に文字化けを防ぐためにこのパッケージを使います。

  1. キーボードの「⌘ + Shift + Pキー」をタイプして「Install…」と入力し、Install Packageを呼び出します。
  2. 「convertto…」とタイプしてください。
  3. 表示されたリストから「ConvertToUTF8」を選択して、リターンキーを押下します。
  4. 最後にSublimeText3を再起動します。

3-2. 「Codecs33」のインストール

Shift_JISを扱うには「ConvertToUTF8」とは別に「Codecs33」もインストールする必要があります。しかし「Codecs33」はPackage Controlからインストールはできません。下記の手順で手動インストールが必要です。

  1. Githubにアクセスして「osX」を選択します。
  2. Zipファイルをダウンロードしてください。
  3. Zipファイルを解凍したら「Codecs33」というフォルダ名に変更します。
  4. Sublime Text 3の「基本設定(n) > Packageフォルダ(B)」をクリック。
  5. Packageフォルダに「Codecs33」フォルダを格納します。
  6. 最後にSublimeText3を再起動します。

4. SCSSでコードカラーリング機能を使いたい場合

モダンコーディングにおいてSCSS（Sass）を使う人も多いのではないでしょうか。そんな時は、コードカラーリング機能を是非とも使えるようにしましょう。

4-1. 「SCSS」のインストール

  1. キーボードの「⌘ + Shift + Pキー」をタイプして「Install…」と入力し、Install Packageを呼び出します。
  2. 「scss…」とタイプしてください。
  3. 表示されたリストから「SCSS」を選択して、リターンキーを押下します。
  4. 最後にSublimeText3を再起動します。

5. まとめ

うまくインストールできましたか？さて、この「Sublime Text 3」ですが、無料で試用することはできるのですが、継続的な利用にはライセンス（80米ドル）の購入が必要となります。気に入ったらライセンスを取得しましょう。