Mastering Sublime Text 2

Emergency! *&#^@*!

Mastering Sublime Text 2 Today!

2012.11.09 CPI x CSS Nite「After Dark」（5）こもりまさあき

緊急指令！噂のSublime Text 2をマスターせよ

1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし

近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、など

Sublime Text 2は、1年ちょっと前のバージョンアップで日本語が使えるようになって以来、ずっと使い続けている

Twitter: @cipher / @proteanbmInstagram: @cipher

こもりまさあき

さらっと自己紹介

ついに、この日がきました…

Sublime Text 2を薦めまくって1年ちょっと…

とあるサイトのコードエディタの評価

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/









ご存知でしたか？、世の中はそうなってると

今日お話しすること

•えー、Sublime Text 2ってスゲー！

•Sublime Text 2の特徴とお作法

•Sublime Text 2をカスタマイズする

•パッケージを使いこなして制作を効率化

えー、Sublime Text 2ってスゲー！


緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

まずは、その実力をご覧いただきましょう



真似してWordPressをインストール



どう？いろいろ便利でしょ？



では、Sublime Text 2の基本から

Sublime Text 2の特徴とお作法



Sublime Text 2の特徴



英語だし取っつきにくい



シンプルすぎて何ができるのかわからない



でも、その奥にあるのは…



パラダイス！



Sublime Text 2の特徴

•クロスプラットフォームで使えるエディタである

•文字列の選択、操作が柔軟にできる

•ファイルの移動や文書内の移動がしやすい

•コマンドパレットからいろいろな操作ができる

•パッケージを使って、好みにカスタマイズできる



Sublime Text 2の画面構成



Sublime Text 2の画面構成はこんな感じ

Sidebar

Main Column

Minimap

Syntax ModeStatus Bar



Sublime Text 2の初期設定



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の初期設定ファイルは…

•初期設定は、すべて JSON形式のテキスト

•各種設定ファイルには、「Default」「User」の区別がある

•優先度が高いのは「User」なので、カスタマイズするなら「User」側に書き足す



JSON形式の初期設定ファイルはこう書く

{

"font_face": "DejaVuSans",

"設定内容": "指定値、true/false、など"

}

※設定毎の区切りは「,（カンマ）」、一番最後の行末には「,」を入力しない



シンタックスエラーだと保存されません



ところで



Codaはオシャレ、Sublime Text 2ときたら…



地味（じみ）



こちら、標準のSublime Text 2の画面



こちら、こもりのSublime Text 2の画面



せめて、テーマとカラースキームは変えたい！



カラースキームの変更はこの辺から好きなのに



テーマの変更は、基本設定ファイルに直接書く



ユーザー設定ファイルにこう書きましょう

{ "color_scheme": "Packages/Theme - Refined/Color Schemes/Tomorrow Night Refined.tmTheme", "theme": "Refined-Dark.sublime-theme",

…}

※パッケージディレクトリ内にあるカラースキームやテーマのファイル名を書く※テーマの配布サイトに記述例は記載されている※テーマやカラースキームはパッケージで提供されている



では、少し使い方の説明に



なんてこたない、ただのテキストエディタです



覚えておくと便利なショートカット



覚えておきたいショートカット（その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



覚えておきたいショートカット（その2）

•移動のためのGoto Anythingは、「 ⌘（Ctrl）＋P」

•文書中のシンボルを移動する「 ⌘（Ctrl）＋R」

•行番号で移動するGoto Lineは、「Ctrl＋G」

•コマンドパレットを表示するためだけにある「 ⌘（Ctrl）＋Shift＋P」※Goto Anythingで「#」「@」「:」を最初に入力すればGotoコマンドの種類がかわる※ショートカットの一覧は、Preferencesの「Key Binding - Default」で確認を



これだけ覚えれば、作業効率が格段に向上



コマンドパレット？



Sublime Text 2のコマンドパレット



コマンドパレットでできること

•テキストのファイルシンタックスの変更eg. textをhtml、css、js、phpなどに切り替える

•あらかじめ用意された各種コマンドの実行

•パッケージによって追加されるコマンドの実行

•いろいろな操作はコマンドパレットから可能



Sublime Text 2でのプロジェクト管理



フォルダをドラッグすれば「プロジェクト」に



プロジェクト関連の操作は、Projectメニューで

Save Project



プロジェクト単位で保存すればアクセスも簡単



次は、Sublime Text 2を拡張しましょう

Sublime Text 2をカスタマイズする



Sublime Text 2のパッケージとは



簡単にいえば、拡張機能



Sublime Text 2にちょっと便利な機能を追加



Sublime Text 2のパッケージとは

•言語別のシンタックスカラーリングを追加

•言語やシステム別の入力補完やスニペットの追加

•一連の作業を自動でおこなうビルドシステム

•テーマやカラースキームを追加

•思いつきそうなのは、大抵のものが揃っている



これらを簡単に使えるのが最大の魅力



世界中の有志に感謝の意を（深々）



Sublime Text 2へのパッケージ導入方法

•パッケージの公開ディレクトリからファイルをダウンロードして手動でインストール

•パッケージ管理ツールを導入してコマンドパレットから自動でインストール



黙ってパッケージ管理ツールを使いましょう



神のようなツール、Sublime Package Control

Sublime Package Control

http://wbond.net/sublime_packages/package_control




Sublime Package Controlのインストール

•パッケージのインストール、アップデート、有効化・無効化といった管理をするパッケージ

•wbond.netで公開されている手順に従って、コンソールからインストールして再起動※Sublime Package Contorol: http://wbond.net/sublime_packages/package_control※インストールの詳細: http://wbond.net/sublime_packages/package_control/installation



http://wbond.net/sublime_packages/package_control/installation

http://wbond.net/sublime_packages/package_control/installation



Package Controlのインストールコマンド



コンソールを出して、ペースト&リターンで

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 Package Controlの使い方



コマンドパレットを呼び出して「Packa…」とか適当に入力しはじめる



はい、コマンド一覧が出てきました



よく使うパッケージ管理コマンドはこちら

•Install Package（パッケージのインストール）

•Remove Package（パッケージのアンインストール）

•Enable Package（パッケージの有効化）

•Disable Package（パッケージの無効化）

•Upgrade Package（パッケージのアップグレード）※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usage

http://wbond.net/sublime_packages/package_control/usage

http://wbond.net/sublime_packages/package_control/usage



Install Packageでパッケージをリストアップ



任意の文字列を入れて、リストを絞り込む



パッケージをリストから選択し、エンターキー



ステータスバーに何か出たら再起動



パッケージは自動的にアップデートされます※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがある



どんなパッケージがあるかわからない？



解説が必要であれば、登録ディレクトリで検索

Sublime Text Packages

http://wbond.net/sublime_packages/community

http://wbond.net/sublime_packages/community



では、Sublime Text 2を使ってみましょう

パッケージを使いこなして制作を効率化



Web制作に便利なの集めてきました



サイドバーの拡張に、SideBarEnhancements

•貧弱すぎるサイドバーに各種メニューを追加する

•ファイルやフォルダを選択して右クリックで表示

•ファイルのリネーム、コピー、移動などが可能に



Shift_JISを開きたいなら、ConvertToUTF8

•Sublime Text 2は、UTF8が標準の文字コード

•Shift_JISやEUC-JPなどのファイルを開けるように

•開くだけでなく、保存も可能

•開くだけなら「EncodingHelper」というのも



最近開いたファイルは、GotoRecentで簡単に

•Sublime Text 2を起動してから開いたファイルをショートカットからパネルを出して呼び出す

•ショートカットは「Ctrl＋Shift＋R」



クリップボードの管理に、Clipboard History

•クリップボード管理のためのパッケージ

•Sublime Text 2を起動後、コピーしたものだけ保存



高速コーディングに、ZenCoding／Emmet

•皆さんご存知Zen-Codingのパッケージ

•設定は「User」ディレクトリに保存しよう

•後継バージョンとされてる「Emmet」もある

•二つを同時に使わないように



ダミー要素を挿入するなら、Placeholders

•Lorem Ipsumのダミーテキスト（段落サイズ別）

•dummyimage.comを使ったダミーイメージ

•Kitchen sinkでHTMLのダミーテンプレート挿入

•トリガーの内容がバッティングする時は、パッケージディレクトリのスニペットを編集

<tabTrigger>呼び出す省略形</tabTrigger>



ちょっとしたスニペット集、Zen Garden

•ちょっと便利なスニペット集

•jQueryのパスをCDN経由にしたり、FacebookのOGPを一度に入力したりできる



ローカルでのバージョン管理にLocal History

•GitやSubversionなどのバージョン管理がなくてもローカルでファイルの編集履歴を残す

•保存毎に履歴が残るので、バックアップ代わりに

•過去の保存ファイルを開く、差分を表示する、といったことが可能

•右クリックか、コマンドパレットから呼び出す



ファイルの最新版は、Nettuts + Fetchで

•ライブラリやフレームワークなど、配布先をあらかじめ登録しておくことでSublime Text 2から直接ダウンロード＆解凍

•単一のファイルでも、zipなどのパッケージでも可

•コマンドパレットから「fetch:」で呼び出す

•Gitがわからない方、ブラウザでは面倒な方、必須



Fetchの使い方はこちらのサイトを見ればOK

Introdusing Nettuts+Fetch

http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/

http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/



画像の挿入を簡単にする、AutoFileName

•画像などのファイル名をディレクトリから取得

•画像の場合は、サイズまで自動入力可能。便利！

•HTMLもCSSもどちらも大丈夫



カラーパレットで色を指定できるColorPicker

•HTMLやCSSの編集中にシステム標準のカラーパレットを呼び出す

•クロスプラットフォーム対応

•ショートカットは「 ⌘（Ctrl）＋Shift＋C」



CSSプリプロセッサを使う人にはこんなのも

•SassやSCSSのスニペット、入力補完など

•LESSのパッケージはシンタックスカラーリングのみ

•SassやLESSは直接ビルドできるパッケージ、「SASS Build」や「LESS-Build」がある

•上記ビルドシステムは、設定の変更が必要



CSSに飛びたいなら、Goto CSS Declaration

•開いているHTMLから、一発で該当セレクタを表示

•CSSはもちろん、Sass/SCSS/LESSにも対応

•CSSなどのファイルは同時に開いておかないとダメ



MarkdownにOmniMarkupPreviewer

•Markdownやその他のテキストをブラウザでプレビューする

•呼び出しはコマンドパレットから

•Markdownの表示は、GitHubのスタイルシートで



Sublime Text 2で直接アップ、Sublime SFTP

•Package Controlの作者による有償のパッケージ

•Sublime Text 2からSFTPでファイルを操作

•アップロード、ダウンロード、同期、差分表示など

•SSH鍵認証によるログインもサポート



Gitを使ってるなら、GitやSideBarGitを

•バージョン管理システム「Git」のコマンドの実行

•「Git」はコマンドパレットや右クリックから

•「SideBarGit」は、サイドバーで右クリック

•「Gist」を使って、オンラインスニペット管理



面倒な文字列の変換に、StringEncode

•テキストのエンコード・デコードをおこなう

•ありとあらゆる形式をサポートしている



ローカルで簡易サーバを立ち上げて確認

•「Sublime Server」は、Pythonで書かれたシンプルなHTTPサーバ

•「Sublime PHP Builtin Web Server」は、PHP 5.4.xから導入された内部サーバを起動



話題のNode.jsを使ってるなら、Nodejsを

•話題の「Node.js」のコード補完

•npm installなど、npmの各種コマンドをコマンドパレットから実行



いっぱいありすぎるんです…



全部解説できないのでまとめておきました



https://bit.ly/st2pkgs





使いこなせるようになれば、世界は変わる

本日のまとめ

•英語で敷居が高そうだが、実はシンプルなエディタ

•ショートカットを覚えるなら必要なものだけで十分

•パッケージを使いこなせば、別次元の仕事環境に

•そして余った時間は、プライベートの充実にｗ



本日はありがとうございました

Technology

Mastering Sublime Text 2