仕事上、長いこと自分のPCでXAMPPやMAMPを使ってWEBの環境を作り、その中でホームページを制作したり、色々なカスタマイズを試してきました。WordPressの環境を作るならこれ！というLocal By Flywheelを使ってみたところ「今後はFlywheelで仕事をする！」と決意するほど、高機能で使いやすいものでした。一般の方でもローカルに環境があれば気軽に自分のWEBサイトを作って試すことができますのでこれを使ってローカル環境でWordPressを作ることをお勧めします。
Local by Flywheelとはなにか？
Local by Flywheelとはなんでしょうか？
XAMPPやMAMPを使ったことのある方なら、「WEBのローカル環境を様々な機能付きで作れるもの」といえばわかるかなと思います。
まだそれらを使ったことのない方にはローカル（あなたのpc）でレンタルサーバーと同じ環境が作れるもの、という説明になります。
おおよそのレンタルサーバーでできることは
・WordPress以外のCMSやHTMLでの静的ホームページを作ることができる
・ホームページの中から（フォームなど）メールのやりとりをすることができる
・ホームページを複数作ることができる
・サーバーをレンタルしている期間中はホームページを一般公開し続けることができる
とういことになります。レンタルサーバーを借りる目的は多くのの場合「自分のWEBサイトを一般の方に見てもらう」だと思われます。
それに対してローカルでWEB環境を作る場合の目的は、「公開されない場所でホームページを作って色々と確認する」ことだと思います。レンタルサーバーで作った場合は、urlがわかってしまえば見えてしまうものだったりあるいは公開済みのホームページだと「なにか新しいことをしたときに壊れてしまわないか」という心配がつきものなので、そういうときにローカルでホームページを作って確認したりする必要性が出てきます。
Local by Flywheelでできることはこんな感じになります
・ホームページの中から（フォームなど）メールのやりとりを仮想的にすることができる
・ホームページを複数作ることができる
・一時的にホームページを一般公開することができる
上記のようにおおよそのことができる！というのがすごいです。太字の部分がレンタルサーバーとは違うところです。
また、できないことについては
ということがあります。簡単にはできないとあるように、手順が多くてもいいならできるんですがとりあえず今回はその点については省きたいと思います。
ということで自分のPCで、WordPressが簡単に作って動かせて、メールも送れ、一時的に外部から確認できるurlがあるということはとても便利なことなので、順番にLocal by Flywheelについて書いていきます。
Local by Flywheelのインストール
実は以前、WordPressの勉強会のときにLocal by Flywheelが便利！という話を聞いてインストールしようとしたのですがなぜかインストールできず、時間もないのでそのままにしてしまっていました。今回も一度エラーが起こり、修正するまではインストールできなかったのですが使っているパソコンがMacBook Air＋ブートキャンプ＋Windows10という特殊環境だったからなのかもしれません。とうことで、このエラーと回避方法についてはこのブログの最後の方に書いておきますね。
インストールファイルをダウンロードする
インストールファイルをダウンロードします。
こちらのWEBサイトのDOWNLOADボタンをクリック
このようにパソコンの種類を指定する画面が表示されるので、
Windowsをクリックし、メールアドレスだけ入力してGET IT NOW!をクリック
ダウンロードしたファイルをインストールする
local-by-flywheel-3-3-0-windows.exe（バージョンが上がるとファイル名も変わります）というファイルがダウンロードできるので、
ファイルをダブルクリックします。
このように表示されセットアップを待ちます。
いよいよインストール画面です、この画面の下にある
LET’S GO!をクリック
この後何度かこのアプリがデバイスに変更することを許可しますか？と表示されますが、はいを選択して処理を進めます。
このようにインストールが進行します。実際にはこのときエラーが起こったのですが、まれな現象かなと思いますので解決した方法は最後の方に書きます。
VirtualBox、Host Machineの両方に緑色のチェック済みボタンの画像が出たらOKです。
このようにIntroducing Local Proの画面がポップアップされたらインストールが完了したということになります。内容を確認したい場合はLEARN MOREをクリックしてガイド画面を見るといいと思います。
この画面の右上にある × をクリックします。
Local by Flywheelで自分のPCにWordPressをインストールする
先ほど × をクリックするとこの画面になり、Local by Flywheelの管理画面ということになります。
新しくWordPressサイトをこのLocal by Flywheel上に作るには、CREATE A NEW SITEもしくは画面の左下にある＋をクリックします。
What’s your site’s name?という画面が表示されるので、
サイトの名称を半角英数文字で入力します。
このサイトのデータを置きたい場所を指定したかったのでADVANCED OPTIONSをクリックします。
このようにオプションが表示されます。
場所を指定するにはLocal site pathのところにあるBROWSEをクリック
ポップアップした画面から任意の場所を指定します。
この画面で表示されるCreate site from Blueprint?はテンプレートのWordPress（Blueprint＝青写真＝設計図）を用意しておけばまずそのWordPressを使って新しくサイトを作れる機能のようです。便利そうなのであとで試したいと思います。
このようにサイト名とサイトの保存場所を指定したあと、CONTINUEをクリック。
次にこの画面が表示されました。Preferredは推奨の設定のようです。PHPのバージョンやサーバー、MySQLのバージョンの環境についての環境を選ぶ画面です。
Customをクリックすればそれらの設定を選択肢の中から選べるようで、
例えばPHPのバージョンについては 5.2.4～7.3.2 までの選択肢があります。OSもApacheとnginxがあり、MySQLのバージョンは5.5もしくは5.6のどちらかを選べるようです。
このCustomは使う予定のレンタルサーバーがあればそのバージョンに合わせておくと良いかと思われます。
とりあえず推奨の環境のまま進めたいので、
CONTINUEをクリック
次にWordPressのユーザー名、パスワード、メールアドレスを入れる画面になるので
ユーザー名、パスワードを入力し（これはテスト用かつローカルなので超適当な内容です）ADD SITEをクリック
Downloading Environmentの画面でしばらく待つと、
このように、管理画面、に戻りWordPressサイトがインストールできました。
ここからダッシュボードに入りたいときは、
このADMINをクリックすると、ログイン画面が表示されます。
VIEW SITEをクリックすると今インストールしたWordPressサイトが
このように表示されます。
WordPressの英語表示を日本語表示にする
この手順でインストールをすると、WordPress内の言語が英語なので、それを日本語にします。
ADMINをクリックもしくはサイトのurl/wp-admin/から
ログインします。
Setting ＞ Generalをクリック
Site LanguageがEnglishになっているので、
日本語にします。
また、時刻も日本時間に合わせたいので、
TimezoneがUTC+0となっているので、
UTC+9とします。
ついでにDate Formatのところの日付の編集も
このようになっているのを
このように日本での標準的な形にしておきます。
最後に画面の下にある
Save Changesをクリックすると
このように日本語での表示になりました。
Local by Flywheelのすごい機能をご紹介
と、ここまででWordPressのサイトをLocal by Flywheel上に作って、日本語表示にするということをご説明しました。ここからはホームページを作ってテストするときに使えるすごい機能について紹介します。
データベースの管理ができるADMINER
レンタルサーバーではPhpMyAdminが入っていて、データベースの管理ができるということが多いと思います。この、Local by Flywheelでは同じような機能をADMINERというツールによって行うことができます。
Local by Flywheelの画面にあるDATABASEをクリック
ADMINERをクリックするとブラウザに
このように、このサイトで使っているデータベースが表示されます。
テーブルをクリックすれば、このように中身が見えたりしておおよそPhpMyAdminと同じようなことができると思います。
ローカルサイトからメールの送受信ができる MailHog
今までXAMPPやMAMPPを使ってきて、困ったのは「ローカルサイトだとメールの送受信がテストできない」ということでした。
もちろん追加のソフトやプラグインを使えばできたのですが少し面倒です。
Local by Flywheelには最初からこの「ローカルサイトでメールの送受信をテスト」するユーティリティ、MailHogが備わっています。
作ったWEBサイトからメールを送ってみたいと思います。新規でユーザーを作った時に
こんな感じにユーザーに通知を送信する機能があるので、チェックを付けたまま新規ユーザーを追加してみます。
MailHogを立ち上げるには、
Local by Flywheelの画面でUTILITIESをクリック
OPEN MAILHOGをクリックすると、
このように、MailHogの画面が表示され先ほどユーザーを登録したときに来るメール「管理者向け」と「ユーザー向け」の2通が届いていることがわかります。
タイトルをクリックすると
内容が表示されます。
以前ご紹介した、
でHTMLメールを送ってみたところ、
このようにちゃんと表示されました！これはとても便利です。メールは間違って送ると大変なことになるのでローカルで十分にテストできるのはありがたいです。
スマホの実機や遠隔にいる人に作成中のローカルWEBを確認してもらえる Live Link
また、Local by Flywheelには、レンタルサーバーにWEBサイトがあるときと同じように外にいる人にurlを伝えてブラウザーで見て確認してもらうことができます。ということはスマホでの表示もそのurlで行うことができます。
Local by Flywheel画面の下の方にある
Live LinkのところにあるENABLEをクリック
このように緑色の文字でurlが表示されます。このurlをコピーして見てもらいたい人に送れば
スマホや
ブラウザで見てもらうことができます。
この機能も今まで実現しようと思うとかなり手間がかかりなかなかうまくできないことだったのでとても助かる機能です。
注意点としては、このurlは一時的なものだということです（逆にそうでないと色々と困りますが）。
おそらくですが、自分のPCが立ち上げっていて、Local by Flywheelも動作中で、そこに作ったWEBサイトも立ち上がっているかつインターネットにつながっている状態でないとこのLive Linkのurlで見ることはできないと思います。
またこのurlもランダムで生成され、
DISABLEをクリックした後にENABLEにしても
このようにそのときごとに異なるurlとなるので、urlは一時的なものだということになります。
WEBサイトのひな形を作っておいて、それを使って新しいサイトを作れる機能 Blueprint
WordPressを作成するときにちょっと名前の出たBlueprint機能についてご紹介します。
Blueprintという言葉は「青写真＝設計図」のように使われるもので、ここではWEBサイトのひな形のような意味合いとなります。
つまり、いつも使うようなプラグインや設定をひな形（この場合はBlueprint）として保存しておいて、新しいWEBサイトを使うときはまずそのひな形でWordPressを作って、変更を加えてくことができるということになります。
Blueprintを作るにはまず、そのひな形となるWordPressサイトをLocal by Flywheel上に作ります。
Local by Flywheelの画面でひな形にしたいたいとのところで右クリックし、Save as Blueprintをクリック
このような画面になるのでSAVE BLUEPRINTをクリック
この画面でしばらく待つと
この画面に戻ります。これで完了ということだと思います。
新しいサイトを作って、このBlueprintを使ってみます。
Add Local Siteをクリック
適当に名前を付けてからADVANCED OPTIONSをクリック
Create site from Blueprint?のところにあるボックスをクリックすると、
先ほど保存したBlueprintの名前が表示されるので選択し、
CREATE SITE FROM BLUEPRINTをクリック
このようにインポートが開始されます。しばらく待つと、
このように新しいサイトの画面が表示され、ひな形から新しいサイトを作ることができました。
ユーザーはコピー元と同じなのでログインすると
ダッシュボードは日本語化されていて、追加して入れたプラグインMailPoetも表示されていました。このように簡単にひな形から新しいWEBサイトができるので、毎回同じことを繰り返さなくてもよくなります。とても便利です！
Blueprintを使う場合の注意点があるとしたらログインユーザーがコピーされること（新しく管理者を作ってコピーされたユーザーは削除、を推奨します）、最新のWordPressでない可能性があるので、WordPressの更新作業が発生するかもしれないことがあります。
とはいえ、たぶん沢山のプラグインをインストールしたり毎回日本語設定をすることを考えればやはりBlueprintを使うのはとても効率化に役立つと思います。
おまけ：一回終了させたあとに、起動する方法
このLocal by Flywheelを一回終了させたあとに、起動する方法です。
Windowsのスタートボタンをクリックして
flywheel
と入力すると
このように表示されますので、クリックすることで起動できます。
WEBサイトを起動するのは、
この画面で、起動させたいサイトをクリックして
画面右上にあるSTART SITEをクリックします。
おまけ２：ローカルでWEBを作ったらレンタルサーバーにどうやってコピーするのか？
これはLocal by Flywheelとはまた別な話になりますが、結局Local by FlywheelでWEBサイトを構築してもレンタルサーバーにアップするにはどうすればいいか？という問題が残ります。
ファイルやデータベースをコピーする方法はありますが、結局すっきりとはコピーしきれずかなりの手作業が発生します。
この問題についてはall in one WP migrationというプラグインで解決することができます。このプラグインを使うとほぼ丸ごと、ローカルのWEBサイトをレンタルサーバーのWEBサイトにあるいはその逆も行うことができます。注意点として、このプラグインはインポートするときにデータ量の制限(512Mまで)があります。
大きなデータ量の場合は、有料のプラグインを追加する必要があります。
https://servmask.com/products/unlimited-extension
こちらから購入可能で、$69ですが1回買うとサイト数や期間の制限なく利用することができるので購入されることをお勧めします。
Local by Flywheelの問題点かな？と失敗したこと
このようにとても素晴らしいLocal by Flywheelなのですが、問題点かな？と思えたり注意点があったので書いておきます。
インストールするときにエラーで進まなかった
私の環境によるものかもしれませんので、念のためにもし同じようなことが起こる方が居たらもしかして参考になるかもです。
インストール時にVirtualBoxまでは順調に進んだのですが、Host Machineをインストールしているときに
このようなエラー（Error with pre-create check: “This computer doesn’t have VT-X/AMD-v enabled. Enabling it in the BIOS is mandatory”）が出て、インストールができなくなってしまいました。
前回もたぶんこんな感じのエラーが出て、Local by Flywheelを使うことを断念したのだと思います。今回はこのエラーメッセージなどで検索をかけて解決方法を探りました。
あくまでも私の場合ですが、このエラーがなくなった方法をご紹介します。
windowsスタートキーをクリックして「コントロール」と入力すると
コントロール パネルが表示されるのでクリック
プログラムをクリック
Windows の機能の有効化または無効化をクリック
Hyper-Vというところを探して、
チェックを付けて、OKをクリック
このような画面が表示されるので今すぐ再起動をクリックし、windowsを再起動しました。
これで再度Local by Flywheelのインストールをしたところ、うまく進みました。
検索したページではBIOSの変更が必要などという情報もあり、macにはBIOSがないらしいから、、どうしよう、、、と思ってできそうなことだけやってみたら無事にインストールできたという経緯です。なので環境によってエラーを回復させる方法は違うと思いますので、もし参考になれば上記の方法もやってみてください。
失敗したこと：WEBサイトを置く場所をDropboxにしたこと
この記事をかいている最中もずっと気づかず、つい先ほどきづいたことです。WEBサイトを置く場所をDropboxにしてしまうと「PCが非常に重たくなる」ということです。
WordPressが動いている間は細かく色々なファイルが更新されたりします。そのたびにDropboxに置いてある場合はクラウドと同期を取ろうとして、ファイルに変更があるたびにクラウドと通信をして新しいファイルに書き換えるのでほぼずっとPCが動いていることになり、CPUの負荷がとても高くなっていました。
これはLocal by Flywheelだけに限らないですがWordPressのファイルを置く場所をDropboxにするとこんな感じにずっとPCが動いて、CPUの負荷が高くなってしまうようです。
結論：可能であればMAMP ProからLocal by Flywheelに開発環境を移そうと思っています
と、ここまで検証してみてLocal by Flywheelがとても気に入りました。開発者として欲しい機能（db管理、メール送受信、ひな形の利用）が多く揃っているからです。
現在開発環境としてMAMP Proを使っているのですが、WordPressに特化しているのではないため新規サイトを作ろうと思ったときに結構面倒なことがありました。WordPressだけを開発対象とした場合は圧倒的にLocal by Flywheelを使う方が便利です。
今後もLocal by Flywheelをテスト検証してみて大きな問題がなければ自分の開発環境をLocal by Flywheelに移そうと思っています。
コメント