プログラミングの勉強

Local by Flywheel — WordPress開発環境を超絶簡単に構築する方法 —

Local by Flywheelって何?

WordPressのローカル開発環境の構築といえば、日本国内だと通常XAMPP(MacではMAMP)を使うことが多かったと思うのですが、Local by FlywheelというWindowsでもMacで利用できるWordPressローカル開発環境をとても簡単に作ることが出来るアプリケーションです。

日本国内だとあまり使われていないのですが、海外だとよく使われていて
これまでローカル開発環境の構築に必要だった知識やサーバーの知識が一切必要なく、非常に簡単な操作(ほぼワンクリック)でWordPress開発環境の構築をすることができます。

Local by Flywheelは非常にオススメです!

わたしもLocal by Flywheelを知る前はMAMPを使って、WordPressのローカル開発環境の構築をしていましたが、Local by Flywheelを知ってからは一切MAMPは使わなくなりました。使ってみれば分かりますが、超絶なスピードで簡単にローカル環境にWordPressをインストールすることが出来ます。Local by Flywheelのインストール後であれば、1分もかからないかと!

まずはLocal by Flywheelをインストール

下記のURLリンクにアクセスすると、下の画面が表示されるので「FREE DOWNLOAD!」をクリックしてLocal by Flywheelをダウンロードしていきます。

https://localbyflywheel.com/

下の画面で「Mac」か「Windows」かどちらかを選び必要情報を入力して、「GET IT NOW」でダウンロード。ダウンロードはこれだけで終わり。

 

次にいまダウンロードしてきた「Local by Flywheel」をダブルクリックでインストールしましょう。そうすると下のような画面が表示されます。

local by flywheelを使うために、VirtualBoxというツールが必要なのですが、
VirtualBoxのインストールには5分〜10分程時間が掛かります。
「LET’S GO!」のボタンをクリックして、ひたすら待ちましょう!

Local by Flywheelの基本的な使いかた

インストール、セットアップが完了したら、local by flywheelを起動しましょう。
そうすると、下記のような画面が表示されます。


上記の画面が表示されたら、「+CREATE A NEW SITE」または左下の「+」マークをクリックして、WEBサイト追加していきます。

サイト名を入力します。
サイト名は後ほどWordPressの管理画面から変更することが出来るので、
決まっていなくても仮のタイトルを入力しましょう。

ADVANCED OPTIONSの部分は基本的にデフォルトのままでOKです。

「CONTINUE」をクリックすると、下の画面が表示されます。
ここも基本的に特別な設定が必要なければ、「Preferred」のままで全く問題ありません。

次にWordPress UsernameとPasswordを入力していきます。

「ADD SITE」をクリックして、新規WordPressサイトのセットアップは
これだけで完了です!


「ADD SITE」をクリックすると、下記の画面に移ります。
まず右上赤枠で囲った「START SITE」をクリック!

「ADMIN」をクリックすれば、WordPressの管理画面へ。
「ADMIN」の右隣の「VIEW SITE」をクリックすると、現在の実際のサイトのライブビューを見ることが出来ます。


WordPressの管理画面にログインする場合は、先程Local by FlywheelのWordPressサイトのセットアップの時に決めたユーザー名とパスワードして、ログインします。


「VIEW SITE」をクリックすると、下の画面のように現在のウェブサイトの状態をみることができます。


これでWordPressローカル開発環境の一連のセットアップが完了し、
WordPressの開発を進めていくことが出来ます。

WordPressのファイルの場所

ちなみにWordPressのフォルダはどこにあるかというと、
Local by Flywheelの管理画面にてこれから自分が開発していくサイト名の所で
右クリックをすると、下のような画面が表示されます。


「Reveal in Finder」をクリックすると、「Local Sites」のフォルダに飛んでくれるので、そうしたら次に「app」フォルダ →「public」フォルダと進みます。

「Public」フォルダの中に入ると、WordPressのフォルダが入っています。

外部環境からクライアントなどがサイトを確認できる機能

もう一つMAMPやXAMPPにない機能で、Local by Flywheelで使うことが出来る非常に便利でパワフルな機能にLive Linkという機能があります!

Local by Flywheelの管理画面の「Live Link:」の右横にある「ENABLE」をクリックするだけで、他のPC、スマホ、他のデバイスなどの外部環境からでもこのサイトを閲覧することができるようになります。


「ENABLE」をクリックすると、今回は73389bc6.ngrok.ioというURLリンクが自動で生成されました。これだけの操作ですぐにこのURLリンクに外部環境からアクセスすることができます!

注意点はサイトの読込が遅いということと、
外部環境からこの自動生成されたURLリンクにアクセスができるのは、
Local by Flywheelがサイトがオンになっている時のみです。
サイトをオフにしたら、502 Request Errorが表示されアクセスはできません。

このLive Linkの機能を使えば、ローカル環境でWordPressの開発を行ない
すぐにクライアントに確認をしてもらう事が可能になってしまう大変便利な機能です!