XAMPPのインストール方法まとめ。ザンプでローカル環境にWordpressを構築しよう！オフラインで使えるテスト環境。

WordPressをローカル環境に構築する

サイトやブログを運営しているなら是非整えておきたいのがローカル環境です。
今回紹介しているソフトウェアは全て無料で利用できます。
僕は自作テーマを作る際にサーバー代をケチって作ったのが始まりでした。

では順番にやっていきましょう！
画像を見ながらやってもらえれば1時間もかからないと思いますのでご安心を。
想像通りの長文になりましたのでセキュリティ設定は別ページにしました。
（この記事内にそのページのリンクを貼っています。）

XAMPP（ザンプ）とは？

まず初めに、今回パソコン内にローカル環境を作るのに役立ってくれるXAMPPというソフトについて触れておきます。
読みにくい名前がついている理由は、WEBアプリケーションの開発環境に必要なソフトウェアの頭文字を組み合わせたものだからです。

Webサーバーとして稼働するのに必要なソフトウェアがパッケージ化されており、XAMPPをインストールするだけでパソコンにWebサーバーと同様の機能を持たせることが出来るのです！

XAMPPのインストール方法

XAMPPをパソコンにインストールする方法からです。

英語とドイツ語しか対応していませんが、一つ一つは簡単なので大丈夫。
まず公式サイトから本体をダウンロードしましょう。

XAMPP Installers and Downloads for Apache Friends

ダウンロードページに移動したら、パソコンのOSに合ったファイルを入手します。
僕はWindows10なのでこちら...素晴らしい！と出ますw

XAMPPの実行ファイル

ダウンロードしたexeファイルをダブルクリックしてインストーラーを立ち上げます。

すると「It seems you have an antivirus running. In some cases,this may～」という文章が出ます。

不具合が出たらウイルスバスターを疑いましょう。
Windowsファイアウォールは問題なしでした。YESをクリック。

進むと「Important! Because an activated User Account Control (UAC) on your system～」と出ます。

XAMPPはC:ProgramFilesフォルダ以外にインストールしてね！ということです。
UACを無効化する方法も一応ありますが、玄人向けです…

セットアップウィザードが立ち上がりますので、Nextをクリック。

Wordpressに必要なソフトのみ選択。

続いてコンポーネントを選ぶ画面がでます。
そのままNextを押しても問題ないのですが、ここではWordpressの動作に必要なソフトウェアのみをインストールします。

の４つがあれば問題なく動作しますので画像の通りにチェックを絞ります。

XAMPPのインストール先を選ぶ

続いてXAMPPをインストールするフォルダを選択します。

こちらもそのままの設定でNextを押してCドライブにインストールしてもいいのですが、Cドライブはパソコンにソフトなどを入れるごとに肥大化していきますので、僕は余裕のあるDドライブに選びなおしました。

インストール先をDドライブに変更

ファイルパス右のフォルダマークをクリックしてインストール先を変更します。
先に作っておいたDドライブ内のxamppというフォルダを指定しました。

インストール先のフォルダとして下記のようなフォルダは不具合の原因となりますので避けましょう。

なおXAMPPのインストール先は中身が空のフォルダしか選べないようです。

空のフォルダではない場合「The selected folder is not empty.Please select a different folder」と空のフォルダを選びなおすように警告が出ます。

コントロールパネルの言語を選択

コントロールパネルの言語を選びます。EnglishのままNextをクリック。
選べる言語は二種類でもう一つはドイツ語ですw

Bitnamiのチェックを外す

Bitnamiとは他のオープンソースのソフトを簡易インストールする機能です。
今回は必要ないのでチェックを外してNextをクリック。

Ready to Installの画面はそのままNextをクリック。
インストールが始まるので待ちます。

インストールの途中でApache HTTP Serverアプリケーションのアクセス許可がWindowsファイアウォールより求められるので許可しておきましょう。

インストールが終了したら「Do you want to start the Control Panel now?」のチェックが入っているので、そのままFinishをクリックすればXAMPPのコントロール画面が立ち上がります。

画像の赤で囲ったStartを押すとApacheとMySQLの起動ができます。Startを押すとStopにボタンが変わりこれを押すとApacheやMySQLが終了できます。

mysqldにもアクセス許可が必要

MySQLのStarを押すと初回のみアクセス許可を求められるので、先ほどのApacheの時と同じように許可しましょう。

XAMPPコントロールパネルでApacheとMySQLの両方が起動していることを確認したのち、メニューのAdminを押すとローカル環境で動作しているかチェックできます。

ブラウザで開いたページのURLがhttp://localhost/～になっていればローカル環境の構築成功です！

とりあえずここまでお疲れ様でした・ｗ・

ザンプの終了方法と注意点

ローカル環境での作業が終わったらXAMPPを閉じるのですが注意点があります。

XAMPPを終了する際はStopボタンでApacheとMySQLの両方を終了しましょう。

Stopボタンを押さずにQuitや×ボタンで閉じてもPCの電源が入っていてオンラインだとサービスが起動したままになる？
（↑検証しました。筆者の環境ではApacheとMySQLを両方起動したままパソコンを落とした後、同Wi－Fi上にあるスマホでローカル環境にアクセスを試みましたが繋がりませんでした。とはいえ、きちんと終了するに越したことはありません。）

XAMPPメニューを×ボタンで何度も閉じた場合

次にXAMPPのコントロールメニューの閉じ方ですが画面右上の×ボタンでは閉じずにQuitボタンを押して閉じることを心がけましょう。
×ボタンでウィンドウは閉じますが、裏で動いています。

もし×ボタンで閉じてて知らず知らずのうちにメニューバーに増殖してしまったザンプはロゴを右クリックしてQuitを押すと閉じれますヨ！
（パソコンを再起動してもOK）

XAMPPのセキュリティ設定について

さて、XAMPPのインストールは無事に済みましたか？
次はセキュリティ設定です。簡単なので大丈夫です。
インストールしただけのXAMPPはそのままではセキュリティが貧弱です。

どう貧弱なのかというと

という状態なのです。

ローカル環境を構築したPCがオンラインでそのPCのIPアドレスが分かれば、そのパソコンでは無くてもアクセスできてしまうということです。
いくらローカル環境で使うだけとはいえ、最低限の設定はしておきましょう。

データベースにパスワードを設定してからphpMyAdminにログインページを出現させ、ローカル環境を構築したパソコンでしかアクセスできないように設定します。

こちらも作業は結構簡単なのですが、長くなりますので別のページにまとめました。

WordPress用データベースの作成

XAMPPによってWebサーバー用のソフトウェア「Apache」とデータベース用のソフトウェア「MySQL」、そしてそのデータベースをブラウザで管理できる「phpMyAdmin」がパソコンにインストールされました。

そしてWordpressの大部分はPHP言語で書かれているので、ローカル環境にWordpressを導入するまであと一歩です。

Wordpressをインストールするにはデータを保管しておくためのデータベースが必要になるので、データベースの作成を行います。

XAMPPでApacheとMySQLを起動する

XAMPPのメニューを開いてApacheとMySQLが起動しているのを確認したら、
MySQLのAdminボタンをクリックしphpMyAdminのページを開きます。

セキュリティ設定をした方はログイン画面が出ますので、phpMyAdminにログインします。
設定していない方はAdminを押せばphpMyAdminのページが直接開かれます。
左上の方にある「データベース」をクリック。

任意のデータベース名を入力して、データベースキャラクタセット（データベース内で扱う文字コード）を選んで作成をクリックします。

データベース名は分かりやすい英数字でOK！
照合順序はデフォルトの「utf8mb4_general_ci」でOK！

作成をクリックして「データベース○○を作成しました。」という表示が出ればデータベースの作成完了です！

XAMPPにWordpressをインストールする

なが～くなりました。
これでやっとXAMPPにWordpressをインストールすることができます...
サクッと終わらせましょう！

まずWordpressを公式サイトよりダウンロードします。

Wordpressのダウンロード

ページを少しスクロールしたところにダウンロードボタンがあります。
ここをクリックしてパソコンにWordpress本体をダウンロードしましょう。

xampp > htdocsにwordpressフォルダを移動する

ダウンロードしたファイルはZIP形式で圧縮されていますので解凍します。
（ファイルを右クリックした時のメニューからできることが多いヨ！）

続いて解凍したWordpressフォルダをXAMPPをインストールしたフォルダ内のhtdocsに移動します。

これでWordpressの設置は完了しました。続いてセットアップします。

http://localhost/wordpress/を開く

ダウンロードして解凍したWordpressの本体をxampp内に設置したら「http://localhost/wordpress/」にブラウザ経由でアクセスします。

リンクを作ったので、コチラをクリックしてもらってもOK！
（XAMPPのApacheとMySQLの両方が起動している状態でアクセスすること。）

データベース情報の入力

データベースのセットアップ画面が出ます。

セキュリティ設定をした方は、ユーザ名とパスワードはphpMyAdminのログイン画面のものと同じです。
セキュリティ設定を行っていない方はパスワードを空白で進めます。
データベースのホスト名は「localhost」でOK、接頭辞は「WP_」でOK！

入力し終わったら送信を押して進みます。

入力したデータベース情報に問題が無ければ、この画面になるのでインストール実行をクリック。

サイト情報の入力

続いてWordpressの5分間インストールプロセスがスタートする。有名らしい。

言葉通りで任意の項目が多いので大丈夫だと思います。

注意するならユーザー名とパスワードはWordpressの管理画面（ダッシュボード）にログインするのに必要なのでどこかにメモしましょう。
特にランダム生成されたパスワードを使用する場合ですね。

インデックスとは検索エンジンの検索結果に表示するかどうか、ローカル環境なのでインデックスしない設定にしましょう。

終わったらWordpressをインストールをクリック。

ログインを押す。

先ほどのWordpressの有名な5分間インストールプロセスの画面で入力したユーザー名とパスワードを入力してダッシュボードにログインします。

ちなみにlocalhostは人が見やすいようにつけられたドメイン名で「localhost=127.0.0.1」です。
したがって「http://127.0.0.1/wordpress」とIPアドレスを直接指定してあげてもサイトにアクセスできますヨ！

無事にダッシュボードが表示されれば終了です。

ふぇーお疲れ様でした！！

まとめ

XAMPPを起動してローカル環境のWordpressにアクセスすることにより色々なテストが出来ます。
本番サイトでは試せないようなプラグインやテーマなどもどんどん動かしてみて自分のサイトにぴったりのレイアウトや機能を発掘して下さい・ｗ・

※ただしXAMPPと本番環境のPHPバージョンなどが異なっていることに要注意！
稀に新しいバージョンのPHPで追加された関数が使われていて、古いバージョンで動作している本番サーバーにアップロードしたら、そんな関数ありません！とエラーが出ることも…
逆もしかり、古い関数は推奨されません！と警告が出ることも…

僕は以前ローカル環境で開発したphpプログラムの一部が本番環境では使えませんでした。
とはいえ代替関数もあります。失敗ができない場合はXAMPPにインストールされているプログラムのバージョンを本番環境と合わせておくという方法もありますが…
頭の片隅に置いておいてください。

XAMPPでローカル環境を構築したPCはWordpressをオフラインでも使えるので、山の中にノートパソコンを持ち込んで記事を書いていればそれはそれはカッコいい人になれます←

ではでは～お疲れさまでした。（二回目）