2014.08.09 Re:Creator's Kansai 『SUBLIME SONIC 2014』 のスライドです。

1. Sublime Text
を加速する
パッケージの紹介
SUBLIME SONIC 2014
Re:Creator's Kansai
2014.08.09

2. Sou-Lab.
!
@sou_lab
フリーランス
デザインとかコーディングとか
ディレクションとか
Web制作者のための
Sassの教科書
Web制作者のための
SublimeTextの教科書

3. 今回は…
・Sublime Text3のパッケージを紹介しています。
・フロントエンド向けパッケージを紹介しています。
・スライドとデモを行き来してわちゃわちゃします🙇
!

4. Sublime Textは

5. 拡張してなんぼ

6. コードをコピペして

7. コードをコピペして

8. 検索するだけ

9. まずは、ひとまず
入れとこう系パッケージ

10. なにはともあれ、Emmet

11. [tab] or [Control]+[E]

12. [tab] or [Control]+[E]

13. それさっき見たよ！

14. コード展開がメインですが、
それ以外にも色々できます

15. コード展開がメインですが、
それ以外にも色々できます
・画像サイズ取得
・画像Data URI変換
・数値の増減
・ファジーサーチ（コードヒントも出る）
・コード選択や操作のパワーアップ
などなど Sublime Textとの相性抜群

16. Emmet製その他パッケージ
・Emmet Style Reflector
・Emmet LiveStyle
!

17. Emmet Style Reflector
htmlを展開と同時にセレクタを生成
（Sass/LESS用）

18. Sublime Text ⇔ ブラウザの
双方向編集が可能（ただし現状CSSのみ）
Emmet LiveStyle

19. レスポンシブのブラウザ検証ツール
（Chromeエクステンション）
Emmet Re:View
というのも出てましたね

20. Emmetと相性のいいパッケージ
・Auto File Name（ファイル名保管）
・Inc-Dec-Value（数値増減やテキスト入れ替え）
・Hayaku（CSSはこっち派の人も）
!

21. Dreamweaverの
あの機能が欲しい

22. ドキュメントをバリデート
→ W3CValidators

23. セレクタにジャンプ
→ Goto CSS declaration
!
or Goto Definition（標準機能）

24. ソースフォーマットの適用
→ Tag or HTMLBeautify（HTML）
→ CSS Format（CSS）

25. 閉じタグコメント（拡張機能）
→ CloseCommentTag

26. F12でブラウザを開く
→ Sidebar Enhancements

27. サーバーにアップ/ダウンロード
→ SFTP

28. クリッカブルマップ
これはDw最強

29. クリッカブルマップ
これはDw最強
サイト全体のパスの書き換えや検索置換や
クリッカブルマップあたりはSublimeは苦手

30. 最近よく聞く
あのパッケージもある

42. すぐにパッケージが
開発される
ありがたやありがたや

43. トレンドや新しいパッケージは
wbond.netで確認できる

44. ポストプロセッサも便利

45. や で色々できる
ポストプロセッサですが

46. も簡単に
ポストプロセッサれます

47. ベンダープレフィックスの調整
→ Autoprefixer
ベンダープレフィックスの削除や追加、
ブラウザーのバージョンを指定可能。

48. CSSプロパティの順番調整
→ CSS Comb!
プロパティの並び順は指定可能

49. メディアクエリをまとめる
→ SublimeCombineMediaQueries
バラバラに書いたメディアクエリも、
これで気にしなくてオケ
このパッケージはPackageControl未登録なので、Add Repositoryを
https://github.com/astronaughts/SublimeCombineMediaQueries

50. コードのミニファイ（軽量化）
→ Minify!
Minify系パッケージは他にも沢山あり

51. ミニファイをもどす
→ HTML-CSS-JS Prettify!
Minifyされたファイルのとき便利

52. セレクタが4095個を超えた
→ BlessCss
Sassってるとたーまになる

53. !
Sublime Textの教科書に
載ってない神パッケージ

54. コードをREPLしてしてくれる
評価結果はコメントに書き込まれる
Worksheet

55. 変数を一覧表示＆呼び出し
（Sass/Less/Stylus）
List stylesheet variables

56. CSSを評価するStyle Statsを
Sublime Textで実行できる！
このパッケージはPackageControl未登録なので、Add Repositoryを
https://github.com/astronaughts/SublimeStyleStats
Style Stats

57. !
パッケージを
沢山入れた時の問題解消

58. Sublime重くならない？
→ 非同期だから重くならない
3からはプラグインプロセスが分離、
パッケージが原因クラッシュもしない（はず）

59. キーバインドのバッティング
→ FindKeyConflicts

60. 複数台に入れるのめんどい
パッケージフォルダごと同期すれば
設定は同期できる
→ クラウドストレージにシンボリックリンク
→ Gitで同期（オススメ）
→ Sublimall（容量制限ありで微妙）
!
!

61. その他オススメパッケージは
こちらをご参考に

62. リンク付き⋮(ृ｀ᾥ ´)ु⋮
Qiitaでも一覧載ってます。

63. ありがとうございました
@sou_lab