MAMPを使ってローカル環境を作ってみる[基礎編]


非プログラマーなデザイナーの場合、サイトルートパスでコーディングしてくださいという指定があるとちょっと困る。
また、jQueryの動作確認でもローカルでは動かないメソッドもある。

1. 制作中は相対パスで書いて納品時にサイトルートパスに一気に置換
1. 確認毎にテストサーバーにデーター上げる

『1』は事故が起こりやすい。半角スペースが存在するなどして、一部が置換されない可能性あり。当然、事故が起こりやすいから良い方法とは言えない。
『2』に関しては本当に面倒だ。面倒くさい。

というわけで、[MAMP](https://www.mamp.info/)をインストールして一発解決。

先行で[XAMPP](https://www.apachefriends.org/jp/index.html)もありますが、大昔のMac OS版のXAMPPは、インストール後に黒い画面を用いてセキュリティホールを塞がねばならず、少々面倒でした（現在は違うっぽい）。

その点、[MAMP](https://www.mamp.info/)は非プログラマーなデザイナーにはとても使いやすい開発環境だと思います。
もちろんWindows版もあります。

# 環境
+ macOS Catalina(10.15.7)
+ MAMP 6.3(最新：2021/05/04現在)

# インストール
まずは[MAMP公式サイトからダウンロード](https://www.mamp.info/en/mac/)。
![MAMPトップページ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/595fcd9c-a895-e024-292c-87b473d80289.jpeg)

ダウンロードして指示に従えばインストールはおしまい。
MAMP PROも一緒にインストールされますが、とりあえずは無料版のMAMPで十分です。

# 設定をいじらずに使う
設定をいじると使い勝手は良くなりますが、そういう話は後ろに放り投げて使いたいんじゃ！という場合は、設定いじらなくてもOK。
右上の**Startボタン**をクリックして、さっさと起動してしまいましょう。
![MAMP スタートパネル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/3b729b54-fbb6-e184-50bb-d28d6ba94138.jpeg)
参照しているフォルダは**/Applications/MAMP/htdocs/**です。
とりあえず、ブラウザで[http://localhost:8888]()にアクセス。
![MAMP ファーストアクセス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/0bd5ee4e-9933-18f2-e78e-55a1f9efea17.jpeg)
index.phpが一緒にインストールされるため、何もせずに起動した時に表示されます。

> MAMPへようこそ
>
> このページが表示されている場合、MAMPは適切に構成および起動されており、Webコンテンツを提供するように設定されています。 このプレースホルダーpage1は、置き換えるか削除する必要があります。
> 
> サーバーソフトウェア：Apache / 2.4.46（Unix）OpenSSL / 1.0.2u PHP / 7.4.12 mod_wsgi / 3.5 Python / 2.7.13 mod_fastcgi / mod_fastcgi-SNAP-0910052141 mod_perl / 2.0.11 Perl / v5.30.1
サーバー名：localhost
ドキュメントルート：/ Applications / MAMP / htdocs
プロトコル：http
PHP：7.4.12

てなことが書いてあります。
海外製なので、もっと温度感の高いウェルカムメッセージを期待したいところですが、普通に実直な文章です。

はい。
これで準備完了です。

あとは**/Applications/MAMP/htdocs/**にファイルを入れて、がしがしコーディングしていきましょう。
こうすれば、最後に一括置換とか、修正するたびにテストサーバーに上げて確認とかの手間がなくなります。

制作に集中できますよね。

# 他のデバイスからページを見る
Windowsとかスマホブラウザなど、他のデバイスからページを確認したい場合があります。というか、仕事でコーディングしていたら必須。
でも、[http://localhost:8888]()ではアクセスできない。
なにせ**localhost**ですから。

そういう時はテストサーバーに上げるしかないの？と、がっかりしたアナタ。
せっかく開発環境を作ったのにもったいない。

同一ネットワーク上にある場合、下記の方法でアクセスできます。

## コンピューター名からアクセス
『システム環境設定』 > 『共有』を開きます。
![システム環境設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/78561e1c-7b81-b3a8-fbcd-41d103c69234.jpeg)
個人情報がっつりなのでモザイク処理。
マークされているところに情報が入っています。
![共有画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/01db7aee-8cf5-8574-b71c-0ac671129e1b.jpeg)
コンピューター名が『**四月一日太郎のiMac**』の場合、マーク部分には「**yongatsuichinichitarounoiMac.local**」と表示されます。
ということで、下記のURLでアクセス。

[http://yongatsuichinichitarounoiMac.local:8888]()

「**よんがついちにちたろうのあいまっく**」というローマ字読みになってますwww
さすがに難読姓[^難読姓]の「**わたぬき**」は正しく変換できなかった模様www
[^難読姓]: 老舗の「とほほのWWW入門」には「とほほの雑学帳」があり、[珍しい苗字を集めたページ](https://www.tohoho-web.com/ot/unique-name.html)がある。

## IPアドレスでアクセスする
『システム環境設定』 > 『ネットワーク』を開きます。
![システム環境設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/913aaee3-d50c-fb01-e40a-cc060a8b8f27.jpeg)
こちらも個人情報なので当然モザイク。
![ネットワーク画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/5cf11c04-b096-7fd2-7b9d-7f0f39725eda.jpeg)
『 [Wifi機器名] に接続していて、IPアドレス [■.■.■] が設定されています。』のIP部分でアクセス。

[http://IPアドレス:8888]()

固定IPを持っていない場合は、ちょいちょいIPアドレスが変わるので、都度IPアドレスの確認が必要という注意事項があります。

# 簡単なのはわかった。ちょっと便利に使おう
細かな設定をしなくても使えるんですが、せっかく使うなら便利な方がいい。
というわけで、ここからは、ちょっと便利に使いたい人へのおまけです。

## SSI(Server Side Include)の利用を許可する
デフォルトの設定ではSSIの利用は許可されていません。
HTMLモックを制作する時にファイルをインクルードできないのは非常に不便。
ここは利用を許可するようにします。
SSIとはなんぞや？という人は、老舗中の老舗[とほほのSSI入門](http://www.tohoho-web.com/wwwssi.htm)を確認してください。

初期設定を変更するために、**/Applications/MAMP/conf/apache/httpd.conf**を編集します。
間違ってもすぐに戻せるように、元ファイルはコピーしておきます。
[mi](http://www.mimikaki.net/)などのテキストエディタで修正してください。

/Applications/MAMP/conf/apache/httpd.conf 227-230行目の```Options Indexes FollowSymLinks```を書き換えます。

```Apache:/Applications/MAMP/conf/apache/httpd.conf--227-230行目
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>
```
↓

```Apache:/Applications/MAMP/conf/apache/httpd.conf--227-230行目
<Directory />
    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride None
</Directory>
```
このままでもSSIは利用できますが、拡張子を```.shtml```にしないと動きません。
せっかく設定を変更するので、```.html```でも動くようにします。

/Applications/MAMP/conf/apache/httpd.conf 545-546行目　冒頭の```#```を削除し、```.html```を追加

```Apache:/Applications/MAMP/conf/apache/httpd.conf--536-537行目
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
```

↓

```Apache:/Applications/MAMP/conf/apache/httpd.conf--545-546行目
 AddType text/html .shtml .html
 AddOutputFilter INCLUDES .shtml .html
```

これで```.html```でもSSIが使えるようになります。

## ポート番号を入れるのが面倒
複数の案件を並行して動かす場合は、ポート番号 or hostsの書き換えなどする必要がありますが、並行して動かす予定がない場合、ポート番号を入れるのが面倒ということがあると思います。
その場合は[http://localhost]()でアクセスすることも可能です。

コントロールパネルで```8888```になっているポート番号を``80``に変更します。
『Set Web &MySQL port to:』の『80 & 3306』をクリックし、画像のような状態にします。
![MAMPコントロールパネル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/5a5fd4e6-d4ca-92a9-85be-eb029f40fbdd.jpeg)
変更後再起動して確認。
![ポート80でブラウザ起動](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/0ad156c0-2513-1a26-3b9e-b7c065328a41.jpeg)

# 他にも便利な設定はいっぱいある
今回は青葉マークを想定して

 + 並行したプロジェクトがない
 + 設定は基本コントロールパネルのみ
 + httpd.confはバーチャルホストごとの設定ではなく、グローバルで反映される書き方

としました。

でも、仕事をしていればプロジェクトが並行して進むこともありますし、この設定だけでは足りないというところもあります。

その設定については別の機会に。
#いろいろな続き
https://qiita.com/mrd-takahashi/items/98102064e58b9a226bc3

https://qiita.com/mrd-takahashi/items/99555c1ee5421c4df572

https://qiita.com/mrd-takahashi/items/557ae63f00872fde1233