6日でできる 新HTML&CSS入門｜MAMPのインストール

6日でできる 新HTML&CSS入門｜MAMPのインストール

MAMPで自分のパソコンにWebサーバーを用意して、本番公開前の安全な開発環境を整えよう。

HTMLファイルは、パソコン内に保存してブラウザで直接開くことができます。そのため、見出しや段落、画像、リンクなどを使った基本的なWebページであれば、Webサーバーを用意しなくても表示を確認できます。

しかし、学習が進んでPHPを使ったり、データベースから情報を取り出したり、WordPressなどのCMSを動かしたりすると、HTMLファイルを直接開くだけでは正常に動作しません。

PHPはWebサーバー上で処理される言語です。また、商品情報、利用者情報、記事データなどを保存するWebサイトでは、MySQLのようなデータベース管理システムも必要になります。

そこで役立つのがMAMPです。

MAMPをインストールすると、Webサーバー、PHP、MySQLなど、動的なWebサイトの学習に必要な環境を自分のパソコンへまとめて用意できます。複数のソフトウェアを一つずつ導入して細かな設定を行わなくても、MAMPの操作画面からサーバーを起動、停止できます。

現在のMAMPはWindowsとmacOSで利用でき、無料版にはApache、Nginx、PHP、MySQLが含まれています。Windows版では、ApacheまたはNginxをWebサーバーとして選択できます。

ここでは、MAMPの基本的な役割、Windowsへのインストール、初回起動時の確認、HTMLやPHPファイルの配置方法、localhostでの表示、サーバーが起動しないときの確認方法までを順番に解説します。

MAMPとは

MAMPは、自分のパソコン内にローカルサーバー環境を構築するためのソフトウェアです。

MAMPという名前は、もともと次の技術名の頭文字から作られました。

当初はMacintosh向けの環境として広まりましたが、現在はWindowsにも対応しています。

また、現在のMAMPにはApacheだけでなくNginxも含まれています。利用者は設定画面から、使用するWebサーバーを選択できます。

ローカルサーバーとは

ローカルサーバーは、自分のパソコン内で動作する開発用のサーバーです。

インターネット上で一般公開されているWebサーバーとは異なり、基本的にはそのパソコンを使用している本人が、制作やテストのために利用します。

ローカル環境で作業すると、インターネット上の公開ページへ影響を与えずに、HTMLやPHPを修正できます。

PHPの処理に間違いがあった場合や、データベースの内容を変更した場合でも、ローカル環境であれば本番サイトの利用者へ直接影響することはありません。

ただし、ローカル環境で正常に動いたからといって、本番環境でも必ず同じように動くとは限りません。

PHPのバージョン、Webサーバーの設定、データベースの種類、ファイルの保存場所などが異なると、動作にも違いが出ることがあります。

HTMLだけの学習にもMAMPは必要なのか

HTMLだけで作られた静的なWebページは、MAMPを使わなくてもブラウザで表示できます。

たとえば、index.htmlをダブルクリックすれば、Chromeなどのブラウザで開けます。

それでもMAMPを利用する利点はあります。

HTMLファイルをWebサーバーから配信する形で確認できるため、公開環境に近いURLやフォルダー構成で学習できます。

ファイルを直接開いた場合、ブラウザのアドレス欄には次のような形式が表示されます。

file:///C:/web-study/index.html

MAMPを通して表示した場合は、次のようなWebページらしい形式になります。

http://localhost:8888/web-study/

今後PHPやWordPressへ進む予定がある場合は、早い段階でローカルサーバーの使い方に慣れておくと学習を進めやすくなります。

MAMPに含まれる主な機能

無料版のMAMPには、ローカルWeb開発に必要な複数の機能がまとめられています。現在のWindows版では、Apache、Nginx、PHP、MySQLを利用できます。(MAMP)

初心者の段階では、すべての機能を一度に理解する必要はありません。

最初は、MAMPを起動する、サーバーを開始する、Document Rootへファイルを置く、localhostで表示するという流れを覚えましょう。

図1：MAMPが作るローカル開発環境

この図から分かること

MAMPは、一つのソフトウェアだけでWebページを作るものではありません。

Webサーバー、PHP、MySQLなど、役割の異なる機能をまとめて管理するための環境です。

Visual Studio Codeなどで作成したHTMLやPHPファイルをDocument Rootへ保存すると、ApacheまたはNginxがそのファイルをブラウザへ配信します。

PHPでデータベースを利用する場合は、PHPがMySQLへ問い合わせ、取得した情報をもとにブラウザへ返すページを作ります。

これらの処理は自分のパソコン内で行われるため、一般公開する前にページの表示やプログラムの動作を確認できます。

ApacheとNginxの役割

ApacheとNginxは、どちらもWebサーバーとして動作するソフトウェアです。

ブラウザからページを要求されると、Document Rootに保存されたHTMLやPHPなどを探し、必要なデータを返します。

MAMPのWindows版では、PreferencesのWeb Server設定からApacheまたはNginxを選択できます。Document Rootも同じ画面で指定でき、初期設定ではC:\MAMP\htdocsが使用されます。(MAMP Documentation)

HTMLやPHPの学習を始めたばかりで、特別な指定がない場合は、最初に設定されているWebサーバーをそのまま使用して構いません。

教材や授業でApacheを使うよう指定されている場合は、Web Server設定がApacheになっていることを確認します。

PHPはWebサーバー上で処理される

PHPは、Webサーバー側で実行されるプログラミング言語です。

ブラウザは、PHPファイルのプログラムを直接実行するわけではありません。

ブラウザからPHPファイルが要求されると、WebサーバーがPHPへ処理を渡します。PHPが処理を行った後、その結果として作られたHTMLなどがブラウザへ返されます。

PHPファイルをエクスプローラーから直接開いても、通常は期待したページとして表示されません。

PHPを動かすときは、MAMPのサーバーを起動し、localhostからアクセスします。

MySQLはWebサイトのデータを管理する

MySQLは、データベースを管理するためのシステムです。

Webサイトで扱う商品、記事、利用者、注文、予約などの情報を、一定の形式で保存できます。

MAMPには、MySQLをブラウザから操作するためのphpMyAdminも用意されています。

MAMPのWebStartページには、phpMyAdminやPHPの情報を確認するphpInfoなどへのリンクがあります。

phpMyAdminを使うと、データベースやテーブルの作成、データの確認、インポート、エクスポートなどを画面操作で行えます。

無料版MAMPとMAMP PROの違い

MAMPには無料版と、有料のMAMP PROがあります。

基本的なPHP学習やWordPressのローカル環境を作る場合は、無料版MAMPから始められます。

現在のWindows向けインストーラーは、MAMPとMAMP PROをまとめた形で提供されています。公式ドキュメントでは、インストール時にMAMP用とMAMP PRO用のフォルダーが作成され、MAMP PROを使用しない場合はそのフォルダーを無視できると案内されています。

インストール中にMAMP PROに関する案内や試用版の選択が表示されても、無料版MAMPを使った学習にMAMP PROの購入は必須ではありません。

Windowsへインストールする前の確認

MAMPをダウンロードする前に、使用しているパソコンが対応条件を満たしているか確認します。

公式のWindows向けドキュメントでは、次の要件が示されています。

Windows 11を使用している一般的なパソコンであれば、OSの条件は満たしています。

ただし、会社や学校が管理しているパソコンでは、ソフトウェアのインストールが制限されている場合があります。その場合は設定を無理に変更せず、管理担当者へ確認してください。

既存のローカルサーバーを確認する

すでにXAMPP、IIS、別のApache、MySQLなどを利用している場合は、MAMPと使用するポート番号が重なる可能性があります。

MAMPは、ほかのサーバーソフトウェアと同時に利用しやすいように、初期設定で一般的な80や3306とは異なるポート番号を使用します。

現在のWindows版では、初期設定として次のポートが使われます。

同じポートを別のアプリケーションが使用していると、サーバーが起動できない場合があります。

初めてMAMPを利用する段階では、設定を変更せず、初期ポートのまま動作を確認するのが分かりやすいでしょう。

MAMPの公式ダウンロードページを開く

MAMPは公式サイトからダウンロードします。

検索結果には第三者が運営するソフトウェア配布サイトも表示される場合がありますが、安全性や更新の確実性を考え、MAMP公式のダウンロードページを利用します。

公式ダウンロードページでは、macOS版とWindows版が分けて掲載されています。Windows版はMAMP & MAMP PROとしてexe形式で提供されており、バージョン番号は更新によって変わります。

教材に記載されているバージョン番号と、実際のダウンロードページに表示される番号が異なっていても問題ありません。

Windows用として案内されている最新の安定版を選びましょう。

Windows版インストーラーをダウンロードする

公式ダウンロードページでWindowsを選択し、ダウンロードを実行します。

以下の公式サイトへアクセスします。

公式サイト：https://www.mamp.info/

トップページにある「Download」ボタンをクリックし、Windows用のインストーラ（例：MAMP_MAMP_PRO_5.0.6.exe）をダウンロードします。

ダウンロードが始まります。

ダウンロードされるファイルは、次のような名前になります。

MAMP-MAMP-PRO-5.x.x.exe

バージョン番号や区切り記号は、配布時期によって異なる場合があります。

通常は、Windowsのダウンロードフォルダーへ保存されます。

ダウンロードしたファイルが見つからない場合は、ブラウザのダウンロード履歴またはエクスプローラーのダウンロードフォルダーを確認します。

インストーラーを起動する

ダウンロードしたexeファイルをダブルクリックします。

ユーザーアカウント制御の画面で、このアプリがデバイスに変更を加えることを許可するか確認された場合は、アプリ名と入手元を確認してから進みます。

会社や学校の管理対象パソコンで、管理者のパスワードを求められた場合は、担当者の許可が必要です。

公式ドキュメントでは、ダウンロードしたWindows用インストーラーを実行し、Windows Installerの案内に沿って進める手順が示されています。

セットアップウィザードを進める

インストーラーを起動すると、セットアップウィザードが表示されます。

画面の細かな構成や項目名は、MAMPのバージョンによって変更されることがあります。教材の画面と完全に同じでなくても、各画面の説明を確認しながら進めましょう。

基本的な流れは次のとおりです。

1. セットアップ開始画面を確認する
2. 使用許諾契約を確認する
3. インストールする機能を確認する
4. インストール先を確認する
5. ショートカットなどの設定を確認する
6. 設定内容を確認する
7. インストールを実行する
8. 完了画面を閉じる

１．セットアップウィザードが表示され、「Next」で進みます。

２．使用許諾契約を確認する（ライセンス契約）

• ☑ I accept the agreement（契約に同意する）を選択
• 「Next」で次に進みます。

３．インストールする機能を確認する

• ☑ MAMP PRO → チェックを外す
• ☑ Install Apple Bonjour → チェックを外す
• 「Next」で次に進みます。

４．インストール先を確認する（インストールフォルダの選択）

• 初期設定：「C:\MAMP」
• 特に変更がなければそのまま「Next」で次に進みます。

５．ショートカットなどの設定を確認する

スタートメニュー名：MAMP（初期状態のままで可）

デスクトップアイコン

　☑ Create a desktop icon（デスクトップアイコンを作成）→ チェックを入れたまま「Next」をクリックします。

６．設定内容を確認する

設定内容を確認し、「Install」をクリックします。

７．インストールを実行する

インストールには少し時間がかかります。

７．完了画面を閉じる

完了したら「Finish」をクリックして終了

完了後にMAMPが自動的に起動しない場合は、次のいずれかの方法で起動します。

自動的に起動しない場合は、デスクトップに作成された「MAMPのショートカットアイコン」をダブルクリックして起動します。

MAMP PROの選択を確認する

インストーラーには、MAMP PROや試用版に関する項目が含まれることがあります。

無料版だけを使用する場合は、MAMP PROを積極的に起動する必要はありません。

現在の公式ドキュメントでは、Windows版のインストーラーによってMAMPとMAMP PROの両方のフォルダーが作られる構成が案内されています。MAMP PROを使わない場合は、無料版MAMPを起動して使用できます。

以前のインストーラーではMAMP PROのチェックを外せる画面が表示されることもありましたが、現在または今後のバージョンで同じ画面になるとは限りません。

MAMP PROが一緒に導入されても、無料版MAMPの利用に支障はありません。

Apple Bonjourの選択について

インストーラーによっては、Apple Bonjourをインストールする選択肢が表示される場合があります。

Bonjourは、同じネットワーク上の機器やサービスを見つけやすくするための仕組みです。MAMPの公式ドキュメントでは、MAMP Viewerからホストへアクセスする場合にBonjourが使われると説明されています。

自分のWindowsパソコン内だけでlocalhostを使い、HTMLやPHPを学習する場合は、MAMP Viewerの利用は必須ではありません。

選択肢が表示された場合は、利用目的を確認して判断しましょう。

インストール先はC:\MAMPを基本にする

Windows版MAMPの標準的なインストール先は、次の場所です。

C:\MAMP

公式ドキュメントでも、分かりやすさのためにC:\MAMPが推奨されています。MAMPはCドライブ以外の通常のドライブにもインストールできます。

特別な理由がなければ、初期設定の場所を変更せずに進めると管理しやすくなります。

Program Filesへインストールしない

MAMPは、Program Files、Windows、ユーザーフォルダーなどのシステムフォルダーへインストールしないよう案内されています。

Apache、MySQL、Nginxなどは、設定、ログ、データベース、Document Rootなどのフォルダーへデータを書き込む必要があります。システムフォルダーへ入れると、Windowsのアクセス権限によって正常に書き込めない可能性があります。

アクセス権限の問題が起きたときに、Windowsのセキュリティ設定やユーザーアカウント制御を無理に弱めることはおすすめできません。

正しいインストール先を選ぶことが大切です。

ショートカットの設定を確認する

セットアップウィザードには、スタートメニューやデスクトップにショートカットを作成する項目が表示されることがあります。

デスクトップからMAMPを起動したい場合は、デスクトップアイコンを作成する設定を選択して構いません。

ショートカットが作成されなかった場合でも、スタートメニューからMAMPを検索して起動できます。

図2：WindowsへMAMPをインストールする流れ

この図から分かること

MAMPは、公式サイトからWindows用のインストーラーを取得し、セットアップウィザードの案内に沿ってインストールします。

インストール先は、基本的にC:\MAMPのまま使用します。

Program Filesなどのシステムフォルダーへ入れると、WebサーバーやMySQLが必要なファイルを書き込めず、動作に問題が起こる可能性があります。

MAMP PROに関する項目が表示される場合がありますが、基本的な学習は無料版MAMPで進められます。

MAMPの操作画面を確認する

MAMPを起動すると、サーバーの状態や設定を管理する画面が表示されます。

バージョンによってボタンの名称や配置が異なる場合がありますが、主な機能は次のとおりです。

初回起動時のファイアウォール確認

MAMPでApacheやNginxを初めて起動したとき、Windows Defenderファイアウォールの確認画面が表示されることがあります。Webサーバーはネットワーク通信を行うため、Windowsが通信を許可するか確認します。

初回起動時に、次のようにファイアウォールの警告が表示された場合は、次の操作を行います。

• 「Apache HTTP Server」→「許可」
• 「mysqld.exe」→「許可」

これにより、ローカル環境でWebサーバーとデータベースが正常に動作するようになります。

自分のパソコン内だけでMAMPを使う場合は、公共のネットワークへ広く公開する必要はありません。

別のスマートフォンやパソコンからMAMPへアクセスする予定がない場合は、必要以上にファイアウォールの範囲を広げないようにします。

警告を閉じてしまった場合は、後からWindowsのファイアウォール設定で確認できます。

MAMPのコントロール画面

MAMPが起動すると、次のような操作パネルが表示されます。

MAMPを使ってローカル開発を始める

MAMPのインストールが完了したら、次の流れを繰り返しながらWeb制作を進めます。

1. MAMPを起動する
2. Launch Serversを選択する
3. ApacheまたはNginxとMySQLの状態を確認する
4. Visual Studio CodeでDocument Root内のファイルを編集する
5. HTMLやPHPを保存する
6. Chromeでlocalhostへアクセスする
7. 表示や処理結果を確認する
8. 必要な部分を修正する
9. 作業終了後にStop Serversを選択する

MAMPは、HTMLやPHPを自動的に作成するソフトウェアではありません。

Visual Studio Codeで作成したファイルを、WebサーバーやPHP、MySQLが動作する環境で確認するための土台です。

コードを書く場所、サーバーを動かす場所、表示を確認する場所の違いを理解すると、Web制作の作業を整理しやすくなります。

HTMLだけの学習中は必須ではありませんが、PHP、MySQL、WordPressなどへ進むと、ローカルサーバーの役割がより重要になります。

最初は設定を大きく変更せず、C:\MAMP\htdocsへファイルを置き、MAMPのサーバーを起動して、http://localhost:8888から表示する基本操作を身につけましょう。