Help us understand the problem. What is going on with this article?

Macにxamppをインストール

More than 1 year has passed since last update.

はじめに

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

環境

macOS Mojave (10.14.4)
Google Chrome
Safari
VSCode

ダウンロード

こちらのサイトからダウンロードできます。Windowsではここからダウンロードしてください。MacではVM版がダウンロードされるようなので、上のほうにある、「ダウンロード」と書いてあるリンクをクリックしてください。ダウンロード
01

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

もしvm版がない場合は、「その他のダウンロード」と言うリンクをクリックしてください。
02

sourceforgeのサイトに飛んだら、「XAMPP Mac OS X」、「7.3.4」、「xampp-osx-7.3.4-0-installer.dmg」の順にクリックします。今回は最新の「7.3.4」バージョンを使いましたが、実際にダウンロードするときには適切なバージョンを選択してください。通常は最新版で良いと思います。
03

自動的にダウンロードが始まりますので、お待ちください。
04

インストール

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

開いたウインドウのXAMPPアイコンをダブルクリックします。
05

「開く」をクリックします。
06

パスワードを入力します。
07

インストールダイアログです。Windowsとあまり変わりませんでした。
08

ブラウザが開きますが、閉じても問題ありません。
09

「Next」をクリックするとインストールが始まります。しばらくお待ちください。
10
11
12

インストールが完了しました。「Finish」をクリックして終了します。
13

LaunchPadの「XAMPP(その他)」というフォルダに「manager-osx」というアプリを開くと起動できます。
14

パスワードの入力は毎回必要なようです。
15

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

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

sample.html
<!DOCTYPE html>
<html>

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

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

</html>

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

他の端末からアクセスする

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

「システム環境設定」の「ネットワーク」を開きます。
ここでは、IPアドレスが「192.168.43.219」に設定されています。これを、同じWi-Fiのネットワークに接続したスマートフォンなどのブラウザに入力してください。
17
文字がすこし小さいですが、表示できました。XcodeのSimulatorでも同じ方法で見れました。
18
19
20

参考

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

hinataysi29734
記事の引用やリンクは、常識の範囲内でしたらご自由にどうぞ。 // MacBook Proを買ったのに、Windows10 + 4Kモニター + HHKB + Microsoftマウスばかり使っていて、MacBookの意味がないwww
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away