ローカル環境にXAMPPをインストールしてサイト構築する方法

まだまだ本格的に Webサイトを始めるか悩んでいる方は、
レンタルサーバー契約をする前に、XAMPPを使って WordPressを体験してみては？

contents - 目次 -

1. XAMPP（ザンプ）とは？
2. Xamppのインストールの手順
- 2.1. XAMPP　Control Panel の設定
- 2.2. apache　MySQL の動作確認
3. データベースセキュリティの設定について
- 3.1. MySQL データベース　パスワードの設定
- 3.2. phpMyAdmin 　ログイン画面の設定

XAMPP（ザンプ）とは？

XAMPP（ザンプ）はサーバーやデーターベースなど Webサイト構築のために必要な
アプリケーションを一つにパッケージ化したものでローカル環境でのみですが
サイトの開発ができるとても便利なアプリケーションになります。

Apache・MariaDB（旧はMySQL）・PHP・Perlのイニシャルの頭文字から
Windows では XAMPP Macでは MAMP（マンプ）呼ばれています。

ローカル環境

このローカル環境というのは、インターネットを必要としない環境ということで、
本来ならレンタルサーバー契約をして利用できるサーバー・データベースなどが
パソコン内に設置されるといったイメージです。

この XAMPPを使用することで WordPressをインストールし、実際にサイトを
作成してみることができます。

XAMPPの用途

XAMPP を使用する目的はさまざまです。

サイトを一からプログラミングしていくため
Webサイトのためのテストサイトとして利用
そして、契約料がかからずサイトをイメージしていけるツールとして

テストサイトとは、サイトのデザインの変更する場合や
アップデートなどローカル環境で不具合が起きないか試したりという使いかたなど

ローカル環境ですから、サイトをWeb上に公開することはできませんので
最終的には、サーバー ( レンタルサーバー ) 契約しなければならないということになります。

その際にローカルから本番サイトへ移行する方法もありますが、
XAMPPを使ったサイトの構築をどのような目的で使用するのかを
理解したうえでこの XAMPPのインストールへ進んで頂ければと思います。

MAMP

Mac を利用されている方は MAMPをインストールしてご利用ください。
MAMP のダウンロードはこちらのサイトからできます。　↓

MAMP & MAMP PRO - your local web development solution for PHP and WordPress

MAMP GmbH is the manufacturer of the award-winning MAMP software.

https://www.mamp.info/en/

Xamppのインストールの手順

インストールを分かりやすく図解していますので順に進めていきましょう。

https://www.apachefriends.org/jp/index.html

追記：現在の Windows 向け最新バージョン 7.1.33 / PHP 7.1.33 です。

①　こちらの画面から　Windows向けXAMPP　をダウンロードし
パソコンにインストールしていきます。
注意喚起の表示のあとにこちらの画面が表示されます。

②　setup-XAMPP　　Next >　をクリック

③　Select Components インストールするコンポーネントです。
WordPressで使用する項目は４つです。
他のものは　チェックをはずしてもらっても構いません。

Apache（アパッチ）　Webサーバーソフトウェア
MySQL（マイ・エスキューエル）データベース管理システム
php（ピーエイチピー）　WordPress で使用するプログラミング言語です。
phpMyAdmin（ピーエイチピーマイアドミン）データベースの管理画面

④　インストールフォルダの選択
C:￥xamppのままでＯＫですが、後々使用するフォルダですので
どこにあるのか覚えておきましょう。

⑤　XAMPPアプリケーションサイトを開けるかどうかのチェックです。
こちらは基本的に使用しませんのでチェックは外してもらって問題ありません。

⑥　Next> をクリックするとインストールを開始します。
数分かかる場合がありますのでお待ちください。

⑦　インストール終了画面です。
こちらのチェックはコントロール画面の起動させるか聞いています。
Finish をクリックして XAMPPの初期設定と動作確認に進みます。

XAMPP　Control Panel の設定

言語の選択はどちらか利用しやすい方でSaveをクリック
あとの解説画面は英語の方になります。

こちらがコントロール画面です。
始めに　Apache　の　Startボタンをクリックします。

起動が始まり　Apache の文字の背景が黄色になり　正常に作動したら薄い緑色に変わります。

エラー表示が出た場合

まれに正常に起動できずに　画面下エラー表示されるケースがあります。

Port(s)　80,443　というのが　apacheで使用されるポート番号ですが
Skype などを利用しておられる方は
このポート番号をSkypeが使用している場合があります。
これが原因でエラー表示されてしまっている場合
Skype のポート番号を変更すれば　解決します。

また、必要なファイルが正常にインストール出来ていないケースがあります。
インストールをやり直すことで　解決する場合がありますが
私の場合、インストールでもだめで　ダウンロードからやり直して解決したことがあります。

無事　Apache が起動できたら　MySQL のStartボタンをクリックし起動させます。
こちらも緑色に変わりましたらこれで無事起動できました。
ローカル環境でサイト作成をする場合、
この状態でWordPressの画面を開くことが出来ます。

ローカル環境でWordPressを動作させるためには

Apache と　MySQL を毎回　起動させる必要がありますので
コントロール画面はすぐに使用できるようにタスクバーなどに固定するなど
分かりやすい場所においておくと便利です。

apache　MySQL の動作確認

startボタンの横の Adminのボタンをクリックして
apache　MySQL が正常に動作しているかの確認をしていきます。
apacheのAdmin画面

MySQLのAdmin　PHPMyAdmin管理画面

こちらの画面が無事表示できましたら　正常に動作している証拠です。

phpMyAdminの画面が英語表記になっている場合は
中央にあります外観の設定の言語（Language）から日本語表記に変更できます。

データベースセキュリティの設定について

初期設定ではデータベースのセキュリティ設定がされていない状態なので
MySQL の Admin をクリックするとすぐに phpMyAdmin の画面へ
移動することができましたが WordPressをインストールする際に
データベースのパスワードが必要になります。

また、セキュリティ設定されていない場合ネットワーク経由で外部から
アクセス可能な状態となっているため悪意のあるプログラムなどからの
攻撃を受ける可能性がありますのでセキュリティ設定が必要になります。

セキュリティの設定をするためには　データベースの情報を
書き換える必要がありますので順に説明していきます。

MySQL データベース　パスワードの設定

まず　XAMPPのコントロール画面のShellボタンをクリックして頂き
コマンドプロント画面を開きます。

このような黒い画面が出てきます。
この文章の最後の＃の後に続いて入力していきます。
文字列がズレるだけでも　エラーになりますので
コード内をコピペで入力していただいた方が簡単です。

cd mysql\bin を入力し Enter を押します。

次に mysql -u root を入力し Enter を押します。

set password=password('your_password’);
ここでパスワードの設定になります。
ここではこの ('your_password’) のままで Enter を押していますが
(") この部分にさきほど設定したパスワードを入力し Enter を押してください。

Query OK, で正常に変更できました。という表示になります。
データベースの変更はこれで終了です。

quit と入力して Enter で元の画面に戻ってきました。
右上の✖で閉じるか　exit と入力して Enter を押すことでも
画面を閉じることができます。

phpMyAdmin 　ログイン画面の設定

もう一度 XAMPPコントロールパネルから MySQLのAdminをクリックしてみます。

MYSQLのパスワードの設定をしたことで先ほど開けることができた
phpMyAdminに入れずにエラー表示が出てきました。

これは先ほど設定したパスワードを phpMyAdminの方にも設定してあげることで解決します。
書き換えは phpMyAdmin フォルダの中の confing.inc.php ファイルになります。

画像上部のタブに表示されているのが phpMyAdminのフォルダが保存されている場所です。
ローカルディスク C:\ XAMPP \phpMyAdmin \confing.inc.php
というファイルを開いた画面がこちらの画像です。

こちらのテキスト画面は…

sublime Text（サブライムテキスト）という
エディタで表示した画面になります。カラーで表示することが出来るので
書き換えたいところがわかりやすくとても便利です。

テキストエディタがなくても　お使いのエクセルでもメモ帳機能でも
編集は可能ですが機能的にもあると便利です！！

詳しくはこちら↓
テキストエディタ【 SublimeText 】インストールと日本語変換のしかた

話を戻して．．．
上記の画像の赤で囲んである場所の設定変更です。

['auth_type’] = 認証タイプの設定ですが
ファイルにはパスワードを書き込まずにログイン認証にします。
ログイン認証にするためには　”cookie”と入力し
あとの ['user’] ['password’] は空欄にしたままで　保存して終了します。

これで　設定が終了しました。
ログイン画面が表示されるか確認してみましょう。
XAMPPのコントロールパネルの MySQL の Admin をクリックで
この画面が表示されればOKです。