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,545 views

Published on

Published in: Technology
1 Comment
54 Likes
Statistics
Notes
No Downloads
Views
Total views
20,545
On SlideShare
0
From Embeds
0
Number of Embeds
5,755
Actions
Shares
0
Downloads
81
Comments
1
Likes
54
Embeds 0
No embeds

No notes for slide

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

×