Download - Sublime Textの便利機能を使ったWordPressコーディング
![Page 1: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/1.jpg)
SublimeTextの便利機能を使って WordPressコーディング
WordBench熊本 第14回勉強会 建山晃徳
![Page 2: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/2.jpg)
自己紹介名前:建山晃徳
ツイッター:aqun00
仕事:WordPressでのWebサイト企画・制作
ブログ:
会社ブログ:http://thinking.ne.jp/author/tateyama
個⼈人ブログ:http://free-free-wheeling.com
過去のスライド
http://www.slideshare.net/akinoritateyama
![Page 3: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/3.jpg)
突然ですが
![Page 4: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/4.jpg)
エディタなに 使ってますか?
![Page 5: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/5.jpg)
エディタには種類が いっぱいある
![Page 6: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/6.jpg)
DreamWeaver
NetBeans
Coda
mi
vim
SublimeText秀丸
サクラエディタ
Phpstorm
CotEditor
Eclipse
Emacs
AptanaStudios Atom
![Page 7: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/7.jpg)
WordPressで コーディングするのに
最適なエディタを探していました
![Page 8: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/8.jpg)
WordPressコーディングにはどれが一番いいんだろう?
![Page 9: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/9.jpg)
エディタにはそれぞれ いいところがあり、人に合う合わないもあるので
何が一番というわけでもなさそう
![Page 10: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/10.jpg)
(´・ω・`)
![Page 11: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/11.jpg)
そこで見つけたのが
![Page 12: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/12.jpg)
![Page 13: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/13.jpg)
SublimeText
![Page 14: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/14.jpg)
SublimeTextとは
シェアウェア (無料でも使える。機能は変わらない)
最新はバージョン2(3はβ版で使える)
2008年にリリース
![Page 15: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/15.jpg)
SublimeTextの いいところ
軽量
編集機能がすごい
追加パッケージが豊富
最近使う人が増えてきて情報も増えてきた
Windows、Mac、Linuxに対応
![Page 16: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/16.jpg)
SublimeTextの いいところ
軽量
編集機能がすごい
追加パッケージが豊富
最近使う人が増えてきて情報も増えてきた
Windows、Mac、Linuxに対応
![Page 17: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/17.jpg)
編集機能がすごい
![Page 18: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/18.jpg)
編集機能がすごいなんといってもcommand+D (control+D)
同時選択・編集
コード補完
htmlタグ,phpコードなど
スニペット
独自スニペット
![Page 19: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/19.jpg)
デモ
![Page 20: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/20.jpg)
独自スニペットの作り方
スニペット作成
スニペット編集
![Page 21: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/21.jpg)
独自スニペット
デフォルトの保存先に保存
拡張子は.sublime-snippet
![Page 22: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/22.jpg)
独自スニペットwpimgまで打ってタブキー・・・
展開
自動でいってほしい場所にカーソルがいく
![Page 23: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/23.jpg)
追加パッケージが豊富
![Page 24: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/24.jpg)
追加パッケージが豊富PackageControl・・・パッケージの追加・削除など
Emmet・・・html,css補完
Hayaku・・・css補完
SFTP・・・FTP接続
WordPress・・・WordPress関数補完
AutoFileName・・・ファイル名補完
livestyle・・・GoogleChromeデベロッパーツールとの連携
![Page 25: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/25.jpg)
追加パッケージが豊富PackageControl・・・パッケージの追加・削除など
Emmet・・・html,css補完
Hayaku・・・css補完
SFTP・・・FTP接続
WordPress・・・WordPress関数補完
AutoFileName・・・ファイル名補完
Livestyle・・・GoogleChromeデベロッパーツールとの連携
始めにこれは入れた方がいい
![Page 26: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/26.jpg)
デモ
![Page 27: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/27.jpg)
Hayakuでのcss補完w10 -> width:10px
wi10 -> width:10px
wid10 -> width:10px
wdt10 -> width:10px
なんとなくでCSS補完してくれる
![Page 28: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/28.jpg)
最初は混乱
設定画面はどこ?
パッケージのインストール方法
メニューが英語
![Page 29: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/29.jpg)
最初は混乱設定画面はどこ?
→Preferencesメニューからテキストベースで設定
パッケージのインストール方法
→Package Controlからインストール
メニューが英語
→Japanizeパッケージを入れる
![Page 30: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/30.jpg)
使いだしたら 特に気になりません
(きっと)
![Page 31: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/31.jpg)
もっと知りたい方は
![Page 32: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/32.jpg)
書籍
![Page 33: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/33.jpg)
ドットインストール(Web)
![Page 34: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/34.jpg)
ググったらいっぱい でてくる
![Page 35: Sublime Textの便利機能を使ったWordPressコーディング](https://reader034.vdocuments.mx/reader034/viewer/2022051610/54932f85b4795994588b4602/html5/thumbnails/35.jpg)
ご清聴 ありがとうございました