GUGENKAブログ

フロントエンド周りの話メインです

SublimeTextをDreamWeaverにしたった

Application

ちまたで続々DreamWeaverを捨ててSublimeTextに

移行する人が多いので重い腰を上げて導入の運びに。

このエディターで何ができるかと言うと百聞は一見にしかずで、

この動画をご覧ください。


Emmet LiveStyle sneak peek - YouTube

 

シンタックスハイライトが従来型エディタの

黒字にRマックスな色やBマックスなギラギラした色でなく、

カラーセットを選ぶ事ができます。

（ギラギラが好きならギラギラのカラーセットもありますが）

f:id:behomazn:20131129003146j:plain


まず、SublimeTextをおとします。

SublimeText2か3を選びダウンロードしてインストール。

つづいて日本語パッチを導入。
（※SublimeText2でしか動作保障されてないのでVerに注意）

メニューバー( Main.sublime-menu : 50,537 Byte) 
https://docs.google.com/open?id=0B_dAu5x064QTWW5TQ2p0NzRPZTQ

コンテキストメニュー( Context.sublime-menu : 688 Byte) 
https://docs.google.com/open?id=0B_dAu5x064QTZ1lZaXpmS3ZMQ0U

 

リンク先は無制限共有されたgoogleドライブです。



ダブルクリックすると、ウェブ上からアプリを選ぶのか

ローカルからアプリを選ぶのか聞いてきます。

メモ帳のアイコンにドロップして開きます。

ファイルを開いたら、ctrl+aで全選択してctrl+cで全コピ。
その後、SublimeText2の上のメニューからPreferencesをクリックし

Browse Packages...をクリックしてPackagesフォルダを開きます。

Packagesフォルダの中からDefaultフォルダを探して

メモ帳で開いたら、そのままペーストします。

 

同じように、Context.sublime-menuファイルも

メモ帳で開きコピーしPackagesの中の

Defaultフォルダ内のContext.sublime-menuを

開きペーストして保存します。

こんな感じで日本語化されているはずです。

 

ここまでできたら、様々なプラグインを自動でインストールしてくれる

Sublime Package Controlを導入します。

”Sublime Package Control”をクリックして飛んだ先から

コピーしたら、Ctrl+@を押して開いた入力エリア（一番下）に
ペーストします。

Enterを押すとインストールが開始されます。


※SublimeText2とSublimeText3が有るのでVerに注意して下さい。

SublimeText3ならこんな感じ↓

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

コレをインストールしておくと様々なプラグインの導入が可能です。


プラグインの一覧を出してみましょう。

Ctrl+Shift+Pを押すと一覧が表示されます。

Install Packageと入力してEnterキーを押してください。

ネット上に有るダウンロード可能なパッケージ一覧の

リストが表示されます。

とりあえずWindowsなら、IME Supportが必要です。

IME Supportと入力すると、左下に[ = ]のような通信マークが出て

ダウンロードが始まります。

これでインライン入力が可能になりました。

  DreamWeaverのような終了タグ補完が無いと生きていけないので、

SublimeCodeIntelもインストール。

コマンドでブラウザオープンしてくれる

BrowserRefreshなども、DreamWeaverに慣れてしまっていると

かかせないプラグインでしょう。

 

ショートカットキーは豊富すぎるのでメニューを見ながら覚えていきます。

 

あとはお好みで、プラグインを導入します。

ぼほ全ての言語のプラグインや変換候補、

htmlのタグ、jsの括弧のペアをハイライトしてくれるプラグイン、

もとZenCodingと呼ばれていたEmmetなど、

これもまた豊富すぎるので使用する物を選んでダウンロードします。

プラグインの導入方法に付いては

LIGさんのブログに詳しく書いてあるので参考にしましょう。

”恋に落ちるエディタ”「Sublime Text」完全入門ガイド！

 

DreamWeaver的な終了タグ自動補完が無いと生きていけないので

SublimeCodeIntelも導入します。導入方法は、

IME Supportと同じでです。

 

 ちなみに色は、メニューのカラースキームから選びます。
予め沢山のカラースキームが用意されていますが

更にカラースキームをダウンロードする事ができます。

f:id:behomazn:20131129003343j:plain

 

そしていよいよ、最初に貼ったyoutube動画の様に

chromeを連動させて自在にcssの編集ができるプラグイン、

LiveStyleを導入します。

ctrl+shift+Pでコマンドパレットを開き、

Package Control: Install Packagesと入力すると

インストール可能なプラグインがずらりと出てきますので

LiveStyleを探してインストールします。

 SublimeText側はこれでＯＫです。

後は、ChromeWebstoreからLiveStyleをインストールします。

デベロッパーツールを表示すると、
メニューにLiveStyleが追加されているのが分かります。
チェックを入れると、当たっているcss一覧が表示されますので

右側のプルダウンメニューからSublime Textで開いているcssを関連付けます。
Sublime Textのほうで編集すればリアルタイムでCSSが反映されます。