menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

MacにMAMPをインストール

  • Guide

MAMP

こんにちは(・∀・)

自分のMac(ローカル環境)に仮想Webサーバを構築します。

ただし、Apach、PHP、MySQLなどを個別にインストールするのではなく、それらが一つにまとめられたMAMPというアプリケーションがあるので今回はそれをインストールします。

Macのローカル開発環境

今回インストールするMAMPとはMacにApache、MySQL、PHPなどの環境をまとめてインストールできるアプリケーションです。

macOSにはApacheとPHPが初めからインストールされているのであとはMySQLをインストールするだけでいいのですが今回プリインストールされているApacheとMySQLは使用せず、それらがまとめられたWebサーバアプリケーションのMAMPを使用したいと思います。

MacのMAMPと同じようなアプリケーションでWindowsにもWindows向けのXAMPというアプリケーションがあります。

今までWebデザインラボではご紹介してきませんでしたがXAMPを使えばWindowsにも簡単にローカル開発環境を構築することができるようになります。


MAMPのダウンロード

MAMP公式サイトからMAMPをダウンロードします。DOWNLOADをクリック。

MAMP & MAMP PRO

MAMPダウンロード

MAMP & MAMP PRO 4.0.6(Mac OS X)のDownloadをクリックしてダウンロードします。

MAMPダウンロード

MAMPのインストール

ダウンロードしたMAMP_MAMP_PRO_4.0.6.pkgファイルを起動します。

MAMPインストール

インストールが始まりますので続けるをクリックします。

MAMPインストール

続けるをクリックします。

MAMPインストール

続けるをクリックします。

MAMPインストール

インストールを続けるならば同意するをクリックします。

MAMPインストール

カスタマイズをクリックします。

MAMPインストール

今回は無料版のMAMPだけインストールしたいので有料版のMAMP PROのチェックは外してインストールしないようにします。

MAMPインストール

MAMP PROのチェックを外したらインストールをクリックします。

MAMPインストール

パスワードを入力してソフトウェアをインストールをクリック。

MAMPインストール

インストールしています。しばらくお待ちください。

MAMPインストール

閉じるをクリックしてインストールを終了します。

MAMPインストール

インストーラはもう必要ありませんのでゴミ箱に入れるをクリックします。

MAMPインストール

MAMPの起動

Finderを開いて、アプリケーションフォルダにあるMAMPフォルダを開きます。

MAMPの起動

MAMPフォルダにあるMAMP.appをクリックしてMAMPを起動してください(拡張子を表示する設定にしていない場合はMAMPをクリックです)。

MAMPの起動

MAMPの設定

MAMPが起動したらPreferencesをクリックしてください。

MAMPの設定

Start/StopタブにあるCheck for MAMP PROのチェックを外してください。

MAMPの設定

今回MAMP PROは必要ありませんのでチェックを外しておきます。

MAMPの設定

プリインストールされているApacheを停止する

最初にも言いましたが、Mac OS XはApacheとMySQLがプリインストールされています。MAMPとの競合による不具合を避けるため、プリインストールされているApacheを停止しておきます。

システム環境設定 → 共有 → インターネット共有

インターネット共有にチェックが入っていたらチェックを外し、MacにあらかじめインストールされているApacheを停止します。

MAMPの設定

ポート番号の変更

MAMPはプリインストールされているApacheやMySQLとポート番号が競合しないようデフォルトの設定ではApacheのポート番号が8888番、MySQLのポート番号は8889番に設定されています。そのままにしていてもいいのですがポート番号を変更しない場合、URLのポート番号が省略できなくなり、通常は「http://localhost/」となるところが「http://localhost:8080/」のようになってしまいます。ポート番号は80番の時だけ省略することができるので、ポート番号を省略したい場合はここで設定を変更しておきます。

Portsタブを開いてSet Web & MySQL Ports to 80 & 3306をクリックしてください。

MAMPの設定

するとApacheのポート8888番が80番に変わり、MySQLのポート8889番が3306番に変わりました。

MAMPの設定

PHPバージョンの変更

PHPタブを開いてPHPのバージョンを設定します。ご利用になりたいPHPのバージョンを選んでください。

MAMPの設定

ドキュメントルートの変更

Web Serverタブを開いてパスの設定をします。デフォルトでは「/アプリケーション/MAMP/htdocs」がファイル置き場になっています。作業場所を変更したい場合はフォルダのアイコン(*矢印をクリックしてもパスの設定はできませんのでご注意ください)をクリックして任意の場所に変更します。変更しなくともよいという場合、ここはスルーしてください。

MAMPの設定

今回Macintosh HDからUSBメモリの任意の場所を作業場所に変更したかったので、「/アプリケーション/MAMP/htdocs」から「/Transcend/○○○/○○○」へとパスを変更しました。この場合挿しっぱなしのUSBメモリの中の任意のフォルダの中の中が「http://localhost/」となります。OKをクリックして設定を終了します。

MAMPの設定

パスワードを入力してOKをクリックしてください。

MAMPの設定

MAMPの起動

サーバを起動をクリックしてサーバを起動します。

MAMPの起動

最初に起動した時だけ聞いてきます。許可をクリックします。

MAMPの起動

これはMAMPを起動する度に聞いてきます。パスワードを入力してOKをクリックします。

MAMPの起動

サーバが起動するとサーバを起動のボタンの色が緑色に変わりサーバを停止の文字が表示されます。サーバが起動すると右上のApache サーバーとMySQL Serverの横の枠内も緑色の色がつきます。

MAMPの起動

「ようこそ! MAMPのインストールに成功しました。」というページがブラウザ上に表示されます。Open WebStart Pageというボタンをクリックしても同じページが表示されます。
URLは「http://localhost/MAMP/?language=Japanese」です。

MAMPの起動

ブラウザにlocalhostと入力して次の画面が表示されるのを確認したらMAMPのインストールと基本的な設定は終了です。

MAMPの起動


いかがでしたでしょうか、Macに仮想WebサーバのMAMPをインストールする方法についてご紹介してまいりました。アプリケーションを個別にインストールするよりもはるかに簡単に仮想Webサーバの構築ができるので時間を節約したい場合MAMPのようなアプリケーションはオススメです。

関連リンク

MAMPでバーチャルホスト
【Mac】ターミナルで編集できない(E325: ATTENTION)

  • カテゴリー:Guide