Getting Started with Sublime Text 2

Getting Started with Sublime Text 2

2012.11.07第0回 Sublime Text 2 勉強会

こもりまさあき

Sublime Text 2 ことはじめ

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

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

Twitter: @cipher / @proteanbmInstagram: @cipher

こもりまさあき

自己紹介

あのですね…

なんかこんなのが出ちゃうと困るんですけどｗ

http://liginc.co.jp/designer/archives/6774



気を取りなおして、今日お話しすること

•Sublime Text 2ことはじめ

•パッケージを使ってカスタマイズしよう

Sublime Text 2ことはじめ


Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki

Sublime Text 2の特徴



顔ともいえるアイコンの人気がないらしい



それは一旦おいといて



Sublime Text 2の特徴

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

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

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

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



Sublime Text 2の画面構成をみてみましょう



サイドバー、メインカラム、ミニマップ



Sublime Text 2の初期設定ファイル



Sublime Text 2の設定ファイルはこんなもの

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

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

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



これが、Sublime Text 2の設定ファイル

{

"caret_style": "blink",

"font_face": "DejaVuSans",

"font_size": 12.0,

"tab_completion": true,

"tab_size": 1,

"translate_tabs_to_spaces": false

}



JSONになってるので、その記法で書きましょう

{

"font_face": "DejaVuSans",

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

}

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



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



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のショートカット: 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コマンドの種類がかわる



これらが他にあまりないショートカット



で、ショートカットに出てきたコマンドパレット



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



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

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

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

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



そうそう、フォルダはまるごと管理可能



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



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



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

パッケージを使ってカスタマイズしよう



Sublime Text 2のパッケージとは



簡単にいえば、拡張機能のこと



世界中の有志が公開しているパッケージ



公開されているパッケージはこんなもの

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

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

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

•一連の仕事を全自動でおこなうビルドシステム

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



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



Sublime Text 2にパッケージを導入する

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

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



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



神のようなツール、Sublime 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



Package Controlのインストールコードはこれ



Consoleを出して、ペースト&リターンで

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…」とか適当に入力しはじめる



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

※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usage



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



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



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



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



解説が必要であれば、Communityで検索する



あとは好みでSublime Text 2をカスタマイズ



https://gist.github.com/4029897





Getting Started with Sublime Text 2!!

コレ、これまでの解説で一番詳しいはずです






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

Getting Started with Sublime Text 2

Technology

Transcript of Getting Started with Sublime Text 2