9. Sublime Text 2 Basics
Sublime Text 2って…
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
10. Sublime Text 2 Basics
英語だし取っつきにくい
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
11. Sublime Text 2 Basics
シンプルすぎて何ができるのかわからない
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
12. Sublime Text 2 Basics
でも、使い慣れてくると…
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
13. Sublime Text 2 Basics
パラダイス!
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
14. Sublime Text 2 Basics
Sublime Text 2の特徴
•クロスプラットフォームで使えるエディタである
•文字列の選択、操作が柔軟にできる
•ファイルの移動や文書内の移動がしやすい
•コマンドパレットからいろいろな操作ができる
•パッケージを使って、好みにカスタマイズできる
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
15. Sublime Text 2 Basics
Sublime Text 2の画面構成
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
16. Sublime Text 2 Basics
Sublime Text 2の画面構成はこんな感じ
Minimap
Sidebar
Main Column
Status Bar Syntax Mode
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
17. Sublime Text 2 Basics
Sublime Text 2の初期設定
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
18. Sublime Text 2 Basics
Sublime Text 2の初期設定ファイルは…
•初期設定は、すべて JSON形式の テキスト
•各種設定ファイルには、
「Default」「User」の区別がある
•優先度が高いのは「User」なので、
カスタマイズするなら「User」側に書き足す
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
19. Sublime Text 2 Basics
JSON形式の初期設定ファイルはこう書く
{
"font_face": "DejaVuSans",
"設定内容": "指定値、true/false、など"
}
※設定毎の区切りは「,(カンマ)」、一番最後の行末には「,」を入力しない
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
20. Sublime Text 2 Basics
シンタックスエラーだと保存されません
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
21. Sublime Text 2 Basics
では、少し使い方の説明に
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
22. Sublime Text 2 Basics
なんてこたない、ただのテキストエディタです
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
23. Sublime Text 2 Basics
覚えておくと便利なショートカット
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
24. Sublime Text 2 Basics
覚えておきたいショートカット(その1)
•コードの入力補完の呼び出しは「Ctrl+Space」
•単語だけを選択する「⌘(Ctrl)+D」
•選択した単語をページ内で検索し選択する
「 ⌘+Ctrl+G(Alt+F3)」
•複数行にまたいでキャレットをおいて編集できる
「Ctrl+Shift+↓」「Ctrl+Shift+↑」
※OS Xでは「Ctrl+Space」がスポットライトの初期設定なので、必要に応じて変更しましょう
※OS Xのショートカット: https://gist.github.com/1836003
※Windowsのショートカット: https://gist.github.com/2011069
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
25. Sublime Text 2 Basics
覚えておきたいショートカット(その2)
•移動のためのGoto Anythingは、「 ⌘(Ctrl) +P」
•文書中のシンボルを移動する「 ⌘(Ctrl) +R」
•行番号で移動するGoto Lineは、「Ctrl+G」
•コマンドパレットを表示するためだけにある
「 ⌘(Ctrl) +Shift+P」
※Goto Anythingで「#」「@」「:」を最初に入力すればGotoコマンドの種類がかわる
※ショートカットの一覧は、Preferencesの「Key Binding - Default」で確認を
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
26. Sublime Text 2 Basics
まず、これだけ覚えておきましょう
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
27. Sublime Text 2 Basics
コマンドパレット?
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
28. Sublime Text 2 Basics
Sublime Text 2のコマンドパレット
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
29. Sublime Text 2 Basics
コマンドパレットでできること
•テキストのファイルシンタックスの変更
eg. textをhtml、css、js、phpなどに切り替える
•あらかじめ用意された各種コマンドの実行
•パッケージによって追加されるコマンドの実行
•いろいろな操作はコマンドパレットから可能
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
30. Sublime Text 2 Basics
Sublime Text 2でプロジェクト管理する
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
31. Sublime Text 2 Basics
フォルダをドラッグすれば「プロジェクト」に
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
32. Sublime Text 2 Basics
プロジェクト関連の操作は、Projectメニューで
Save Project
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
33. Sublime Text 2 Basics
プロジェクト単位で保存すればアクセスも簡単
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
34. Sublime Text 2 Basics
次は、Sublime Text 2を拡張しましょう
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
36. Sublime Text 2 Basics
パッケージ?
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
37. Sublime Text 2 Basics
簡単にいえば、拡張機能
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
38. Sublime Text 2 Basics
Sublime Text 2にちょっと便利な機能を追加
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
39. Sublime Text 2 Basics
Sublime Text 2のパッケージとは
•言語別のシンタックスカラーリングを追加
•言語やシステム別の入力補完やスニペットの追加
•一連の作業を自動でおこなうビルドシステム
•テーマやカラースキームを追加
•思いつきそうなのは、大抵のものが揃っている
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
40. Sublime Text 2 Basics
これらを簡単に使えるのが最大の魅力
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
41. Sublime Text 2 Basics
世界中の有志に感謝の意を(深々)
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
42. Sublime Text 2 Basics
Sublime Text 2へのパッケージ導入方法
•パッケージの公開ディレクトリから
ファイルをダウンロードして手動でインストール
•パッケージ管理ツールを導入して
コマンドパレットから自動でインストール
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
43. Sublime Text 2 Basics
黙ってパッケージ管理ツールを使いましょう
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
44. Sublime Text 2 Basics
神のようなツール、Sublime Package Control
Sublime Package Control
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
45. Sublime Text 2 Basics
Sublime Package Controlのインストール
•パッケージのインストール、アップデート、
有効化・無効化といった管理をするパッケージ
•wbond.netで公開されている手順に従って、
コンソールからインストールして再起動
※Sublime Package Contorol: http://wbond.net/sublime_packages/package_control
※インストールの詳細: http://wbond.net/sublime_packages/package_control/installation
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
46. Sublime Text 2 Basics
Package Controlのインストールコマンド
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
47. Sublime Text 2 Basics
コンソールを出して、ペースト&リターンで
import urllib2,os; pf='Package Control.sublime-package';
ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not
os.path.exists(ipp) else None;
urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())
); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://
sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please
restart Sublime Text to finish installation'
※コンソールは: 「View」メニューの「Show Console(Ctrlキー + ` )」から
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
48. Sublime Text 2 Basics
終わったら、再起動しましょう
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
49. Sublime Text 2 Basics
Sublime Package Controlの使い方
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
50. Sublime Text 2 Basics
コマンドパレットを呼び出して
「Packa…」とか適当に入力しはじめる
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
51. Sublime Text 2 Basics
はい、コマンド一覧が出てきました
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
52. Sublime Text 2 Basics
よく使うパッケージ管理コマンドはこちら
•Install Package(パッケージのインストール)
•Remove Package(パッケージのアンインストール)
•Enable Package(パッケージの有効化)
•Disable Package(パッケージの無効化)
•Upgrade Package(パッケージのアップグレード)
※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usage
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
53. Sublime Text 2 Basics
Install Packageでパッケージをリストアップ
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
54. Sublime Text 2 Basics
任意の文字列を入れて、リストを絞り込む
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
55. Sublime Text 2 Basics
パッケージをリストから選択し、エンターキー
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
56. Sublime Text 2 Basics
ステータスバーに何か出たら再起動
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
57. Sublime Text 2 Basics
パッケージは自動的にアップデートされます
※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがある
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
58. Sublime Text 2 Basics
どんなパッケージがあるかわからない?
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
59. Sublime Text 2 Basics
解説が必要であれば、登録ディレクトリで検索
Sublime Text Packages
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
60. Sublime Text 2 Basics
では、Sublime Text 2を使ってみましょう
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
62. Sublime Text 2 Basics
まず、必須系から
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
63. Sublime Text 2 Basics
サイドバーの拡張に、SideBarEnhancements
•貧弱すぎるサイドバーに各種メニューを追加する
•ファイルやフォルダを選択して右クリックで表示
•ファイルのリネーム、コピー、移動などが可能に
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
64. Sublime Text 2 Basics
Shift_JISを開きたいなら、ConvertToUTF8
•Sublime Text 2は、UTF8が標準の文字コード
•Shift_JISやEUC-JPなどのファイルを開けるように
•開くだけでなく、保存も可能
•開くだけなら「EncodingHelper」というのも
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
65. Sublime Text 2 Basics
最近開いたファイルは、GotoRecentで簡単に
•Sublime Text 2を起動してから開いたファイルを
ショートカットからパネルを出して呼び出す
•ショートカットは「Ctrl+Shift+R」
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
66. Sublime Text 2 Basics
クリップボードの管理に、Clipboard History
•クリップボード管理のためのパッケージ
•Sublime Text 2を起動後、コピーしたものだけ保存
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
67. Sublime Text 2 Basics
ローカルでのバージョン管理にLocal History
•GitやSubversionなどのバージョン管理がなくても
ローカルでファイルの編集履歴を残す
•保存毎に履歴が残るので、バックアップ代わりに
•過去の保存ファイルを開く、
差分を表示する、といったことが可能
•右クリックか、コマンドパレットから呼び出す
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
68. Sublime Text 2 Basics
それと、Web制作系で便利そうなの
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
69. Sublime Text 2 Basics
高速コーディングに、Emmet & Hayaku
•Zen-Codingは、Emmetになりました
•HTML/CSSの入力を省略形で
•Hayakuは、CSSの入力に特化したもの。
適当に入力しても展開される(Emmetにもある)
tdn → text-decoration:none;
bgcF → background-color:#FFF; などなど
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
70. Sublime Text 2 Basics
ダミー要素を挿入するなら、Placeholders
•Lorem Ipsumのダミーテキスト(段落サイズ別)
•dummyimage.comを使ったダミーイメージ
•Kitchen sinkでHTMLのダミーテンプレート挿入
•トリガーの内容がバッティングする時は、
パッケージディレクトリのスニペットを編集
<tabTrigger>呼び出す省略形</tabTrigger>
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
71. Sublime Text 2 Basics
ちょっとしたスニペット集、Zen Garden
•ちょっと便利なスニペット集
•jQueryのパスをCDN経由にしたり、
FacebookのOGPを一度に入力したりできる
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
72. Sublime Text 2 Basics
ファイルの最新版は、Nettuts + Fetchで
•ライブラリやフレームワークなど、
配布先をあらかじめ登録しておくことで
Sublime Text 2から直接ダウンロード&解凍
•単一のファイルでも、zipなどのパッケージでも可
•コマンドパレットから「fetch:」で呼び出す
•Gitがわからない方、ブラウザでは面倒な方、必須
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
73. Sublime Text 2 Basics
画像の挿入を簡単にする、AutoFileName
•画像などのファイル名をディレクトリから取得
•画像の場合は、サイズまで自動入力可能。便利!
•HTMLもCSSもどちらも大丈夫
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
74. Sublime Text 2 Basics
カラーパレットで色を指定できるColorPicker
•HTMLやCSSの編集中に
システム標準のカラーパレットを呼び出す
•クロスプラットフォーム対応
•ショートカットは「 ⌘(Ctrl)+Shift+C」
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
75. Sublime Text 2 Basics
CSSプリプロセッサを使う人にはこんなのも
•SassやSCSSのスニペット、入力補完など
•LESSのパッケージはシンタックスカラーリングのみ
•SassやLESSは直接ビルドできるパッケージ、
「SASS Build」や「LESS-Build」がある
•上記ビルドシステムは、設定の変更が必要
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
76. Sublime Text 2 Basics
CSSに飛びたいなら、Goto CSS Declaration
•開いているHTMLから、一発で該当セレクタを表示
•CSSはもちろん、Sass/SCSS/LESSにも対応
•CSSなどのファイルは同時に開いておかないとダメ
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
77. Sublime Text 2 Basics
MarkdownにOmniMarkupPreviewer
•Markdownやその他のテキストを
ブラウザでプレビューする
•呼び出しはコマンドパレットから
•Markdownの表示は、GitHubのスタイルシートで
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
78. Sublime Text 2 Basics
Sublime Text 2で直接アップ、Sublime SFTP
•Package Controlの作者による有償のパッケージ
•Sublime Text 2からSFTPでファイルを操作
•アップロード、ダウンロード、同期、差分表示など
•SSH鍵認証によるログインもサポート
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
79. Sublime Text 2 Basics
Gitを使ってるなら、GitやSideBarGitを
•バージョン管理システム「Git」のコマンドの実行
•「Git」はコマンドパレットや右クリックから
•「SideBarGit」は、サイドバーで右クリック
•「Gist」を使って、オンラインスニペット管理
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
80. Sublime Text 2 Basics
面倒な文字列の変換に、StringEncode
•テキストのエンコード・デコードをおこなう
•ありとあらゆる形式をサポートしている
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
81. Sublime Text 2 Basics
ローカルで簡易サーバを立ち上げて確認
•「Sublime Server」は、
Pythonで書かれたシンプルなHTTPサーバ
•「Sublime PHP Builtin Web Server」は、
PHP 5.4.xから導入された内部サーバを起動
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
82. Sublime Text 2 Basics
話題のNode.jsを使ってるなら、Nodejsを
•話題の「Node.js」のコード補完
•npm installなど、
npmの各種コマンドをコマンドパレットから実行
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
83. Sublime Text 2 Basics
いっぱいありすぎるんです…
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
84. Sublime Text 2 Basics
全部解説できないのでまとめておきました
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
85. Sublime Text 2 Basics
https://gist.github.com/4048934
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
86. Sublime Text 2 Basics
使いこなせるようになれば、世界は変わる
Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき