Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Getting Started with Sublime Text 2           Sublime Text 2 ことはじめ                  2012.11.07           第0回 Sublime Text ...
自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーラン...
あのですね…
なんかこんなのが出ちゃうと困るんですけどwhttp://liginc.co.jp/designer/archives/6774
気を取りなおして、今日お話しすること •Sublime Text 2ことはじめ •パッケージを使ってカスタマイズしよう
Sublime Text 2ことはじめ
Getting Started with Sublime Text 2                                 Sublime Text 2の特徴Sublime Text 2 ことはじめ                 ...
Getting Started with Sublime Text 2        顔ともいえるアイコンの人気がないらしいSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublim...
Getting Started with Sublime Text 2                                 それは一旦おいといてSublime Text 2 ことはじめ                     201...
Getting Started with Sublime Text 2                                 Sublime Text 2の特徴          •クロスプラットフォームで使えるエディタである    ...
Getting Started with Sublime Text 2   Sublime Text 2の画面構成をみてみましょうSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sub...
Getting Started with Sublime Text 2           サイドバー、メインカラム、ミニマップSublime Text 2 ことはじめ                  2012.11.07. 第0回 Subl...
Getting Started with Sublime Text 2              Sublime Text 2の初期設定ファイルSublime Text 2 ことはじめ                  2012.11.07. ...
Getting Started with Sublime Text 2     Sublime Text 2の設定ファイルはこんなもの          •初期設定は、すべて JSON形式の テキスト          •各種設定ファイルには、...
Getting Started with Sublime Text 2           これが、Sublime Text 2の設定ファイル          {                "caret_style": "blink", ...
Getting Started with Sublime Text 2 JSONになってるので、その記法で書きましょう          {                "font_face": "DejaVuSans",          ...
Getting Started with Sublime Text 2            シンタックスエラーだと保存されませんSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sub...
Getting Started with Sublime Text 2        Sublime Text 2のテーマとカラースキームSublime Text 2 ことはじめ                  2012.11.07. 第0回...
Getting Started with Sublime Text 2             こちら、標準のSublime Text 2の画面Sublime Text 2 ことはじめ                  2012.11.07. ...
Getting Started with Sublime Text 2           こちら、こもりのSublime Text 2の画面Sublime Text 2 ことはじめ                  2012.11.07. 第...
Getting Started with Sublime Text 2       テーマやカラースキームの変更はここからSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime...
Getting Started with Sublime Text 2    ここにないものは、設定ファイルに直接書くSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime T...
Getting Started with Sublime Text 2     初期設定ファイルのテーマとカラースキーム          {           "color_scheme": "Packages/Theme - Refined...
Getting Started with Sublime Text 2        ちょっと便利なショートカットを覚えようSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublim...
Getting Started with Sublime Text 2          覚えておきたいショートカット(その1)          •コードの入力補完の呼び出しは「Ctrl+Space」          •単語だけを選択する「...
Getting Started with Sublime Text 2          覚えておきたいショートカット(その2)          •移動のためのGoto Anythingは、「 ⌘(Ctrl) +P」          •文書...
Getting Started with Sublime Text 2           これらが他にあまりないショートカットSublime Text 2 ことはじめ                  2012.11.07. 第0回 Subl...
Getting Started with Sublime Text 2 で、ショートカットに出てきたコマンドパレットSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime Te...
Getting Started with Sublime Text 2                Sublime Text 2のコマンドパレットSublime Text 2 ことはじめ                  2012.11.07...
Getting Started with Sublime Text 2                       コマンドパレットでできること          •テキストのシンタックスモードの変更            eg. textをh...
Getting Started with Sublime Text 2           そうそう、フォルダはまるごと管理可能Sublime Text 2 ことはじめ                  2012.11.07. 第0回 Subl...
Getting Started with Sublime Text 2   フォルダをドラッグすれば「プロジェクト」にSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime T...
Getting Started with Sublime Text 2    プロジェクト単位で保存すればアクセスも簡単Sublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime ...
Getting Started with Sublime Text 2           次は、Sublime Text 2を拡張しましょうSublime Text 2 ことはじめ                  2012.11.07. 第...
パッケージを使ってカスタマイズしよう
Getting Started with Sublime Text 2                   Sublime Text 2のパッケージとはSublime Text 2 ことはじめ                  2012.11....
Getting Started with Sublime Text 2                       簡単にいえば、拡張機能のことSublime Text 2 ことはじめ                  2012.11.07. ...
Getting Started with Sublime Text 2           世界中の有志が公開しているパッケージSublime Text 2 ことはじめ                  2012.11.07. 第0回 Subl...
Getting Started with Sublime Text 2           公開されているパッケージはこんなもの          •Sublime Text 2にちょっと便利な機能を追加          •言語別のシンタック...
Getting Started with Sublime Text 2              これらを簡単に使えるのが最大の魅力Sublime Text 2 ことはじめ                  2012.11.07. 第0回 Su...
Getting Started with Sublime Text 2           Sublime Text 2にパッケージを導入する          •パッケージの公開ディレクトリから            ファイルをダウンロードし...
Getting Started with Sublime Text 2     黙ってパッケージ管理ツールを使いましょうSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime ...
Getting Started with Sublime Text 2  神のようなツール、Sublime Package ControlSublime Text 2 ことはじめ                  2012.11.07. 第0回...
Getting Started with Sublime Text 2        Sublime Package Controlのインストール          •パッケージのインストール、アップデート、            有効化・無効...
Getting Started with Sublime Text 2   Package ControlのインストールコードはこれSublime Text 2 ことはじめ                  2012.11.07. 第0回 Su...
Getting Started with Sublime Text 2         Consoleを出して、ペースト&リターンで          import urllib2,os; pf=Package Control.sublime-...
Getting Started with Sublime Text 2                       終わったら、再起動しましょうSublime Text 2 ことはじめ                  2012.11.07. ...
Getting Started with Sublime Text 2        Sublime Package Controlの使い方は簡単Sublime Text 2 ことはじめ                  2012.11.07....
Getting Started with Sublime Text 2             コマンドパレットを呼び出して           「Packa…」とか適当に入力しはじめるSublime Text 2 ことはじめ         ...
Getting Started with Sublime Text 2                 はい、コマンド一覧が出てきました ※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/pac...
Getting Started with Sublime Text 2     Install PackageでパッケージをリストアップSublime Text 2 ことはじめ                  2012.11.07. 第0回 ...
Getting Started with Sublime Text 2        任意の文字列を入れて、リストを絞り込むSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublim...
Getting Started with Sublime Text 2   パッケージをリストから選択し、エンターキーSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime T...
Getting Started with Sublime Text 2           どんなパッケージがあるかわからない?Sublime Text 2 ことはじめ                  2012.11.07. 第0回 Subl...
Getting Started with Sublime Text 2  解説が必要であれば、Communityで検索するSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sublime...
Getting Started with Sublime Text 2   あとは好みでSublime Text 2をカスタマイズSublime Text 2 ことはじめ                  2012.11.07. 第0回 Sub...
Getting Started with Sublime Text 2                       https://gist.github.com/4029897Sublime Text 2 ことはじめ             ...
Getting Started with Sublime Text 2              Getting Started with Sublime Text 2!!Sublime Text 2 ことはじめ                ...
コレ、これまでの解説で一番詳しいはずですhttp://liginc.co.jp/designer/archives/6774
Getting Started with Sublime Text 2                       本日はありがとうございましたSublime Text 2 ことはじめ                  2012.11.07. ...
Upcoming SlideShare
Loading in …5
×

Getting Started with Sublime Text 2

20,780 views

Published on

Published in: Technology

Getting Started with Sublime Text 2

  1. 1. Getting Started with Sublime Text 2 Sublime Text 2 ことはじめ 2012.11.07 第0回 Sublime Text 2 勉強会 こもりまさあき
  2. 2. 自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. あのですね…
  4. 4. なんかこんなのが出ちゃうと困るんですけどwhttp://liginc.co.jp/designer/archives/6774
  5. 5. 気を取りなおして、今日お話しすること •Sublime Text 2ことはじめ •パッケージを使ってカスタマイズしよう
  6. 6. Sublime Text 2ことはじめ
  7. 7. Getting Started with Sublime Text 2 Sublime Text 2の特徴Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  8. 8. Getting Started with Sublime Text 2 顔ともいえるアイコンの人気がないらしいSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  9. 9. Getting Started with Sublime Text 2 それは一旦おいといてSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  10. 10. Getting Started with Sublime Text 2 Sublime Text 2の特徴 •クロスプラットフォームで使えるエディタである •ファイルの移動や文書内の移動がしやすい •コマンドパレットからいろいろな操作ができる •パッケージを使って、好みにカスタマイズできるSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  11. 11. Getting Started with Sublime Text 2 Sublime Text 2の画面構成をみてみましょうSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  12. 12. Getting Started with Sublime Text 2 サイドバー、メインカラム、ミニマップSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  13. 13. Getting Started with Sublime Text 2 Sublime Text 2の初期設定ファイルSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  14. 14. Getting Started with Sublime Text 2 Sublime Text 2の設定ファイルはこんなもの •初期設定は、すべて JSON形式の テキスト •各種設定ファイルには、 「Default」「User」の区別がある •優先度が高いのは「User」なので、 カスタマイズするなら「User」側に書き足すSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  15. 15. Getting Started with 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 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  16. 16. Getting Started with Sublime Text 2 JSONになってるので、その記法で書きましょう { "font_face": "DejaVuSans", "設定内容": "指定値、true/false" } ※設定毎の区切りは「,(カンマ)」、一番最後の行末には「,」を入力しないSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  17. 17. Getting Started with Sublime Text 2 シンタックスエラーだと保存されませんSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  18. 18. Getting Started with Sublime Text 2 Sublime Text 2のテーマとカラースキームSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  19. 19. Getting Started with Sublime Text 2 こちら、標準のSublime Text 2の画面Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  20. 20. Getting Started with Sublime Text 2 こちら、こもりのSublime Text 2の画面Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  21. 21. Getting Started with Sublime Text 2 テーマやカラースキームの変更はここからSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  22. 22. Getting Started with Sublime Text 2 ここにないものは、設定ファイルに直接書くSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  23. 23. Getting Started with Sublime Text 2 初期設定ファイルのテーマとカラースキーム { "color_scheme": "Packages/Theme - Refined/Color Schemes/ Tomorrow Night Refined.tmTheme", "theme": "Refined-Dark.sublime-theme", … } ※パッケージディレクトリ内にあるカラースキームやテーマのファイル名を書く  テーマやカラースキームはパッケージで提供されているSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  24. 24. Getting Started with Sublime Text 2 ちょっと便利なショートカットを覚えようSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  25. 25. Getting Started with Sublime Text 2 覚えておきたいショートカット(その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/2011069Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  26. 26. Getting Started with Sublime Text 2 覚えておきたいショートカット(その2) •移動のためのGoto Anythingは、「 ⌘(Ctrl) +P」 •文書中のシンボルを移動する「 ⌘(Ctrl) +R」 •行番号で移動するGoto Lineは、「Ctrl+G」 •コマンドパレットを表示するためだけにある 「 ⌘(Ctrl) +Shift+P」 ※Goto Anythingで「#」「@」「:」を最初に入力すればGotoコマンドの種類がかわるSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  27. 27. Getting Started with Sublime Text 2 これらが他にあまりないショートカットSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  28. 28. Getting Started with Sublime Text 2 で、ショートカットに出てきたコマンドパレットSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  29. 29. Getting Started with Sublime Text 2 Sublime Text 2のコマンドパレットSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  30. 30. Getting Started with Sublime Text 2 コマンドパレットでできること •テキストのシンタックスモードの変更 eg. textをhtml、css、js、phpなどに切り替える •あらかじめ用意された各種コマンドの実行 •パッケージによって追加されるコマンドの実行Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  31. 31. Getting Started with Sublime Text 2 そうそう、フォルダはまるごと管理可能Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  32. 32. Getting Started with Sublime Text 2 フォルダをドラッグすれば「プロジェクト」にSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  33. 33. Getting Started with Sublime Text 2 プロジェクト単位で保存すればアクセスも簡単Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  34. 34. Getting Started with Sublime Text 2 次は、Sublime Text 2を拡張しましょうSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  35. 35. パッケージを使ってカスタマイズしよう
  36. 36. Getting Started with Sublime Text 2 Sublime Text 2のパッケージとはSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  37. 37. Getting Started with Sublime Text 2 簡単にいえば、拡張機能のことSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  38. 38. Getting Started with Sublime Text 2 世界中の有志が公開しているパッケージSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  39. 39. Getting Started with Sublime Text 2 公開されているパッケージはこんなもの •Sublime Text 2にちょっと便利な機能を追加 •言語別のシンタックスカラーリング •言語やシステム別の入力補完やスニペット •一連の仕事を全自動でおこなうビルドシステム •思いつきそうなのは、大抵のものが揃っているSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  40. 40. Getting Started with Sublime Text 2 これらを簡単に使えるのが最大の魅力Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  41. 41. Getting Started with Sublime Text 2 Sublime Text 2にパッケージを導入する •パッケージの公開ディレクトリから ファイルをダウンロードして手動でインストール •パッケージ管理ツールを導入して コマンドパレットから自動でインストールSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  42. 42. Getting Started with Sublime Text 2 黙ってパッケージ管理ツールを使いましょうSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  43. 43. Getting Started with Sublime Text 2 神のようなツール、Sublime Package ControlSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  44. 44. Getting Started with Sublime Text 2 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.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  45. 45. Getting Started with Sublime Text 2 Package ControlのインストールコードはこれSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  46. 46. Getting Started with Sublime Text 2 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 Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  47. 47. Getting Started with Sublime Text 2 終わったら、再起動しましょうSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  48. 48. Getting Started with Sublime Text 2 Sublime Package Controlの使い方は簡単Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  49. 49. Getting Started with Sublime Text 2 コマンドパレットを呼び出して 「Packa…」とか適当に入力しはじめるSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  50. 50. Getting Started with Sublime Text 2 はい、コマンド一覧が出てきました ※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usageSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  51. 51. Getting Started with Sublime Text 2 Install PackageでパッケージをリストアップSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  52. 52. Getting Started with Sublime Text 2 任意の文字列を入れて、リストを絞り込むSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  53. 53. Getting Started with Sublime Text 2 パッケージをリストから選択し、エンターキーSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  54. 54. Getting Started with Sublime Text 2 どんなパッケージがあるかわからない?Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  55. 55. Getting Started with Sublime Text 2 解説が必要であれば、Communityで検索するSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  56. 56. Getting Started with Sublime Text 2 あとは好みでSublime Text 2をカスタマイズSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  57. 57. Getting Started with Sublime Text 2 https://gist.github.com/4029897Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  58. 58. Getting Started with Sublime Text 2 Getting Started with Sublime Text 2!!Sublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki
  59. 59. コレ、これまでの解説で一番詳しいはずですhttp://liginc.co.jp/designer/archives/6774
  60. 60. Getting Started with Sublime Text 2 本日はありがとうございましたSublime Text 2 ことはじめ 2012.11.07. 第0回 Sublime Text 2 勉強会: Komori, Masaaki

×