menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 4 - ) 【Mac】MacにInkscapeをインストール
  5. ( 9 ↑) 【jQuery】jQueryでドロップダウンメニュー
  6. (10 ↑) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6 ↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( - ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. ( 7 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( 5 ↓) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

【MAMP】MacにMAMPをインストール

【MAMP】Macに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】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

MAMPのインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

MAMPの起動

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

MAMPの設定

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

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

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

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

【MAMP】MacにMAMPをインストール

ポート番号の変更

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

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

PHPバージョンの変更

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

【MAMP】MacにMAMPをインストール

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

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

MAMPの起動

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール

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

【MAMP】MacにMAMPをインストール


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

関連リンク

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

  • Mac MAMP
このエントリーをはてなブックマークに追加