brenのWordPress開発環境の紹介です。 NetBeans, SCSS, Vagrant について触れています。

1. WordPressの開発環境
- プログラマー編 第31回 WordBench神戸
@bren_boss

2. Index
1.
2.
3.
4.
NetBeans
NetBeans Plugin
Sass（SCSS）
Vagrant / VirtualBox

3. 1. NetBeans
統合開発環境について

4. About NetBeans
• Javaで作られた統合開発環境（IDE）。
• Javaで作られているので、WindowsでもMacでも
同じ。
• 基本機能以外はプラグインで拡張。
• HTML5とPHPを開発するためのプラグインが同梱
されたパッケージがある（HTML5 & PHP）。
https://netbeans.org/downloads/?pagelang=ja
• Gitは、標準で対応済み。

5. 強力なコード解析と入力補完
• PHP関数
PHPDoc形式のコメント内容を表示。
• HTML要素
要素内も補完。
• CSS
関連のある全CSSの中から、ID/クラスの候補を
表示。
名前間違いとは、もうサヨウナラ。

6. サーバー設定
• ローカル環境、テスト環境、リリース環境など、
開発状況によって異なる設定を作成。
• FTPアップロード先を別々に指定でき、ファイル
保存時の自動アップロードも可能。
※リリース環境には自動アップロードしないほ
うが安全。
もうFTP専用アプリは使ってません。

7. デバッグ機能
• サーバーにXdebugモジュールが設定されている
場合、NetBeans上でデバッグが可能。
• var_dump関数で変数を表示して確認することが、
劇的に減る。
これ無しでは、動作確認で時間かかりすぎ。

9. 2. NetBeans Plugin
プラグインによるWordPress開発の効率化

10. 使用している追加プラグイン
•
•
•
•
PHP WordPress Blog/CMS
CSSプリプロセッサ（Less/Sass）
Vagrant
Git toolbar

11. PHP WordPress Blog/CMS
• @junichi_11さん作。
• プロジェクトツリーに、「plugins」「themes」
というフォルダーが表示され、よく編集する
ファイルが探しやすくなる。
• ステータスバーに、WordPressアイコン、
WordPressバージョン、wp-config.phpのDEBUG状
態が表示される。

13. CSSプリプロセッサ
• Less/Sassファイルの監視フォルダー、作成先
フォルダーを指定。
• 各オプションを指定可能（Compass使用時など）。

15. Vagrant
• @junichi_11さん作。
• プロジェクト内に「Vagrantfile」があれば、黒い
画面で入力するVagrantのコマンド操作をメ
ニューから指定。
• ステータスバーに、Vagrantで作成した仮想マシ
ン状態を表示。

17. Git toolbar
• NetBeansでは標準でGit操作に対応しているが、
右クリックでメニューを辿るのが手間かかるの
で、代わりにツールバーに表示。

18. プラグインまとめ
NetBeansコミュニティーの皆様、@junichi_11さん、
ありがとうございます！

19. 3. Sass（SCSS）
CSSプリプロセッサーのWordPress活用

20. Sass（SCSS）について
僕は使い始めて1ヶ月なので、「Web制作者のため
のSassの教科書」という書籍を読んでください！
• Amazon
• サポートサイト
※WordBench東京のメガネパーマ（ソウラボ）も
著者のひとりです。

21. 目的
• 構造化することで、可読性が向上。
• 関数化することで、部品の再利用。
• 変数化することで、変更を楽にする。
あと、
• WordPressのeditor-style.cssが作りやすくなる！！

22. SCSSファイル構成
• content.scss
WordPress投稿内容のための記述。
• style.scss
content.scssを読み込む。
• editor-style.scss
content.scssを読み込む。

23. content.scss
%content {
h1 {
padding: 0;
margin: 1em 0;
letter-spacing: 0.07em;
}
ul {
margin: 2em 0;
}
}

24. style.scss
@import 'content';
.hentry {
@extend %content;
}

25. editor-style.scss
@import 'content';
.editor-content {
@extend %content;
width: 700px;
}

26. 4. Vagrant / VirtualBox
開発PC内に仮想サーバーを作る

27. Vagrantとは
• VirtualBoxやVmwareなどの仮想PC環境をコントー
ルするツールセット。
• コマンドライン（黒い画面）から、仮想PCの追
加、起動、停止、再起動など行える。
• Vagrantプラグインを追加することで、Chef対応、
IPアドレスとホスト名（wordpress.local）のヒモ
付け、その他色々が可能。
• 開発PC内に仮想PCを作成するので、インター
ネットが接続されていなくても平気。

28. VagrantでWordPress開発
WordBench和歌山の宮内さんが作成されたVagrant
設定ファイル一式を使うと、イッパツでWordPress
環境が完成！（すごいね）
• 宮内さんブログ
• Vagrant設定ファイル一式の入手先
※僕は、Vagrant向けboxファイルとVagrantfileを自
作して使っています。

29. Vagrantを使う理由
• VirtualBoxの「共有フォルダ」機能を使い、仮想
PCと開発PCのフォルダをヒモ付けられる。
• 仮想PCのApacheで設定されたDocumentRoot
（例：/var/www/html）と開発PCのWordPress
フォルダーをヒモ付けた結果、開発PCから仮想
PCのファイル転送が必要なくなる。
• 案件ごとに仮想PCを作成するので、案件と同じ
環境を作ることが可能。

30. ご質問があればどうぞ。
なければ実演します。