IT Programming

SublimeText3のインストール方法&日本語化【神機能も】

SublimeText3 のインストール方法が知りたいな。あと、追加でやっておいたほういいことがあったら、それも知りたいなあ。

 

こういう疑問に答えます。

 

この記事を読むと得られるもの

・SublimeText3 のインストール方法がわかる

・便利機能の導入方法がわかる

 

SublimeText3の愛用者であるぼくが、わかりやすく解説していきます。

 

この記事ではWindowsを使った方法をご紹介しますが、Macの方も似たような感じなのでご安心ください。


スポンサードリンク

SublimeText3のインストール方法

まずSublimeText3のダウンロードページに行ってください。

 

あなたの機種にあわせてダウンロードしてください。

sublimetext3,画像

Windows32ビットの方は「Windows」でOKです。

 

ダウンロードが済んだらフォルダを開いて、「Next」をクリックします。

sublimetext3,画像

上記の画面が表示されます。

SublimeText3をどこにインストールしたいかを指定する項目ですが、このままでOKです。

 

「Next」をクリック。

 

sublimetext3,画像

上記は「ファイルを右クリックしたときにSublimeText3で開く機能をつけるかどうか」を聞いています。

チェックをいれてもいれなくてもどちらでもいいです。

 

「Next」をクリック。

 

👇ちなみにチェックを入れると、「Open with Sublime Text」と追加されます。

sublimetext3,画像

 

sublimetext3,画像

インストール準備ができました。

「Install」をクリックしましょう。

sublimetext3,画像

インストールが完了しました。

「Finish」をクリックです。

 

sublimetext3,画像

スタートボタンの検索バーで検索するとSublimeText3がでます。

SublimeText3を開いてみましょう。

 

SublimeText3を日本語化する

初期状態は英語になっているので、日本語にします。

 

Package ControlをSubimeText3に追加していきます。

 

Package Controlを追加することで拡張機能をつけれるようになります。

 

この機能を使って日本語化することができます。

sublimetext3,画像

上記のように、初期状態ではPackage Controlの項目がないので、追加していきます。

 

sublimetext3,画像

「Preferences」から「Browse Packages」をクリックします。

 

Macの方は画面左上の「SublimeText」をクリックすると「Preferences」が表示されると思います。

sublimetext3,画像

「SublimeText3」をクリックしましょう。

 

sublimetext3,画像

「Installed Packages」フォルダの中にファイルを追加するので、ダウンロードページにいってください。

 

sublimetext3,画像

👆赤枠で囲んだところをクリックしてダウンロードします。

 

Package Control.sublime-packageというファイルがダウンロードされるので、SublimeText3に戻り「Installed Packages」フォルダにコピペします。

 

sublimetext3,画像

すると、さっきはなかった項目が表示されるようになっています。

 

sublimetext3,画像

それでは、追加された「Package Control」をクリックしましょう。

 

sublimetext3,画像

上記の画面が表示されます。

 

sublimetext3,画像

「install」と打つと「Install Package」というものがあるのでクリックしてエンターを押します。

 

sublimetext3,画像

数秒待っていると入力欄が表示されるので、「japanize」と入力して、「Japanize」を選択してエンターを押します。

 

sublimetext3,画像

👆この画面が表示されたら、OKです。

 

sublimetext3,画像

この状態ではメニューバーしか日本語になっていないので、他のところも日本語表記に変えていきます。

 

sublimetext3,画像

「基本設定」→「Browse Packages」をクリックします。

Macは先ほどと同様、画面左上の「Sublime Text」→「Preferences」→「Browse Packages」です。

 

sublimetext3,画像

上記の画面になるので、ここに「Default」フォルダーを新しく追加します。

 

sublimetext3,画像

sublimetext3,画像

「Default」フォルダーが作れたら、「Japanize」フォルダーをクリックします。

 

sublimetext3,画像

拡張子が「.jp」のファイルをすべてコピーします。

 

複数のファイルを選択する方法

Windows: Ctrlキーを押したままファイルを選択

Mac:Commandを押したままファイルを選択

 

sublimetext3,画像

「Default」フォルダーに戻ってさきほどコピーしたファイルを貼りつけます。

sublimetext3,画像

 

sublimetext3,画像

「Default」フォルダに貼りつけたすべてのファイルの「.jp」を消していきます。

sublimetext3,画像

👆こんな感じになります。

 

sublimetext3,画像

次に「Japanize」フォルダに行きます。

 

sublimetext3,画像

「Main.sublime-menu」をコピーしましょう。

*「 .jp」の方ではないのでご注意を

 

sublimetext3,画像

「User」フォルダへ行き、さきほどのファイルを貼りつけます。

これで日本語化の作業は終わりです。

 

sublimetext3,画像

ちゃんと日本語表記になってる~(≧∇≦)b

 

SublimeText3の便利機能を導入する

Emmet

Emmetというのは、めんどくさいコードを簡単に書けるようになる優れものです。

sublimetext3,画像

例えば「!」+「Tabキー」で👆のようにhtml構造をカンタンに書いてくれます。

 

Emmetの導入は日本語化よりカンタンなのでご安心を♪

 

sublimetext3,画像

「Package Control」をクリックします。

 

sublimetext3,画像

「install」と打って「Install Package」を選んでエンターを押します。

 

sublimetext3,画像

数秒立つと入力欄が表示されるので「emmet」と入力します。

「Emmet」を選んでエンターを押してください。

 

sublimetext3,画像

👆の画面が表示されればOKです。

これでEmmet機能が使えるようになりました。

 

ただ、これでは「!」+「Tabキー」で表示されるhtml構造のlang属性が"en"のままです。

いちいちlang="ja"に変えるのがめんどくさいので次の操作をしておきましょう。

sublimetext3,画像

「基本設定」→「Package Settings」→「Emmet」→「Settings-Dafault」の順にクリックします。

 

sublimetext3,画像

出てきたファイルに

{
“snippets”: {
“variables”: {“lang”: “ja”}
}
}

 

を貼りつけて保存します。

 

sublimetext3,画像

これで、lang="ja"の状態で表示されるようになります。

 

Emmetを使った便利なショートカットは他にもあります。

気になる方はSublime Text3 おすすめの入力ショートカット5選!をどうぞ。

 

ブラウザショートカットキー

 

ブラウザショートカットキー機能つけることで、ブラウザが一瞬で開けるようになります。

sublimetext3,画像

「基本設定」→「Package Control」

sublimetext3,画像

「install」を入力した、「Install Package」を開く。

 

sublimetext3,画像

「view」と打って「View in Browser」を選択しエンターを押す。

 

sublimetext3,画像

続いて「基本設定」→「キーバウンド」

 

sublimetext3,画像

上記の画面が表示されます。

sublimetext3,画像

{ "keys": [ "ctrl+shift+v" ], "command": "view_in_browser" },
{ "keys": [ "ctrl+shift+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },
{ "keys": [ "ctrl+shift+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },
{ "keys": [ "ctrl+shift+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },
{ "keys": [ "ctrl+shift+s" ], "command": "view_in_browser", "args": { "browser": "safari" } }

をコピーして[ ]の中に貼りつけて保存します。

 

sublimetext3,画像

ファイルを開いた状態でコマンド入力してみます。

 

Windowsのショートカットキー

・ctrl + shift + c → chrome

・ctrl + shift + ffirefox

・ctrl + shift + ii.e

・ctrl + shift + ssafari

*導入してないブラウザだと何も起きません。

 

Macのショートカットキー

・ctrl + option + cchrome

・ctrl + option + ffirefox

・ctrl + option + ii.e

・ctrl + option + ssafari

*導入してないブラウザだと何も起きません。

 

WindowsのぼくはChromeで開きたいと思います。

Ctrl+shift+Cを押すと・・・

サイト、画像

表示されました!

 

まとめ:SublimeText3は操作性が神です

SublimeText3は、テキストエディターのなかでも、かなり評価が高いです。

ぜひ使いこなしてみてください!

 

以上になります。

  • プログラミング独学があまり進まない
  • 独学に限界を感じる

という方はプログラミングスクールに行くのも選択肢として十分にありです。

下記の記事をどうぞ。

【元受講生が語る】テックアカデミーの評判【無料体験もあります】

元受講生のぼくがかなり正直にレビューしたつもりなので気になる方はどうぞ。

それじゃ~


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ