WordPressローカル環境を簡単に作る方法|【Local by Flywheel】

localbyflywheel

「ローカル環境を構築しよう!」と聞くと何か凄いものを作るイメージになりがちですが難しく考える必要は全くありません。

ローカル環境とは単にWordPressと同じ環境のもの作るということだけのことで開発環境を整えるために必要なものだと思ってください。

例えば、カスタマイズ時にはとても便利です。やはりカスタマイズするときにテスト無しでいきなり本番環境で使うのはリスクが高くなってしまいます。なぜならサイト表示が崩れた場合、そのままの状態で公開され続けてしまうからです。

しかし疑似サイトでテスト済みなら安心して使うことができます。今回はこの疑似サイトの作り方をご紹介します。

ローカル環境で検証

ローカル環境でテーマをカスタマイズするためにPHPを触ることもあるかと思います。しかし直接本番環境でコードを記述してしまうと記述ミスがあったときにサイト表示が崩れてしまうことがあります。

サイト表示崩れだけならまだしも管理画面に入れなくなることもあります。それでは困ってしまいますよね?そんな事態を回避するために開発時はローカル環境で試しておくことが重要なんですね。

補足
※ローカル環境で試してから本番環境という流れは基本です。 ローカル環境なら何回失敗しても本番環境に支障が出ることは一切ないので安心です。

Local by Flywheelのメリット

ではLocal  by Flywheelのメリットはどんな物があるのかと言うと以下のように割と使い勝手が良い機能が沢山あります。

一つずつ詳しくみていきましょうね。
  • 無料で簡単にローカル環境が作れる
  • 複数のサイトが管理できる
  • URLの共有ができる
  • ローカル環境でSSLを使用できる
  • 環境設定の変更が簡単にできる

初心者にも簡単にローカル環境を作れる、しかも無料

ローカル環境を構築するツールで有名なものにMANPやXAMPPがありますが初心者の人には高機能すぎて少し扱いづらい特徴がありました。

しかしこのLocal by Flywheelでは使い始めるまでが何しろ簡単です。設定方法もサイト名、ユーザー名、パスワードを入力していくつか設定するだけで完了します。しかもシンプルな操作性と軽快な動作で初心者の人にも扱いやすくなっています。

この高機能ツールを無料で使えるのも嬉しい限りです。初心者の人にはお勧めですよ。

複数のサイト管理が可能

Local by Flywheelでは複数のローカルサイトを管理することができます。いくつものサイトを運営している場合でも一つにまとめることができるので管理も楽ですね。

URLの共有が簡単

Local by Flywheelでは「Live Link」といった機能があります。このLive Link機能を使えばURLの共有が可能となるために外部端末から構築中のサイトを確認することができます。

ローカル環境でSSLを使用できる

Local by Flywheelでは簡単にWebサイトをSSLに対応させることができます。通常SSLに対応させるには面倒な設定が必要ですがこのツールでは数回のクリックで対応化させることができます。

注意
ローカルサイトだからといって非対応にしておくとエラーとして表示される可能性があります。

環境設定の変更が簡単

Local by FlywheelではサイトごとにPHPやMySQLのバージョンを変更できたりWeb Serverの項目からApatchかnginxの選択もできるようになっています。

Local by Flywheelインストール完了までの手順

ちなみに今回はWindowsでインストールしていきます。

では、早速Local by Flywheelのインストールをして行きますので付いてきてくださいね。

「FREE DOWNLOAD」をクリックしてください。

download

「FREE DOWNLOAD」をクリックしてもらうと、下の画面になりますので必ず以下の3つは入力しておくようにしましょう。

  1. MacかWindowsの選択
  2. メールアドレスの入力
  3. サイト数を選択

入力できたら「GET IT NOW!」をクリックしてください。

work email

ファイルがダウンロードされました。

download file

次にダウンロードされたファイルを起動させてPCにインストールしましょう。するとセットアップ画面になりますので完了するまでしばらく待ちます。

ちなみに「GET IT NOW!」をクリックしてもダウンロードが始まらないときには「click here」をクリックしてみてください。

setup
Error Reporting

Error Reportingのダイアログが表示されると思いますが私の場合「いいえ」をクリックしました。

これは、エラーが出た時にエラーリポートを送信するかしないのか?の設定です。

任意での設定が終わったら「LET’S GO!」をクリックしてインストールを開始しましょう。

はじめにVirtualBox、次にHost Machineの順でインストールされていきます。尚、インストール中に「ユーザーアカウント制御」のダイアログが何度か出てきますが、すべて「はい」でOKです。

私の場合は大丈夫でしたが、PCによっては再起動をさせられる場合もあるようですね。

VirtualBoxのインストールが完了した時点でデスクトップに「Local」のショートカットアイコンが出現しますよ!

Error表示が出た場合

エラー表示

早いとこインストールが終わらないかなーと思っていたら、なんとエラー表示が出ていました。とりあえずOKボタンを押しましたがいくら待ってもHost Machineのインストールが始まりません。

ということで調べてみると・・・

Local by FlywheelでVirtualBoxの仮想化ソフトを使うにはVT-X CPUの仮想化支援機能を有効にしておく必要があるようです。

どうやらBIOSの仮想化機能が有効になっていないのが原因でこの問題を解決するにはBIOS画面にしてからVirtualization Technologyを選択後に「Enabled」に変更するとインストールが完了します。もしもインストールが始まらなかったら一度BIOS設定を確認してみるといいと思います。

BIOS設定方法はググれば解決できると思います。

補足
インストール中「ユーザーアカウント制御」このアプリがデバイスに変更を加えることを許可しますか?と質問されますのですべて「はい」と答えてください。

インストール後の初期設定

次にローカル環境の初期設定をしていきますよ!超簡単ですのでつまずく箇所はないと思います。

「CREATE A NEW SITE」をクリックです。

create a  new site

サイト名を入力

サイト名を入力します。サイト名が入力できたら「CONTINUE」をクリックです。

ローカルなので適当な名前でもOKですが、ここで入力したサイト名がローカルドメインとして使われます。

site name

ローカル環境設定

次にPHPバージョン・Web Server・MySQLバージョンの設定をしていきます。

environment setting

初期設定だと以下のような設定になっています。

  • PHPバージョン:7.29
  • Web Server:nginx + Varnish
  • MySQLバージョン:5.7

この初期設定でOKなら「Preferred」を選択して「CONTINUE」をクリックしてください。バージョンなどを変更したい場合には。「Custom」から行います。

続きまして、WordPressのSetupです。

WordPressのセットアップ

WordPressのユーザー名とパスワードとメールアドレスの設定です。右側のメールアドレスは触らずにデフォルトのままで問題ありません。

入力できたら「ADD SITE」をクリックします。

setup
MEMO
ローカル環境なのでユーザー名とパスワードは簡単なものでOKです。

ローカル環境の完成

下の画像のように表示されれば成功です。デザインもとてもカッコイイですね。

local sites

ON、OFFの切り替え

画面右上の 「START SITE」 「STOP SITE」をクリックすることでローカル環境を起動させたり、停止させたりすることができます。ちなみに使わないときにはSTOPにしておくようにしましょう。

「Custom」からバージョンの設定変更も可能です。

基本的な使い方

それでは、基本的な使い方を紹介していこうと思います。

ローカルサイトの追加方法

ローカルサイトを複数追加したい場合は下の画像の矢印の箇所の+ボタンをクリックして追加していくことができます。

追加

サイトSSL化

サイトのSSL化って面倒なイメージがありますけど、このLocal by Flywheelでは、「TRUST」ボタンをクリックするだけでSSL化させることができます。

SSLのタブ内にある「TRUST」ボタンをクリックします。

SSL

クリックして「TRUSTED」に変更されればOKです。これだけでSSL化が完了します。

MEMO
「ユーザーアカウント制御」このアプリがデバイスに変更を加えることを許可しますか?というダイアログが表示されますので「はい」と答えてください。
SSL

「TRUSTED」になっていることを確認したら、WordPressの一般設定、WordPressアドレス(URL)とサイトアドレス(URL)をhttp:// ⇒ https://に変更しておきましょう。変更しないとURLのところに「保護されていない通信」と表示されてしまいます。

ワードプレスアドレス

ローカルサイトのファイル場所

ローカルサイトに置かれているファイルを確認する場合には下の画像の赤枠の箇所をクリックしてください。

カスタマイズ前に個別ファイルをバックアップしておけば万が一のときでも安心です。

Sites Path

ローカルサイトのファイルがインストールされている場所は以下になります。

C:\Users\ユーザー名\Local Sites\サイト名\app\public

URLの共有が簡単にできる(Live Link)

ngrokを利用することで一時的にURLを共有することができます。例えば、URLを教えた相手に一時的にローカルサイトを確認してもらうこともできます。

リンクを発行したいサイトを選択後、下の画像の「ENABLE」をクリックします。

ENABLE

すると下図のようにURLが発行されます。こURLで共有が可能になります。

このURLを無効にしたい場合には「DISABLE」をクリックしてください。

無効後に再度URLを発行したい場合にはENABLEをクリックします。尚、URLは発行するたびに別のものが発行されるようになっています。

DISABLE

WordPressログイン画面

右上に「ADMIN」と「VIEWSITE」があります。

WordPressのログイン画面を出したい場合には「ADMIN」をクリックしましょう。

VIEWSITEをクリックするとWordPressのサイトが表示されますよ。

ADMINとVIEWSITE

ログイン画面が表示されたらインストール時に設定したユーザー名とパスワードを入力してください。ログインすると管理画面に遷移します。

ログイン画面

日本語表記とタイムゾーン

WordPressの管理画面にログインしたら設定> 一般を選択し「サイトの言語」から日本語を選択します。

タイムゾーンの設定は(UTC+0)から「東京」を選択します。

一般設定

設定変更したら最後に「保存」するのを忘れないでくださいね。以上がローカルサイトの構築方法です。

最後に

初心者のうちはあまり使う機会が少ないかも知れませんが運営期間が長くなれば必ず使う機会は増えてきます。ぜひこの機会にローカル環境を構築してもらいこれからのブログやサイト運営を有意義なものとしてください。それではまた

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください