WordPressのローカル開発環境構築 WordBench Nagoya 2018年5月度勉強会 1.Local by Flywheel での開発環境構築について 2.ローカル開発環境の技術と他の開発環境の紹介

1. WordPressの
ローカル開発環境構築
WordBench Nagoya 5月度勉強会
山尾 雅也

2. 自己紹介
山尾 雅也
● 三重県桑名市育ち＆在住
● WordPressに関わったのはVer.2.1から。でも長期間、間が空いているた
め、再度勉強中
● WordBench 名古屋 WordBench 三重 運営スタッフ
● WordFes Nagoya 2016・2017 スタッフ （2017 広報担当）
● マークアップエンジニアやSEOマーケティング担当を経験し、サーバ構
築も行うんですが、デザインだけは今だに難航中
● 天然で方向音痴。カーナビのGPSも狂わせるほど

3. ● WordPressのテーマ・プラグインを試してみたいが
レンタルサーバに入れるのはこわい
● 今使っているテーマ」に追加・編集してみたい
● テーマ制作・プラグイン開発をやってみたい
● XAMPP・MAMPを使っていて
他の開発環境も試してみたい
こんな経験ありませんか？

4. でも、ローカル開発環境ってどんなもの？
開発環境を作るのって難しいんじゃないの？
↓そこで
ダウンロード＆クリックで
WordPressに特化したローカル環境構築出来る
「Local by Flywheel」を題材として
進めていきます。

5. 1. Local by Flywheel での開発環境構築について
・インストールや設定について実演
・Local by Flywheelにある特別な機能
・テーマやプラグインの導入・編集
2. ローカル開発環境の技術と他の開発環境について紹介
・Local by Flywheel で使われている技術
・他のWordPressに特化した開発環境
アジェンダ

6. 1. Local by Flywheel での開発環境構築について

7. https://local.getflywheel.com/
1. Local by Flywheel での開発環境構築

8. 【注意】Windows版でインストール出来ない可能性がある
● BIOSの設定上の問題
● Hyper-Vと同時稼働出来ない
確認方法・対処方法を、後ほど説明します。
インストールが出来たらWindowsとMacと同じなので
まず、Mac中心で進めます。
1. Local by Flywheel での開発環境構築

9. 【実演項目】
● 新規でサイトを作成
（Apacheやnginx・PHPのバージョンの変更化も説明）
● WordPressのページ・WordPressの管理画面のリンク
● WordPress本体の保存フォルダのリンク
● データベースのページ説明
● HTTPSへの対応について
1. Local by Flywheel での開発環境構築
ここからは実演で説明しながら進めます

10. ● メールの設定
→MailHogでメールの受信内容をチェックできます
● ローカルの様子をインターネット上に一時的に公開
→ngrokを利用
● SSH・WP-CLIについて
（便利な機能については、ページを作成しています）
1. Local by Flywheel での開発環境構築

11. 「ADMINER」
↓
インターフェイスが
「phpAdmin」
に近いDBの管理画面
1. Local by Flywheel での開発環境構築
データベースの管理画面

12. 1. Local by Flywheel での開発環境構築
データベースの管理画面 ＞ Adminer

13. 「TRUST」をクリック
→証明書が発行されHTTPSに対応します
1. Local by Flywheel での開発環境構築
HTTPSの設定

14. ngrokを使って一時的に公開できる
トンネリングサービス利用
1. Local by Flywheel での開発環境構築
ローカルの様子を一時的に公開
アドレスは生成するたびに変わります

15. MailHogを使ってローカル内でメール機能が使えます
1. Local by Flywheel での開発環境構築
メール機能について

16. 実際のテーマ・プラグイン導入と編集について
● テーマ「Lightning」＋α（考慮中）の導入
● プラグインの導入
○ 「Gutenberg」
○ 「Contact Form 7」
● バックアップのプラグインの動作について
○ 「BackWPup」
○ 「UpdraftPlus WordPress Backup Plugin」
● テーマを実際に編集を行い表示を見てもらう
1. Local by Flywheel での開発環境構築

17. ● BIOSで「VT-X」「AMD-V」を有効にする
Local by Flywheelのインストール時に以下のアラートが
出た場合はBIOSの設定変更が必要です。
1. Local by Flywheel での開発環境構築
Windows版の対応

18. 【BIOSの起動について】
使っているPCのメーカーのサポートに必ず書いてあります。
「（メーカー名） BIOS」で検索をすると、
操作手順が書いてありますので、確認をしてください。
【BIOSの設定項目について】
Advanced タブにある
Intel(R) Virtualization Tech
こちらを
[Disabled] → [Enabled] に変更してください。
1. Local by Flywheel での開発環境構築
Windows版の対応

19. 欠点について
● Windows版でのインストールで設定が必要になる可能性があ
る
● Microsoft Edgeでページを開くことが出来ない
→Edgeのセキュリティ設定上の為
（IE11・Chrome・Firefoxで開いてください）
● ローカル環境なので、データベースを公開するサーバに
移すことが出来ない
1. Local by Flywheel での開発環境構築

20. 2. ローカル開発環境の技術と他の開発環境について

21. Local by Flywheel
→VirtualBox ＋ Docker で動いています。
現在よく使われているソフトウェア
・VirtualBox
・Vagrant
・Docker
こちらについて軽く説明します。
2. ローカル開発環境で使われている技術

22. VirtualBox
１台のPCで複数個のOSが同時実行出来るソフトウェア
2. ローカル開発環境で使われている技術
https://www.virtualbox.org/

23. Vagrant
開発環境の構築と共有を簡単に行う為のツール
2. ローカル開発環境で使われている技術
https://www.vagrantup.com/

24. Docker
Vagrant同様にコード化されたファイルで同じ環境が作れる
プロセス単位で動かす為、軽量で動かせる
2. ローカル開発環境で使われている技術
https://www.docker.com/

25. 他のWordPressに特化した開発環境の紹介
● Vagrant系
○ VVV https://varyingvagrantvagrants.org/
○ vccw http://vccw.cc/
● Docker系
○ Wocker https://wckr.github.io/
2. ローカル開発環境の技術と他の開発環境について紹介

26. ご静聴ありがとうございました
(灬╹ω╹灬)
※この後参考にさせていただいたサイトを紹介します

27. 【 Local by Flywheel 】
※参考にさせていただいたサイトについて
● WordPressのローカル環境のためのGUIツール”Local by Flywheel”が便利 | Capital P
https://capitalp.jp/2017/01/05/local-by-flywheel/
● WordPressローカル環境「Local by Flywheel」が有能ツールだったので良いとこ言いたい | 寝ログ
https://nelog.jp/local-by-flywheel
● Local by Flywheelを導入してWordPress開発環境を構築しよう | 株式会社マグネッツ
https://magnets.jp/web_design/8023/
● WordPressローカル環境の構築にはこれだ！「Local by Flywheel」が超絶簡単で使いやすいぞ！ |
JunJunWeb.net
https://junjun-web.net/tool/local-by-flywheel/

28. 【 バックアップのプラグインや方法 】
※参考にさせていただいたサイトについて
● BackWPupでWordPressをバックアップしてみたがとても簡単だった | はづきラボ
https://hazukilab.com/backwpup/
● WordPressのバックアップ 有名プラグインbackWPupの使い方 | Webst8
https://webst8.com/blog/wordpress-backup-plugin/
● 「Search Replace DB」データベースのドメイン名を変更するツール
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
● WordPressのドメイン変更に必携のツール「Search Replace DB ver3.1」 | kira-ism
http://kira-ism.com/archives/4358
● ドメイン変更を伴うWordPress引っ越し ローカル環境への移行手順 | Webst8
https://webst8.com/blog/wordpress-transfer-local-pc/
● WordPress のドメイン名やURLを変える際の GUID 問題のちゃんとした話 | Capital P
https://capitalp.jp/2017/01/25/do-not-change-the-guid/

29. 【 WordPressに特化した開発環境 】
※参考にさせていただいたサイトについて
● WordPress の開発者コミュニティにおける最新開発環境事情 | Capital P
https://capitalp.jp/2017/01/31/developmente-environment/
● 初心者ナオキのためのWordPress入門(2) 開発環境編 | Capital P
https://capitalp.jp/2017/12/22/naoki-2/
● VCCWとの上手な付き合い方 | Firegoby
https://firegoby.jp/archives/6712
● VCCWを導入してWordPress開発環境を構築しよう | 株式会社マグネッツ
https://magnets.jp/web_design/7726/
● 仮想環境構築ツール「Vagrant」で開発環境を仮想マシン上に自動作成する | さくらのナレッジ
https://knowledge.sakura.ad.jp/1552/
● Docker入門（第一回）～Dockerとは何か、何が良いのか～ | さくらのナレッジ
https://knowledge.sakura.ad.jp/13265/