Sublime Text 2 BasicsSublime Text 2、その基本と活用2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
さらっと自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフ...
今日お話しすること•え? Sublime Text 2ってスゲー!•Sublime Text 2の特徴とお作法•Sublime Text 2をカスタマイズする•パッケージを使いこなして制作を効率化
え? Sublime Text 2ってスゲー!
Sublime Text 2 Basics       まずは、その実力をご覧いただきましょうSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics                         どう?いろいろ便利でしょ?Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2...
Sublime Text 2 Basics                    じゃ、Sublime Text 2の基本をSublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Tex...
Sublime Text 2の特徴とお作法
Sublime Text 2 Basics                         Sublime Text 2って…Sublime Text 2、その基本と活用                2012.12.14 第1回 Sublim...
Sublime Text 2 Basics                         英語だし取っつきにくいSublime Text 2、その基本と活用           2012.12.14 第1回 Sublime Text 2 勉強...
Sublime Text 2 Basics        シンプルすぎて何ができるのかわからないSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics                         でも、使い慣れてくると…Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2 ...
Sublime Text 2 Basics                         パラダイス!Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2 勉強会 in...
Sublime Text 2 Basics                         Sublime Text 2の特徴          •クロスプラットフォームで使えるエディタである          •文字列の選択、操作が柔軟にでき...
Sublime Text 2 Basics                         Sublime Text 2の画面構成Sublime Text 2、その基本と活用                 2012.12.14 第1回 Sub...
Sublime Text 2 Basics           Sublime Text 2の画面構成はこんな感じ                                                Minimap          ...
Sublime Text 2 Basics                         Sublime Text 2の初期設定Sublime Text 2、その基本と活用                 2012.12.14 第1回 Sub...
Sublime Text 2 Basics           Sublime Text 2の初期設定ファイルは…          •初期設定は、すべて JSON形式の テキスト          •各種設定ファイルには、          ...
Sublime Text 2 Basics        JSON形式の初期設定ファイルはこう書く          {                "font_face": "DejaVuSans",                "設定内...
Sublime Text 2 Basics            シンタックスエラーだと保存されませんSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもり...
Sublime Text 2 Basics                         では、少し使い方の説明にSublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2 ...
Sublime Text 2 Basics   なんてこたない、ただのテキストエディタですSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics                 覚えておくと便利なショートカットSublime Text 2、その基本と活用      2012.12.14 第1回 Sublime Text 2 勉強会 in Osa...
Sublime Text 2 Basics          覚えておきたいショートカット(その1)          •コードの入力補完の呼び出しは「Ctrl+Space」          •単語だけを選択する「⌘(Ctrl)+D」    ...
Sublime Text 2 Basics          覚えておきたいショートカット(その2)          •移動のためのGoto Anythingは、「 ⌘(Ctrl) +P」          •文書中のシンボルを移動する「 ⌘...
Sublime Text 2 Basics                 まず、これだけ覚えておきましょうSublime Text 2、その基本と活用      2012.12.14 第1回 Sublime Text 2 勉強会 in Osa...
Sublime Text 2 Basics                         コマンドパレット?Sublime Text 2、その基本と活用          2012.12.14 第1回 Sublime Text 2 勉強会 i...
Sublime Text 2 Basics                Sublime Text 2のコマンドパレットSublime Text 2、その基本と活用          2012.12.14 第1回 Sublime Text 2 ...
Sublime Text 2 Basics                        コマンドパレットでできること          •テキストのファイルシンタックスの変更            eg. textをhtml、css、js、p...
Sublime Text 2 Basics           Sublime Text 2でプロジェクト管理するSublime Text 2、その基本と活用     2012.12.14 第1回 Sublime Text 2 勉強会 in O...
Sublime Text 2 Basics   フォルダをドラッグすれば「プロジェクト」にSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics  プロジェクト関連の操作は、Projectメニューで                         Save ProjectSublime Text 2、その基本と活用               ...
Sublime Text 2 Basics    プロジェクト単位で保存すればアクセスも簡単Sublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics           次は、Sublime Text 2を拡張しましょうSublime Text 2、その基本と活用     2012.12.14 第1回 Sublime Text 2 勉強会 in O...
Sublime Text 2をカスタマイズする
Sublime Text 2 Basics                         パッケージ?Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2 勉強会 in...
Sublime Text 2 Basics                         簡単にいえば、拡張機能Sublime Text 2、その基本と活用           2012.12.14 第1回 Sublime Text 2 勉強...
Sublime Text 2 Basics     Sublime Text 2にちょっと便利な機能を追加Sublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こ...
Sublime Text 2 Basics                   Sublime Text 2のパッケージとは          •言語別のシンタックスカラーリングを追加          •言語やシステム別の入力補完やスニペット...
Sublime Text 2 Basics              これらを簡単に使えるのが最大の魅力Sublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こも...
Sublime Text 2 Basics                 世界中の有志に感謝の意を(深々)Sublime Text 2、その基本と活用      2012.12.14 第1回 Sublime Text 2 勉強会 in Osa...
Sublime Text 2 Basics           Sublime Text 2へのパッケージ導入方法          •パッケージの公開ディレクトリから            ファイルをダウンロードして手動でインストール    ...
Sublime Text 2 Basics     黙ってパッケージ管理ツールを使いましょうSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics  神のようなツール、Sublime Package Control  Sublime Package ControlSublime Text 2、その基本と活用      2012.12.14 第1回...
Sublime Text 2 Basics        Sublime Package Controlのインストール          •パッケージのインストール、アップデート、            有効化・無効化といった管理をするパッケー...
Sublime Text 2 Basics         Package ControlのインストールコマンドSublime Text 2、その基本と活用    2012.12.14 第1回 Sublime Text 2 勉強会 in Osa...
Sublime Text 2 Basics      コンソールを出して、ペースト&リターンで          import urllib2,os; pf=Package Control.sublime-package;          i...
Sublime Text 2 Basics                        終わったら、再起動しましょうSublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2...
Sublime Text 2 Basics                Sublime Package Controlの使い方Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime T...
Sublime Text 2 Basics             コマンドパレットを呼び出して           「Packa…」とか適当に入力しはじめるSublime Text 2、その基本と活用   2012.12.14 第1回 Sub...
Sublime Text 2 Basics                 はい、コマンド一覧が出てきましたSublime Text 2、その基本と活用      2012.12.14 第1回 Sublime Text 2 勉強会 in Osa...
Sublime Text 2 Basics        よく使うパッケージ管理コマンドはこちら          •Install Package(パッケージのインストール)          •Remove Package(パッケージのアン...
Sublime Text 2 Basics     Install PackageでパッケージをリストアップSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/...
Sublime Text 2 Basics        任意の文字列を入れて、リストを絞り込むSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics   パッケージをリストから選択し、エンターキーSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics              ステータスバーに何か出たら再起動Sublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもり...
Sublime Text 2 Basics       パッケージは自動的にアップデートされます      ※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがあるSublime Text 2、その基本と活...
Sublime Text 2 Basics           どんなパッケージがあるかわからない?Sublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりま...
Sublime Text 2 Basics 解説が必要であれば、登録ディレクトリで検索  Sublime Text PackagesSublime Text 2、その基本と活用    2012.12.14 第1回 Sublime Text 2 ...
Sublime Text 2 Basics      では、Sublime Text 2を使ってみましょうSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こ...
パッケージを使いこなして制作を効率化
Sublime Text 2 Basics                         まず、必須系からSublime Text 2、その基本と活用          2012.12.14 第1回 Sublime Text 2 勉強会 in...
Sublime Text 2 Basics サイドバーの拡張に、SideBarEnhancements          •貧弱すぎるサイドバーに各種メニューを追加する          •ファイルやフォルダを選択して右クリックで表示     ...
Sublime Text 2 Basics      Shift_JISを開きたいなら、ConvertToUTF8          •Sublime Text 2は、UTF8が標準の文字コード          •Shift_JISやEUC-...
Sublime Text 2 Basics  最近開いたファイルは、GotoRecentで簡単に          •Sublime Text 2を起動してから開いたファイルを            ショートカットからパネルを出して呼び出す  ...
Sublime Text 2 Basics   クリップボードの管理に、Clipboard History          •クリップボード管理のためのパッケージ          •Sublime Text 2を起動後、コピーしたものだけ保...
Sublime Text 2 Basics   ローカルでのバージョン管理にLocal History          •GitやSubversionなどのバージョン管理がなくても            ローカルでファイルの編集履歴を残す  ...
Sublime Text 2 Basics               それと、Web制作系で便利そうなのSublime Text 2、その基本と活用    2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/...
Sublime Text 2 Basics        高速コーディングに、Emmet & Hayaku          •Zen-Codingは、Emmetになりました          •HTML/CSSの入力を省略形で        ...
Sublime Text 2 Basics      ダミー要素を挿入するなら、Placeholders          •Lorem Ipsumのダミーテキスト(段落サイズ別)          •dummyimage.comを使ったダミー...
Sublime Text 2 Basics        ちょっとしたスニペット集、Zen Garden          •ちょっと便利なスニペット集          •jQueryのパスをCDN経由にしたり、            Fac...
Sublime Text 2 Basics         ファイルの最新版は、Nettuts + Fetchで          •ライブラリやフレームワークなど、            配布先をあらかじめ登録しておくことで         ...
Sublime Text 2 Basics       画像の挿入を簡単にする、AutoFileName          •画像などのファイル名をディレクトリから取得          •画像の場合は、サイズまで自動入力可能。便利!     ...
Sublime Text 2 Basics   カラーパレットで色を指定できるColorPicker          •HTMLやCSSの編集中に            システム標準のカラーパレットを呼び出す          •クロスプラッ...
Sublime Text 2 Basics     CSSプリプロセッサを使う人にはこんなのも          •SassやSCSSのスニペット、入力補完など          •LESSのパッケージはシンタックスカラーリングのみ      ...
Sublime Text 2 Basics    CSSに飛びたいなら、Goto CSS Declaration          •開いているHTMLから、一発で該当セレクタを表示          •CSSはもちろん、Sass/SCSS/L...
Sublime Text 2 Basics          MarkdownにOmniMarkupPreviewer          •Markdownやその他のテキストを            ブラウザでプレビューする          ...
Sublime Text 2 Basics  Sublime Text 2で直接アップ、Sublime SFTP          •Package Controlの作者による有償のパッケージ          •Sublime Text 2か...
Sublime Text 2 Basics           Gitを使ってるなら、GitやSideBarGitを          •バージョン管理システム「Git」のコマンドの実行          •「Git」はコマンドパレットや右クリ...
Sublime Text 2 Basics           面倒な文字列の変換に、StringEncode          •テキストのエンコード・デコードをおこなう          •ありとあらゆる形式をサポートしているSublime...
Sublime Text 2 Basics          ローカルで簡易サーバを立ち上げて確認          •「Sublime Server」は、            Pythonで書かれたシンプルなHTTPサーバ         ...
Sublime Text 2 Basics       話題のNode.jsを使ってるなら、Nodejsを          •話題の「Node.js」のコード補完          •npm installなど、            npm...
Sublime Text 2 Basics                         いっぱいありすぎるんです…Sublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2...
Sublime Text 2 Basics       全部解説できないのでまとめておきましたSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
Sublime Text 2 Basics                        https://gist.github.com/4048934Sublime Text 2、その基本と活用                        ...
Sublime Text 2 Basics       使いこなせるようになれば、世界は変わるSublime Text 2、その基本と活用   2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
本日のまとめ•英語で敷居が高そうだが、実はシンプルなエディタ•ショートカットを覚えるなら必要なものだけで十分•パッケージを使いこなせば、別次元の仕事環境に•そして余った時間は、プライベートの充実にw
Sublime Text 2 Basics                        本日はありがとうございましたSublime Text 2、その基本と活用            2012.12.14 第1回 Sublime Text 2...
Upcoming SlideShare
Loading in …5
×

Sublime Text 2 Basics

9,429 views

Published on

2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka

Published in: Technology
1 Comment
61 Likes
Statistics
Notes
No Downloads
Views
Total views
9,429
On SlideShare
0
From Embeds
0
Number of Embeds
528
Actions
Shares
0
Downloads
83
Comments
1
Likes
61
Embeds 0
No embeds

No notes for slide

Sublime Text 2 Basics

  1. 1. Sublime Text 2 BasicsSublime Text 2、その基本と活用2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  2. 2. さらっと自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などSublime Text 2は、1年ちょっと前のバージョンアップで日本語が使えるようになって以来、ずっと使い続けているTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. 今日お話しすること•え? Sublime Text 2ってスゲー!•Sublime Text 2の特徴とお作法•Sublime Text 2をカスタマイズする•パッケージを使いこなして制作を効率化
  4. 4. え? Sublime Text 2ってスゲー!
  5. 5. Sublime Text 2 Basics まずは、その実力をご覧いただきましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  6. 6. Sublime Text 2 Basics どう?いろいろ便利でしょ?Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  7. 7. Sublime Text 2 Basics じゃ、Sublime Text 2の基本をSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  8. 8. Sublime Text 2の特徴とお作法
  9. 9. Sublime Text 2 Basics Sublime Text 2って…Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  10. 10. Sublime Text 2 Basics 英語だし取っつきにくいSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  11. 11. Sublime Text 2 Basics シンプルすぎて何ができるのかわからないSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  12. 12. Sublime Text 2 Basics でも、使い慣れてくると…Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  13. 13. Sublime Text 2 Basics パラダイス!Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  14. 14. Sublime Text 2 Basics Sublime Text 2の特徴 •クロスプラットフォームで使えるエディタである •文字列の選択、操作が柔軟にできる •ファイルの移動や文書内の移動がしやすい •コマンドパレットからいろいろな操作ができる •パッケージを使って、好みにカスタマイズできるSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  15. 15. Sublime Text 2 Basics Sublime Text 2の画面構成Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  16. 16. Sublime Text 2 Basics Sublime Text 2の画面構成はこんな感じ Minimap Sidebar Main Column Status Bar Syntax ModeSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  17. 17. Sublime Text 2 Basics Sublime Text 2の初期設定Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  18. 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. 19. Sublime Text 2 Basics JSON形式の初期設定ファイルはこう書く { "font_face": "DejaVuSans", "設定内容": "指定値、true/false、など" } ※設定毎の区切りは「,(カンマ)」、一番最後の行末には「,」を入力しないSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  20. 20. Sublime Text 2 Basics シンタックスエラーだと保存されませんSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  21. 21. Sublime Text 2 Basics では、少し使い方の説明にSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  22. 22. Sublime Text 2 Basics なんてこたない、ただのテキストエディタですSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  23. 23. Sublime Text 2 Basics 覚えておくと便利なショートカットSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  24. 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/2011069Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  25. 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. 26. Sublime Text 2 Basics まず、これだけ覚えておきましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  27. 27. Sublime Text 2 Basics コマンドパレット?Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  28. 28. Sublime Text 2 Basics Sublime Text 2のコマンドパレットSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  29. 29. Sublime Text 2 Basics コマンドパレットでできること •テキストのファイルシンタックスの変更 eg. textをhtml、css、js、phpなどに切り替える •あらかじめ用意された各種コマンドの実行 •パッケージによって追加されるコマンドの実行 •いろいろな操作はコマンドパレットから可能Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  30. 30. Sublime Text 2 Basics Sublime Text 2でプロジェクト管理するSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  31. 31. Sublime Text 2 Basics フォルダをドラッグすれば「プロジェクト」にSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  32. 32. Sublime Text 2 Basics プロジェクト関連の操作は、Projectメニューで Save ProjectSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  33. 33. Sublime Text 2 Basics プロジェクト単位で保存すればアクセスも簡単Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  34. 34. Sublime Text 2 Basics 次は、Sublime Text 2を拡張しましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  35. 35. Sublime Text 2をカスタマイズする
  36. 36. Sublime Text 2 Basics パッケージ?Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  37. 37. Sublime Text 2 Basics 簡単にいえば、拡張機能Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  38. 38. Sublime Text 2 Basics Sublime Text 2にちょっと便利な機能を追加Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  39. 39. Sublime Text 2 Basics Sublime Text 2のパッケージとは •言語別のシンタックスカラーリングを追加 •言語やシステム別の入力補完やスニペットの追加 •一連の作業を自動でおこなうビルドシステム •テーマやカラースキームを追加 •思いつきそうなのは、大抵のものが揃っているSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  40. 40. Sublime Text 2 Basics これらを簡単に使えるのが最大の魅力Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  41. 41. Sublime Text 2 Basics 世界中の有志に感謝の意を(深々)Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  42. 42. Sublime Text 2 Basics Sublime Text 2へのパッケージ導入方法 •パッケージの公開ディレクトリから ファイルをダウンロードして手動でインストール •パッケージ管理ツールを導入して コマンドパレットから自動でインストールSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  43. 43. Sublime Text 2 Basics 黙ってパッケージ管理ツールを使いましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  44. 44. Sublime Text 2 Basics 神のようなツール、Sublime Package Control Sublime Package ControlSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  45. 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/installationSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  46. 46. Sublime Text 2 Basics Package ControlのインストールコマンドSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  47. 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. 48. Sublime Text 2 Basics 終わったら、再起動しましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  49. 49. Sublime Text 2 Basics Sublime Package Controlの使い方Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  50. 50. Sublime Text 2 Basics コマンドパレットを呼び出して 「Packa…」とか適当に入力しはじめるSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  51. 51. Sublime Text 2 Basics はい、コマンド一覧が出てきましたSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  52. 52. Sublime Text 2 Basics よく使うパッケージ管理コマンドはこちら •Install Package(パッケージのインストール) •Remove Package(パッケージのアンインストール) •Enable Package(パッケージの有効化) •Disable Package(パッケージの無効化) •Upgrade Package(パッケージのアップグレード) ※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usageSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  53. 53. Sublime Text 2 Basics Install PackageでパッケージをリストアップSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  54. 54. Sublime Text 2 Basics 任意の文字列を入れて、リストを絞り込むSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  55. 55. Sublime Text 2 Basics パッケージをリストから選択し、エンターキーSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  56. 56. Sublime Text 2 Basics ステータスバーに何か出たら再起動Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  57. 57. Sublime Text 2 Basics パッケージは自動的にアップデートされます ※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがあるSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  58. 58. Sublime Text 2 Basics どんなパッケージがあるかわからない?Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  59. 59. Sublime Text 2 Basics 解説が必要であれば、登録ディレクトリで検索 Sublime Text PackagesSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  60. 60. Sublime Text 2 Basics では、Sublime Text 2を使ってみましょうSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  61. 61. パッケージを使いこなして制作を効率化
  62. 62. Sublime Text 2 Basics まず、必須系からSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  63. 63. Sublime Text 2 Basics サイドバーの拡張に、SideBarEnhancements •貧弱すぎるサイドバーに各種メニューを追加する •ファイルやフォルダを選択して右クリックで表示 •ファイルのリネーム、コピー、移動などが可能にSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  64. 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. 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. 66. Sublime Text 2 Basics クリップボードの管理に、Clipboard History •クリップボード管理のためのパッケージ •Sublime Text 2を起動後、コピーしたものだけ保存Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  67. 67. Sublime Text 2 Basics ローカルでのバージョン管理にLocal History •GitやSubversionなどのバージョン管理がなくても ローカルでファイルの編集履歴を残す •保存毎に履歴が残るので、バックアップ代わりに •過去の保存ファイルを開く、 差分を表示する、といったことが可能 •右クリックか、コマンドパレットから呼び出すSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  68. 68. Sublime Text 2 Basics それと、Web制作系で便利そうなのSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  69. 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. 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. 71. Sublime Text 2 Basics ちょっとしたスニペット集、Zen Garden •ちょっと便利なスニペット集 •jQueryのパスをCDN経由にしたり、 FacebookのOGPを一度に入力したりできるSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  72. 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. 73. Sublime Text 2 Basics 画像の挿入を簡単にする、AutoFileName •画像などのファイル名をディレクトリから取得 •画像の場合は、サイズまで自動入力可能。便利! •HTMLもCSSもどちらも大丈夫Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  74. 74. Sublime Text 2 Basics カラーパレットで色を指定できるColorPicker •HTMLやCSSの編集中に システム標準のカラーパレットを呼び出す •クロスプラットフォーム対応 •ショートカットは「 ⌘(Ctrl)+Shift+C」Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  75. 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. 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. 77. Sublime Text 2 Basics MarkdownにOmniMarkupPreviewer •Markdownやその他のテキストを ブラウザでプレビューする •呼び出しはコマンドパレットから •Markdownの表示は、GitHubのスタイルシートでSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  78. 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. 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. 80. Sublime Text 2 Basics 面倒な文字列の変換に、StringEncode •テキストのエンコード・デコードをおこなう •ありとあらゆる形式をサポートしているSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  81. 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. 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. 83. Sublime Text 2 Basics いっぱいありすぎるんです…Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  84. 84. Sublime Text 2 Basics 全部解説できないのでまとめておきましたSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  85. 85. Sublime Text 2 Basics https://gist.github.com/4048934Sublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  86. 86. Sublime Text 2 Basics 使いこなせるようになれば、世界は変わるSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき
  87. 87. 本日のまとめ•英語で敷居が高そうだが、実はシンプルなエディタ•ショートカットを覚えるなら必要なものだけで十分•パッケージを使いこなせば、別次元の仕事環境に•そして余った時間は、プライベートの充実にw
  88. 88. Sublime Text 2 Basics 本日はありがとうございましたSublime Text 2、その基本と活用 2012.12.14 第1回 Sublime Text 2 勉強会 in Osaka/こもりまさあき

×