CPI x CSS Nite x 優クリエイト 「After Dark」（9） 『「今すぐSublime Textを使いこなす！」90分ライブセットアップ』 フォローアップを公開します

2014年4月17日(木) 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（9） 『「今すぐSublime Textを使いこなす！」90分ライブセットアップ』 のフォローアップを公開します。

CPI x CSS Nite x 優クリエイト「After Dark」（9） from CSS Nite on Vimeo.

こちらもご覧ください。

• CPI x CSS Nite x 優クリエイト 「After Dark」（9）Sublime Textが終了しました | CSS Nite公式サイト

フォローアップ

ご参加いただきましてありがとうございました！

ライブセットアップという形式上、セッション中はSublime Textの画面のみでしたので、紹介した機能やパッケージの名称やショートカットなどを補足させていただきます。

時間の都合上、カットしたパッケージもあるのでせっかくなのでこちらで紹介いたします。紹介したパッケージはほぼ『Sublime Textの教科書』に載っておりますので是非参考にしてください。

基本的な概要やインストールなどはセッション動画及び『Sublime Textの教科書』1章がダウンロードできますので、そちらをご覧ください。

監修のこもりまさあきさんがStorifyでリアルタイムまとめを作成してくれました。こちらも併せてご覧ください。

【紹介した機能】

※Macのショートカットで紹介していますがWindowsはcommandをCtrl、optionをAltとお考えください（一部異なるショートカットもあります）。

コマンドパレット

command+shift+Pでパッケージのインストール

画面分割

[メニュー] View > Layout 画面を分割できる。 command+option+1-4で横分割 command+option+shift+1-2で縦分割

集中モード

[メニュー] View > Enter Distraction Free Mode サイドバーやミニマップなど全てを非表示にして全画面でコードのみを表示する。

HotExit

未保存のファイルのままSublime Textを終了しても、そのまま復元して開くことができます。

複数選択

文字を選択しcommand+Dで以下に続く同じワードを選択できます。 command+Dのあとにcommand+Kをするとスキップできます。 選択を戻す場合はcommand+Uで戻れます。 ※command+Uはソフトアンドゥという機能で選択やキャレットなどをやり直しする機能です。

矩形選択

option＋ドラッグで矩形に選択できます。WinはShift＋右クリック。

検索・置換

command+Fで検索窓表示 option+Enterで検索ワードを一括選択できる。 （テキスト上でcommand+control+Gでもできます。WinはAlt+F3。）

GoTo Anything

command+PでGoto Anythingの検索窓が表示されます。 行やシンボル、ファイルなどを検索し移動できます。

時間の都合で紹介できなかったですが、他にも行の移動や複製、Split into linesなど、まだまだ便利な機能がたくさんあります。詳しくは本書を参考にしてください。 また、プロジェクト機能やスニペット機能なども非常に便利な機能ですので、これらも本書を見ていただけると幸いです。

【紹介したパッケージ】

Package Control

パッケージを管理する基本となるパッケージ コマンドパレットでパッケージのインストール・削除・停止などがSublime Text上で管理できる。 インストールは、[メニュー] View > Show Consoleで開かれる入力欄にこちらのページのソースをコピー＆ペースト。

SublimeNFDToNFCPaste

Macでプレビュー.appなどからテキストをコピーした際、濁点が一文字になってしまうのを解消するパッケージ。

参考URL

Sidebar Enhancement

サイドバーを拡張するパッケージ。プロジェクトの様々な設定が可能になる。

SFTP

サーバーにファイルのアップロードや同期などができるパッケージ 有償パッケージ$20（無期限試用可）

Emmet

キーワードでコードを展開することができるEmmetのパッケージ （例：ul>liを<ul><li></li></ul>、d-iをdisplay:inline;に展開など） Sublime Textはキーワードでのコード補完もしてくれる。 Enter Abbrevitionでリアルタイムに展開をプレビューすることができる。 数字の増減や画像サイズの取得など、他にも便利な機能が多数ある。

Inc-Dec-Value （option+ctrl+command+上下）

Emmetの数字の増減に加えて100の位を増減できるパッケージ。 また、大文字小文字の切り替えや、カラーコード、特定ワードも切り替えることができる。 （例：true⇔false、 inline⇔block⇔inline-blockなど）

Sass-Build

Sassをビルドできるパッケージ。マシンにSassのインストールが必要。 Sublime Textはcommand+Bで対応した言語をビルドをすることができます。

Terminal

現在のファイル及びプロジェクトの場所をカレントディレクトリにしてTerminalまたはコマンドプロ ンプトを開くことができるパッケージ。

SublimeStyleStats

StyleStatsをSublime Textで表示することができるパッケージ； マシンにnode.jsとStyleStatsのインストールが必要。 StlyleStatsについての詳細は作成者の石本氏のBlogをごらんください。

• StyleStats - MOL

※SublimeStyleStats以外はPackage Controlでインストールできます。

【時間の都合で紹介できなかったオススメパッケージ】

Nettuts+ Fetch

WordPressや Normalize.cssなど、定番のライブラリやフレームワーク、プロダクトなどを手軽にダウンロードできる。

cdnjs

CDNのURLを保存、手早く挿入できる。

AutoFileName

update image size (control+shift+I) ユーザー設定ファイルに"afn_insert_width_first": true ← width と height の順番変更 imgタグのsrcやaタグのhrefなどの入力補助。必須と言っても良いパッケージです。

All Autocomplete

別ファイルからのキーワード補完。

Autoprifixer

CSSのプロパティのプリフィクスを自動的に調整してくれる。 マシンにnode.jsとAutoprifixerのインストールが必要。

CSS Comp

CSSのプロパティの順番を並び替え。

List stylesheet variables

Sass、LessなどのCSSプリプロセッサーなどの変数を参照・挿入できるパッケージ。 参照：Sass/Less/Stylusでの変数入力を補助する「List stylesheet variables」(Sublime Text Package)

PackageResourceViewer (control+option+L)

パッケージの設定などを手軽に確認、編集できる。

---

公式のPackage Controlサイトで、人気のパッケージがインストール数順にわかりますので参考にしてください。 新規登録されたパッケージや、いまトレンドのパッケージもわかります。

Facebookページで本書のフォローアップや、更新情報をお知らせしています。 また、こもりまさあきさんによる本書に載っていないパッケージ紹介なども随時更新されておりますのでよかったら「いいね！」お願いします！

Ustream動画

Vimeoのものと内容は同じです。

Video streaming by Ustream