mamp
コーディング

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

非プログラマーなデザイナーの場合、サイトルートパスでコーディングしてくださいという指定があるとちょっと困る。


  1. 制作中は相対パスで書いて納品時にサイトルートパスに一気に置換

  2. 確認毎にテストサーバーにデーター上げる

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

『2』に関しては本当に面倒だ。面倒くさい。

やり方は様々あれど、事故は最小限に防ぐというのが大事なので、「わからないもん。」と言っている場合ではない。

というわけで、MAMPをインストールして一発解決。

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

その点、MAMPは非プログラマーなデザイナーにはとても使いやすい開発環境だと思います。

もちろんWindows版もあります。


インストール

MAMP公式サイト

DLして指示に従っておけばインストールはおしまい。

MAMP PROも一緒にインストールされますが、無料版のMAMPで十分です。


設定をいじらずに使う

設定をいじると使い勝手は良くなりますが、そういう話は後ろに放り投げて使いたいんじゃ!という場合は、設定いじらなくてもOK。

起動パネル

インストールされたMAMPをクリックすると、コントロールパネルが表示されます。

「サーバーを起動」をクリックすると、MAMPが起動します。

参照しているフォルダは/Applications/MAMP/htdocs/なので、このフォルダにテスト用のindex.htmlを入れてみます。

そして、ブラウザでhttp://localhost:8888にアクセス。

デフォルトの参照フォルダ

はい。

これで使用準備完了です。

あとは/Applications/MAMP/htdocs/にファイルを入れて、がしがしコーディングしていきましょう。

こうすれば、最後に一括置換とか、修正するたびにテストサーバーに上げて確認とかの手間がなくなります。

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


他のデバイスからページを見る

Windowsとかスマホブラウザなど、他のデバイスからページを確認したい場合があります。というか、仕事でコーディングしていたら必須。

ただ、http://localhost:8888

ではアクセスできない。なにせlocalhostですから。

そういう時はテストサーバーに上げるしかないの?と、がっかりしたアナタ。せっかくバーチャルホスト作ったのにもったいない。

そういう場合は『システム環境設定』>『ネットワーク』の「IP アドレス」を確認。

http://IPアドレス:8888

でアクセス可能になります。

ただし、この方法は確認したいデバイスが同じネットワーク上にある時のみ有効ということと、固定IPを持っていない場合は、ちょいちょいIPアドレスが変わるので、都度IPアドレスの確認が必要という注意事項があります。


簡単なのはわかった。ちょっと便利に使おう

細かな設定をしなくても使えるんですが、せっかく使うなら便利な方がいい。

というわけで、ここからは、ちょっと便利に使いたい人へのおまけです。


SSI(Server Side Include)の利用を許可する

デフォルトの設定ではSSIの利用は許可されていません。

HTMLモックを制作する時にファイルをインクルードできないのは非常に不便。

ここは利用を許可するようにします。

SSIとはなんぞや?という人は、老舗中の老舗とほほのSSI入門を確認してください。

初期設定を変更するために、/Applications/MAMP/conf/apache/httpd.confを編集します。

miなどのテキストエディタで開いてください(DreamweaverはNG)。

間違ってもすぐに戻せるように、元ファイルはコピーしておきます。

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


/Applications/MAMP/conf/apache/httpd.conf--204-207行目

<Directory />

Options Indexes FollowSymLinks
AllowOverride None
</Directory>


/Applications/MAMP/conf/apache/httpd.conf--204-207行目

<Directory />

Options Indexes FollowSymLinks ExecCGI Includes
AllowOverride None
</Directory>

このままでもSSIは利用できますが、拡張子を.shtmlにしないと動きません。

せっかく設定を変更するので、.htmlでも動くようにします。

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


/Applications/MAMP/conf/apache/httpd.conf--514-515行目

#AddType text/html .shtml

#AddOutputFilter INCLUDES .shtml


/Applications/MAMP/conf/apache/httpd.conf--514-515行目

 AddType text/html .shtml .html

AddOutputFilter INCLUDES .shtml .html

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


ポート番号を入れるのが面倒

複数の案件を並行して動かす場合は、ポート番号 or hostsの書き換えなどする必要がありますが、並行して動かす予定がない場合、ポート番号を入れるのが面倒ということがあると思います。

その場合はhttp://localhostでアクセスすることも可能です。

コントロールパネルで8888になっているポート番号を`80に変更します。

MAMPコントロールパネル

変更後再起動。

ポート番号省略


他にも便利な設定はいっぱいある

今回は青葉マークを想定して


  • 並行したプロジェクトがない

  • 設定はコントロールパネル上でのみ

  • httpd.confの書き換えがあったとしても、バーチャルホストごとの設定ではなくグローバルで反映される設定の書き換え

としました。

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

その設定については別の機会に。

この記事の元ネタは

MAMPでローカル環境を作る-WordPressをインストールする前に-というブログ記事です。

ここにバーチャルホスト設定のさわりがあります。