Movatterモバイル変換

Emergency! *&#^@*!Mastering Sublime Text 2 Today!緊急指令！噂のSublime Text 2をマスターせよ2012.11.09 CPI x CSS Nite「After Dark」（5）こもりまさあき

さらっと自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などSublime Text 2は、1年ちょっと前のバージョンアップで日本語が使えるようになって以来、ずっと使い続けているTwitter: @cipher / @proteanbmInstagram: @cipher

ついに、この日がきました…

Sublime Text 2を薦めまくって1年ちょっと…

とあるサイトのコードエディタの評価

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/

ご存知でしたか？、世の中はそうなってると

今日お話しすること•えー、Sublime Text 2ってスゲー！•Sublime Text 2の特徴とお作法•Sublime Text 2をカスタマイズする•パッケージを使いこなして制作を効率化

えー、Sublime Text 2ってスゲー！

Mastering Sublime Text 2 Today! まずは、その実力をご覧いただきましょう緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 真似してWordPressをインストール緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! どう？いろいろ便利でしょ？緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! では、Sublime Text 2の基本から緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Sublime Text 2の特徴とお作法

Mastering Sublime Text 2 Today! Sublime Text 2の特徴緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 英語だし取っつきにくい緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! シンプルすぎて何ができるのかわからない緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! でも、その奥にあるのは…緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! パラダイス！緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2の特徴 •クロスプラットフォームで使えるエディタである •文字列の選択、操作が柔軟にできる •ファイルの移動や文書内の移動がしやすい •コマンドパレットからいろいろな操作ができる •パッケージを使って、好みにカスタマイズできる緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2の画面構成緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

Mastering Sublime Text 2 Today! Sublime Text 2の初期設定緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

Mastering Sublime Text 2 Today! でも大丈夫。そんな難しくない緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

Mastering Sublime Text 2 Today! シンタックスエラーだと保存されません緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! ところで緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Codaはオシャレ、Sublime Text 2ときたら…緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 地味（じみ）緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! こちら、標準のSublime Text 2の画面緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! こちら、こもりのSublime Text 2の画面緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! せめて、テーマとカラースキームは変えたい！緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! カラースキームの変更はこの辺から好きなのに緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! テーマの変更は、基本設定ファイルに直接書く緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

Mastering Sublime Text 2 Today! では、少し使い方の説明に緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! なんてこたない、ただのテキストエディタです緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 覚えておくと便利なショートカット緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

Mastering Sublime Text 2 Today! これだけ覚えれば、作業効率が格段に向上緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! コマンドパレット？緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2のコマンドパレット緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

Mastering Sublime Text 2 Today! Sublime Text 2でのプロジェクト管理緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! フォルダをドラッグすれば「プロジェクト」に緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! プロジェクト関連の操作は、Projectメニューで Save Project緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! プロジェクト単位で保存すればアクセスも簡単緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 次は、Sublime Text 2を拡張しましょう緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Sublime Text 2をカスタマイズする

Mastering Sublime Text 2 Today! Sublime Text 2のパッケージとは緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 簡単にいえば、拡張機能緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2にちょっと便利な機能を追加緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2のパッケージとは •言語別のシンタックスカラーリングを追加 •言語やシステム別の入力補完やスニペットの追加 •一連の作業を自動でおこなうビルドシステム •テーマやカラースキームを追加 •思いつきそうなのは、大抵のものが揃っている緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! これらを簡単に使えるのが最大の魅力緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 世界中の有志に感謝の意を（深々）緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Text 2へのパッケージ導入方法 •パッケージの公開ディレクトリからファイルをダウンロードして手動でインストール •パッケージ管理ツールを導入してコマンドパレットから自動でインストール緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 黙ってパッケージ管理ツールを使いましょう緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

Mastering Sublime Text 2 Today! Package Controlのインストールコマンド緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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 ﬁnish installation' ※コンソールは: 「View」メニューの「Show Console（Ctrlキー＋ ` ）」から緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 終わったら、再起動しましょう緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! Sublime Package Controlの使い方緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! コマンドパレットを呼び出して「Packa…」とか適当に入力しはじめる緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! はい、コマンド一覧が出てきました緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

Mastering Sublime Text 2 Today! Install Packageでパッケージをリストアップ緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 任意の文字列を入れて、リストを絞り込む緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! パッケージをリストから選択し、エンターキー緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! ステータスバーに何か出たら再起動緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! パッケージは自動的にアップデートされます ※パッケージディレクトリの1階層上にある「Backup」に、アップデート毎にバックアップがある緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! どんなパッケージがあるかわからない？緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 解説が必要であれば、登録ディレクトリで検索 Sublime Text Packages緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! では、Sublime Text 2を使ってみましょう緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

パッケージを使いこなして制作を効率化

Mastering Sublime Text 2 Today! Web制作に便利なの集めてきました緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! サイドバーの拡張に、SideBarEnhancements •貧弱すぎるサイドバーに各種メニューを追加する •ファイルやフォルダを選択して右クリックで表示 •ファイルのリネーム、コピー、移動などが可能に緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

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

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

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

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

Mastering Sublime Text 2 Today! ローカルでのバージョン管理にLocal History •GitやSubversionなどのバージョン管理がなくてもローカルでファイルの編集履歴を残す •保存毎に履歴が残るので、バックアップ代わりに •過去の保存ファイルを開く、差分を表示する、といったことが可能 •右クリックか、コマンドパレットから呼び出す緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

Mastering Sublime Text 2 Today! 画像の挿入を簡単にする、AutoFileName •画像などのファイル名をディレクトリから取得 •画像の場合は、サイズまで自動入力可能。便利！ •HTMLもCSSもどちらも大丈夫緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

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

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

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

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

Mastering Sublime Text 2 Today! 面倒な文字列の変換に、StringEncode •テキストのエンコード・デコードをおこなう •ありとあらゆる形式をサポートしている緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

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

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

Mastering Sublime Text 2 Today! いっぱいありすぎるんです…緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 全部解説できないのでまとめておきました緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! https://bit.ly/st2pkgs緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Mastering Sublime Text 2 Today! 使いこなせるようになれば、世界は変わる緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

本日のまとめ•英語で敷居が高そうだが、実はシンプルなエディタ•ショートカットを覚えるなら必要なものだけで十分•パッケージを使いこなせば、別次元の仕事環境に•そして余った時間は、プライベートの充実にｗ

Mastering Sublime Text 2 Today! 本日はありがとうございました緊急指令！噂のSublime Text 2をマスターせよ 2012.11.09 CPI x CSS Nite「After Dark」（5）: Komori, Masaaki

Movatterモバイル変換

Change Language

Mastering Sublime Text 2

Embed presentation

Recommended

More Related Content

Viewers also liked

Similar to Mastering Sublime Text 2

More from masaaki komori

Mastering Sublime Text 2