セキュリティ上の理由により、スケッチのindex.htmlをWebブラウザで開くだけでは画像やフォントなど外部CSVファイルの読み込みができません。また、いくつかの機能も制限されています。Webサーバーをレンタルしてスケッチをアップロードすれば解決できますが、プログラムを書き換えるたびにいちいちアップロードしながら開発するのは面倒です。一番便利なのは、「MAMP」という環境をインストールし、自分のPCの上でローカルなWebサーバーを動かすことです。
1. MAMPのインストール
MAMPのサイトにアクセスします。「Free Download」と書いたボタンをクリックします。
次の画面では「Download MAMP & MAMP PRO」の欄の左側、Appleマークのある「MAMP & MAMP PRO 6.3」のボタンをクリックします。M1版とInterl版があるので、自分のマシンに合ったものをダウンロードしてください。
Safariで警告が出たら「許可」を押してください。
Downloadが終わったら、「MAMP_MAMP_PRO_○○○.pkg」を開きます。
ダイアログに従ってインストールを進めてください。
「続ける」
「続ける」
「同意する」
「インストール」
インストールが完了したら「閉じる」ボタンを押します。
2. MAMPの起動と環境設定
次に、MAMPの中で環境設定を行なっていきます。
インストールが完了すると「アプリケーション」フォルダに「MAMP」というフォルダができているので(※「MAMP PRO」のほうではありません)、その中の「MAMP」というアプリケーションファイルを開きます。
MAMPが起動すると下のようなホーム画面が開きます。環境設定をするために左上の歯車型アイコンのついた「Preferences」ボタンを押してください。
そうすると環境設定の画面が開きます。
ここではまず「When starting MAMP:」の「Start servers」にチェックを入れてください(MAMPの起動と同時にサーバーを起動する設定です)。
次に、「Ports」と書いたタブをクリックしてください。ここでは下の「Set Web & MySQL ports to:」の「80 & 3306」のボタンを押して、上のような設定になっているか確認してください。
次に「Server」タブを開いて以下のような画面を出します。
サーバー用のフォルダを作るために一旦Finderを開きます。自分のホームディレクトリ(ユーザ名のフォルダ)直下に新規フォルダを作り、「Sites」という名前にします(既にSitesフォルダが存在する場合は、そのままで結構です)。
もう一度MAMPに戻り、「Document root:」と書いた枠の右下にある「Choose…」をクリックします。
ここで、先ほど作った「Sites」フォルダを選択します。選択したら右下の「Choose」ボタンを押してください。
元の画面で「Document root:」の項目が「Users > ユーザー名 > Sites」になっているのを確認します。確認できたら「OK」を押します。
3. MAMPの起動確認
MAMPのホーム画面に戻ります。この状態で右上の電源マークの「Start」ボタンを押してください。
数秒後Webブラウザが起動して下のような画面が出ればMAMPの起動成功です。
MAMPの「Start」ボタンは「Stop」ボタンに変わり、アイコンも緑色に変わっています。
ブラウザのアドレスバー(URLを入れるところ)に「localhost」と打ってみます。下のような画面が出ると思います。これはMAMPが起動して、正常に「Sites」フォルダにアクセスできている証拠になります。
では、この「Sites」フォルダに実際にファイルを入れてみます。Finderで「Sites」を開き、その中に今まで作業していた「p5」フォルダを移動します。
いつの間にか「Sites」フォルダの中に「index.php」というファイルができていますが、これはサーバーが起動しているというメッセージを出すためだけのファイルなので、不要です。削除してください。
下のような状態になればOKです。
もう一度ブラウザで「localhost」を開きます。下のような画面が表示されればOKです。これは「Sites」の中に何が入っているかの一覧です。試しに「p5」を開き、その中の「sketch_○○」を開いてみましょう。
スケッチが正常に表示されればMAMPの設定は終了です。これからはこの「Sites > p5」フォルダの中にスケッチを作り、ブラウザの「localhost」から開く、というプロセスに変わります。
このままでもMAMPは動作しますが、セキュリティ上若干よろしくないので、次の「MAMPのセキュリティ対策」のページに従って対策をしてください。




























