PHPやデータサーバー使ったHPやWEBアプリを、ローカルでデザインや動作確認ができるMAMPさん(通称ぞうさん)をダウンロード&インストールしていく。
つまり、MAMPを使うことでローカルサーバー(http://localhost)が使えるようになるので、ネットにいきなりデータをUPすることなく、ローカル上でデザイン表示や動作確認ができるようになる、らしい!
(macoは開発初心者なので、研修で指示されるがままローカルサーバーを構築。先生の言う通りにしておけば間違いない!)
※MAMPを入れていないなら、ローカルサーバー(http://localhost)をたたいても

上記のようなサーバーエラーページしか表示されないはず。
これがMAMP実装すると、自分の作ったあれこれが見れるようになる。
では、さっそくMAMPをインストールしていく。
MAMP公式ページからインストーラーをダウンロード
>> MAMP公式サイト

MAMPはPro版(有料)と無料版がある。
個人でちょろっとPHPがやりたいくらいなら無料で十分。

必ず「mac」か「ウィンドウズ」のどっちをインストールしたいのか、確認してインストーラーをダウンロード。
地味にデータ重くて、ダウンロードに時間がかかる。
さすが、ぞうさん重量級。
MAMPをインストール
インストーラーのダウンロードが終わったら、インストールスタート。
下の「next」をクリック

有料版である「MAMP PRO」と「Install app Bonjour(used for MAMP viewer)」のチェックを必ず外す!
はじめからチェックが入っているので、ここでチェック外しておかないと有料版になってしまうので要注意!


ほとんどの人はCドラにインストールするんだろうけど、自分はDドラ(外部SSD)を選択。
Cドラは少しでも開けておきたい民である。

「MAMP」のままで、下部の「Next」をクリック

デスクトップにMAMPアイコンを置くかどうか選んで、「Next」をクリック

MAMPをインストールする場所やフォルダを確認し、下部の「Install」をクリック。
これでMAMPのインストールが開始される。

1、2分くらいでMAMPインストール完了。
インストーラーのダウンロードよりはるかに早く終わった。

これで、とりあえずMAMPをPCにインストールは完了した。
しかし、実際にMAMPを起動して、初期設定を確認・設定し、さらに本当にローカルサーバーが見れる状態になっているのか?までがMAMPである。
MAMPを起動・初期設定し、動作確認する

ぞうさんアイコン可愛い

起動するとMAMPのウィンドウが表示される。
※Cドラにインストールした人は、「パソコンに影響のある~なんとかかんとかを起動しますか?」みたいな注意文言が表示されるらしいが、OKで。
自分はPCを少しでも軽くしたいからMAMPはDドラにインストールした。
なので、そんな注意文言は表示されず、スムーズにこの画面がでてきた。
上部メニューにあるMAMP→設定(PREFERENCE)とクリック


ポートが上から80、80、3306になっていればOK。
インストール直後は稀に違う数字が入っているときがあるらしい。
そういう人は、80、80、3306にしてOKをクリック。

ローカルサーバー(http://localhost)をブラウザで見ると、上記のようなページが表示されていれば、MAMPがきちんと動いているのでOK!
もし表示されないときは、一度MAMPのTOP画面で、右側の電源アイコンがグレーになって「Start Servers」になっていないか確認。
グレーだったら電源アイコンをクリックして、アイコンがグリーンの「Stop Servers」にする。
そして、もう一度ローカルサーバー(http://localhost)を更新してみてみる。
※とりあえず、MAMP設定してもローカルサーバーがエラーで見えないときはときは、何度か電源アイコンをStart ・Stop繰り返してみたり、PCを再起動してみたりすると、だいたい表示されるようになるってー。
知らないけど。
MAMPの電源アイコンをStart ・Stop繰り返してみたり、PCを再起動してもローカルサーバー(http://localhost)がきちんと表示されないとき………。
原因は知らない。
でも、地味にいるらしい。
パソコンのせいなのか、うまくインストールできなかったからなのか、よくわからないが。
そんなときは、ヘッダーメニューから、MAMP→設定(PREFERENCE)→Portsを開いて、Apach Portを8000に修正。
そしてOKする。

それからMAMP起動ウィンドウの「Start Servers」を2回クリックし、ローカルサーバーを再起動。
ローカルサーバーパスにポートナンバーを追加したパスにしてみる。
http://localhost:8000
すると、結構な確率でローカルサーバーが見えるようになるらしい。
なんでか分からないけど、ちゃんと表示されるならいい。
(研修の先生曰く、初めてローカルサーバー設定したはずなのに、すでにPC内の何かがポート80使ってんだろうな、とかなんとか。)
実際にhtml/cssの簡単ページをMAMPを使ってローカルサーバーを使ってみる
MAMPをインストールして、ローカルサーバーも見れるようになったものの、どこにファイルやデータを入れたらいいのか分からない。
そう、それが初心者!
なので、どこにデータを入れてたらいいのかも備忘録しておく。
インストールしたMAMP大元のフォルダの中にある「htdocs」フォルダを開く。
自分はDドライブ(外部SSD)にMAMPをインストールしたので、Dドラ>MAMP>htdocsというファイルパスになる。
「htdocs」の中は、MAMPインストール直後のPHPファイルと画像が入っている。
(http://localhostで表示されているデータ)
せっかくだからこの2つのデータをテストで使う。

※今後、何かの開発などでローカルサーバーを使うときは、この「htdocs」の中にデータを入れてデザインや動作チェックをしていくことになる。
テキストでもXcodeでもなんでもいいので、「index.php」を開く。
(自分はVSコード使ってる)
中身を開いたらいっぱい色々書かれているが、全部消して、下記のコードをコピペして上書き保存。
シンプルhtml/css。
<html>
<head>
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” href=”stylesheet.css” />
<title>PHPサンプルページ</title>
</head>
<body>
<img src=”MAMP-PRO-Logo.png” alt=”画像”>
<p>HTMLで記述部分</p>
<!– ここより下がPHPの処理対象 –>
<?php echo ‘PHPで記述部分’; ?>
<!– ここより上がPHPの処理対象 –>
</body>
</html>
(普通にブラウザで見るときとMAMPで見るときの違いを確認するために見てみる)
chromeでもファイアフォックスでもedgeでもなんでもいいので、index.phpをブラウザで見てみる。
当然コードが丸見えでちゃんと表示されていない。

MAMPアプリを起動して、右側の電源ボタン(Start Servers)をクリック。
サーバーオンにする。

複数開発をしながらローカルサーバーを使うとき
一個上ではhtdocsフォルダの中に、直置きでphpファイルや画像を置いたけれど、開発や制作サイトごとにフォルダ分けなどして、ファイルがごちゃごちゃにならないように気を付ける。
自分一個しか使わないからー!っていうなら全然直置きでもいいけど……。

こんな感じに ↑
ローカルサーバーを見るときのパスは、各フォルダごとに
http://localhost/test/
みたいにフォルダの名前を後ろにくっつければOK。
MAMPのおかげで簡単になったローカルサーバー設置。
一昔前は、ローカルサーバーを構築するためにXAMPPをインストールしたり、ターミナルでPHPインストールされているか調べたり。
基本的にローカルサーバーを使うときはターミナルでコマンド使っていたらしい。
そんな面倒だった作業が、ぞうさん(MAMP)で簡単にローカルサーバー実装でき、かつWEBアプリなどをできるようになった。
すばらしい。
できる限りターミナルを使いたくないmacoにぴったりだ。
どれを見たいか、確認したいかも、ファイルをMAMPのhtdocsにぽいって入れるだけだし、簡単で助かる。
