17. Mastering Sublime Text 2 Today!
Sublime Text 2の特徴
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
18. Mastering Sublime Text 2 Today!
英語だし取っつきにくい
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
19. Mastering Sublime Text 2 Today!
シンプルすぎて何ができるのかわからない
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
20. Mastering Sublime Text 2 Today!
でも、その奥にあるのは…
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
21. Mastering Sublime Text 2 Today!
パラダイス!
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
22. Mastering Sublime Text 2 Today!
Sublime Text 2の特徴
•クロスプラットフォームで使えるエディタである
•文字列の選択、操作が柔軟にできる
•ファイルの移動や文書内の移動がしやすい
•コマンドパレットからいろいろな操作ができる
•パッケージを使って、好みにカスタマイズできる
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
23. Mastering Sublime Text 2 Today!
Sublime Text 2の画面構成
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
24. Mastering Sublime Text 2 Today!
Sublime Text 2の画面構成はこんな感じ
Minimap
Sidebar
Main Column
Status Bar Syntax Mode
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
25. Mastering Sublime Text 2 Today!
Sublime Text 2の初期設定
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
26. Mastering Sublime Text 2 Today!
Sublime Text 2の初期設定は、なんとテキスト
{
"caret_style": "blink",
"font_face": "DejaVuSans",
"font_size": 12.0,
"tab_completion": true,
"tab_size": 1,
"translate_tabs_to_spaces": false
}
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
27. Mastering Sublime Text 2 Today!
でも大丈夫。そんな難しくない
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
28. Mastering Sublime Text 2 Today!
Sublime Text 2の初期設定ファイルは…
•初期設定は、すべて JSON形式の テキスト
•各種設定ファイルには、
「Default」「User」の区別がある
•優先度が高いのは「User」なので、
カスタマイズするなら「User」側に書き足す
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
29. Mastering Sublime Text 2 Today!
JSON形式の初期設定ファイルはこう書く
{
"font_face": "DejaVuSans",
"設定内容": "指定値、true/false、など"
}
※設定毎の区切りは「,(カンマ)」、一番最後の行末には「,」を入力しない
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
30. Mastering Sublime Text 2 Today!
シンタックスエラーだと保存されません
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
31. Mastering Sublime Text 2 Today!
ところで
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
32. Mastering Sublime Text 2 Today!
Codaはオシャレ、Sublime Text 2ときたら…
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
33. Mastering Sublime Text 2 Today!
地味(じみ)
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
34. Mastering Sublime Text 2 Today!
こちら、標準のSublime Text 2の画面
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
35. Mastering Sublime Text 2 Today!
こちら、こもりのSublime Text 2の画面
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
36. Mastering Sublime Text 2 Today!
せめて、テーマとカラースキームは変えたい!
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
37. Mastering Sublime Text 2 Today!
カラースキームの変更はこの辺から好きなのに
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
38. Mastering Sublime Text 2 Today!
テーマの変更は、基本設定ファイルに直接書く
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
39. Mastering Sublime Text 2 Today!
ユーザー設定ファイルにこう書きましょう
{
"color_scheme": "Packages/Theme - Refined/Color Schemes/
Tomorrow Night Refined.tmTheme",
"theme": "Refined-Dark.sublime-theme",
…
}
※パッケージディレクトリ内にあるカラースキームやテーマのファイル名を書く
※テーマの配布サイトに記述例は記載されている
※テーマやカラースキームはパッケージで提供されている
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
40. Mastering Sublime Text 2 Today!
では、少し使い方の説明に
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
41. Mastering Sublime Text 2 Today!
なんてこたない、ただのテキストエディタです
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
42. Mastering Sublime Text 2 Today!
覚えておくと便利なショートカット
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
55. Mastering Sublime Text 2 Today!
Sublime Text 2のパッケージとは
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
56. Mastering Sublime Text 2 Today!
簡単にいえば、拡張機能
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
57. Mastering Sublime Text 2 Today!
Sublime Text 2にちょっと便利な機能を追加
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
58. Mastering Sublime Text 2 Today!
Sublime Text 2のパッケージとは
•言語別のシンタックスカラーリングを追加
•言語やシステム別の入力補完やスニペットの追加
•一連の作業を自動でおこなうビルドシステム
•テーマやカラースキームを追加
•思いつきそうなのは、大抵のものが揃っている
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
59. Mastering Sublime Text 2 Today!
これらを簡単に使えるのが最大の魅力
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
60. Mastering Sublime Text 2 Today!
世界中の有志に感謝の意を(深々)
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
61. Mastering Sublime Text 2 Today!
Sublime Text 2へのパッケージ導入方法
•パッケージの公開ディレクトリから
ファイルをダウンロードして手動でインストール
•パッケージ管理ツールを導入して
コマンドパレットから自動でインストール
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
62. Mastering Sublime Text 2 Today!
黙ってパッケージ管理ツールを使いましょう
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
63. Mastering Sublime Text 2 Today!
神のようなツール、Sublime Package Control
Sublime Package Control
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
81. Mastering Sublime Text 2 Today!
Web制作に便利なの集めてきました
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
82. Mastering Sublime Text 2 Today!
サイドバーの拡張に、SideBarEnhancements
•貧弱すぎるサイドバーに各種メニューを追加する
•ファイルやフォルダを選択して右クリックで表示
•ファイルのリネーム、コピー、移動などが可能に
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
83. Mastering Sublime Text 2 Today!
Shift_JISを開きたいなら、ConvertToUTF8
•Sublime Text 2は、UTF8が標準の文字コード
•Shift_JISやEUC-JPなどのファイルを開けるように
•開くだけでなく、保存も可能
•開くだけなら「EncodingHelper」というのも
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
84. Mastering Sublime Text 2 Today!
最近開いたファイルは、GotoRecentで簡単に
•Sublime Text 2を起動してから開いたファイルを
ショートカットからパネルを出して呼び出す
•ショートカットは「Ctrl+Shift+R」
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
85. Mastering Sublime Text 2 Today!
クリップボードの管理に、Clipboard History
•クリップボード管理のためのパッケージ
•Sublime Text 2を起動後、コピーしたものだけ保存
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
86. Mastering Sublime Text 2 Today!
高速コーディングに、ZenCoding/Emmet
•皆さんご存知Zen-Codingのパッケージ
•設定は「User」ディレクトリに保存しよう
•後継バージョンとされてる「Emmet」もある
•二つを同時に使わないように
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
87. Mastering Sublime Text 2 Today!
ダミー要素を挿入するなら、Placeholders
•Lorem Ipsumのダミーテキスト(段落サイズ別)
•dummyimage.comを使ったダミーイメージ
•Kitchen sinkでHTMLのダミーテンプレート挿入
•トリガーの内容がバッティングする時は、
パッケージディレクトリのスニペットを編集
<tabTrigger>呼び出す省略形</tabTrigger>
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
88. Mastering Sublime Text 2 Today!
ちょっとしたスニペット集、Zen Garden
•ちょっと便利なスニペット集
•jQueryのパスをCDN経由にしたり、
FacebookのOGPを一度に入力したりできる
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
89. Mastering Sublime Text 2 Today!
ローカルでのバージョン管理にLocal History
•GitやSubversionなどのバージョン管理がなくても
ローカルでファイルの編集履歴を残す
•保存毎に履歴が残るので、バックアップ代わりに
•過去の保存ファイルを開く、
差分を表示する、といったことが可能
•右クリックか、コマンドパレットから呼び出す
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
90. Mastering Sublime Text 2 Today!
ファイルの最新版は、Nettuts + Fetchで
•ライブラリやフレームワークなど、
配布先をあらかじめ登録しておくことで
Sublime Text 2から直接ダウンロード&解凍
•単一のファイルでも、zipなどのパッケージでも可
•コマンドパレットから「fetch:」で呼び出す
•Gitがわからない方、ブラウザでは面倒な方、必須
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
91. Mastering Sublime Text 2 Today!
Fetchの使い方はこちらのサイトを見ればOK
Introdusing Nettuts+Fetch
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
92. Mastering Sublime Text 2 Today!
画像の挿入を簡単にする、AutoFileName
•画像などのファイル名をディレクトリから取得
•画像の場合は、サイズまで自動入力可能。便利!
•HTMLもCSSもどちらも大丈夫
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
93. Mastering Sublime Text 2 Today!
カラーパレットで色を指定できるColorPicker
•HTMLやCSSの編集中に
システム標準のカラーパレットを呼び出す
•クロスプラットフォーム対応
•ショートカットは「 ⌘(Ctrl)+Shift+C」
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
94. Mastering Sublime Text 2 Today!
CSSプリプロセッサを使う人にはこんなのも
•SassやSCSSのスニペット、入力補完など
•LESSのパッケージはシンタックスカラーリングのみ
•SassやLESSは直接ビルドできるパッケージ、
「SASS Build」や「LESS-Build」がある
•上記ビルドシステムは、設定の変更が必要
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
95. Mastering Sublime Text 2 Today!
CSSに飛びたいなら、Goto CSS Declaration
•開いているHTMLから、一発で該当セレクタを表示
•CSSはもちろん、Sass/SCSS/LESSにも対応
•CSSなどのファイルは同時に開いておかないとダメ
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
96. Mastering Sublime Text 2 Today!
MarkdownにOmniMarkupPreviewer
•Markdownやその他のテキストを
ブラウザでプレビューする
•呼び出しはコマンドパレットから
•Markdownの表示は、GitHubのスタイルシートで
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
97. Mastering Sublime Text 2 Today!
Sublime Text 2で直接アップ、Sublime SFTP
•Package Controlの作者による有償のパッケージ
•Sublime Text 2からSFTPでファイルを操作
•アップロード、ダウンロード、同期、差分表示など
•SSH鍵認証によるログインもサポート
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
98. Mastering Sublime Text 2 Today!
Gitを使ってるなら、GitやSideBarGitを
•バージョン管理システム「Git」のコマンドの実行
•「Git」はコマンドパレットや右クリックから
•「SideBarGit」は、サイドバーで右クリック
•「Gist」を使って、オンラインスニペット管理
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
99. Mastering Sublime Text 2 Today!
面倒な文字列の変換に、StringEncode
•テキストのエンコード・デコードをおこなう
•ありとあらゆる形式をサポートしている
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
100. Mastering Sublime Text 2 Today!
ローカルで簡易サーバを立ち上げて確認
•「Sublime Server」は、
Pythonで書かれたシンプルなHTTPサーバ
•「Sublime PHP Builtin Web Server」は、
PHP 5.4.xから導入された内部サーバを起動
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
101. Mastering Sublime Text 2 Today!
話題のNode.jsを使ってるなら、Nodejsを
•話題の「Node.js」のコード補完
•npm installなど、
npmの各種コマンドをコマンドパレットから実行
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
102. Mastering Sublime Text 2 Today!
いっぱいありすぎるんです…
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
103. Mastering Sublime Text 2 Today!
全部解説できないのでまとめておきました
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
104. Mastering Sublime Text 2 Today!
https://bit.ly/st2pkgs
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
105. Mastering Sublime Text 2 Today!
使いこなせるようになれば、世界は変わる
緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki