インターネットのスケッチ

Done is better than perfect.

XAMPPでサクッとWordPressローカル環境を立てる

社内のデザイナーがWordPressの勉強したいというので、ローカル環境の立て方教えました。いきなりDockerやVagrantは学習コストが高いので、手軽に開発環境を作れるXAMPPを使いました。
ということで自分の復習も兼ねて、XAMPPで一からWordPressのローカル環境を作る方法をここにまとめておきます。

Windows 10 中心での説明ですが、macOS の場合も併記しています。

予備知識

設定の説明に入る前にまずXAMPPがどういう仕組みで動いているのかを少し解説します。

XAMPPとは?

X - WindowsLinuxmacOSSolarisクロスプラットフォーム
A - ApacheのA
M - MySQLまたはMariaDBのM
P - PHPのP
P - PerlのP

Wikipediaより引用

Webアプリケーションの実行に必要なソフトウェアをまとめたパッケージのことです。言葉としてはLAMPLinux, Apache, MySQL, PHP)のほうが有名だと思いますが、XAMPPもLAMP環境と同じことができます。

ちなみに最新のXAMPPのデータベースはMySQLを改良して作られたMariaDBというものをパッケージングしています。ですが、表示はほとんどMySQLと同じです(コマンドもmysql)。

XAMPPの仕組み

WordPressはWebアプリケーションです。

Webアプリケーション(以下アプリ)を動かすために必要なのは、ブラウザ、サーバー、データベースです。
アプリのプログラムはサーバーに配置します。そしてWebページを表示するときは、ブラウザ(クライアントとも言います)がサーバーに実行してほしいファイルをリクエストし、サーバーは必要なデータをデータベースから取得し、サーバーからブラウザに結果がレスポンスされます。
クライアントclient(お客)とサーバーserver(給仕人)という名前からよく例えられるのは、レストランでのお客さんとウェイターの関係ですね。お客さんが料理を要求(リクエスト)し、ウェイターが料理を運ぶ(レスポンス)という関係です。

XAMPPの中のApacheがサーバー、MariaDBがデータベース、PHPがアプリのプログラムの役割をします。これらは自分のPCの中(ローカル)に設置するので、特別な設定をしない限り自分のPCからしかアクセスできません。そしてブラウザでローカルアドレスを指定することで、ローカル環境のサーバーやデータベースにアクセスして、自分のPC内だけでアプリを動作させることができます。

このようにして自分のPCの中だけでWordPressなどの動作環境を作ることができるのがXAMPPです。

XAMPPでWordPressローカル環境を立てる

ではローカル環境を作っていきましょう(開発環境を作ったりすることをエンジニアは「立てる」とも言います)。

1.XAMPPのインストール

Windowsの場合

まず下記から各OS向けXAMPPのインストーラーをダウンロードします。Windows版は32bit版しかありませんが、64bitのマシンでも使えるので大丈夫です。

XAMPP Installers and Downloads for Apache Friends

PHPバージョンは特に気にしなくていいのなら最新の7.2.2を選択します。古いバージョンが必要なら下記からダウンロードしてください。

Download XAMPP

次に、ダウンロードしたインストーラー(xampp-win32-7.2.2-0-VC15-installer.exe)を実行してセットアップをします。

途中 Select Components というダイアログでインストールする構成ファイルを選択できますが、今回はWordPress環境を作るため FileZilla FTP Server、Mercury Mail Server、Tomcat は使わないと思うので、チェックを外しても大丈夫です。

f:id:khanamoto:20180308122156j:plain

インストールする場所も基本的にデフォルトの C:\xampp でいいです。途中でWindows Defenderなどの警告が出ますが、問題ないので「アクセスを許可する」などを押して進めます。

セットアップが完了すると、XAMPPのコントロールパネル(管理画面)を立ち上げるかのチェックボックスがあります。とりあえず立ち上げてみましょう。英語とドイツ語どっちで設定するか聞いてきますが、好きな方を選んで下さい。

f:id:khanamoto:20180308123327j:plain

上のような画面が立ち上がればOKです。一旦閉じましょう。

macの場合

macの場合はトップページからダウンロードすると XAMPP-VM という仮想マシンをインストールすることになり初心者には使いづらいので、その他のバージョンから「7.2.2 / PHP 7.2.2」をダウンロードしてください。そうすると従来のネイティブ・インストーラーがダウンロードできます。「XAMPP-VM / PHP 7.2.2」じゃないです。

Download XAMPP

セットアップはWindowsとだいたい同じですが、Select Componentsのときは注意してください。
XAMPP Core Files と XAMPP Developer Files の両方にチェックを入れます。そうしないと、必要なファイルがダウンロードできずにApacheなどの起動ができなくなります。

f:id:khanamoto:20180308191736j:plain

セットアップができたら、macでも管理画面を起動してみます。

アプリケーションフォルダの中にXAMPPというフォルダができているので、その中の「manager-osx.app」を実行してください。管理者権限のパスワードを求められたら入力してOKです。

起動できたら、「Manage Servers」タグのMySQLApacheをStartして緑になれば成功です。

2.WordPressのダウンロード

次は下記からWordPressのソースファイルをダウンロードします。これも問題なければ最新版でいいです。

日本語 « ダウンロード — WordPress

ダウンロードしたフォルダを解凍すると wordpress というフォルダが展開されます。中身は下記のような構成です。

f:id:khanamoto:20180308123908j:plain

3.XAMPPでWordPressを起動してみる

XAMPPでWordPressを起動するための設定をしていきます。

  • xamppフォルダにwordpressファイルを配置

インストールしたXAMPPファイルは C:\xampp (mac: アプリケーションフォルダ直下)にあると思うので、そこに移動します。
その中に「htdocs」というフォルダがあるので、htdocs配下にダウンロードしたwordpressフォルダを配置します。
配置した後のパスで言うと C:\xampp\htdocs\wordpressmac: /Applications/XAMPP/xamppfiles/htdocs/wordpress)ですね。

配置できたら、 C:\xampp の中の xampp-control.exe (mac: /Applications/XAMPP/manager-osx.app)を起動します。これがXAMPPコントロールパネルの実行ファイルです。
起動するとさっきみたコントロールパネルが立ち上がります。
そしたらApacheMySQLをstartします。下記のようにApacheMySQLの部分が緑色になれば、ApacheMySQLの起動に成功しています。もし黄色になっていると失敗しているということなので、トラブルシューティングなどを参考に問題を解決してみてください。

ApacheMySQLの起動に成功したら、ブラウザで localhost/wordpress127.0.0.1/wordpress にアクセスします(パスの「wordpress」部分は C:\xampp\htdocs\ 配下に設置したWordPressのフォルダ名なので、もしフォルダ名を wp など好きなものに変えている場合は、パスも wp などに変えて localhost/wp などにしてください)。

localhostというのは今自分が使っているコンピュータのことを指します。これを指定することでブラウザからXAMPPのサーバーにアクセスします。その後に /wordpress とパスを指定すると、xamppのサーバーはルート(htdocs)のwordpressフォルダを探し、ブラウザに返すことでWordPressの画面がブラウザで表示されるようになります。
127.0.0.1は自分自身を指すIPアドレスであり、「ローカル・ループバック・アドレス」などと呼ばれます。localhostというのは127.0.0.1の別名のようなものだと考えてください。ちなみに127.0.0.1IPv4という規格でのアドレスであり、IPv6アドレスでは「::1」になります。
というわけで、以下に出てくるブラウザのアドレスに入力する localhost127.0.0.1 でもアクセスできます。

さてうまくアクセスできると、下記のようにWordPressのセットアップ画面が表示されます。

f:id:khanamoto:20180308132255j:plain

ここで冒頭の文章を読んでください。

作業を始める前にデータベースに関するいくつかの情報が必要となります。以下の項目を準備してください。

セットアップにはデータベースの情報が必要になるので、WordPressのセットアップに進む前に、学習用のデータベース(以下DB)を用意します。

DBとはブログ記事や画像などWordPressで入力して保存するデータを格納しておく場所のことです。DBにデータを格納することで、いろいろなデータの検索や抽出、表示などができるようになります。つまり、上で言われていることはそのデータの置き場所を先に作ってね、ということです。

4.データベースを用意する

ApacheMySQLを起動したまま、ブラウザで localhost にアクセスします。
するとXAMPPのダッシュボード画面が表示されます。そしてグロナビの一番右にある「phpMyAdmin」をクリックします。

そして下記のようにphpMyAdminの管理画面が表示されたらDBを作成していきます。

f:id:khanamoto:20180308141036j:plain

4-1.MySQL接続の照合順序の設定

phpMyAdminトップページの一般設定で、サーバー接続の照合順序を「utf8_general_ci」にする。

照合順序とは、「簡単に言うと文字列の比較方法の指定」のことで、「文字コード言語名比較法」という指定方法で、並び順に一致するものを比較します。
ここは正直明確にはわかってないのでまた調べたいと思う。

4-2.DB新規作成

グロナビの「データベース」か、サイドメニューの上にある「New」をクリックします。
デフォルトでいくつかDBがありますが、特に気にしないでそのままにしておきます。下記を入力してDBを新規作成してください。

「データベース名」:好きなDB名(英語始まりの小文字、スネークケースにしましょう。)
照合順序:utf8_general_ci

名前が決められなかったら wordpress とでもしてください。

できたら上にあるパンくずリストの「サーバ: 127.0.0.1 »」をクリックしてトップページに戻り、「データベース」をクリックして、自分で作成したDBが設定通りにできているか確認してください。
下記のようになっていたらOKです。

f:id:khanamoto:20180308144745j:plain

4-3.DBのrootのパスワードを設定

XAMPPのDBにはデフォルトでrootという特権ユーザー名が設定されていますが、パスワードは空になっています。
ローカル環境ですが、セキュリティ対策のためにrootにパスワードを設定しておきましょう。

DBのrootユーザーのパスワード設定

Windowsの場合

これはコマンドプロンプトで設定します。コマンドプロンプトを起動したら、以下のコマンドを順に叩いて設定します。
説明用のコメントは書かないでいいです。

# mysqlの実行ファイルの場所までディレクトリ移動
cd C:\xampp\mysql\bin

# パスワード設定をする(コマンドを叩くとパスワードの入力を2回求められるので入力)
mysqladmin -u root password
macの場合

macはターミナルで設定します。
必ずサーバーとDBを起動させた状態で行ってください。でないと下記のようなエラーが出ます。
「error: 'Can't connect to local MySQL server through socket '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock' (2 "No such file or directory")'」

cd /Applications/XAMPP/xamppfiles/bin

mysqladmin -u root password

phpMyAdminにも設定

このままだとphpMyAdminにアクセスしたとき下記のようにエラーになるので、phpMyAdminにもrootユーザーのパスワードを認識させる必要があります。

f:id:khanamoto:20180308153332j:plain

C:\xampp\phpMyAdmin\config.inc.phpファイル(mac: /Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php) をテキストエディタで開き、「$cfg['Servers'][$i]['password']」で検索し、さっきコマンドプロンプトで設定したrootユーザーのパスワードを書いて保存します。

$cfg['Servers'][$i]['password'] = 'rootユーザーのパスワード';

これでDBの用意はできたので、改めて localhost/wordpress にアクセスします。

5.WordPressセットアップ

DB設定

「さぁ、始めましょう」ボタンで移動したら以下のように設定します。

データベース名:自分で作ったDB名
ユーザー名:root(デフォルトのまま)
パスワード:さっき設定したrootユーザーのパスワード
データベースのホスト名:localhost(デフォルトのまま)
テーブル接頭辞:wp_(デフォルトのまま)

できたら「送信」ボタンを押して、「インストール実行」してください。

WordPress設定

ここではDBではなく、WordPressのユーザー名などを設定します。
最低限以下は設定してください。ミスっても後で変えられます。

サイトのタイトル:好きに
ユーザー名:好きに
パスワード:好きに

入力できたら「WordPressをインストール」ボタンを押してください。

成功画面が出たら、設定したWordPressのユーザー名とパスワードでログインしてみます。

ログインできました!

f:id:khanamoto:20180308155620j:plain

6.PHPの設定

最後に言語や標準時の設定などを日本語環境にするために、PHPファイルをいくつか編集します。

C:\xampp\php\php.iniファイル(mac: /Applications/XAMPP/xamppfiles/etc/php.ini)を開いて、以下のように編集します。

date.timezone=Europe/Berlin
↓
date.timezone=Asia/Tokyo
  • マルチバイト
;mbstring.language = Japanese
↓
mbstring.language = Japanese
;mbstring.internal_encoding =
↓
mbstring.internal_encoding = UTF-8
  • エラー表示レベル
error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT
↓
; E_NOTICE(注意メッセージ)以外の全てのエラーを表示する
error_reporting=E_ALL & ~E_NOTICE

以上の設定ができたらApacheを再起動してください。
そして localhost にアクセスし、グロナビの「PHPInfo」から変更内容が反映されているか確認します。
例えばタイムゾーンを確認すると、 Asia/Tokyo になっていればOKです。

f:id:khanamoto:20180308172434j:plain

まとめ

お疲れ様でした。以上でXAMPPを使ったWordPressローカル環境の構築は終わりです。

開発環境1つにしても、Webの基礎知識がいろいろ必要なので、いい復習になりました。

あとは問題が起きたときなど、都度調べて学習していってください。

トラブルシューティング

Apacheが起動できない

XAMPPではApacheを起動するためポートの80番を使っています。ですが、他のアプリケーションでも80番を使っていると起動できません。なので他のアプリケーションかXAMPPのポート番号を変える必要があります。
例えばよくあるのが、Skypeで「ポート80と443を使用」している場合です。その場合はSkypeの接続設定を変えてみてください。

XAMPPのポート番号を変える場合は下記を参考にしてください。

XAMPPでインストールしたApacheが起動しないとき | PHPプログラミングの教科書 [php1st.com]

ApacheMySQLのファイルを編集したのに、変更内容が反映されない

コントロールパネルでStop→Startをして再起動してみてください。起動時にしか読み込まれないファイルがあるので、その場合は再起動が必要です。

参考

予備知識

Webアプリケーションの仕組み

レンタルサーバーとは?契約からできることを初心者にもわかりやすく解説します | カゴヤのサーバー研究室

XAMPP for OS Xからかなり変わったXAMPP-VM for OS X のメモ - uzullaがブログ

サーバー

今更聞けない!Webサーバーの仕組みと構築方法

ローカルホストとは - IT用語辞典

localhost - Wikipedia

ローカル・ループバック・アドレス(127.0.0.1)とは?:Tech TIPS - @IT

データベース

XAMPPを使ってWordPress用にローカル環境構築する方法【初心者向け】 | TechAcademyマガジン

MySQLのCollationを理解するためにまとめてみた。 - 6VOX

MySQL :: MySQL 5.6 リファレンスマニュアル :: 10.1.2 MySQL での文字セットと照合順序

MySQLでデータベース作成する「CREATE DATABASE」 | UX MILK

最新のXAMPPでのMySQLのパスワードの変更方法などについて | ゆうそうとITブログ

mysqlが起動できない - Qiita