Sublime Textの便利機能を使ったWordPressコーディング

35
SublimeTextの便利機能を使って WordPressコーディング WordBench熊本 14回勉強会 建山晃徳

description

Sublime Textの便利機能を使ったWordPressコーディング

Transcript of Sublime Textの便利機能を使ったWordPressコーディング

Page 1: Sublime Textの便利機能を使ったWordPressコーディング

SublimeTextの便利機能を使って WordPressコーディング

WordBench熊本 第14回勉強会 建山晃徳

Page 2: Sublime Textの便利機能を使ったWordPressコーディング

自己紹介名前:建山晃徳

ツイッター:aqun00

仕事:WordPressでのWebサイト企画・制作

ブログ:

会社ブログ:http://thinking.ne.jp/author/tateyama

個⼈人ブログ:http://free-free-wheeling.com

過去のスライド

http://www.slideshare.net/akinoritateyama

Page 3: Sublime Textの便利機能を使ったWordPressコーディング

突然ですが

Page 4: Sublime Textの便利機能を使ったWordPressコーディング

エディタなに 使ってますか?

Page 5: Sublime Textの便利機能を使ったWordPressコーディング

エディタには種類が いっぱいある

Page 6: Sublime Textの便利機能を使ったWordPressコーディング

DreamWeaver

NetBeans

Coda

mi

vim

SublimeText秀丸

サクラエディタ

Phpstorm

CotEditor

Eclipse

Emacs

AptanaStudios Atom

Page 7: Sublime Textの便利機能を使ったWordPressコーディング

WordPressで コーディングするのに

最適なエディタを探していました

Page 8: Sublime Textの便利機能を使ったWordPressコーディング

WordPressコーディングにはどれが一番いいんだろう?

Page 9: Sublime Textの便利機能を使ったWordPressコーディング

エディタにはそれぞれ いいところがあり、人に合う合わないもあるので

何が一番というわけでもなさそう

Page 10: Sublime Textの便利機能を使ったWordPressコーディング

(´・ω・`)

Page 11: Sublime Textの便利機能を使ったWordPressコーディング

そこで見つけたのが

Page 12: Sublime Textの便利機能を使ったWordPressコーディング
Page 13: Sublime Textの便利機能を使ったWordPressコーディング

SublimeText

Page 14: Sublime Textの便利機能を使ったWordPressコーディング

SublimeTextとは

シェアウェア (無料でも使える。機能は変わらない)

最新はバージョン2(3はβ版で使える)

2008年にリリース

Page 15: Sublime Textの便利機能を使ったWordPressコーディング

SublimeTextの いいところ

軽量

編集機能がすごい

追加パッケージが豊富

最近使う人が増えてきて情報も増えてきた

Windows、Mac、Linuxに対応

Page 16: Sublime Textの便利機能を使ったWordPressコーディング

SublimeTextの いいところ

軽量

編集機能がすごい

追加パッケージが豊富

最近使う人が増えてきて情報も増えてきた

Windows、Mac、Linuxに対応

Page 17: Sublime Textの便利機能を使ったWordPressコーディング

編集機能がすごい

Page 18: Sublime Textの便利機能を使ったWordPressコーディング

編集機能がすごいなんといってもcommand+D (control+D)

同時選択・編集

コード補完

htmlタグ,phpコードなど

スニペット

独自スニペット

Page 19: Sublime Textの便利機能を使ったWordPressコーディング

デモ

Page 20: Sublime Textの便利機能を使ったWordPressコーディング

独自スニペットの作り方

スニペット作成

スニペット編集

Page 21: Sublime Textの便利機能を使ったWordPressコーディング

独自スニペット

デフォルトの保存先に保存

拡張子は.sublime-snippet

Page 22: Sublime Textの便利機能を使ったWordPressコーディング

独自スニペットwpimgまで打ってタブキー・・・

展開

自動でいってほしい場所にカーソルがいく

Page 23: Sublime Textの便利機能を使ったWordPressコーディング

追加パッケージが豊富

Page 24: Sublime Textの便利機能を使ったWordPressコーディング

追加パッケージが豊富PackageControl・・・パッケージの追加・削除など

Emmet・・・html,css補完

Hayaku・・・css補完

SFTP・・・FTP接続

WordPress・・・WordPress関数補完

AutoFileName・・・ファイル名補完

livestyle・・・GoogleChromeデベロッパーツールとの連携

Page 25: Sublime Textの便利機能を使ったWordPressコーディング

追加パッケージが豊富PackageControl・・・パッケージの追加・削除など

Emmet・・・html,css補完

Hayaku・・・css補完

SFTP・・・FTP接続

WordPress・・・WordPress関数補完

AutoFileName・・・ファイル名補完

Livestyle・・・GoogleChromeデベロッパーツールとの連携

始めにこれは入れた方がいい

Page 26: Sublime Textの便利機能を使ったWordPressコーディング

デモ

Page 27: Sublime Textの便利機能を使ったWordPressコーディング

Hayakuでのcss補完w10 -> width:10px

wi10 -> width:10px

wid10 -> width:10px

wdt10 -> width:10px

なんとなくでCSS補完してくれる

Page 28: Sublime Textの便利機能を使ったWordPressコーディング

最初は混乱

設定画面はどこ?

パッケージのインストール方法

メニューが英語

Page 29: Sublime Textの便利機能を使ったWordPressコーディング

最初は混乱設定画面はどこ?

→Preferencesメニューからテキストベースで設定

パッケージのインストール方法

→Package Controlからインストール

メニューが英語

→Japanizeパッケージを入れる

Page 30: Sublime Textの便利機能を使ったWordPressコーディング

使いだしたら 特に気になりません

(きっと)

Page 31: Sublime Textの便利機能を使ったWordPressコーディング

もっと知りたい方は

Page 32: Sublime Textの便利機能を使ったWordPressコーディング

書籍

Page 33: Sublime Textの便利機能を使ったWordPressコーディング

ドットインストール(Web)

Page 34: Sublime Textの便利機能を使ったWordPressコーディング

ググったらいっぱい でてくる

Page 35: Sublime Textの便利機能を使ったWordPressコーディング

ご清聴 ありがとうございました