XAMPPをサクッとインストールする方法と使い方を徹底解説！
XAMPPのインストール方法を知りたいなぁ。
指示通りにやるから、サクッとインストール + 使えるようになるまでを教えて！
「PHPファイルをブラウザで確認するにはXAMPPが必要」と言われても、何から手をつけて良いかわかりませんよね？
この記事では、指示通りにやるだけでXAMPPがインストールでき、PHPファイルをブラウザで表示できるようになるまでを解説しています。
つまりこの記事を読めば、環境構築がサクッと終わり、メインのプログラミングやコーディング、WordPress学習に進めます♪
【XAMPPを使えるようになるまでの道のり3ステップ】
- XAMPPをダウンロード & PCにインストール
- hostsファイルの設定
- vhostsファイルの設定
やぁみんな！僕が現役エンジニアのさかしだ。
僕も大昔XAMPPのインストール、設定がわからなくて気持ち悪くなった経験がある。
この記事では僕と同じ経験をしないよう、XAMPPでの環境構築をわかりやすく解説するぜ！
※Windowsを使った解説ですが、Macでもほぼ同じです。ただ、Macでは「MAMP」というアプリを使うのがおすすめなので、Macの方は以下の記事を参考にしてください。
XAMPP（ザンプ）とはWEB制作で必要なものをパッケージ化したもの
XAMPP（ザンプ）とは、WEBアプリケーション作成の際に必要な複数のソフトウェアを、マルッとひとつにまとめてパッケージ化したものです。
具体的には、Apache（アパッチサーバー）、PHP（ PHPプログラム）、MySQL（データベース）、Perl（Perlプログラム）がまとめて入っています。
中身についてはよくわからないと思うので、今の段階では「PHPファイルを自分のパソコンで表示するのに必要なものが全て詰まった宝箱」だと思ってもらえればOKです！
つまり、XAMPPだけインストールしておけば、WEBアプリケーションを自分のパソコンで作成できる環境が整うということです。
これが一種の「環境構築をする」ということですね。
PHPでサービス開発する人だけでなく、WordPressサイトでのWEB制作、PHPフレームワークの「Laravel（ララベル）」を使ったWEB制作でも利用されています。
もちろんPHPを勉強するという人も、PHPファイルを表示するために使っています。
ちなみにXAMPPの名前は、これらのソフトウェアの頭文字を取ってつけられていますよ♪
ふ〜ん。
必要なものが集まって、頭文字で名前をつけるって…KAT-TUNかよ。
けど、PHPファイルを表示するのに必要なものが全て詰まってるなんて、初心者にとっては嬉しいね♪
これがなきゃほぼプログラマーになれる人はいなかったんじゃないかな。。。
昔はWEBアプリケーションを作るときに、サーバーやデータベースとかをそれぞれ自分で用意しなきゃいけなかったから、大変だったんだ。
XAMPPはその苦労を全て解決してくれる画期的な超便利ツールなのさ♪
実際の仕事で使うこともあるの？
大アリだぜ！
僕は今でも、サクっと確認した案件とかは、ローカル開発でXAMPPを使うシーンがあるよ。
へぇ〜、現役エンジニアも使うことがあるんだね！
XAMPPのダウンロード & インストール方法
ここからは、実際にXAMPPをインストールしていきましょう！
画像や解説に沿ってやっていただければ意外と簡単にできますので、ひとつずつ進みましょう♪
①XAMPPの公式サイトからダウンロードしよう！
まずはXAMPPの公式サイトからXAMPPのファイルをダウンロードしましょう！
以下から公式サイトに飛んでください。
【XAMPP公式サイトはこちら】
⇒XAMPP公式サイト
公式サイトに飛びましたら、「その他のバージョンについてはこちらをクリックしてください」をクリックします。
「Windows向け」とか「MAC向け」とかじゃダメなの？
それをクリックすると「最新版のXAMPP」がダウンロードされちゃうから、やめた方がいいぜ。
え？最新版がいいんじゃないの？
最新版のXAMPPはPHPのバージョン8が採用されているんだけど、8だとWordPressを動かす時にエラーが出てしまうケースがあるんだ。
だから、2021年5月時点ではPHP7がおすすめなんやで！
PHP8は、もっと浸透してエラーとか少なくなってからにしよう！
付き合ってすぐの良くわかってない男と結婚するのは、かなりリスキーでしょ？
たしかにキムタクレベルのイケメンじゃなきゃ、すぐに結婚は無理だわ。
PHPは7.4系を選択しよう！
「その他のバージョンについてはこちらをクリックしてください」を押すと、以下のページに飛びます。
WindowsPCなら「XAMPP for Windows」、MacPCなら「XAMPP for MAC」、LinuxPCなら「XAMPP for Linux」の部分からダウンロードをしていきます。
2021年5月時点では、PHP7.4系が採用されているレンタルサーバーが多いので、PHP7.4.14の「Download（64bit）」ボタンをクリックしましょう！
ボタンをクリックすると以下画像のページに移動し、ダウンロードが始まり「xampp-windows-x64-7.4.14-1-VC15-installer.exe」というファイルがダウンロードされます（Macは表示が違います）。
これはインストールするためのものなので、ダブルクリックをして開きましょう！
ダブルクリックをしてインストールをしようとすると、以下のようなWarning（警告）が出ますが、「OK」を押して進んでいただいて大丈夫です。
②XAMPPを自分のPCにインストールしよう！
ダウンロードができたら、次はXAMPPをパソコンにインストールしていきます。
先ほどの警告に対して「OK」をクリックすると以下画面が表示されますので、「NEXT」をクリックしましょう。
次に「select components」が表示されます。
「どのソフトウェアをインストールする？」と聞かれているだけなので、特に理由がなければデフォルトのまま（全てチェックされている状態）「NEXT」をクリックしましょう！
※すでにインストールされているソフトウェアはグレーで表示されますが、無視でOKです！
どこにインストールするかを聞かれるので、XAMPPをインストールしたいフォルダ（任意）を選択します。
Windowsだと「C:\xampp」という形が多いかと思いますが、
- Cドライブの容量を空けておきたい
- パソコンにドライブが複数ある（Dドライブ、Eドライブなど）
という状態なら、他のドライブにインストールしてもOKです。
Macの場合はApplicationsフォルダが一般的ですね。
インストール先を指定できたら「NEXT」をクリックしてください。
次に「Bitnami for XAMPP」についての説明です。
「Bitnami for XAMPPについてもっと知りたいでしょ？」と誘われていますが、ほとんどの人が必要ないかと思うので、心を鬼にしてチェックを外しましょう。
最後に、「XAMPPをインストールするけど、いいわよね？」と聞かれるので、もちろん「NEXT」をクリックします。
「NEXT」をクリックしたら以下画面が表示され、インストールが開始されます。
お使いのPCのスペックや電波環境にもよりますが、2～10分ほどで終わるでしょう。
このように表示されたら、XAMPPはあなたのものです。
この後XAMPPを実際に動かしてみるので「Do you want to start the Control Panel？（せっかくだしコントロールパネル、開くよね？）」にはチェックを入れておきます。
そして、「Finish」を押したらインストール完了です。
これで終わり？
めっちゃ簡単じゃん。
思った以上に簡単でしょ？
これだけでApacheサーバーやデータベースをインストールできるからXAMPPは人気なんだ。
XAMPPちょろいね！
サクッと使い方も教えてよ♪
オッケー！
使い方もちょろいぜ！
XAMPPの使い方
XAMPPは「サーバー」と「データベース」を起動させれば、基本的な操作は終わりです。
まずはコントロールパネルを開きましょう！
XAMPPを使うときは、毎回コントロールパネルを開く必要があります。
開き方は簡単で、XAMPPをインストールしたフォルダに行き、XAMPPを選択し、その中の「xampp-control.exe」をダブルクリックするだけです。
すると、以下画像のようなコントロールパネルが開きます。
あとは、「Apache」と「MySQL」の「Start」を押すだけです。
チェックボックスにチェックが入れば起動完了となります。
え？以上？
以上だよ（笑）
これでサーバー（Apache）とデータベース（MySQL）は起動した状態になる。
PHPファイルをブラウザで開くときはApacheだけでOK！
WordPressなどデータベースを利用するものを使う時は、MySQLの起動も必要だから毎回忘れずにおこなおう！
Apache（アパッチ）が起動しない場合の解決策
ここでは、「XAMPPはインストールできたけど、Apacheのstartを押しても起動しない…」というよくあるエラーについて集めてみました！
エラーが出た場合、上記画像の緑枠部分にエラーの詳細が書いてあります。
これをコピーして、Googleの検索窓に貼り付けましょう。
解決策が出てきますよ♪
Skype（スカイプ）をインストールしていませんか？
最も多いエラーの原因が、「スカイプをインストールしているためにApacheが起動しない」ということ。
なぜスカイプを入れているとApacheが起動しないかというと、スカイプとXAMPPの「ポート」というものが同じだからです。
ポートとはアプリの識別番号のことで、ポート番号が被っていると「同じやつ2人いるからどっち開けばいいかわからんわ。エラー出しとこ。」とPCが困ってしまうのです。
解決策は、スカイプのポート番号を変更すればOKです。
スカイプを起動し、「ツール」→「設定」と進み、接続をクリックしましょう。
「上記のポートに代わり、ポート80と443を使用」のチェックボックスを外して、保存します。
あとは、もう一度Apacheを再起動すれば動くはずです。
大体はポートの競合が原因だね。
スカイプ以外にもポート80を使っているアプリがあったら、そっちも変更する必要があるぜ！
ポートが使用されているか開放されているかは以下の方法で調べられるから、スカイプのポートを変更しても動かない場合は以下で確認してみよう！
Windows10で標準搭載されている「IIS」のポートにも要注意だ。
その他のXAMPPが動かない時の解決策リスト
実は、ここまでの方法で解決しない場合もある。
原因不明の場合は、もう一度XAMPPをインストールしてみよう！
もう一度インストールすると、何事もなかったかのようにApacheが起動する場合があるぜ！
あぁ…いるよね。
ケンカしたのに、何事もなかったかのように次の日接してくるヤツ。
XAMPPさんよ、おぬしもそういうタイプか。
表示したいファイルの設置場所
ブラウザでPHPファイルを開くには、XAMPPの「htdocsフォルダ」に開きたいPHPフォルダを設置する必要があります。
そのため、XAMPPを使ってWEB制作をおこなう場合は、htdocsにフォルダを配置しましょう！
XAMPPの直下にhtdocsはあるので、探してみてくださいね。
以下の画像のように、htdocsの中にはフォルダをいくつも作成可能です。
複数のWEBサイトを作る場合も安心ですね♪
htdocsに…ほっっぞーーーん！
これでローカル環境でブラウザからPHPファイルを確認できるってことだよね？
実はまだなんだ。。。
「hosts（ホスツ）ファイル」と「vhosts（ブイホスツ）ファイル」を設定しておかないと、ブラウザでPHPファイルは確認できないんだ。
正確に言えば確認はできるんだけど、複数のプロジェクトを管理することを考えると、hostsとvhostsは設定しておいた方が良い。
ががーーーん。。。
まだあるのか。。。！
ファイル名もわけわかめだし、やりたくないよ〜！
大丈夫！簡単に設定できるから、一歩ずつ進めばキャバコでも誰でもできるものだぜ！
僕が手取り足取り教えるから安心してよ♡
体には触れない形でお願いします。
hosts（ホスツ）ファイルを設定しよう！
ここまででXAMPPのインストールと使い方を学んできました。
上記が設定できた状態は、PHPファイルを開く土台ができた状態です。
さてここからは、「作成したPHPファイルをブラウザで表示できるようにする」ための設定をおこないます。
その第一歩として「hosts（ホスツ）ファイル」の設定をしていきましょう！
hostsファイルって何？
hostsファイルというのは、ただのテキストファイルだぜ。
メモ帳とかでも開けるよ。
このhostsに情報を書き込むことで、IPアドレスと任意のURL（ドメイン）を紐づけることができるんだ。
ドメインって、webgui.jpみたいなURLの部分のことだよね！
IPアドレスってなぁに？
IPアドレスっていうのは、パソコンの識別番号（数字が並んだもの）のことだ。
実はパソコンとかサーバーとか、ネットにつなげられる機器には、ひとつひとつをネットワーク上で識別できるように、番号がふられているんだ。
その番号がIPアドレス。
ウェブサイトのデータが保存されているレンタルサーバーにも、IPアドレスがふられているぜ。
IPアドレス＝住所っていう捉え方で問題ないよ！
英語のaddressって、住所っていう意味だしね。
IPアドレスについての説明動画、３つピックアップしておくぜ。
理解を深めたい時は見てみてくれ～！
良い動画だね！
なんとなくIPアドレスは理解したわ！
それで、なんでIPアドレスとドメインを紐づけないといけないの？
みんながブラウザで見ているURLって、それ単独だと住所の役割を果たせないのよ。
本当は、IPアドレスを指定しないといけないからね。
でもさ、「google.comにアクセスしたいな～」って思った時、ブラウザのURL欄にわざわざIPアドレスを打ち込むのって面倒でしょ？
うん、IPアドレスって数字だけだから、覚えられないし。。。
そうそう。
だからwebgui.jpみたいなURLを利用するのさ。
で、「webgui.jpにアクセスがあったら、このサーバーのIPアドレスにアクセスしてね～！」っていう設定をするんだ。
その役割を果たすのがhostsファイルってわけ。
うん、あんまり理解してないけど、とりあえずドメインとIPアドレスを紐づけろってことなんだね。
さっそくやってみよーっと！
あれ？hostsファイルが見当たらないよ。。。（泣）
もうやめたい。
hostsファイルは階層が深いところにあるから、普段触らないところにあるんだ。
hostsファイルの探し方から解説するぜ！
hostsファイルの場所
Windowsの場合
Windowsの場合、hostsファイルは以下にあります。
C:\Windows\System32\drivers\etc\hosts
▼見つからない場合はこちらの記事も参考にしてください。
hostsファイルはわりと深い階層にあり、アクセスするのが面倒なので、デスクトップにhostsのショートカットをおくのがおすすめです。
▼hostsショートカットの作成方法▼
Macの場合
Macの場合は以下にあります。
/private/etc/hosts
ファインダーを選択 → メニューバーの「移動」 → 「フォルダを移動」 → 「/private/etc」を選択して「移動」 → hostsファイルを探す
Macの場合は上記の流れでhostsファイルを見つけられます♪
また、ファインダーを選択した状態で「Cmd + Shift + G」のショートカットキーを使えば、すぐにフォルダを移動可能なので、試してみてくださいね！
▼以下記事もご参考になるかと思います。
⇒【macOS】hostsファイルの場所と編集方法、書き換え方法
hostsファイル発見！
こんなところに隠れてやがったか。
意外と大切なファイルだからね。
コピーして別の名前（hosts2など）をつけて、バックアップを取っておくのをおすすめするぜ！
オッケー！編集編集…。
よしできた！
あれ？hostsファイルが保存できないよ？
hostsファイル編集時の注意点
Windowsのhostsファイル変更方法
windowsの場合、hostsファイルは管理者権限を使って開かないと、保存することができません。
そのため、メモ帳を管理者権限で開きます！
| Windowsボタン → Windowsアクセサリ → メモ帳を右クリック → その他 → 管理者として実行 |
上記の流れで簡単に実行可能なので、hostsファイルを編集するときはこの流れを覚えておくと良いでしょう♪
またウイルスソフトによっては、セキュリティの観点から、hostsファイルの保存を禁止させるものもあります。
例えば、Aviraというウイルス対策ソフトだと、設定画面で「Windows hostsファイルの書き込みを防ぐ」のチェックボックスを外しておかないといけません。
hostsファイルが開けたら、『hostsの設定方法』に進みましょう▼
Macのhostsファイル編集方法
Macの場合はhostsファイルの編集方法が3つありますが、Mac標準搭載のツール「ターミナル」を使ったやり方が1番簡単かと思います。
はじめのうちは戸惑いますが、ターミナルを使えるようにすると便利なことが多いので、ぜひトライしておきましょう！
※ターミナルとは、「コマンド」と呼ばれる命令文を使って、自分のパソコンの設定などを変更するために使うツールです。
ターミナルでhostsファイルを開こう！
Finder→アプリケーション→ユーティリティの中にターミナルがあります。
ターミナルを開いたら、以下を入力してenterを押しましょう。
sudo vi /private/etc/hosts
パスワードの入力を求められるので、Macのパスワードを入力してください。
これでターミナル内にhostsファイルが表示されました。（以下のような画面が表示されればOKです）
「i」を叩いて編集できるようにしよう！
キーボードで「i」を叩く（押す）と「INSERT」という表示が下にでます。
この状態が編集できる状態です。
何を書くかについては後で詳しく解説するので、今は試しに「127.0.0.1 anshinweb.localhost」と記述しましょう。
「control + C」でインサートモードを終了しよう！
「127.0.0.1 anshinweb.localhost」と記述したら、「control + C」を叩きます。
こうすることで、編集モード（インサートモード）が終了されます。
「:wq」で保存しよう！
最後に、「:wq」というキーを叩けばhostsファイルは保存されます♪
「:（半角コロン）」wqです。
これでhostsファイルを編集・保存できました。
うぅ…気持ち悪くなってきた…。
ターミナルじゃなきゃダメ？
確かに最初は拒否反応でるよね（笑）
1番簡単なのはターミナルだと思うんだけど、他の方法でも編集できるから、ターミナルが嫌な人は以下サイトを参考にしてみてね♪
普通に保存はできない仕様だったのね。
さっそくhostsファイルの書き方を教えてちょ！
hostsの設定方法
hostsファイルの設定方法は、「IPアドレス（127.0.0.1）」を記述し、その横に「ドメイン名」を記載するだけです。
例えば、
127.0.0.1 yahoo.jp
と追記して保存すると、yahoo.jpにアクセスした時に、あなたのローカルパソコン（127.0.0.1）にアクセスされるようになります。
「127.0.0.1」と「yahoo.jp」の間には半角スペースが必要なことに注意しましょう。
追加する際の例を挙げます。
anshinweb.localhostというURLを追加する場合は、
127.0.0.1 yahoo.jp
127.0.0.1 anshinweb.localhostという形で下に追記していきます。
127.0.0.1 yahoo.jpを残したままにすると、yahoo.jpにアクセスできなくなるので、消しておきましょう。
以下画像のようになっていればOKですよ。
文頭の#（シャープ）はコメントアウトです。
メモを残したい時に使うと良いでしょう。
anshinweb.localhostは、任意のURLで大丈夫です♪
ローカルで表示するためのドメインと認識しやすいよう、「サイト名」+「.localhost」と記載するのがおすすめです。
これでブラウザに「anshinweb.localhost」って記述したら、自分のパソコン（127.0.0.1）にアクセスしてくれるようになるぜ♪
これだけでいいんだ…思ったより簡単だ。
ところでさ、127.0.0.1ってIPアドレスでしょ？
他の人と同じものを複数回使ってもいいの？
127.0.0.1はIPアドレスのことなんだけど、「ループバックアドレス」ってもののひとつなんだ。
簡単にいうと「127.0.0.1を指定したら、自分のパソコンを見に行く」っていうルールが組み込まれてる。
例えば、僕のPCで127.0.0.1をブラウザに打ち込んだら僕のPCが指定されるけど、キャバコのPCで127.0.0.1をブラウザに打ち込んだらキャバコのPCが指定されるって感じだ。
だから他の人と同じでも、絶対にかぶらないから問題ないぜ。
じゃあ、「127.0.0.1 = 自分のPCにアクセスするための番号」って覚えておけばいいのかな？
そうね、その覚え方で問題ないぜ！
なんとなく理解した！
次は「vhosts」だっけ？
V系のホストがたくさんいる地獄のことかな？
詳しく教えてよ！
vhostsの設定をしよう！
vhostsは「virtual host（バーチャルホスト）」というもので、「ふたつ以上のWEBサイトを扱う運用方法」のことです。
最初から意味を理解する必要はありませんが、1つのIPアドレスで複数のサイトを運用する場合はvhostsの設定が必要だと覚えておきましょう！
これからいくつもローカルでサイトを作ると思いますが、新規サイトを立ち上げるたびにvhostsの設定が必要となります。
vhostsについてもう少し教えて。
積極的なんだから♡
hostsを設定することで、「IPアドレスとドメインの紐付け」までが完了したよね？
けど実はさ、hostsファイルを設定しただけだと「anshinweb.localhostが自分のPCのIPアドレス（127.0.0.1）と紐づいた」だけで、anshinweb.localhostにアクセスした時に”どのフォルダにあるファイルを表示すればいいのか”は、設定されていない状態なんだ。
だから、「anshinweb.localhostにアクセスした時は、ここのフォルダにあるファイルを表示して！」っていう設定をしないといけないんだよね。
ふんふん、フォルダの指定が必要なのね！
どのファイルをイジイジすればいいの？
「httpd.conf」を編集して「httpd-vhosts.conf」を使えるようにしてから、Apacheの設定ファイル「httpd-vhosts.conf」をイジイジしていこう！
難しく感じるかもしれないけど、コピペして一部を変えていくだけで設定できるから、安心してくれ♪
httpd.confはどこにあるの？
httpd-vhosts.confは、XAMPPフォルダの以下にあります。
【Windowsの場合】
C:\xampp\apache\conf\httpd.conf
【Macの場合】
/Application/XAMPP/etc/httpd.confhttpd.confの編集場所
Windowsの場合はCtrl + F、Macの場合はcommand + Fで下記のコードを探してみましょう。
#でコメントアウトされているので、先頭の#を削除します。
これでhttpd-vhosts.confでの設定が適用されます。
削除が完了したら保存して、httpd-vhosts.confを編集していきましょう。
【Windowsの場合】
#Include conf/extra/httpd-vhosts.conf
↓
Include conf/extra/httpd-vhosts.conf
【Macの場合】
#Include etc/extra/httpd-vhosts.conf
↓
Include etc/extra/httpd-vhosts.confhttpd-vhosts.confはどこにあるの？
httpd-vhosts.confは、XAMPPフォルダの以下にあります。
【Windowsの場合】
C:\xampp\apache\conf\extra\httpd-vhosts.conf
【Macの場合】
/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf
vhostsの記述方法
以下をコピーした上で、httpd-vhosts.confに追記します。
意味もひとつずつ見ていきましょう！
# 安心ウェブ
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/anshin/
DirectoryIndex index.php index.html
ServerName anshinweb.localhost
<Directory "C:/xampp/htdocs/anshin">
order deny,allow
allow from ALL
</Directory>
</VirtualHost>※スペースを全角で入力しないようご注意ください。
#はコメントアウト
# の後ろはコメントアウト（メモ）として使えるので、任意の文字を書いてOKです（どのサイトのvhosts設定かわかるようにするのが吉）。
DocumentRootはアクセス時に表示されるフォルダ
DocumentRoot（ドキュメントルート）というのが、anshinweb.localhostにアクセスした時に表示されるフォルダです。
上記でhttpd-vhosts.confを保存すると、anshinweb.localhost/test.htmlにアクセスした際に、C:/xampp/htdocs/anshin/test.htmlが表示されます。
ドキュメントルートはよく出てくるワードなので、ぜひ覚えておきたいですね！
DirectoryIndexは指定フォルダの中のどのファイルを表示させるかを決める
DirectoryIndexというのは、http://anshinweb.localhost/にアクセスした時に表示させるファイルです。
index.php index.htmlという書き方が一般的ですので、これは上記のままで良いでしょう。
この指定により、DocumentRootで指定したフォルダのindex.phpかindex.htmlを最初に表示するよう指定しています。
ServerNameはhostsで発行したドメイン名と紐付ける
ServerNameは、紐づけるドメインです。
あなたがhostsで設定したドメインを入力してください。
Directoryはフォルダのアクセス権限を指定している
Directoryの後ろのフォルダも、DocumentRootと同様に設定しましょう。
order deny,allowなどはアクセス権限などを指定しているだけなので、そのままの記述でOKです。
うわぁ〜やる気失くす〜。
確かに意味わかんないよね〜（笑）
ポイントは、「DocumentRoot」と「ServerName」と「Directory」を変えれば、あとはコピペでOKってところだ！
3つだけね。
これ以上は無理よ。。。
新しく「webgui」ってサイトをローカルで作るなら、vhostsは以下のようになるよ！
# 安心ウェブ
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/anshin/
DirectoryIndex index.php index.html
ServerName anshinweb.localhost
<Directory "C:/xampp/htdocs/anshin">
order deny,allow
allow from ALL
</Directory>
</VirtualHost>
# webgui.localhost
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/webgui/ ←変更箇所
DirectoryIndex index.php index.html
ServerName webgui.localhost ←変更箇所
<Directory "C:/xampp/htdocs/webgui"> ←変更箇所
order deny,allow
allow from ALL
</Directory>
</VirtualHost>ホントだ！
変更してるのは3箇所だけだね♪
これならキャバコでもできそう！
基本は前回のものをコピペして3箇所変えるだけでOKだよ。
新しくローカルにwebサイトを作るたびにvhostsの追記が必要だから、忘れないようにしようぜ！
ローカルでもhttps（SSL）に対応させる場合の設定方法
ローカルでもhttps（SSL）でアクセスしたい場合は追加で設定が必要です。
【ローカルでhttpsアクセスするための設定手順】
- PHPでOpenSSLを有効にする
- httpd-vhosts.confに追記
なんか難しそう…。
絶対に設定しなきゃダメ？
絶対必要ということではないぜ！
だから飛ばしてもらっても構わない。
「できるだけ本番環境に近い状態で開発したい」って人は設定しておこう！
※SSL化でエラーが出る可能性が高いので基本は設定しないでOKです！
PHPでOpenSSLを有効にしよう！（php.iniファイルを使います）
xampp\phpの下にある「php.ini」というファイルをエディターで開きましょう。
そして、下記の行がコメントアウトされていないことを確認してください。
文頭の「;（セミコロン）」がついていなければOKです。
// セミコロン付いてるとだめ
;extension=php_openssl.dll
// ↓以下のようにしましょう！
// セミコロン付いてなければOK
extension=php_openssl.dll通常は有効になっているので、ほとんどの人は触らなくて良いかと思います。
httpd-vhosts.confファイルに追記
xampp\apache\conf\extraと進んで、その下の「httpd-vhosts.conf」ファイルを開きます。
ファイルの最後に以下を追記しましょう！
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/anshin/
DirectoryIndex index.php index.html
ServerName anshinweb.localhost
<Directory "C:/xampp/htdocs/anshin">
order deny,allow
allow from ALL
</Directory>
</VirtualHost>
# ここから追加
<VirtualHost *:443>
SSLEngine on
SSLCertificateFile conf/ssl.crt/server.crt
SSLCertificateKeyFile conf/ssl.key/server.key
DocumentRoot C:/xampp/htdocs/anshin/
DirectoryIndex index.php index.html
ServerName anshinweb.localhost
<Directory "C:/xampp/htdocs/anshin">
order deny,allow
allow from ALL
</Directory>
</VirtualHost>
# ここまで追加これで「https://〇〇.localhost」でもアクセス可能となります。
※ただし、最初は「この接続ではプライバシーが保護されません」といったエラー表記が出ます（詳しくは後述します）。
vhostsの設定後はApacheの再起動が必須
vhostsの設定は新規サイトを追加するたびにおこないますが、httpd-vhosts.confを保存しただけでは反映されません。
httpd-vhosts.confに修正を加えたら、必ずApacheの再起動をするようにしましょう！
Apacheの再起動方法
Apacheの再起動は、コントロールパネルの「Apache」の「Stop」をクリックし、少し待って「Start」に切り替わるので、再度「Start」をクリックするだけで完了です（XAMPPを毎回閉じる必要はありません）。
これで、httpd-vhosts.confに追記した設定が反映されます。
スタートした時にエラーが出てapacheが起動しなかった場合は、httpd-vhosts.confに何らかの記載ミスがありますので、見直しましょう。
うまく動けば、完了です！
新規サイトを作成してvhosts設定までしたのにブラウザで表示ができない場合は、Apacheの再起動を忘れている場合がかなり多いぜ！
httpd-vhosts.confに限らずXAMPPのファイルをいじったら、再起動するという癖をつけよう！
実際にブラウザでPHPファイルを表示させてみよう！
これまでの作業で、PHPファイルをブラウザで表示する準備が整いました。
試しに、あなたがhttpd-vhosts.confで設定したフォルダにPHPファイルを配置していきましょう！
以下のコードを書いたindex.phpを作成してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XAMPPのインストールデモ</title>
</head>
<body style="background: orange; color: white;">
<?php
echo 'XAMPPのインストールからブラウザでの表示までできたぜ！';
?>
</body>
</html>上記ファイルを、htdocs内に作ったフォルダに配置します。
本記事の例の通りに作っている場合は、htdocs/anshinフォルダですね！
そして、http://anshinweb.localhost/にアクセスします。
※ブラウザによっては、localhostの後ろのスラッシュ（/）まで入れないと表示されないことがあるので、注意が必要です。
HTTPSの場合は、設定が正しくても以下のような画面が出ます。
（ブラウザによって多少画面に違いがあります）
この場合は「site01 にアクセスする（安全ではありません）」をクリックすればOKです！
ブラウザで以下の画像のように文字を表示できたら完成となります！
ちゃんと表示されましたか？
うまく表示されない場合は、もう一度このページを見返してみましょう！
ここまでできれば、あとはあなたのやりたい放題です。
PHPファイルの他、HTMLやCSS、画像ファイルなんかも配置できるようになります！
ふおぉぉ…!!!
無事に表示できたよ！
素晴らしすぎるぜ！
これで環境設定は完了だから、あとはコーディングやプログラミングを存分に学んでもらえればOKだ！
正直、hostsとvhostsの設定はやってれば勝手に覚えるから、何度もこのページを見返してもらえば問題ないぜ。
phpMyAdminの開き方
最後に、データベースに触れるために「phpMyAdmin」の開き方について学習しましょう！
PHPでWEBサービスを作成していると「データベース」に触れる機会が増えてきますし、WordPressサイト作成にいたっては必ず必要だからです。
データベースを操作するには「phpMyAdmin」というツールを使います。
コントロールパネルからphpMyAdminを開こう！
XAMPPのphpMyAdminは、コントロールパネルから開くことができます。
MySQLの右にある「Admin」をクリックするだけです。
以下のような画面に移れば、phpMyAdminの表示が完了です♪
phpMyAdminでデータベースをいじるってことでOK？
その通り！
データベースって、コマンドでSQL文という言語を使わなきゃ操作できなかったんだけど、phpMyAdminが登場してからは直感的に操作できるようになったんだ♪
これからローカル開発でデータベースを触るってなったら、phpMyAdminを開くことになるから、開き方だけでも覚えておこう♪
【SQLについて学ぶならこちら】
⇒SQLの勉強！基礎をガバガバに習得しよう
これでMAMPをダウンロード、インストール、初期設定の全てが完了だよ！
あとはPHPでWEBサイトやサービスを作りまくってくれ♪
あぁ〜〜疲れた。。。
２度と環境設定はしたくない…。
お疲れ様！
基本的には環境構築は最初だけだから安心してくれ♪
PHPのバージョンを変えたいときとか、入れ直す可能性もあるけど、2回目はすんなりできるはずだ。