Embed Size (px)
DESCRIPTION
brenのWordPress開発環境の紹介です。 NetBeans, SCSS, Vagrant について触れています。
Citation preview
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 操作に対応しているが、右クリックでメニューを辿るのが手間かかるので、代わりにツールバーに表示。
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 を作成するので、案件と同じ環境を作ることが可能。
ご質問があればどうぞ。なければ実演します。
