MAMPのインストール&設定

セキュリティ上の理由により、スケッチのindex.htmlをWebブラウザで開くだけでは画像やフォントなど外部CSVファイルの読み込みができません。また、いくつかの機能も制限されています。Webサーバーをレンタルしてスケッチをアップロードすれば解決できますが、プログラムを書き換えるたびにいちいちアップロードしながら開発するのは面倒です。一番便利なのは、「MAMP」という環境をインストールし、自分のPCの上でローカルなWebサーバーを動かすことです。

1. MAMPのインストール

MAMPのサイトにアクセスします。「Free Download」と書いたボタンをクリックします。

「Free Download」をクリック

次の画面では「Download MAMP & MAMP PRO」の欄の左側、Appleマークのある「MAMP & MAMP PRO 6.3」のボタンをクリックします。M1版とInterl版があるので、自分のマシンに合ったものをダウンロードしてください。

Mac用の「MAMP & MAMP PRO」をダウンロード

Safariで警告が出たら「許可」を押してください。

Downloadが終わったら、「MAMP_MAMP_PRO_○○○.pkg」を開きます。

ダイアログに従ってインストールを進めてください。

「続ける」

「続ける」

「同意する」

「インストール」

インストールが完了したら「閉じる」ボタンを押します。

 

2. MAMPの起動と環境設定

次に、MAMPの中で環境設定を行なっていきます。

インストールが完了すると「アプリケーション」フォルダに「MAMP」というフォルダができているので(※「MAMP PRO」のほうではありません)、その中の「MAMP」というアプリケーションファイルを開きます。

MAMPが起動すると下のようなホーム画面が開きます。環境設定をするために左上の歯車型アイコンのついた「Preferences」ボタンを押してください。

そうすると環境設定の画面が開きます。

ここではまず「When starting MAMP:」の「Start servers」にチェックを入れてください(MAMPの起動と同時にサーバーを起動する設定です)。

「Start servers」にチェックを入れる

次に、「Ports」と書いたタブをクリックしてください。ここでは下の「Set Web & MySQL ports to:」の「80 & 3306」のボタンを押して、上のような設定になっているか確認してください。

「80 & 3306」のボタンを押す

次に「Server」タブを開いて以下のような画面を出します。

サーバー用のフォルダを作るために一旦Finderを開きます。自分のホームディレクトリ(ユーザ名のフォルダ)直下に新規フォルダを作り、「Sites」という名前にします(既にSitesフォルダが存在する場合は、そのままで結構です)。

もう一度MAMPに戻り、「Document root:」と書いた枠の右下にある「Choose…」をクリックします。

ここで、先ほど作った「Sites」フォルダを選択します。選択したら右下の「Choose」ボタンを押してください。

ユーザ > (ユーザ名) > Sites を選択する

元の画面で「Document root:」の項目が「Users > ユーザー名 > Sites」になっているのを確認します。確認できたら「OK」を押します。

3. MAMPの起動確認

MAMPのホーム画面に戻ります。この状態で右上の電源マークの「Start」ボタンを押してください。

数秒後Webブラウザが起動して下のような画面が出ればMAMPの起動成功です。

MAMPの「Start」ボタンは「Stop」ボタンに変わり、アイコンも緑色に変わっています。

ブラウザのアドレスバー(URLを入れるところ)に「localhost」と打ってみます。下のような画面が出ると思います。これはMAMPが起動して、正常に「Sites」フォルダにアクセスできている証拠になります。

では、この「Sites」フォルダに実際にファイルを入れてみます。Finderで「Sites」を開き、その中に今まで作業していた「p5」フォルダを移動します。

「p5」フォルダを「Sites」の中に移動

いつの間にか「Sites」フォルダの中に「index.php」というファイルができていますが、これはサーバーが起動しているというメッセージを出すためだけのファイルなので、不要です。削除してください。

「index.php」をゴミ箱に入れる

下のような状態になればOKです。

もう一度ブラウザで「localhost」を開きます。下のような画面が表示されればOKです。これは「Sites」の中に何が入っているかの一覧です。試しに「p5」を開き、その中の「sketch_○○」を開いてみましょう。


スケッチが正常に表示されればMAMPの設定は終了です。これからはこの「Sites > p5」フォルダの中にスケッチを作り、ブラウザの「localhost」から開く、というプロセスに変わります。

このままでもMAMPは動作しますが、セキュリティ上若干よろしくないので、次の「MAMPのセキュリティ対策」のページに従って対策をしてください。