@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

社内勉強会で発表しました。そのまとめ

regular sublimetext

社内勉強会でSubime Textの発表をやってみました。
その時のメモを載せてみます。
対象は

  • Sublime Textを使ってない人
  • Sass, Lessなどのメタ言語は使用しない人
  • プログラミングはあまりしない人

あたり。
初心者の人にDw以外にもいいエディタがあるんだよ、ということに重きを置いてます。
これからSublime Textを使う人に見てもらえれば...！

発表メモは以下のとおり。

ここが凄いよSubime Text

文字の選択系がすごい

  • cmd+d(Win: ctrl+d) でキャレット上の文字列と同じ文字列を選択
  • cmd+d → cmd+k → cmd+d で2番目のキャレットの選択を飛ばす
  • esc で選択をリセット
  • option を押しながらドラッグ(Win: shift を押しながら右ドラッグ)で矩形選択
  • cmd(Win: ctrl) を押しながらクリックでキャレットを増やす
  • ctrl+shift+↑/↓ で現在のキャレットの上下にキャレットを増やす
  • cmd+shift+d(Win: ctrl+shift+d) で現在の行を複製する
  • cmd+ctrl+↑/↓ で上下の行を入れ替える
  • ctrl+shift+k で現在の行を削除する

Go to Anything機能

  • cmd+p(Win: ctrl+p)で入力バーを表示
  • そのまま文字列を入力すると、該当するファイルの一覧を表示
  • cmd+g(Win: ctrl+g)で現在のファイルの指定した行に移動
  • cmd+r(Win: ctrl+r)で現在のファイルのシンボル(HTML: ID名, CSS: ID名/Class名)の一覧を表示
  • cmd+pで入力バーを出し、「#」を押すと現在のファイル内の単語の一覧を表示

コマンドパレット

  • Sublime Textの核となる機能
  • コマンドパレットを開けば全てのコマンド(パッケージのコマンド含む)が確認できる
  • cmd+shift+p(Win: ctrl+shift+p)で開く

パッケージ

  • Dwでいう拡張機能
  • 便利機能以外にスニペット集やSublime Textのテーマファイルとかもある
  • 有償/無償併せて2,000個以上ある
  • パッケージの管理システムであるPackage Controlを入れておきたい

Package Controlのインストール方法

Packageのインストール/アンインストール等はこのシステムで行う

パッケージのインストール方法

  1. Package Controlを利用
  2. Add Repositoryコマンドを利用してインストール(Githubにあるパッケージのみ)
  3. zipファイルをダウンロード/解凍し、手動でデータフォルダに移動させる

それぞれのやり方は後述

Package Controlを利用

基本はこのインストール方法を推奨

  • コマンドパレットを開き、「Pacage Conrol: Install Package」を選択
  • パッケージの一覧から目的のパッケージを選択 → Enter

Add Repositoryコマンドを利用してインストール

Package Control上に無く、Github上にある場合はこれ
後述の「HalfImageSize」「toggleKatakana」なんかはこの方法でインストール

  • GithubページのURLをコピー(ex: https://github.com/Satoh-D/toggleKatakana)
  • コマンドパレットを開き、「Package Control: Add Repository」を選択
  • コピーしたURLをペースト → Enter
  • コマンドパレットを開き、「Package Control: Install Package」を選択
  • プラグイン名を入力(ex: toggleKatakana)

zipファイルをダウンロード/解凍し、手動でデータフォルダに移動させる

Package Control上に無く、Githubにもない場合はこの方法がいいかも
ダウンロードしたzipファイルを解凍し、以下の場所に格納する

オススメパッケージ

それぞれのパッケージの特徴をざっくりと
詳しいことはggr

SideBarEnhancements

Sidebarを右クリックした時の機能を拡張する
インストール方法: Package Controlで「SideBar」と検索

IMESupport

※Windowsのみ
Windowsでは日本語を入力するときにバグる
それを補完するパッケージ
インストール方法: Package Controlで「IMESupport」と検索

ConvertToUTF8

Sublime Textでは扱えないShift-JIS形式のファイルを扱えるようにするパッケージ
Shift-JISだけでなくアラビア語や中国語にも対応
インストール方法: Package Controlで「ConvertTo」と検索

Codec33 for ST3

※Mac, Linuxのみ
上記のOSの場合、ConvertToUTF8だけでなく、このパッケージも入れないとShift-JISのファイルを扱えない
インストール方法: Package Controlで「Codec33」と検索

AutoFileName

img要素のsrc属性にキャレットがくるとそのファイルと同じ階層にあるディレクトリ/ファイルの一覧を出してくれる
画像を選択すればwidth属性, height属性を自動的に入れてくれる
インストール方法: Package Controlで「AutoFileName」と検索

Tag

名前の通りHTMLのタグをいい感じにしてくれるパッケージ
コードの整形が便利
インストール方法: Package Controlで「Tag」と検索

Goto-CSS-Declaration

HTMLやJavaScriptファイル内に記述しているID名, Class名からCSSの該当行を表示してくれる
インストール方法: Package Controlで「Goto」と検索

Emmet

言わずと知れた神ツール
下記のページを見れば大体凄さがわかるはず

-CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17

インストール方法: Package Controlで「Emmet」と検索

Hayaku

EmmetよりもCSSをファジーに描くことが出来る
下記のページを見れば幸せになれる

-CSSが速くかけるようになるSublime Text2 パッケージ Hayakuで、世界が変わるらしい | inkdesign

インストール方法: Package Controlで「Hayaku」と検索

Emmetと一緒に使う場合は下記の設定を行うこと

  • 「Preference」→「Package Setting」→「Emmet」→「Settings - User」を選択してEmmetの設定ファイルを開く
  • 下記の文言を追記
<code>
{
    // TABキーによる展開を対象の言語のファイルのときに無効化する
    "disble_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}
</code>

LiveReload

ファイルを保存したら自動的にブラウザを更新してくれる
実際のブラウザを使うのでDwのデザインビューよりも圧倒的に高性能。
使えるようにするのにブラウザに拡張機能を入れなければならなかったり若干面倒

LiveReloadが使えるようになるまで

  • Installing extensionsからSafari, Chrome, Firefoxのエクステンションをインストール
  • Githubページに載っている方法で手動インストール
  • コマンドパレット「LiveReload: Enable/disable Plug-ins」を選択
  • 「Enable - Simple Reload」を選択すると動くようになる

Inc-Dec-Value

数値の増減が出来るパッケージ
数値にキャレットを併せてショートカットキーを押すことで数値を操作できる
Emmetに同様の機能はあるが、その高性能版
操作できる数値/文字列は以下の通り インストール方法: Package Controlで「incdecvalue」と検索

  • 10進数
  • 16進数
  • yes/no
  • true/false
  • relative/absolute/fixed
  • top/bottom
  • left/right
  • width/height
  • margin/padding
  • block/none/inline/inline-block
  • h1/h2/h3/h4/h5/h6
  • am/pm
  • sun/mon/tue/wed/thu/fri/sat
  • sunday/monday/tuesday/wednesday/thursday/friday/saturday
  • jan/feb/mar/apr/may/jun/jul/aug/sep/oct/nov/dec

その他諸々

  • AdvancedNewFile: 新規ファイルを作成する時、保存場所を予め指定できる
  • All Autocomplete: 入力補完。CSSの入力時、HTMLファイル内のID名, Class名とか表示してくれる
  • BracketHighLighter: 対応するタグとかカッコとかをハイライトしてくれる
  • SublimeCodeIntel: 関数や変数の定義元にジャンプしたり、コード補完を自動的に表示したり
  • HalfImageSize: width, heightの数値を半減してくれる
  • toggleKatakana: ファイル内の英数カタカナを半角にしたり全角にしたり
  • jQuery: jQueryの入力補完
  • HTML5: HTMLタグの入力補完
  • WordPress: WordPressの関数の入力補完

さいごに

とりあえずこれくらいで。
ここまで読めば普通に使えるかと思う...多分。