4年半ぶりWebサイトのデザイン変更を実施!【ローカル環境構築編】

前回は新しい「WordPress」のテーマとして「THE THOR」を決定したところまでレポートしました。
今回はローカル環境の構築をレポートします。

テスト環境構築ツールを比較検討

新しい「WordPress」のテーマ「THE THOR」を購入しダウンロードしました。前回も記したように、これを「WordPress」にインストールしテーマの切り替えをすれば完了と行かないのが「WordPress」の面倒くさいところです。テーマを変更することでどのような事象が起きるかわからないのでテスト環境を構築し動作確認をしなくてはいけません

今回のテーマ変更作業の中で一番手こずったのが、このローカル環境構築のツール選定とエクスポート/インポート作業です。
初めての「WordPress」でのテーマ切り替えなので知識がまったくありません。そこで、Webサイトで情報収集。確実性と扱いやすさを比較しました。検討したのはに下記の3種類です。

WP Theme Test(旧Theme Test Drive)
Local by Flywheel
MAMP/XAMPP

上からテスト環境の構築が易しい順番になります。

「WP Theme Test」

プラグインの「WP Theme Test」

「WP Theme Test」は「WordPress」のプラグインプラグインなので「WordPress」内で動作確認できるのでものすごく簡単です。
しかし、検証できる内容が限られます。確認できるのは素のままのテーマを切り替えた時にレイアウトの崩れがあるか否かだけです。
テーマにある機能変更を使っただけでも既存のテーマに影響を及ぼすこともあるそうです。新しいテーマの機能をいろいろ試してチェックしたいと思った場合には薦められません。

「Local by Flywheel」

今回採用した「Local by Flywheel」

「Local by Flywheel」は、Mac、PC、Linuxにインストールするソフトウェアです。「Local by Flywheel」に本番環境のデータを読み込むことでローカル環境に本番環境と同じ環境を構築することができます。
「Local by Flywheel」はインターネットにつながっていないので本番環境に影響することなく自由にテストをすることができます。失敗して真っ白になっても再度本番環境のデータを読み込めばOKです。
また、複数の環境を保存することができるので比較検討する必要がある場合には便利です。

「MAMP/XAMPP」

少々難易度が高い「MAMP」
こちらも難易度が高い「XAMPP」

「MAMP」と「XAMPP」は同じような仕様のソフトウエアです。
「MAMP/XAMPP」は、サーバーで使用されているApache、My SQL、PHPの各ソフトウェアをMac、Windows上にインストールしサーバーと同じ環境を構築します。「Local by Flywheel」は疑似的にサーバー環境を構築するのに対して「MAMP/XAMPP」はMac、Windows上に実際にApache、My SQL、PHPをインストールする点が異なります。
こサーバーと同じソフトウェアをインストールするため「Local by Flywheel」よりもより本番のサーバー環境に近い環境を構築できます。一方で、Apache、My SQL、PHPを扱うためサーバーの知識がないとかなり難しい作業です。

寝ログ

先日、Wordpressローカル環境のLocal by Flywheelを使ってみました。 そしたら、余りにも……

「Local by Flywheel」に決定

上記を比較検討した結果、今回は「Local by Flywheel」でローカル環境を構築することにしました。
細かいところまでチェックするには「WP Theme Test」では不十分。一方、「MAMP/XAMPP」は構築するのにかなり悪戦苦闘することが予想されたのでパス。「Local by Flywheel」はローカル環境の構築の難易度としても私にちょうど良いレベルのツールと結論しました。

しかし、「Local by Flywheel」のインストールまでは簡単でしたが、本番環境のインポート作業に手こずりました
最初は、「WordPress」のファイルとMySQLの「sqlデータ」をインポートする方法で作業を行いましたが、うまく行きません。何度かやり直しをしましたがどうしてもダメ。

そこで、「WordPress」のプラグイン「All-in-One WP Migration」を利用する方法に変更。これが正解でした。「All-in-One WP Migration」でのエクスポート、インポートで本番環境がローカル環境にコピーできました。詳細は下記で説明します。

「Local by Flywheel」をインストール

「Local by Flywheel」ダウンロードするにはメールアドレスの入力が必須です(名前などの項目もありますが必須ではありません)。

ダウンロードした圧縮データを解凍してインストールします。インストールの途中で「Error Reporting(「エラーレポートを送信するか」)」ウインドウが出ます。開発に協力するため「Turn on Error Reporting」を選択し「LET’S GO!」ボタンをクリックします。

「Local by Flywheel」で新しいローカル環境を構築する

インストールが完了したら起動。起動した初期画面の中央にある「+ CREATE A NEW SITE」をクリックしローカルサイトを作ります。今回はローカル環境を作る手順を知る練習です。「test」などアバウトな名前で作ってOK。「次へ」、「次へ」をクリックして進みます。「test」のローカルサイトの構築が完了したら、いよいよ本番の「THE THOR」のローカル環境の構築です。

「All-in-One WP Migration」でローカル環境構築

「Local by Flywheel」でローカル環境構築をする前に本番環境へ「THE THOR」を追加しておきます。本番環境で「THE THOR」を追加しておけばコピーされるたローカル環境で改めて追加する必要がなくなるので作業工程がひとつ少なくなります。
「THE THOR」の追加ができたらいよいよローカル環境の構築作業です。

まず、「WordPress」のプラグイン「All-in-One WP Migration」で本番環境のデータをエクスポートします。
「All-in-One WP Migration」の無料版はデータ容量が300MBに制限されています。この制限を避けるため「高度なオプション」内の「メディアライブラリをエクスポートしない」をチェック。これで「WordPress」内の画像データがエクスポートの対象外になるのでかなり大きなWebサイト以外はエクスポートできるはずです。ちなみに、私のWebサイトは画像データを除いた容量が248MBでした。
エクスポート先は「ファイル」にし、希望する「Mac」側のフォルダを指定しダウンロードします。

「All-in-One WP Migration」で本番環境からデータをエクスポートする
画像データを除きダウンロードした容量は248MB

画像データはFTPでダウンロードします。
FTPで「WordPress」フォルダにアクセス。「wp-content」フォルダ内の「uploads」フォルダが画像データが入ったフォルダです。「uploads」フォルダをわかりやすいフォルダにダウンロードします。

さていよいよ「Local by Flywheel」での作業です。
「Local by Flywheel」のトップ画面の左下「+」ボタンをクリックして新しいローカル環境を作ります。
「What’s your site’s name?」ページが開くので名前を入力します。今回私はわかりやすいように「THE THOR」としました。「ADVANCED OPTIONS」内はそのままです。「CONTINUE」をクリックして次へ進みます。

「Custom」で「PHP」、「MySQL」のバージョン、サーバーの種類を選択する

「Choose your environment」ページから「Castom」を選択。下の「PHP Version」、「Web Server」、「MySQL Version」で本番環境と同じバージョンを選択します。私が契約している「xrea」のレンタルサーバー「CORESERVER(コアサーバー)」は「Apache 2.4」、「PHP 7.1.33」、「MySQL 5.7.32」。ピッタリのバージョンがなかったので「PHP」は「7.3.5」、「MySQL」は「5.7.28」を選択しました。

「xrea」サーバーの情報で「PHP」、「MySQL」のバージョンを確認

「Setup WorldPress」ページで名前(「WordPress Username」)とパスワード「WordPress Password」を設定します。本番環境をインポートすると本番環境のユーザー名とパスワードに置き換わるので気にしなくて何でもOK。「WordPress Email」も今回は使用しないのでそのままにします。

ローカル環境の構築が始まり、終了すると設定画面が表示されます。ローカル環境構築後でもPHPのバージョンとサーバーの種類を変更することが可能になっています。

ローカル環境の「THE THOR」の設定値

次ぎに本番環境からエクスポートしたデータをローカル環境へインポートします。
設定画面の右上「ADMIN」ボタンをクリックし「WordPress」の管理画面に入ります。ユーザー名とパスワードは最初に設定したものです。
インポートするためのプラグイン「All-in-One WP Migration」をインストールします。その前に「Setting」の「Site Language」で「日本語」にしておくと作業がしやすくなります。
「プラグイン」の「新規追加」から「キーワード」に「All-in-One WP Migration」を入力。表示された一覧から該当の「All-in-One WP Migration」を見つけ(大体1番目にあります)インストールし有効化します。
有効化が完了すると左のメニュー一覧に「All-in-One WP Migration」が表示されます。「All-in-One WP Migration」の「インポート」を選択。「インポート先」の「ファイル」を選択。本番環境からエクスポートしたファイルを指定しインポートします。

ローカル環境へ本番環境のデータをインポートする
ローカル環境へインポート完了

インポートが完了したら続けて画像データをFTPでアップロードします。
本番環境からダウンロードした画像データの「uploads」フォルダをアップロードします。「Mac」の場合の場所は下記です。
/Users/[ログインしているユーザー名]/Local Sites/[ローカル環境のドメイン名]/app/public/wp-content/uploads

「Local by Flywheel」の設定画面の右上「VIEW SITE」をクリックすると本番環境と同じWebサイトが表示されます。
もし、正しく表示されていなかったら手順のどこかに間違いがあるはず。この場合、端から見直すのも良いですが、新たに別のローカル環境を作り最初からやり直す方が早く解決すると思います。長い作業過程の中から間違いを見つけ出すのは新しいローカル環境で再構築するより難しいです。複数ローカル環境を設定できる「Local by Flywheel」のメリットを活かしましょう。

まとめ

今回の「WordPress」のテーマ変更作業を振り返れば、このローカル環境の構築が一番苦労しました。
なにより、どのツールを使えばやりやすいかがわからず情報収集。「Local by Flywheel」に決めた後も本番環境のローカル環境への移行も試行錯誤でした。
途中挫折するかとも思いながら、やっとのことでローカル環境が構築されたという感じです。

この後の、ローカル環境での「THE THOR」の機能の使用・不使用の決定、カスタマイズなどは次回にレポートします。