Mac用のXAMPPをインストール。ローカル開発環境の準備と簡単な使い方
![Mac用のXAMPPをインストール。ローカル開発環境の準備と簡単な使い方](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-main.png)
サーバサイドスクリプトのPHPやMySQLを使ったWeb開発をする場合、レンタルサーバを借りて開発していかなくてはならなく、開発の段階で費用がかかってしまいますのでPC内に開発環境を準備するととても便利です。
PHPやMySQLで構築するWebサービスや管理システム等、あとはよくWebサイトで使われているWordPressなんかもローカルで開発するときに必要になります。
Macで手軽にローカルで開発環境を構築する場合は、MAMP(マンプ)をインストールして構築することが多いです。
また、Windows用に提供されているXAMPP(ザンプ)もMacに対応したのでこちらもインストールして利用することができます。
MAMPやXAMPPをインストールすることで、PC内にWebサーバのApacheからMySQL、PHPといった環境を簡単に構築してくれます。
Macユーザーは前からMac用に提供されているMAMPで開発環境を構築することが多いのですが、いろんな事情があってMacにXAMPPをインストールして開発環境を構築することがありましたので、ここで導入方法を簡単な使い方をご説明します。
XAMPPの導入
オフィシャルサイトからOS X向けのXAMPPをダウンロードしてきます。
XAMPP
https://www.apachefriends.org/jp/index.html
今回はXAMPP-VMで開発環境を構築していく流れで説明します。
VM(virtual machine:仮想マシン)というのは、通常のXAMPPはホストのMacに開発環境を構築するのですが、XAMPP-VMはゲストのLinuxに仮想環境として開発環境を構築します。
ですので、ホストのMacの環境がごちゃごちゃしなくてすみます。
通常のXAMPPはダウンロードページへ進めば、OS X向けの項目からダウンロードできます。
ここでは、仮想環境で構築する方法で説明していきます。
ページ上部のナビゲーションから「ダウンロード」を選択します。
![Mac用のXAMPPをダウンロード](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-01-1.png)
ダウンロードページに進むと、拡張子が.bz2の圧縮ファイルが自動的にダウンロードされることもあります。
bz2は展開(解凍)しても、アプリケーションが展開されないようですので、ダウンロードページ内で利用したいバージョンのXAMPPをダウンロードします。
OS X向けXAMPPの項目に、PHPのバーションごとで用意されています。
163Mbとなっているサイズが軽い方が通常のXAMPPで、356Mbのサイズが大きい方がVM(仮想マシン)となります。
ただ、こちらのダウンロードボタンでも、bz2ファイルがダウンロードされますので、ソースコードリポジトリからダウンロードしてきます。
「その他のダウンロード」を選択します。
![その他のXAMPPをダウンロード](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-01-2.png)
SourceForgeという、オープンソースを管理しているサイトにアクセスします。
こちらで、「XAMPP Mac OS X」を選択します。
![XAMPP Mac OS Xを選択](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-01-3.png)
次に、利用したいPHPのバージョンを選択します。
サンプルでは、2021年4月頃に安定版として推奨されている「PHP7.4.16」を選びます。
さらに進みまして、「xampp-osx-7.4.16-0-vm.dmg」を選択してダウンロードします。
![SourceForgeからMac用のXAMPPをダウンロード](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-01-4.png)
dmgファイルがダウンロードできましたら、展開(解凍)してXAMPPをアプリケーションフォルダへ移動させます。
![MacにXAMPPの導入02](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-02.png)
XAMPPのアプリケーションをダブルクリックして開きます。
ですが、おそらく「XAMPPの開発元を確認できないため、開けません。」というメッセージが出て、セキュリティの関係で開くことができないでしょう。
Appleに登録されていないアプリケーションを開こうとすると警告がでます。
![MacにXAMPPの導入03](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-03.png)
ただAppleに登録されていないだけで危険ではないので、セキュリティ設定を無効化して開きます。
Macの画面のリンゴマークをクリックし、環境設定に進み「セキュリティとプライバシー」を選択します。
![MacにXAMPPの導入04](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-04.png)
「一般」のタブのダウンロードしたアプリケーションの実行許可の項目がありますので、「このまま開く」をクリックすればXAMPPを開くことができます。
![MacにXAMPPの導入05](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-05.png)
インストールして立ち上げたらXAMPPのコントロールパネルが立ち上がります。
これでインストールの完了です。
続いて簡単な使い方をご説明します。
XAMPPの簡単な使い方
XAMPPを立ち上げるとコントロールパネルが表示されます。
コントロールパネルではXAMPPそしてApacheやMySQL等を起動させたりネットワークの設定などをおこないます。
「General」のタブではXAMPPを起動する「Start」や「Stop」といったボタンがあり、起動させるとStatusが緑になり「192.168.xx.x」のようにIP Addressが表示されます。
その下の「Go to Application」ボタンでXAMPPのダッシュボードのWebページが開きます。
![XAMPPの簡単な使い方01](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-06.png)
「Seervices」のタブではソフトウェアの起動ができます。
起動はソフトウェアを選択してStartをクリックするだけです。
XAMPPを起動させると少し時間がかかりますが自動で起動するかと思います。
必要のないものはStopをクリックして停止しておいても良いでしょう。
ProFTPDはホストのMacとFTPクライアントで接続するために必要なソフトウェアですが、そんなに使うことはありません。
![XAMPPの簡単な使い方02](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-07.png)
「Restart」ボタンは再起動となります。
下には「Start All」「Stop All」「Restart All」と全部いっぺんにコントロールすることも可能です。
「Network」のタブではSSHポートフォワーディングの設定ができます。
SSHポートフォワーディングとは、通信は暗号化されたSSH特定のポートに送られてきたデータを特定ポートに送信する事です。
XAMPPのドキュメントルートのアクセスはIPアドレスの192.168.xx.x(http://192.168.xx.x/)で表示することができますが、MySQLを利用する際にphpMyAdminにアクセスするとlocalhostでないと許可されません。
URLがIPアドレスのままだとエラーとなり「アクセス禁止!」と画面に表示されます。
そこでポートの設定をしてlocalhostでアクセスできるようにします。
「localhost:8080 -> 80(Over SSH)」をEnableをクリックして有効にします。
![XAMPPの簡単な使い方03](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-08.png)
80はHTTP通信、443はHTTPS通信で使われるポートです。
「Volumes」のタブでは、仮想マシンの操作をできるようにします。
本来、XAMPPはホストのMacに入れるとXAMPPのフォルダが表示されてディレクトリが操作できるのですが、今回のはVM(仮想マシン)で開発環境を構築するので外部のものはフォルダが表示されずディレクトリが操作できません。
「Mount」をクリックするとローカルのボリュームがマウントされて、仮想マシンのディレクトリを操作することができるようになります。
![XAMPPの簡単な使い方04](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-09.png)
Mountをクリックしたら仮想マシンのディレクトリを操作できるようになり、「Explore」をクリックするとXAMPPのディレクトリを開いてくれます。
![XAMPPの簡単な使い方05](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-10.png)
lamppの「htdocs」がXAMPPのドキュメントルートになります。
開発はこのhtdocsの中にファイルを置いていきます。
マウントするとフォルダの左ナビにも仮想マシンが表示されます。
それでは実際に表示させてみましょう。
例として、htdocsにprojectという名前のフォルダを作成してその中に「Hello World!」と表示させるsample.phpを置いて確認してみます。
![XAMPPの簡単な使い方06](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-11.png)
Webブラウザで「localhost:8080/project/sample.php」と打てばHello World!と表示させることができます。
URLはVolumesのSSHポートフォワーディング設定でlocalhostのポート番号8080と設定したので「localhost:8080」となります。
![XAMPPの簡単な使い方07](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-12.png)
このような感じでサーバサイドスクリプトのPHPやMySQLを使ったWeb開発をすることができます。
一応、XAMPPを立ち上げていると画面の上部のバーにXAMPPのアイコンが表示されて、そこからApacheやMySQLなどの起動や停止が可能です。
![XAMPPの簡単な使い方08](https://blanche-toile.com/freestyle/wp-content/uploads/2018/09/mac-xampp-13.png)
コントロールパネルで場所を取られるのが嫌な方は、上部のバーから手軽に操作すると良いでしょう。
まとめ
冒頭でもお話ししましたが、Macでは一般的にMAMPを利用するほうが多いです。
こちらのMAMPもMAMP for WindowsというWindows用も出したみたいですが。
MAMPでの開発環境の構築はこちらでご紹介しています。
それでは良い開発生活を。