Macにxamppをインストール

# はじめに
phpもデータベースもwordpressも使えるxamppはいいぞ、と激推しされたのでインストールしようとしたのですが、Macではなんかうまくいかず、ちょっとハマったのでメモ。Macでxamppを使うときには、vm版を避けるようにするとよさそうです。

# 環境
macOS Mojave (10.14.4)
Google Chrome
Safari
VSCode

# ダウンロード
[こちらのサイト](https://www.apachefriends.org/jp/index.html)からダウンロードできます。Windowsではここからダウンロードしてください。MacではVM版がダウンロードされるようなので、上のほうにある、「ダウンロード」と書いてあるリンクをクリックしてください。[ダウンロード](https://www.apachefriends.org/jp/download.html)
![01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/ddfd6700-48e7-ce32-836c-4499ba8ec114.png)

少し下にスクロールすると、「OS X 向け XAMPP」というブロックがあります。
ここでは、上の3つがインストール版、下の3つがVM版となっているようです。リンクにマウスカーソルを合わせると、ブラウザ画面の左下にアドレスが表示されるので、最後がinstaller.dmgのようになっているか確認してください。

もしvm版がない場合は、「その他のダウンロード」と言うリンクをクリックしてください。
![02](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/881a4bed-f120-a091-ed44-7a980a47b9d6.png)

[sourceforgeのサイト](https://sourceforge.net/projects/xampp/files/)に飛んだら、「XAMPP Mac OS X」、「7.3.4」、「xampp-osx-7.3.4-0-installer.dmg」の順にクリックします。今回は最新の「7.3.4」バージョンを使いましたが、実際にダウンロードするときには適切なバージョンを選択してください。通常は最新版で良いと思います。
![03](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/de6e8664-0308-2ff9-279c-c54834373ade.png)

自動的にダウンロードが始まりますので、お待ちください。
![04](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/8b3a5ee6-49ff-c326-63ed-f3fca0a079fa.png)

# インストール
ファイル名「xampp-osx-7.3.4-0-installer.dmg」がダウンロードできました。finder上でダブルクリックして開きます。

開いたウインドウのXAMPPアイコンをダブルクリックします。
![05](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/6d2fe517-3adc-f212-69e0-68e2f60d1fa2.png)

「開く」をクリックします。
![06](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/8065455e-3e16-edb8-f678-5e63bc42d121.png)

パスワードを入力します。
![07](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/ba3813f6-77cd-bd67-3b3e-75dc4c4edf69.png)

インストールダイアログです。Windowsとあまり変わりませんでした。
![08](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/8494e7bb-3db2-b9a7-5819-6dff460014b3.png)

ブラウザが開きますが、閉じても問題ありません。
![09](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/9db6b9fd-770d-5c27-23b0-0be4cba51598.png)

「Next」をクリックするとインストールが始まります。しばらくお待ちください。
![10](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/914a556d-fa5c-8c99-9311-6432e2670f21.png)
![11](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/2a299dd0-e9c7-6e72-5e97-d7ac086621b3.png)
![12](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/7858a91b-febf-34d2-e609-862571dc06b4.png)

インストールが完了しました。「Finish」をクリックして終了します。
![13](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/710d280e-7ac4-3830-32df-e163b339fe50.png)

LaunchPadの「XAMPP（その他）」というフォルダに「manager-osx」というアプリを開くと起動できます。
![14](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/cbcdec0c-ef65-67fa-1ce8-5b914f0a08fb.png)

パスワードの入力は毎回必要なようです。
![15](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/443b375c-8986-3c4d-4275-43669643f05e.png)

webサーバーとして使うには、htmlファイルやphpファイル、jsファイルなどを
`/Applications/XAMPP/xamppfiles/htdocs`
フォルダに保存します。

試しに、以下のファイルを置いてみました。

```html:sample.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>

<body>
    <h1>Hello world!</h1>
    <p>hogehoge</p>
</body>

</html>

```

```php:sample.php
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>

<body>
    <h1>Hello world!</h1>
    <?php echo "php test"; ?>
</body>

</html>
```

localhostからアクセスできました。
![16](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/3ac8b4a5-1096-c91e-2cb7-9a49ad4a6154.png)

# 他の端末からアクセスする
スマートフォン用の画面を見るには、開発者ツールを使う方法もありますが、実機でないとよくわからないこともありますので、同じネットワーク内の端末からも見れるようにします。

「システム環境設定」の「ネットワーク」を開きます。
ここでは、IPアドレスが「192.168.43.219」に設定されています。これを、同じWi-Fiのネットワークに接続したスマートフォンなどのブラウザに入力してください。
![17](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/fdcfee45-892b-f5b2-9f1a-31278e38055f.png)
文字がすこし小さいですが、表示できました。XcodeのSimulatorでも同じ方法で見れました。
![18](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/3bfd6c1b-63fc-f6fd-6680-3f236f88979a.png)
![19](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/a87c9e7f-a82b-55d2-79a1-3e3a0ec48b19.png)
![20](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369431/e6c425f6-e118-b6fd-e182-24eb6b1b7e04.png)

# 参考
XAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/1722