たったの10分で完了!Sublime Text3をダウンロードする方法と基本設定まで解説します

スポンサーリンク

仕事の関係上常にテキストエディタには触れていて、もっぱらエディタというかDreamweaverとblacketsを主に使用しています。殆どはDreamweaver!

Web構築がメインな人なのでこれで良いんですけど。他にも沢山あるんですよ?
Dreamweaverは高機能だけど有料だから使っていないって人もいるんですね。

そういう人はsublime Text3やAtom等が多いんじゃないでしょうか。

んでさ、【これ神】Chromeのテキストフィールド内の文字列をSublime Textでリアルタイムに編集できる拡張機能「GhostText」
「わようふうどっとこむ」さんでこんなスーパーな記事を見つけたわけ!

この記事を読んで文字通りSublime Textに恋をしました。
恋するテキストエディタの名は本当だったか?!

Sublime Textに恋した理由

20160419_13-min

ちょっとだけさらっと書いとく。

GhostTextを使えば凄くブログを書くのが便利になるんですよ。
ブログシステムに備わっているエディタって使いにくいじゃないですか。タグ打ちとか効率悪すぎますよね。
テキストエディタで入力してからブログにコピペもちょっと面倒やし。
でもそんな面倒な作業が自動かされるんです。流れとしてはこんな感じ。

WordPressなどのテキスト入力エリアをマウスでクリックして選択しておきます。
Sublime Textを立ち上げて、そこで入力すると自動であら不思議、WordPressのテキスト入力エリアにもリアルタイムで記入されちゃう!。

こんなん恋するわ。
ってことで普段Sublime Textも一切使ってなかったんだけど、これ試してみたかったのでダウンロードしてみました。

ダウンロードからインストール、日本語対応。
その他、入れたい拡張機能まで説明したいと思います!。

Sublime Text3をダウンロード

恋するテキストエディタって誰が言い始めたんでしょうね。
星の夜願いこめて、さっさとやってきますよ。

まずはSublime Text3のページにアクセス!
20160419_1-min

ご自身の環境に合わせて選択してください。
自分はWindows7の64bitなので、赤枠のを選択しました。
Windowsならスタートボタン→テキスト入力エリアに「dxdiag」と入力してEnterしてください。そうすると環境が解りますよ!

ダウンロードしたら保存した物をダブルクリックで起動させてください。
インストーラーが立ち上がるはずです。
思考停止でnextをクリック!

20160419_2-min

インストール先ですが、ここも気にせずnextをクリック!
変えたい人は変えてください。

20160419_3-min

ここはチェック入れなくてもいいです。
入れても良いですが、自分は必要ないかなと思ったので入れずにnext。

20160419_4-min

思考停止でInstallクリック!

20160419_5-min

はい、Finishクリックでお終い。簡単でしょ。

20160419_6-min

Sublime Text3にパッケージコントロールを入れよう!

さて、インストールが終わったと思うのでSublime Text3を立ち上げてみてください。

20160419_7-min

このままでも使えるんですけど、まあこれだと不便過ぎる。
Sublime Textの真骨頂は膨大な拡張ツールですよ。
沢山いれて自分だけの最強エディタも作ることができます。
本当に自由度が高いんです。
でもそれをするにはパッケージコントロールが必要です。

ではインストールしていきます。
ViewタブからShow Consoleを選択してください。

20160419_8-min

そうすると画面下に入力エリアみたいなの出現したかと思います。

20160419_9-min

赤枠で囲った所をマウスでクリックして選択状態にしておいてください。

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

そしたら、上記のコードを全部コピーして貼り付けてEnterしましょう。

20160419_10-min

Ctrl+Shift+pを押すと下のような画面が出てくるはずです。
そこにinstallと入力してください。
ちなみにCtrl+Shift+pはしょっちゅう使うので覚えておいて損はないですよ。
Macの方はCmd+Shift+pです。

installと入力すると幾つか候補が出てきますが、Package Control:Install Packageと記載されたものを選択してクリックします。一番上のやつですね。

20160419_11-min

これでパッケージコントロールが手に入りました!。
ここから先は自由にどうぞ!といいたんだけど、ついでに日本語化もしておきましょう。

Sublime Text3のメニュー日本語化

完全に日本語化する方法もあるんだけど、ちょっと面倒なので。
今回はメニューバーだけ日本語化してみようと思います。
せっかくパッケージコントロールも手に入ったことだし使ってみましょうよ。

先ほどと同じように、Ctrl+Shift+pでパッケージコントロールを呼び出してください。
そしたら今度はinstallじゃなくて、japanizeと入力。
Japanizeってのが出てきたらそれを選択。これでメニューバーの日本語化終了です。
簡単!
20160419_12-min

Sublime Text3にEmmetを入れよう

最後です。ブログを書くのを効率化したいから今回はSublime Text3をインストールしたんです。もっと良くしましょうよ。

Emmet入れてください。これ凄く良いので。
コレがないと、自分はもはやタグ打ちができない。

入れ方は一緒です。Ctrl+Shift+pで呼び出してEmmetと入力です。
Emmetを入れたら試しに、
「div」と入力して後にCtrl+Eを入力してください。Emmetのデフォルトショートカットキーになっているかと思います。
するとなんということでしょう。勝手にdivタグとして展開されましたね?
これでタグ打ちも楽ちん。もっと凄い使い方あるので、興味ある方はEmmet調べてみてください。

例えばli*5で展開してみると・・・(li>a)*5これで展開してみると??

仕上げに入れておきたい拡張機能

IMESupport
これですね。これが無いと少々日本語入力が不便なのです。
日本語入力がエディタに直接反映されていかないと思います。
これ気持ち悪いんですよ。IMESupportで解決です。

ConvertToUTF8
これも必要です。Sublime Text3は初期状態だと、Shift_JISやEUC-JPの文字コードが読み込めないんですね。
後々困るかもしれないし初めにやっておかないと、何でだぜ?!って混乱すると思うのでさっさと入れておきます。

はい、こんな感じでSublime Text3に恋しちゃってください。
これでブログ書くには十分でしょう。
これでプログラミングも楽々できますよ。活用してあげてください。
拡張機能もめちゃくちゃ沢山ありますからね!

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法