Submit Search
Upload
Sublime Textを加速するパッケージの紹介
•
18 likes
•
5,082 views
Sou Lab
Follow
2014.08.09 Re:Creator's Kansai 『SUBLIME SONIC 2014』 のスライドです。
Read less
Read more
Software
Report
Share
Report
Share
1 of 63
Download now
Download to read offline
Recommended
20
20
Shiho Sue
AWS勉強会 in 北海道札幌! Developers.IO Meetup 05
CNAMEカメレオンパターン - Developers.IO Meetup 05
CNAMEカメレオンパターン - Developers.IO Meetup 05
Makoto Miida
時代はサーバレスだけどAmazon Lightsailの話をする
時代はサーバレスだけど Amazon Lightsailの話をする
時代はサーバレスだけど Amazon Lightsailの話をする
penseestokyo
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
Takashi Hosoya
cloudpackがデジタルハリウッドにて行うAWS講座の紹介と当日のカリキュラムです。
デジタルハリウッド ☓ cloudpack AWS講座
デジタルハリウッド ☓ cloudpack AWS講座
iret, Inc.
2014.9.19 名古屋で開催されたJAWS-UG中央線(名古屋〜中津川)支部のハンズオン資料です。 概要:AWSカルタ ハンズオン
JAWS-UG中央線東海支部ハンズオン
JAWS-UG中央線東海支部ハンズオン
真吾 吉田
CPI x CSS Nite After Dark 17 「webクリエイターのための情報交換所 スペシャル」
イマドキのスライス事情
イマドキのスライス事情
Sou Lab
[2014.02.15]CSS Nite LP32 Sass「Sass/Compassの導入と環境構築」のスライドです
Sass/Compassの導入と環境構築
Sass/Compassの導入と環境構築
Sou Lab
Recommended
20
20
Shiho Sue
AWS勉強会 in 北海道札幌! Developers.IO Meetup 05
CNAMEカメレオンパターン - Developers.IO Meetup 05
CNAMEカメレオンパターン - Developers.IO Meetup 05
Makoto Miida
時代はサーバレスだけどAmazon Lightsailの話をする
時代はサーバレスだけど Amazon Lightsailの話をする
時代はサーバレスだけど Amazon Lightsailの話をする
penseestokyo
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
Takashi Hosoya
cloudpackがデジタルハリウッドにて行うAWS講座の紹介と当日のカリキュラムです。
デジタルハリウッド ☓ cloudpack AWS講座
デジタルハリウッド ☓ cloudpack AWS講座
iret, Inc.
2014.9.19 名古屋で開催されたJAWS-UG中央線(名古屋〜中津川)支部のハンズオン資料です。 概要:AWSカルタ ハンズオン
JAWS-UG中央線東海支部ハンズオン
JAWS-UG中央線東海支部ハンズオン
真吾 吉田
CPI x CSS Nite After Dark 17 「webクリエイターのための情報交換所 スペシャル」
イマドキのスライス事情
イマドキのスライス事情
Sou Lab
[2014.02.15]CSS Nite LP32 Sass「Sass/Compassの導入と環境構築」のスライドです
Sass/Compassの導入と環境構築
Sass/Compassの導入と環境構築
Sou Lab
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
WordBench東京2016年10月で発表したスライドです。 Keynote日本語出ない問題の対策で、スライド内のリンクは効かないので、下の文字起こしからお願いします。
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
Sou Lab
WordCamp Tokyo 2016で発表した資料です。 ※SlideshareのKeynote日本語表示できない問題への対応で、全フォントを変更したので一部表示が崩れたりしています。 セッション時の見た目担保版はこちら(リンクや文字起こしはされてません) https://speakerdeck.com/tobotoboto/wordcamp-tokyo-2016-wordpressdemoyi-shi-sitaiakusesibiritei-you-siiuebusaito-zuo-riwohazimeyou
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
Sou Lab
社内勉強会用
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
CSS Nite LP47「Coder's High 2016」登壇スライドです。
コーダー白書2016
コーダー白書2016
サトウハルミ
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
『HTML5感。 ~今使われているHTML5。今知っておきたいHTML5のすごい技術。~』の資料 2016.7.24 2017.05.10 タイトルを更新
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
将一 深見
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 2009年のCSS Nite vol. 40で話したときのスライドです。
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門:https://amzn.asia/d/4WDsTI6 デザイン図鑑:https://amzn.asia/d/gOBCWKc 【前作】 > http://www.slideshare.net/yutamorishige50/how-to-present-better
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
MODX Evolutionとオブジェクトストレージの組み合わせにより、超高速かつシンプルなブログを自作します。
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
Kei Mikage
フロントエンド高速化を考えるにあたっての本質的な理解から、費用隊効果の高い現場レベルで厳選した施策、また、HTML5、スマホ時代で考えるべき施策についてまとめてみました。
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
Sass less
Sass less
Net Kanayan
Shibuya.trac vol.04 2009/07/12(Sun) Scrum & Trac By Certified Scrum Master
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Kazumasa EBATA
一昨年の関西 Debian 勉強会で組込み Debian について話した時のスライドです。
Debian emdebian 20100817
Debian emdebian 20100817
Toshihisa Tanaka
7/7にwordbench神戸で使ったDreamweaverの資料です。
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
More Related Content
Viewers also liked
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
WordBench東京2016年10月で発表したスライドです。 Keynote日本語出ない問題の対策で、スライド内のリンクは効かないので、下の文字起こしからお願いします。
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
Sou Lab
WordCamp Tokyo 2016で発表した資料です。 ※SlideshareのKeynote日本語表示できない問題への対応で、全フォントを変更したので一部表示が崩れたりしています。 セッション時の見た目担保版はこちら(リンクや文字起こしはされてません) https://speakerdeck.com/tobotoboto/wordcamp-tokyo-2016-wordpressdemoyi-shi-sitaiakusesibiritei-you-siiuebusaito-zuo-riwohazimeyou
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
Sou Lab
社内勉強会用
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
CSS Nite LP47「Coder's High 2016」登壇スライドです。
コーダー白書2016
コーダー白書2016
サトウハルミ
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
『HTML5感。 ~今使われているHTML5。今知っておきたいHTML5のすごい技術。~』の資料 2016.7.24 2017.05.10 タイトルを更新
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
将一 深見
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 2009年のCSS Nite vol. 40で話したときのスライドです。
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門:https://amzn.asia/d/4WDsTI6 デザイン図鑑:https://amzn.asia/d/gOBCWKc 【前作】 > http://www.slideshare.net/yutamorishige50/how-to-present-better
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Viewers also liked
(10)
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
まだFTPで消耗してるの? Wordmoveではじめる 異次元のデータ転送
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
コーダー白書2016
コーダー白書2016
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
HTML5, きちんと。
HTML5, きちんと。
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
Similar to Sublime Textを加速するパッケージの紹介
MODX Evolutionとオブジェクトストレージの組み合わせにより、超高速かつシンプルなブログを自作します。
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
Kei Mikage
フロントエンド高速化を考えるにあたっての本質的な理解から、費用隊効果の高い現場レベルで厳選した施策、また、HTML5、スマホ時代で考えるべき施策についてまとめてみました。
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
Sass less
Sass less
Net Kanayan
Shibuya.trac vol.04 2009/07/12(Sun) Scrum & Trac By Certified Scrum Master
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Kazumasa EBATA
一昨年の関西 Debian 勉強会で組込み Debian について話した時のスライドです。
Debian emdebian 20100817
Debian emdebian 20100817
Toshihisa Tanaka
7/7にwordbench神戸で使ったDreamweaverの資料です。
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
Similar to Sublime Textを加速するパッケージの紹介
(8)
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Sass less
Sass less
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Scrum & Trac By Certified Scrum Master In Shibuya.Trac-2009/07/12
Debian emdebian 20100817
Debian emdebian 20100817
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
Sublime Textを加速するパッケージの紹介
1.
Sublime Text を加速する パッケージの紹介 SUBLIME SONIC
2014 Re:Creator's Kansai 2014.08.09
2.
Sou-Lab. ! @sou_lab フリーランス デザインとかコーディングとか ディレクションとか Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書
3.
今回は… ・Sublime Text3のパッケージを紹介しています。 ・フロントエンド向けパッケージを紹介しています。 ・スライドとデモを行き来してわちゃわちゃします🙇 !
4.
Sublime Textは
5.
拡張してなんぼ
6.
コードをコピペして
7.
コードをコピペして
8.
検索するだけ
9.
まずは、ひとまず 入れとこう系パッケージ
10.
なにはともあれ、Emmet
11.
[tab] or [Control]+[E]
12.
[tab] or [Control]+[E]
13.
それさっき見たよ!
14.
コード展開がメインですが、 それ以外にも色々できます
15.
コード展開がメインですが、 それ以外にも色々できます ・画像サイズ取得 ・画像Data URI変換 ・数値の増減 ・ファジーサーチ(コードヒントも出る) ・コード選択や操作のパワーアップ などなど Sublime
Textとの相性抜群
16.
Emmet製その他パッケージ ・Emmet Style Reflector ・Emmet
LiveStyle !
17.
Emmet Style Reflector htmlを展開と同時にセレクタを生成 (Sass/LESS用)
18.
Sublime Text ⇔
ブラウザの 双方向編集が可能(ただし現状CSSのみ) Emmet LiveStyle
19.
レスポンシブのブラウザ検証ツール (Chromeエクステンション) Emmet Re:View というのも出てましたね
20.
Emmetと相性のいいパッケージ ・Auto File Name(ファイル名保管) ・Inc-Dec-Value(数値増減やテキスト入れ替え) ・Hayaku(CSSはこっち派の人も) !
21.
Dreamweaverの あの機能が欲しい
22.
ドキュメントをバリデート → W3CValidators
23.
セレクタにジャンプ → Goto CSS
declaration ! or Goto Definition(標準機能)
24.
ソースフォーマットの適用 → Tag or
HTMLBeautify(HTML) → CSS Format(CSS)
25.
閉じタグコメント(拡張機能) → CloseCommentTag
26.
F12でブラウザを開く → Sidebar Enhancements
27.
サーバーにアップ/ダウンロード → SFTP
28.
クリッカブルマップ これはDw最強
29.
クリッカブルマップ これはDw最強 サイト全体のパスの書き換えや検索置換や クリッカブルマップあたりはSublimeは苦手
30.
最近よく聞く あのパッケージもある
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
すぐにパッケージが 開発される ありがたやありがたや
43.
トレンドや新しいパッケージは wbond.netで確認できる
44.
ポストプロセッサも便利
45.
や で色々できる ポストプロセッサですが
46.
も簡単に ポストプロセッサれます
47.
ベンダープレフィックスの調整 → Autoprefixer ベンダープレフィックスの削除や追加、 ブラウザーのバージョンを指定可能。
48.
CSSプロパティの順番調整 → CSS Comb! プロパティの並び順は指定可能
49.
メディアクエリをまとめる → SublimeCombineMediaQueries バラバラに書いたメディアクエリも、 これで気にしなくてオケ このパッケージはPackageControl未登録なので、Add Repositoryを https://github.com/astronaughts/SublimeCombineMediaQueries
50.
コードのミニファイ(軽量化) → Minify! Minify系パッケージは他にも沢山あり
51.
ミニファイをもどす → HTML-CSS-JS Prettify! Minifyされたファイルのとき便利
52.
セレクタが4095個を超えた → BlessCss Sassってるとたーまになる
53.
! Sublime Textの教科書に 載ってない神パッケージ
54.
コードをREPLしてしてくれる 評価結果はコメントに書き込まれる Worksheet
55.
変数を一覧表示&呼び出し (Sass/Less/Stylus) List stylesheet variables
56.
CSSを評価するStyle Statsを Sublime Textで実行できる! このパッケージはPackageControl未登録なので、Add
Repositoryを https://github.com/astronaughts/SublimeStyleStats Style Stats
57.
! パッケージを 沢山入れた時の問題解消
58.
Sublime重くならない? → 非同期だから重くならない 3からはプラグインプロセスが分離、 パッケージが原因クラッシュもしない(はず)
59.
キーバインドのバッティング → FindKeyConflicts
60.
複数台に入れるのめんどい パッケージフォルダごと同期すれば 設定は同期できる → クラウドストレージにシンボリックリンク → Gitで同期(オススメ) →
Sublimall(容量制限ありで微妙) ! !
61.
その他オススメパッケージは こちらをご参考に
62.
リンク付き⋮(ृ`ᾥ ´)ु⋮ Qiitaでも一覧載ってます。
63.
ありがとうございました @sou_lab
Download now