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.

Mastering Sublime Text 2

26,689 views

Published on

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

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

https://gist.github.com/3819427

Published in: Technology
  • Пожалуйста Это деловое предложение, пишите на мой 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

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

×