初心者でも簡単にWordPressのローカル開発環境を構築! Local by Flywheelの使い方

WordPressのローカル開発環境構築で現在主流になっているのは、Vagrat（ベイグラント）での立ち上げではないかと思います。

「VagratでVCCWやVVVなどコマンド操作での環境構築は苦手！」という方には、「Local by Flywheel」（ローカル・バイ・フライホイール）がオススメです。

「Local by Flywheel」はGUIのアプリケーションのため、マウスをポチポチしていくだけで簡単にWordPressのローカル開発環境が構築できます。

今回、Mac環境にLocal by Flywheelをインストールする方法と使い方を説明します。

なぜWordPressのローカル開発環境を用意するのか？

いきなり本番環境のWordPressを直接カスタマイズして、「サイトが表示されなくなった！」という方も初心者にはいらっしゃると思います。

WordPressのファイルは下手に触ってしまうとサイト全体に影響を与える場合があります。そこで、ローカル開発環境をつくりそちらでの動作の問題ないことを確認して上で本番環境で設定していくのが通例です。

Local by Flywheel（ローカル・バイ・フライホイール）とは？

Local by Flywheel | Local WordPress development made simple

https://local.getflywheel.com

Local by Flywheel is a free local development environment designed to simplify the workflow of WordPress developers and designers. Download it for free today!

Local by Flywheel | Local WordPress develo...

Local by Flywheel | Local WordPress development made simple

「Local by Flywheel」（ローカル・バイ・フライホイール）とは、仮想化ソフトウェア「Docker」（ドッカー）ベースとしたローカル開発環境構築ツールです。

Local by FlywheelはGUI操作できるアプリケーションです。Dockerやコマンドが使えなくても、簡単にWordPressのローカル環境を作れます。

• WordPressのコマンド操作ツールWP-CLI付属（参考：WordPressをコマンドで操作！ WP-CLIの使い方 ）
• 利用料金：無料
• ローカルでのSSL環境ができる
• Mac、Windows対応

Local by Flywheel の特徴

Local by Flywheel は以下の特徴があります。

• 複数のWordPressローカル環境を構築できる
• WebサーバーをAacheとnginxから選択できる
• MySQLのバージョンを指摘できる
• PHPのバージョンを指定できる
• ローカルドメインの割り当てができる

Local by Flywheel のインストール方法

MacにLocal by Flywheel をインストール方法を説明します。

Local by Flywheelにアクセスし、「Free Download（無料ダウンロード）」をクリックしダウンロードします。

「Mac」か「Windows」か選択します。
フォームの入力項目は複数ありますが、最低限メールアドレスのみ入力でかまいません。
入力したら、「GET IT NOW!」をクリックします。

ダウンロードが完了したら、圧縮ファイルをダブルクリックして解凍します。

圧縮ファイルが展開されるのを待ちます。

すると、「Local by Flywheel」のアイコン(Local by Flywheel.app)が出てきます。アイコンは、アプリケーションフォルダに移動させておきましょう。

これで、Local by Flywheelのインストールは完了です。

Local by Flywheelの起動

Local by Flywheelを起動させてみましょう。以下の確認画面が表示されたら「開く」をクリックします。

すると、「Welcome to Local by Flywheel!」という画面が表示されたら、「Let’s Go!」をクリックします。

「Local by Flywheelが変更を加えようとしています。」というウィンドウが表示されたら、Macのユーザ名、パスワードを入力し「OK」をクリックします。

すると、Local by Flywheelの画面が表示され、起動できました。

Local by Flywheel起動

WordPressのローカル開発環境の構築

それでは、Local by Flywheelで、WordPressのローカル開発環境の構築してみましょう。ローカル開発環境の構築するには、「Create A Neｗ Site」もしくは、左下の「＋ボタン」をクリックします。

WordPressのローカル開発環境の構築

サイト名の設定

「What’ your site’s name?」と表示されます。
ここでは、サイトの設定画面が開きます。
英数入力で好きなサイト名を記入し、「CONTINUE」をクリックします。

サイト名の設定

２通りの構成方法から選択できます。
バージョンについてよくからないという初心者の方はPreferredを選択してすすめましょう。

• Preferred：構成が自動で選択される
• Custom（カスタム）：構成のバージョンを選択できる

自動で開発環境設定（Choose your enviroment)

次に環境の設定を行います。「Preferred」を選択すると自動で環境が選択されます。

「Preferred」では以下の構成が構築されます。

• PHP 5.6.20
• Web Server nginx + Vanish
• MySQL 5.6

自動で開発環境設定（Choose your enviroment)

開発環境カスタム（Custom）

Custom（カスタム）では「PHP」、「Web Server」、「MySQL」のバージョンを選択できます。
本番環境にローカル環境をそろえて開発する場合はこちらで設定します。
本番環境に近い設定をしておけば、「ローカル環境ではうまく動いたのに、本番環境ではうまく動作しない」というトラブルに合う可能性を低くできます。

開発環境カスタム（Custom）

「CONTINUE」（続ける）をクリックします。

アカウント情報の設定

• ユーザーネーム：　例）admin
• パスワード：　例）password
• メールアドレス：デフォルトのままでOK

を入力し「CONTINUE」をクリックします。

ここで設定した内容はWordPress管理画面にログインするときに使います。
本番環境と違い、ローカル環境でしか使わないのでセキュリティを考える必要はありません。覚えやすい簡単なものにしましょう。

アカウント情報の設定

↓以下が表示されたら、「SAVE AS DEFAULT」をクリックします。

これで、Local by FlywheelでWordPressの開発環境が構築できました！以下の画面が表示されます。
追加した「TEST」が確認できます。

WordPressの管理画面へログイン

WordPress管理画面にログインしてみましょう。

WordPressの管理画面へ移動するには、「Admin」をクリックします。

すると、ブラウザが立ち上がり、WordPressのログイン画面が表示されます。

ログイン画面が表示されたら、サイトの構築時に設定しておいた、

• ユーザーネーム
• パスワード

を入力し「Log In」をクリックします。

WordPressの管理画面にログインできました。

管理画面のURLは　「http://test.dev/wp-admin/」　になってます。
「http://[サイト名].dev/wp-admin/」という構造です。

WorsPressサイト表示

次に、WorsPressサイトを表示してみましょう。

「View Site」（サイトを閲覧）をクリックするとブラウザが立ち上がり、サイトが表示できます。

WorsPressがサイトが表示できました。

ブラウザの上部でURLを確認すると、「http://test.dev/」になっています。
「http://[サイト名].dev/」という構造になります。

WorsPressサイト表示

Local by FlywheelのWordPress環境の日本語化

Local by Flywheelで構築したWordPressは、標準では英語になっています。以下の手順で日本語に変更します。

WordPress管理画面の左メニューの「Settings」＞「Genenal」＞「Site Language」で「日本語」を選択＞「Save Changes」をクリックし設定を保存します。

すると、日本語に変更できました！

Local by Flywheelのローカルファイルの場所

作成されたWordPressファイルのローカルファイルの場所は、以下で確認できます。
Local by Flywheelの画面の、「Site PAth」を確認します。

Local by Flywheelのローカルファイルの場所確認

Fiderのホームフォルダの直下に「Local Sites」というフォルダができ、さらにその下にサイトごとのフォルダが作られます。
今回は「test」という名前のサイトを作成しましたので、「test」というフォルダができているのが確認できます。

Mac、Windowsの関連フォルダについて以下にまとめました。

ファイル保存場所（Mac）

ファイル保存場所（Windows）

Local by Flywheelのサイトの操作

画面左側の「サイト名」上で「右クリック」すると、サブメニューが表示されます。
このメニューから「クローン」、「エクスポート」、「ドメイン名変更」、「削除」等の操作ができます。

Local by FlywheelでWP-CLIを使う方法

「Local by Flywheel」では、「WP-CLI」を使うことができます。
「WP-CLI」とは、WordPressをコマンドで操作できるツールです。
テーマのインストールや有効化、プラグインの一括追加など、管理画面にログインしなくてもWordPressに関するあらゆる操作がコマンドで実行できます。操作に慣れが必要ですが、慣れてさえしまえば通常の管理画面からの操作より効率的に操作ができます。
参考：WordPressをコマンドで操作！ WP-CLIの使い方

ターミナルの起動

Local by Flywheelで「WP-CLI」を起動するには以下での手順で行います。
Local by Flywheelの左メニューのサイトの名前の上で「右クリック」をし、「Open Site SSH」を選択します。

すると、ターミナルが起動します。

これで、「WP-CLI」のコマンドでWordPressの操作ができます。

Open Site SSHでiTermで開くには？

Open Site SSHから開くとき、Macで標準でインストールされている「ターミナル」ではなく 、「iTerm」を使いたい場合は以下の設定を行います。

Local by Flywheelの上部メニューから「Local by Flywheel」>「Preferences」を選択します。（Macショートカットキー：「command(⌘) ＋,」）

「Local by Flywheel」>「Preferences」

左のメニューから「ADVANCED」＞「TerminalでiTerm」を選択し、「APPLY」をクリックします。

「ADVANCED」＞「Terminal」＞「APPLY」

これで設定完了です。Open Site SSHでiTermで開くようにできました。

まとめ

• 複数のWordPressローカル環境を構築でき同時利用できる
• WebサーバーをAacheとnginxから選択できる
• MySQLのバージョンを指摘できる
• PHPのバージョンを指定できる
• ローカルドメインの割り当てができる

本記事では、WordPressのローカル開発環境を構築できる「Local by Flywheel」の使い方について解説しました。

GUI操作で簡単に構築できるため、初心者にもおすすめです。

他のWordPressローカル環境構築の方法でつまづいてしまったという人もぜひ使ってみてください。

WordPressをコマンドで操作できるツール「WP-CLI」も標準で同梱されているので、中級者以上向けにもおすすめです。

その他のよく使われるWordPressのローカル開発環境構築方法は、VirtualBox、Vagrant、VVVです。「Local by Flywheel」に比べ、より詳細な設定が可能です。
参考：MacにWordPressのローカル仮想開発環境をVirtualBox、Vagrant、VVVで構築する手順

MacにWordPressのローカル仮想開発環境をVirtualBox、Vagrant、VVVで構築する手順

https://hajipro.com/wordpress/wordpress-vvv

海外のWordpressのコアディストリビューター（正規代理店）でも使われている開発環境、Vagrant＋VirtualBox＋VVV。MacでWordPressの開発環境をvvv構築する方法と使い方を詳しく解説します。WordPressの開発環境を構築WordPressの開発環境を構築するには様々な方法が...

ハジプロ！

関連記事

「Local by flywheel」でサイトを開く時に「この接続ではプライバシーが保護されません」と表示された時の対処方法