Development tools for WordPress

WordPress の開発環境- プログラマー編 -

第 31 回 WordBench 神戸@bren_boss

Index

1. NetBeans2. NetBeans Plugin3. Sass （ SCSS ）4. Vagrant / VirtualBox

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

About NetBeans

• Java で作られた統合開発環境（ IDE ）。• Java で作られているので、 Windows でも Mac で

も同じ。• 基本機能以外はプラグインで拡張。• HTML5 と PHP を開発するためのプラグインが同

梱されたパッケージがある（ HTML5 & PHP ）。https://netbeans.org/downloads/?pagelang=ja

• Git は、標準で対応済み。

強力なコード解析と入力補完

• PHP 関数PHPDoc 形式のコメント内容を表示。

• HTML 要素要素内も補完。

• CSS関連のある全 CSS の中から、 ID/ クラスの候補を表示。

名前間違いとは、もうサヨウナラ。

サーバー設定

• ローカル環境、テスト環境、リリース環境など、開発状況によって異なる設定を作成。

• FTP アップロード先を別々に指定でき、ファイル保存時の自動アップロードも可能。※リリース環境には自動アップロードしないほうが安全。

もう FTP 専用アプリは使ってません。

デバッグ機能

• サーバーに Xdebug モジュールが設定されている場合、 NetBeans 上でデバッグが可能。

• var_dump 関数で変数を表示して確認することが、劇的に減る。

これ無しでは、動作確認で時間かかりすぎ。

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

使用している追加プラグイン

• PHP WordPress Blog/CMS• CSS プリプロセッサ（ Less/Sass ）• Vagrant• Git toolbar

PHP WordPress Blog/CMS

• @junichi_11さん作。• プロジェクトツリーに、「 plugins 」

「 themes 」というフォルダーが表示され、よく編集するファイルが探しやすくなる。

• ステータスバーに、 WordPress アイコン、 WordPress バージョン、 wp-config.php のDEBUG 状態が表示される。

CSS プリプロセッサ

• Less/Sass ファイルの監視フォルダー、作成先フォルダーを指定。

• 各オプションを指定可能（ Compass 使用時など）。

Vagrant

• @junichi_11さん作。• プロジェクト内に「 Vagrantfile 」があれば、黒

い画面で入力する Vagrant のコマンド操作をメニューから指定。

• ステータスバーに、 Vagrant で作成した仮想マシン状態を表示。

Git toolbar

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

プラグインまとめ

NetBeans コミュニティーの皆様、 @junichi_11さん、ありがとうございます！

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

Sass （ SCSS ）について

僕は使い始めて 1 ヶ月なので、「 Web 制作者のための Sass の教科書」という書籍を読んでください！

• Amazon• サポートサイト

※WordBench 東京のメガネパーマ（ソウラボ）も著者のひとりです。

目的

• 構造化することで、可読性が向上。• 関数化することで、部品の再利用。• 変数化することで、変更を楽にする。

あと、• WordPress の editor-style.css が作りやすくな

る！！

SCSS ファイル構成

• content.scssWordPress 投稿内容のための記述。

• style.scsscontent.scss を読み込む。

• editor-style.scsscontent.scss を読み込む。

content.scss

%content {h1 {

padding: 0;margin: 1em 0;letter-spacing: 0.07em;

}ul {

margin: 2em 0;}

}

style.scss

@import 'content';

.hentry {@extend %content;

}

editor-style.scss

@import 'content';

.editor-content {@extend %content;width: 700px;

}

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

Vagrant とは

• VirtualBox や Vmware などの仮想 PC 環境をコントールするツールセット。

• コマンドライン（黒い画面）から、仮想 PC の追加、起動、停止、再起動など行える。

• Vagrant プラグインを追加することで、 Chef 対応、IP アドレスとホスト名（ wordpress.local ）のヒモ付け、その他色々が可能。

• 開発 PC 内に仮想 PC を作成するので、インターネットが接続されていなくても平気。

Vagrant で WordPress 開発

WordBench 和歌山の宮内さんが作成された Vagrant設定ファイル一式を使うと、イッパツで WordPress環境が完成！（すごいね）

• 宮内さんブログ• Vagrant設定ファイル一式の入手先

※ 僕は、 Vagrant 向け box ファイルと Vagrantfile を自作して使っています。

Vagrant を使う理由

• VirtualBox の「共有フォルダ」機能を使い、仮想PC と開発 PC のフォルダをヒモ付けられる。

• 仮想 PC の Apache で設定された DocumentRoot（例： /var/www/html ）と開発 PC の WordPressフォルダーをヒモ付けた結果、開発 PC から仮想PC のファイル転送が必要なくなる。

• 案件ごとに仮想 PC を作成するので、案件と同じ環境を作ることが可能。

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