Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる

WordPressのローカル開発環境を構築するツールは世の中にたくさんあります。しかしどれもサーバーの知識が無い方からするとローカル開発環境の構築は敷居が高く、「ちょっとWordPress触ってみたいなー」と思ってもなかなか手が出せなかったりします。
今回紹介するLocal by Flywheelは比較的簡単にWordPressのローカル開発環境を無料で構築する事ができます。この手のアプリは他にもたくさんありますが、その中でも断然簡単でUIも綺麗で使いやすいので、これからWordPressを勉強したい初心者の方の取っ掛かりとして良いのではないかなと思いました。(ここまで簡単に構築できるのはそれはそれでどうかとは思いますが)
僕も初めて使ってみて「なんて簡単なんだ…昔の苦労は一体…」といった感じです。
Local by Flywheelの特徴
Local by FlywheelはWindowsとMacで利用できるローカル開発環境を作成してくるアプリケーションです。
一番の特徴は数クリックでWordPressのローカル開発環境の構築が済んでしまうという点、かなりお手軽です。
実際に使ってみると分かりますが、本当にサーバーの知識がほとんど無くても簡単にWordPressをローカル環境で触る事ができます。難しい事は置いておいて、とにかくWordPressを触ってみよう!が実現できてしまうんです。
その他の特徴は以下のような点が上げられます。
- 無料で利用できる
- 複数の開発環境を構築・管理できる
- 簡単なのに環境の設定(PHPのバージョン等)を変更できる
- 環境設定は開発環境構築後も変更できる
- ngrokを利用して一時的に他人にサイトを見せる事ができる
- SSL環境がすぐできる
- サイトのクローンをすぐ作成できる
今回はそんなLocal by Flywheelでローカル開発環境を構築するところまでを紹介します。
Local by Flywheelのダウンロード
まずはLocal by Flywheelの公式サイトへ行きましょう。

「FREE DOWNLOAD!」ボタンをクリックすると幾つか入力フォームが出てきます。Macで使うかWindowsで使うか選択するのと、自分の名前やメールアドレス、職場の名前や携帯電話番号を入力します。一番下はWordPressを使ったサイトをいくつ持っているか(制作してきたか)という内容です。

入力したら、一番下の「GET IT NOW!」ボタンをクリックします。するとZipファイルがダウンロードされるので解凍し、アプリケーションフォルダへ移動し、起動します。

Local by Flywheelの初期設定
Local by Flywheelを初めて起動する場合は下の画像のような画面が立ち上がります。「LET’S GO!」ボタンを押すとローカル開発環境の構築に必要なソフトをインストールしてくれます。
(ちなみに、僕は既にVirtualBoxをインストールしていましたが、無くても自動でインストールしてくれるみたいです。)

サイトの登録
2,3分ほど待ってインストールが完了したら、アプリのトップ画面が表示されます。まだ何もサイトが登録されてない状態なので1つ登録してみましょう。真ん中の「+CREATE A NEW SITE」をクリックするか左下にあるプラスマークをクリックします。

サイト名
サイトの名前が聞かれますので好きな名前を入力します。(後から変更する事も可能です)ただし、日本語で登録する事はできないので注意してください。

ちなみに、サイト名入力欄の下にある「ADVANCED OPTIONS」をクリックすると、サイトのドメイン名や保存ファイルのパスの変更等の細かい設定もできますが、基本的にはデフォルトのままで大丈夫だと思います。サイトドメインや保存先のファイル名に関しては、サイトの名前が適応されます。
入力ができたら右下の「CONTINUE」ボタンをクリックしましょう。

環境設定
この画面ではPHPのバージョン、MySQLのバージョン、Webサーバーの選択を行います。「Preferred」は推奨という意味で2017年9月現在はPHPのバージョンが5.6.20でWebサーバーはnginx + Varnishで、MySQLのバージョンが5.6となっています。

人によってはPHPのバージョンが7以上にしたいという方もいらっしゃると思います。そういった場合は「Customを」選択する事でそれぞれ選択する事ができます。設定できたら右下の「CONTINUE」ボタンをクリックして次へ進みましょう。

WordPressの設定
最後にWordPressの設定です。WordPressのユーザーネームとパスワード(管理画面にログインする際に必要になります)とマルチサイトにするかどうかを設定します。メールアドレスは最初から入力されているのでそれをそのまま使わせてもらいましょう。
WordPressは基本的にサーバーに1つWordPressをインストールして1つサイトを運営するというのが一般的です。2つ運営したい場合はもう1つWordPressをインストールして運営します。
しかし、マルチサイトを利用すると1つのWordPressを使って複数サイトを運営することができるようになるのです。

設定ができたら「ADD SITE」を押して登録は終了です。
サイトの見方
起動時の画面に戻ると、ちゃんと登録したサイトが表示されてますね。ローカル開発環境をスタートさせたい時とストップさせたい時は右上に表示される「START SITE」と「STOP SITE」を押せばオンオフが切り替わります。
サイトを見たい時はスタートさせた状態で「VIEW SITE」を押すとサイトを見ることができ、「ADMIN」を押すと管理画面が表示されます。

物凄く簡単にWordPressのローカル開発環境を構築できてしまいました。

冒頭でも言いましたが、「ちょっとWordPress触ってみたいなー」という方には持って来いのアプリだと思います。特に僕はデザイナーなのでその目線からになりますが、非エンジニアの人がWordPressに触れるきっかけになる。と使ってみて思いました。




CSSのz-indexの確認や管理を便利にする方法
WordPressのContact Form 7で送信時に回転アイコンが出たまま止まってしまうときのチェックリスト
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
WebPに対応して画像サイズを最適化する方法
Visual Studio Codeで英単語のスペルチェックをしてくれる拡張機能「Code Spell Checker」
Visual Studio Codeで正規表現にマッチするか確認できる拡張機能「Regex Previewer」
サイトを運営する時必ず登録しておきたいGoogle Search Console(サーチコンソール)の登録方法
gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
JavaScriptで日付をコピーして計算すると、コピー元の日付も変わってしまう場合の対処法
ソースコードをハイライトする軽量ライブラリ「Highlight.js」の導入方法と使い方
Alfred 4のカスタム検索を設定をしてサイト内検索をしたり、ブラウザのブックマーク検索を行う方法
SVGを操作するためのCSSプロパティまとめ
Keyboard Maestroにサードパーティ製アクションを追加する方法
Macのエイリアスとシンボリックリンクの違いや作成方法
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
食事中にできる、食べることに集中する「マインドフルイーティング」
Zoomで画面共有が始まると自動でフルスクリーンになるのをオフにする方法
クリップボード履歴を複数一括でペーストしたり、コピーした順にペーストするアプリ「Paste」