Mastering Sublime Text 2

25,814 views
25,791 views

Published on

2012.11.09 CSS Nite After Dark Vol.5 こもり資料。

#スライド最後のパッケージ一覧をアップデートしています。また、今後何か追加をするとしたら、下記Gistだけ書き換えますのでご了承ください。

https://gist.github.com/3819427

Published in: Technology
1 Comment
110 Likes
Statistics
Notes
  • Пожалуйста Это деловое предложение, пишите на мой ID обратно, если интересно.
    ------------------------------------

    Счастливые обильные новые ноябре месяце,

    Здравствуйте.
    a
    Как вы сегодня?
    Я надеюсь, у тебя все хорошо и все будет хорошо с вами? Благодарю God.My зовут Дженифер Петерсон. (я ищу хорошие отношения, а также иметь бизнес-предложение с вами), если хотите. Пожалуйста, напишите мне сообщение на мой почтовый ящик
    СПАСИБО,>

    jeniferpeterson1 в / YH / DT / диплом

    ---------------------

    PLEASE THIS BUSINESS PROPOSAL, WRITE ON MY ID BACK IF INTERESTED.
    ------------------------------------

    Happy abundant new month of November,

    Hello.

    how are you today?
    I hope you are fine and all is well with you ? thank God.My name is JENIFER PETERSON .(i am looking for a good relationship and also to have business proposal with you )if you want. please write me message to my email box
    THANKS,>

    jeniferpeterson1 at / yh / dt / cum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
25,814
On SlideShare
0
From Embeds
0
Number of Embeds
10,236
Actions
Shares
0
Downloads
175
Comments
1
Likes
110
Embeds 0
No embeds

No notes for slide

Mastering Sublime Text 2

  1. 1. Emergency! *&#^@*!Mastering Sublime Text 2 Today!緊急指令! 噂のSublime Text 2をマスターせよ2012.11.09 CPI x CSS Nite「After Dark」(5)こもりまさあき
  2. 2. さらっと自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などSublime Text 2は、1年ちょっと前のバージョンアップで日本語が使えるようになって以来、ずっと使い続けているTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. ついに、この日がきました…
  4. 4. Sublime Text 2を薦めまくって1年ちょっと…
  5. 5. とあるサイトのコードエディタの評価
  6. 6. http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/
  7. 7. http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/
  8. 8. http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/
  9. 9. ご存知でしたか?、世の中はそうなってると
  10. 10. 今日お話しすること•えー、Sublime Text 2ってスゲー!•Sublime Text 2の特徴とお作法•Sublime Text 2をカスタマイズする•パッケージを使いこなして制作を効率化
  11. 11. えー、Sublime Text 2ってスゲー!
  12. 12. Mastering Sublime Text 2 Today! まずは、その実力をご覧いただきましょう緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  13. 13. Mastering Sublime Text 2 Today! 真似してWordPressをインストール緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  14. 14. Mastering Sublime Text 2 Today! どう?いろいろ便利でしょ?緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  15. 15. Mastering Sublime Text 2 Today! では、Sublime Text 2の基本から緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  16. 16. Sublime Text 2の特徴とお作法
  17. 17. Mastering Sublime Text 2 Today! Sublime Text 2の特徴緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  18. 18. Mastering Sublime Text 2 Today! 英語だし取っつきにくい緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  19. 19. Mastering Sublime Text 2 Today! シンプルすぎて何ができるのかわからない緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  20. 20. Mastering Sublime Text 2 Today! でも、その奥にあるのは…緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  21. 21. Mastering Sublime Text 2 Today! パラダイス!緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  22. 22. Mastering Sublime Text 2 Today! Sublime Text 2の特徴 •クロスプラットフォームで使えるエディタである •文字列の選択、操作が柔軟にできる •ファイルの移動や文書内の移動がしやすい •コマンドパレットからいろいろな操作ができる •パッケージを使って、好みにカスタマイズできる緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  23. 23. Mastering Sublime Text 2 Today! Sublime Text 2の画面構成緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  24. 24. Mastering Sublime Text 2 Today! Sublime Text 2の画面構成はこんな感じ Minimap Sidebar Main Column Status Bar Syntax Mode緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  25. 25. Mastering Sublime Text 2 Today! Sublime Text 2の初期設定緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  26. 26. Mastering Sublime Text 2 Today! 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.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  27. 27. Mastering Sublime Text 2 Today! でも大丈夫。そんな難しくない緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  28. 28. Mastering Sublime Text 2 Today! Sublime Text 2の初期設定ファイルは… •初期設定は、すべて JSON形式の テキスト •各種設定ファイルには、 「Default」「User」の区別がある •優先度が高いのは「User」なので、 カスタマイズするなら「User」側に書き足す緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  29. 29. Mastering Sublime Text 2 Today! JSON形式の初期設定ファイルはこう書く { "font_face": "DejaVuSans", "設定内容": "指定値、true/false、など" } ※設定毎の区切りは「,(カンマ)」、一番最後の行末には「,」を入力しない緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  30. 30. Mastering Sublime Text 2 Today! シンタックスエラーだと保存されません緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  31. 31. Mastering Sublime Text 2 Today! ところで緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  32. 32. Mastering Sublime Text 2 Today! Codaはオシャレ、Sublime Text 2ときたら…緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  33. 33. Mastering Sublime Text 2 Today! 地味(じみ)緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  34. 34. Mastering Sublime Text 2 Today! こちら、標準のSublime Text 2の画面緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  35. 35. Mastering Sublime Text 2 Today! こちら、こもりのSublime Text 2の画面緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  36. 36. Mastering Sublime Text 2 Today! せめて、テーマとカラースキームは変えたい!緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  37. 37. Mastering Sublime Text 2 Today! カラースキームの変更はこの辺から好きなのに緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  38. 38. Mastering Sublime Text 2 Today! テーマの変更は、基本設定ファイルに直接書く緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  39. 39. Mastering Sublime Text 2 Today! ユーザー設定ファイルにこう書きましょう { "color_scheme": "Packages/Theme - Refined/Color Schemes/ Tomorrow Night Refined.tmTheme", "theme": "Refined-Dark.sublime-theme", … } ※パッケージディレクトリ内にあるカラースキームやテーマのファイル名を書く ※テーマの配布サイトに記述例は記載されている ※テーマやカラースキームはパッケージで提供されている緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  40. 40. Mastering Sublime Text 2 Today! では、少し使い方の説明に緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  41. 41. Mastering Sublime Text 2 Today! なんてこたない、ただのテキストエディタです緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  42. 42. Mastering Sublime Text 2 Today! 覚えておくと便利なショートカット緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  43. 43. Mastering Sublime Text 2 Today! 覚えておきたいショートカット(その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/2011069緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  44. 44. Mastering Sublime Text 2 Today! 覚えておきたいショートカット(その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.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  45. 45. Mastering Sublime Text 2 Today! これだけ覚えれば、作業効率が格段に向上緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  46. 46. Mastering Sublime Text 2 Today! コマンドパレット?緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  47. 47. Mastering Sublime Text 2 Today! Sublime Text 2のコマンドパレット緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  48. 48. Mastering Sublime Text 2 Today! コマンドパレットでできること •テキストのファイルシンタックスの変更 eg. textをhtml、css、js、phpなどに切り替える •あらかじめ用意された各種コマンドの実行 •パッケージによって追加されるコマンドの実行 •いろいろな操作はコマンドパレットから可能緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  49. 49. Mastering Sublime Text 2 Today! Sublime Text 2でのプロジェクト管理緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  50. 50. Mastering Sublime Text 2 Today! フォルダをドラッグすれば「プロジェクト」に緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  51. 51. Mastering Sublime Text 2 Today! プロジェクト関連の操作は、Projectメニューで Save Project緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  52. 52. Mastering Sublime Text 2 Today! プロジェクト単位で保存すればアクセスも簡単緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  53. 53. Mastering Sublime Text 2 Today! 次は、Sublime Text 2を拡張しましょう緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  54. 54. Sublime Text 2をカスタマイズする
  55. 55. Mastering Sublime Text 2 Today! Sublime Text 2のパッケージとは緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  56. 56. Mastering Sublime Text 2 Today! 簡単にいえば、拡張機能緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  57. 57. Mastering Sublime Text 2 Today! Sublime Text 2にちょっと便利な機能を追加緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  58. 58. Mastering Sublime Text 2 Today! Sublime Text 2のパッケージとは •言語別のシンタックスカラーリングを追加 •言語やシステム別の入力補完やスニペットの追加 •一連の作業を自動でおこなうビルドシステム •テーマやカラースキームを追加 •思いつきそうなのは、大抵のものが揃っている緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  59. 59. Mastering Sublime Text 2 Today! これらを簡単に使えるのが最大の魅力緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  60. 60. Mastering Sublime Text 2 Today! 世界中の有志に感謝の意を(深々)緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  61. 61. Mastering Sublime Text 2 Today! Sublime Text 2へのパッケージ導入方法 •パッケージの公開ディレクトリから ファイルをダウンロードして手動でインストール •パッケージ管理ツールを導入して コマンドパレットから自動でインストール緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  62. 62. Mastering Sublime Text 2 Today! 黙ってパッケージ管理ツールを使いましょう緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  63. 63. Mastering Sublime Text 2 Today! 神のようなツール、Sublime Package Control Sublime Package Control緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  64. 64. Mastering Sublime Text 2 Today! Sublime Package Controlのインストール •パッケージのインストール、アップデート、 有効化・無効化といった管理をするパッケージ •wbond.netで公開されている手順に従って、 コンソールからインストールして再起動 ※Sublime Package Contorol: http://wbond.net/sublime_packages/package_control ※インストールの詳細: http://wbond.net/sublime_packages/package_control/installation緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  65. 65. Mastering Sublime Text 2 Today! Package Controlのインストールコマンド緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  66. 66. Mastering Sublime Text 2 Today! コンソールを出して、ペースト&リターンで 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.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  67. 67. Mastering Sublime Text 2 Today! 終わったら、再起動しましょう緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  68. 68. Mastering Sublime Text 2 Today! Sublime Package Controlの使い方緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  69. 69. Mastering Sublime Text 2 Today! コマンドパレットを呼び出して 「Packa…」とか適当に入力しはじめる緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  70. 70. Mastering Sublime Text 2 Today! はい、コマンド一覧が出てきました緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  71. 71. Mastering Sublime Text 2 Today! よく使うパッケージ管理コマンドはこちら •Install Package(パッケージのインストール) •Remove Package(パッケージのアンインストール) •Enable Package(パッケージの有効化) •Disable Package(パッケージの無効化) •Upgrade Package(パッケージのアップグレード) ※パッケージ管理コマンド一覧: http://wbond.net/sublime_packages/package_control/usage緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  72. 72. Mastering Sublime Text 2 Today! Install Packageでパッケージをリストアップ緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  73. 73. Mastering Sublime Text 2 Today! 任意の文字列を入れて、リストを絞り込む緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  74. 74. Mastering Sublime Text 2 Today! パッケージをリストから選択し、エンターキー緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  75. 75. Mastering Sublime Text 2 Today! ステータスバーに何か出たら再起動緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  76. 76. Mastering Sublime Text 2 Today! パッケージは自動的にアップデートされます ※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがある緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  77. 77. Mastering Sublime Text 2 Today! どんなパッケージがあるかわからない?緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  78. 78. Mastering Sublime Text 2 Today! 解説が必要であれば、登録ディレクトリで検索 Sublime Text Packages緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  79. 79. Mastering Sublime Text 2 Today! では、Sublime Text 2を使ってみましょう緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  80. 80. パッケージを使いこなして制作を効率化
  81. 81. Mastering Sublime Text 2 Today! Web制作に便利なの集めてきました緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  82. 82. Mastering Sublime Text 2 Today! サイドバーの拡張に、SideBarEnhancements •貧弱すぎるサイドバーに各種メニューを追加する •ファイルやフォルダを選択して右クリックで表示 •ファイルのリネーム、コピー、移動などが可能に緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  83. 83. Mastering Sublime Text 2 Today! Shift_JISを開きたいなら、ConvertToUTF8 •Sublime Text 2は、UTF8が標準の文字コード •Shift_JISやEUC-JPなどのファイルを開けるように •開くだけでなく、保存も可能 •開くだけなら「EncodingHelper」というのも緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  84. 84. Mastering Sublime Text 2 Today! 最近開いたファイルは、GotoRecentで簡単に •Sublime Text 2を起動してから開いたファイルを ショートカットからパネルを出して呼び出す •ショートカットは「Ctrl+Shift+R」緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  85. 85. Mastering Sublime Text 2 Today! クリップボードの管理に、Clipboard History •クリップボード管理のためのパッケージ •Sublime Text 2を起動後、コピーしたものだけ保存緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  86. 86. Mastering Sublime Text 2 Today! 高速コーディングに、ZenCoding/Emmet •皆さんご存知Zen-Codingのパッケージ •設定は「User」ディレクトリに保存しよう •後継バージョンとされてる「Emmet」もある •二つを同時に使わないように緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  87. 87. Mastering Sublime Text 2 Today! ダミー要素を挿入するなら、Placeholders •Lorem Ipsumのダミーテキスト(段落サイズ別) •dummyimage.comを使ったダミーイメージ •Kitchen sinkでHTMLのダミーテンプレート挿入 •トリガーの内容がバッティングする時は、 パッケージディレクトリのスニペットを編集 <tabTrigger>呼び出す省略形</tabTrigger>緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  88. 88. Mastering Sublime Text 2 Today! ちょっとしたスニペット集、Zen Garden •ちょっと便利なスニペット集 •jQueryのパスをCDN経由にしたり、 FacebookのOGPを一度に入力したりできる緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  89. 89. Mastering Sublime Text 2 Today! ローカルでのバージョン管理にLocal History •GitやSubversionなどのバージョン管理がなくても ローカルでファイルの編集履歴を残す •保存毎に履歴が残るので、バックアップ代わりに •過去の保存ファイルを開く、 差分を表示する、といったことが可能 •右クリックか、コマンドパレットから呼び出す緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  90. 90. Mastering Sublime Text 2 Today! ファイルの最新版は、Nettuts + Fetchで •ライブラリやフレームワークなど、 配布先をあらかじめ登録しておくことで Sublime Text 2から直接ダウンロード&解凍 •単一のファイルでも、zipなどのパッケージでも可 •コマンドパレットから「fetch:」で呼び出す •Gitがわからない方、ブラウザでは面倒な方、必須緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  91. 91. Mastering Sublime Text 2 Today! Fetchの使い方はこちらのサイトを見ればOK Introdusing Nettuts+Fetch緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  92. 92. Mastering Sublime Text 2 Today! 画像の挿入を簡単にする、AutoFileName •画像などのファイル名をディレクトリから取得 •画像の場合は、サイズまで自動入力可能。便利! •HTMLもCSSもどちらも大丈夫緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  93. 93. Mastering Sublime Text 2 Today! カラーパレットで色を指定できるColorPicker •HTMLやCSSの編集中に システム標準のカラーパレットを呼び出す •クロスプラットフォーム対応 •ショートカットは「 ⌘(Ctrl)+Shift+C」緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  94. 94. Mastering Sublime Text 2 Today! CSSプリプロセッサを使う人にはこんなのも •SassやSCSSのスニペット、入力補完など •LESSのパッケージはシンタックスカラーリングのみ •SassやLESSは直接ビルドできるパッケージ、 「SASS Build」や「LESS-Build」がある •上記ビルドシステムは、設定の変更が必要緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  95. 95. Mastering Sublime Text 2 Today! CSSに飛びたいなら、Goto CSS Declaration •開いているHTMLから、一発で該当セレクタを表示 •CSSはもちろん、Sass/SCSS/LESSにも対応 •CSSなどのファイルは同時に開いておかないとダメ緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  96. 96. Mastering Sublime Text 2 Today! MarkdownにOmniMarkupPreviewer •Markdownやその他のテキストを ブラウザでプレビューする •呼び出しはコマンドパレットから •Markdownの表示は、GitHubのスタイルシートで緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  97. 97. Mastering Sublime Text 2 Today! Sublime Text 2で直接アップ、Sublime SFTP •Package Controlの作者による有償のパッケージ •Sublime Text 2からSFTPでファイルを操作 •アップロード、ダウンロード、同期、差分表示など •SSH鍵認証によるログインもサポート緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  98. 98. Mastering Sublime Text 2 Today! Gitを使ってるなら、GitやSideBarGitを •バージョン管理システム「Git」のコマンドの実行 •「Git」はコマンドパレットや右クリックから •「SideBarGit」は、サイドバーで右クリック •「Gist」を使って、オンラインスニペット管理緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  99. 99. Mastering Sublime Text 2 Today! 面倒な文字列の変換に、StringEncode •テキストのエンコード・デコードをおこなう •ありとあらゆる形式をサポートしている緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  100. 100. Mastering Sublime Text 2 Today! ローカルで簡易サーバを立ち上げて確認 •「Sublime Server」は、 Pythonで書かれたシンプルなHTTPサーバ •「Sublime PHP Builtin Web Server」は、 PHP 5.4.xから導入された内部サーバを起動緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  101. 101. Mastering Sublime Text 2 Today! 話題のNode.jsを使ってるなら、Nodejsを •話題の「Node.js」のコード補完 •npm installなど、 npmの各種コマンドをコマンドパレットから実行緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  102. 102. Mastering Sublime Text 2 Today! いっぱいありすぎるんです…緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  103. 103. Mastering Sublime Text 2 Today! 全部解説できないのでまとめておきました緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  104. 104. Mastering Sublime Text 2 Today! https://bit.ly/st2pkgs緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  105. 105. Mastering Sublime Text 2 Today! 使いこなせるようになれば、世界は変わる緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki
  106. 106. 本日のまとめ•英語で敷居が高そうだが、実はシンプルなエディタ•ショートカットを覚えるなら必要なものだけで十分•パッケージを使いこなせば、別次元の仕事環境に•そして余った時間は、プライベートの充実にw
  107. 107. Mastering Sublime Text 2 Today! 本日はありがとうございました緊急指令! 噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」(5): Komori, Masaaki

×