WebDesigner's Memorandumウェブデザイナーの備忘録

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

Local by Flywheel

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の公式サイトへ行きましょう。

Local by Flywheel トップページ

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

Local by Flywheelをダウンロード

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

Local by Flywheel ダウンロード

Local by Flywheelの初期設定

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

初回起動画面

サイトの登録

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

Local by Flywheel アプリトップ

サイト名

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

サイトの名前入力画面

ちなみに、サイト名入力欄の下にある「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のマルチサイトって何?

WordPressは基本的にサーバーに1つWordPressをインストールして1つサイトを運営するというのが一般的です。2つ運営したい場合はもう1つWordPressをインストールして運営します。
しかし、マルチサイトを利用すると1つのWordPressを使って複数サイトを運営することができるようになるのです。

WordPressの設定

設定ができたら「ADD SITE」を押して登録は終了です。

サイトの見方

起動時の画面に戻ると、ちゃんと登録したサイトが表示されてますね。ローカル開発環境をスタートさせたい時とストップさせたい時は右上に表示される「START SITE」と「STOP SITE」を押せばオンオフが切り替わります。

サイトを見たい時はスタートさせた状態で「VIEW SITE」を押すとサイトを見ることができ、「ADMIN」を押すと管理画面が表示されます。

テストサイト登録完了

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

テストサイト 管理画面

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね