Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Sublime Text 2 Basics

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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/こもりまさあき

×