Webデザイナーのためのエディタ入門

2013年11月16日schoo WEB-campus

金澤直毅

Webデザイナーのためのエディタ入門

Naoki Kanazawahttp://designless.net

?テキストエディタ

?EDITOR

1 知る

2 育てる

3 使い分ける

1知る

選択肢

メモ帳

TeraPad

サクラエディタ

秀丸エディタ

Sublime Text

テキストエディット

Cot Editor

mi

vi(m)

emacs

etc.

コンピュータとの会話

pwdcd desktopmkdir sitecd sitetouch index.htmlvi index.htmlopen index.html

ターミナル

2育てる

?Sublime Text 2/3

The text editoryou'll fall in love with“

http://designless.net/data/schoo20131116.zip素材のダウンロード

２－１インターフェイス

２－２セッティング

２－３パッケージ

２－４キーバインド

Preferences > Setting - User

セッティング（ユーザー）

cmd + ,

"auto_indent": true, "draw_white_space": "all", "font_size": 14.0, "highlight_line": true, "ignored_packages": [ "Vintage", ], "tab_size": 2, "word_wrap": true

JSON形式最後はカンマなし！


Package Control

View > Show Consoleimport 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'

cmd + shift + p

Package Control

Install ↔ RemoveEnable ↔ Disable

Package Control

Preferences > Browse Packages

Package Install

<div>

<p>text</p>

</div>

BracketHighliter

Package Install

ColorPicker

cmd + shift + c

Package Install

SideBarEnhancements

Package Install

Goto-CSS-Declarationcmd + →※行末・行頭移動と併用のため、cmd + ↓↑に変更がおすすめ

Package Install

AutoFileName

<img src=" "images/photo.jpg...

Package Install

Emmet

Emmet

#content<div id="content"></div>

mb30margin-bottom: 30px;

Package Install

ConvertToUTF8

CSSComb

SyncedSideBar

SFTP

Terminal

BrowerRefresh

jQuery

WordPress

Sass

Markdown Preview

etc.

Project

Cmd + K > B サイドバー表示 / 非表示

Ctrl + A サイドバーにフォーカス

WordPress

Sublime Text

Key Bindings - Default

Cmd + C 現在の行をコピー

Cmd + D 同一単語選択

Cmd + Click マルチカーソル

Cmd + Opt + Drag 矩形選択

Cmd + Opt + 2 ２カラムに分割

Cmd + Opt + [ タブ移動

Cmd + P Goto Anything

Ctrl + G 行番号に移動

Cmd + / コメントアウト

Cmd + F 検索

Cmd + Shift + F 置換

Cmd + Opt + F 置換（１ファイル）

Key Bindings - Default

Key Bindings - User

Preferences > Key Bindings - User

//Emmet Expand{"keys": ["super+e"],"args": {"action": "expand_abbreviation"},"command": "run_emmet_action","context": [{"key": "emmet_action_enabled.expand_abbreviation"}]},

//Emmet Wrap{"keys": ["shift+super+e"],"command": "wrap_as_you_type","context": [{"operand": false,"operator": "equal","match_all": true,"key": "setting.is_widget"},

"disable_formatted_linebreak": true, "disable_tab_abbreviations": true, "disabled_single_snippet_for_scopes": "", "enable_emmet_keymap": true,

Key Bindings - User

"disable_formatted_linebreak": true, "disable_tab_abbreviations": true, "disabled_single_snippet_for_scopes": "", "enable_emmet_keymap": true,


※SnippetのtabTriggerとの併用のための設定

Snippet

Tools > New Snippet

<snippet>

<content><![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]></content>

<tabTrigger>hello</tabTrigger>

</snippet>

展開内容

tabショートカット

Snippet

Packages > User

Theme & Color Scheme

Phoenix

Soda

Flatland

3使い分ける

Dreamweaverオーサリング

Dreamweaverサイトの管理

Dreamweaverデザインビュー

?質疑応答

?エディタに恋する理由レポート課題

Thankyou

Design

Webデザイナーのためのエディタ入門