MENU
  • おすすめ記事
  • WEB
    • css
    • html
    • js
  • ai / psdgraphic
    • ai
  • 雑記
    • コーディネート術
    • ダイエット
    • ファッション
NOZのメモ帳。
なりたいスタイル
  • Webhtml / js / css
  • Moreおすすめ
お問い合わせ
なりたいスタイル
  • Webhtml / js / css
  • Moreおすすめ
  1. ホーム
  2. おすすめ記事
  3. 【MANPのインストールから解説】複数サイトをローカルで作業する(並行作業可能)

【MANPのインストールから解説】複数サイトをローカルで作業する(並行作業可能)

2025 1/24
WEB サーバー おすすめ記事
2025年1月24日

WordPressなどPHPを使ったCMSサイトを構築・運用する際に、
とても便利なのがMANPです。

今回はローカルで作業するのに便利なMANP (マンプ)のインストールから
複数サイトを並行して作業できるように設定していきます。

もくじ

MANPを起動する

まずは、ダウンロード

まずは、公式サイトからMANPをダウンロードします。

下記のサイトにアクセスしてください。

Mac 用 free ダウンロード画面 https://www.mamp.info/en/mac/

無料でも十分な機能ですので、左のグレーの枠内にある
「Free Download」を押してください。

MANPはMac OS X 専用に開発されましたが、今ではWindowsも使用できます。
Winの方はこちらからhttps://www.mamp.info/en/downloads/
※ダウンロード後、PRO(有料)もダウンロードされていますが、アプリケーション画面でアンインストールできます。

インストールを開始

zipファイル(圧縮ファイル)がダウンロード完了後、
ダブルクリックでインストールを開始します。

インストール画面が出てきます。

・はじめに →「続ける」

・大切な情報 →「続ける」
以下のような注意書きが書いてあります。

フォルダ「MAMP」・アプリケーション「MAMP PRO」をアプリケーションディレクトリにインストールするので、
MAMPフォルダを移動したり、名前を変更したりしないでください。
インストーラーが既存のインストールを検出した場合、/Applications/MAMP/htdocsと/Applications/MAMP/conf/sslのデータを保持し、既存のデータベースを新しいインストールにコピーし、古いMAMPフォルダの名前を変更します。

・使用許諾契約 →「続ける」→「同意する」
こちらには著作権・ライセンス・バージョンなどの記載があります。

・インストールの種類 →「インストールする」
あなたのパソコンのハードディスクにインストールしますよ。いいですか?と聞かれています。

最後に、ご自身のパソコンの管理者パスワードを入力 →「ソフトウェアをインストールする」

お疲れ様でした!
この画面が出たら、インストールが無事に完了です!

MANPを起動

さっそく起動してみましょう!

この象さんマークを見つけてください。


Macの場合は、ダウンロード後ですとDockにあるかと思います。
見当たらない場合は、Launchpadのアプリケーション画面やfinderからアプリケーション/MANP から探せます。

早速クリックして、コントロール画面を開きます。

Screenshot

このような画面が出てきましたか?
※もし途中で広告画面が出てきたら「❌」で閉じましょう。

コントロールパネルの右上にあるのが「スタート/ 停止ボタン」、左上は「設定ボタン」となります。

まず「スタート/ 停止ボタン」を押して起動してみます。

Screenshot

「Start」の文字が「Stop」に変わっていれば起動に成功です!

もしここで起動しない場合は、エラーログを確認しましょう。ログは/Applications/MAPM/logsにあります。
よくある原因はポートの競合です。別のアプリケーション(Skypeなど)で既に同じポートを使用している場合があります。
Skypeの場合は、詳細画面の「追加の受信接続にポート80と443を使用」のチェックボックスをはずして再起動します!

MANPの使い方

現在のページを確認

MANPの初期設定はデフォルトで「8888」です。

では実際に以下のURLからアクセスしてみましょう。
http://localhost:8888/

このような画面が出てきたら正常です。

こちらはご自身のアプリケーションMANPの中にある
index.phpがローカルで表示されている状態です。

ここからはindex.phpのファイル場所に移動します。

index.phpのドキュメントルート

Finderから左のバーにある「アプリケーション」→「MAMP」→「htdocs」へ進んでください。
Apacheのドキュメントルートは/Applications/MAMP/htdocsです。

「htdocs」をクリックすると「index.php 」あるかと思います。
このように作業する時は「htdocs」の中のファイルを更新していきます。

スタートページ

先程、MANPのコントロールパネルから「スタートボタン」を押した時に以下のようなブラウザが表示されたと思います。

こちらは、MANPのスタート画面です。

コントロールパネルからは、以下の「WebStart」ボタンを押すと同じページに飛びます。


こちらのスタートページからは
主にMySQL (phpMyAdmin)やPHPのバージョンの確認で使用しています。

左上の「Tools」から各種ツールにアクセスできます。

デフォルトの設定を変更する(中級)

コントロールパネルの設定

ではもう一度コントロールパネルを見てみましょう。

Screenshot
Preferences左上:各種環境設定
Cloud右上から3番目:MAMP Cloudで利用するDropboxを開けます。
Webstart右上から2番目:先ほどのスタートページが開きます
Start / Stop右上:WEBサーバ・データベースサーバの起動/停止ボタン
Name中段上:ローカルホストでの名前(仮想ホスト)
このホスト名でアクセスしてファイルを表示します。
Document root中段:このフォルダ内にHTMLやPHPファイルを入れます。
Web server中段:Apacheを選択しておけばOK(大規模なサイトは要確認)
PHP version中段下:PHPのバージョンを選択

General

では左上の「Preferences(設定)」 をクリックして「General」を見てみましょう。

Screenshot

When starting MAMP (起動したときの動作設定)

・Start servers → サーバを起動する
・Check for updates → アップデートを確認する
・Open WebStart page → スタートページを開く

When quitting MAMP (終了する際の動作)

・Stop servers → サーバを停止

PHP-Cache(キャッシュ機能の選択)

・off
・APC /オペコードキャッシュ + ユーザーキャッシュ
・eAccelerator /アクセラレータ
・XCache /エックスキャッシュ
・OPCache /オプキャッシュ(デフォルト)

※最初はデフォルトのままでOK!
今後の書き方によっては重くなりますので、その際はこちらのキャッシュの方法を変更してください。

My favorite link 

・使用したいURLを入れると、スタートページに「My favorite link」ボタンが表示されます。
(いれなくても大丈夫です!※私はサイトが複数設定していますのでブランク状態です)

Ports

隣のタブにある「port」タブに入ります。

Apache Port

Apacheで使用するポートを設定

Nginx Port

Nginxで使用するポートを設定

MySQL Port

MySQLで使用するポートを指定

Set Web & MySQL ports to

上にある個別の指定を一括で指定することができます。
・MAMP default: ウェブサーバポートは8888/MySQLポートは8889
・80 & 3306: システムポート設定 ウェブサーバが80、MySQLが3306

(一般的なWEBサイトで使用するには、「80 & 3306」をクリックしてください)
ここでエラーが出た場合はポートがぶつかっています。原因を探るか、ポートをデフォルトに戻してください

主なディレクトリ

データベース

・DB /Applications/MAMP/db

ログ

・ログファイル /Applications/MAMP/logs
php/mysql/apache_error

設定系

・Apache設定ファイル /Applications/MAMP/conf/apache/httpd.conf
・Apacheディレクトリ設定ファイル /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

・PHPの設定ファイル
/Applications/MAMP/bin/php/php<バージョン番号>/conf/php.ini

設定を変更して複製サイトの編集を可能にする(上級)

ドキュメントルートについて(フォルダ/ディレクトリの場所)

ここからは、ホストを複数設定する手順を説明していきます。

まず、MAMPがファイルを読み込む際のドキュメントルート(フォルダ/ディレクトリの場所)が
現在ですと初期設定状態となっています。

初期の状態
/Applications/MAMP/htdocs

ローカル環境(MAMP や XAMPP)では、 htdocs にindex.phpがあり、
そこにファイルを追加して構築していくのですが、
複数サイトを運用したい場合は下の画像のような状態になります。

このように複数サイトを開発するとき、
htdocsの下にサイトごとにディレクトリを作成していくことになります。

ドキュメントルートを設定していく

まず、MAMPのインストールディレクトリ(conf)から、下記ファイルをテキストエディタで開きます。

Apache設定ファイル /Applications/MAMP/conf/apache/httpd.conf

580行目あたりに# Virtual hostsと記載があるので、
下の#Include conf/extra/httpd-vhosts.confから#を外し、設定を有効にします。

次に、同じファイル内の50行目あたりに
Listen 80という記述があるので、下に利用する分のポートを追加していきます。

次に下のファイルをテキストエディタで開き、各ポートに設定するサイトディレクトリを割り当てます。

Apache設定ファイル MAMP/bin/apache/conf/extra/httpd-vhosts.conf

<VirtualHost *:81>
DocumentRoot "/Applications/MAMP/htdocs/site01"
</VirtualHost>

<VirtualHost *:82>
DocumentRoot "/Applications/MAMP/htdocs/site02"
</VirtualHost>

最後に、MAMP/htdocs/site01とMAMP/htdocs/site02のディレクトリに、
それぞれのindex.htmlを置いてみましょう。

お疲れさまでした!
これで設定は完了です!

MAMPを再起動し、http://localhost:81/・ http://localhost:82/ にアクセスしてみましょう!

site01・site02が、表示されれば成功です。

再起動しても確認できない場合は、時間を置くか、シークレートウィンドウで確認してみてください。

※ブラウザでアクセスする場合、通常の http://localhost/site01/ でも確認できます。

エラーの確認

設定ファイル httpd.conf に誤った記述があると、エラーが発生して Apache が起動しません。

/Applications/MAMP/Library/bin/apachectl configtestをコマンドで実行(return)します。

MAMP/bin/apache/conf/extra/httpd-vhosts.confの部分で該当の追記箇所(行)に
「Syntax OK」と表示されば問題なしです。

まとめ

今回はMANPのインストールからhttpd-vhosts.conf
のファイル設定まで行いました。

このように設定すると、画像ファイルも本番と同じように指定することが出来ますので、
本サーバーに移行する際にも作業がスムーズに行えます。

ファイル毎にWordPressをインストールしたり、お使いのCMSを入れたりすると
もっと使いやすくなりますので、是非活用してみてください。

あわせて読みたい
お名前.comでドメインを取得してエックスサーバーで使用する方法 「お名前.com」でドメインを取得して、「エックスサーバー」でサイトに紐付けるまでの方法紹介します。 1.お名前.comでドメインを取得 お名前.comへアクセス まず、お名…
WEB サーバー おすすめ記事
MAMP php
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 【CSS】clip-pathを使って三角形を作る
  • 【Illustrator】スウォッチパネルの中が消えた!もとに戻す対処法

この記事を書いた人

nozのアバター noz

関連記事

  • 【Illustrator】スウォッチパネルの中が消えた!もとに戻す対処法
    2025年1月24日
  • 【CSS】clip-pathを使って三角形を作る
    2024年6月16日
  • 【CSS】要素から何番目、~番目以降。最初の要素、最後の要素。指定方法いろいろ②
    2024年6月12日
  • flexで3行!gridでは、たった2行! 縦横中央に配置する。
    2024年6月7日
  • 【CSS】前の要素、次の要素。指定方法のいろいろ
    2023年10月30日
  • 【初心者向け】Illustrator  便利なショートカットキー
    2023年10月19日
  • 【VSCode】 ショートカット mac
    2023年10月3日
  • お名前.comでドメインを取得してエックスサーバーで使用する方法
    2023年9月19日

コメント

コメントする コメントをキャンセル

新着記事
  • 【Illustrator】スウォッチパネルの中が消えた!もとに戻す対処法
    2025年1月24日
    ai
  • 【MANPのインストールから解説】複数サイトをローカルで作業する(並行作業可能)
    2025年1月24日
    サーバー
人気記事
  • 【CSS】前の要素、次の要素。指定方法のいろいろ
  • 【Illustrator】スウォッチパネルの中が消えた!もとに戻す対処法
  • 【CSS】clip-pathを使って三角形を作る
かてごりタイ
  • ai / psd
    • ai
  • WEB
    • css
    • html
    • js
    • サーバー
  • おすすめ記事
noz
暑がりな面倒くさがり屋さん
元服飾専門卒、アパレル経験10年。
妊娠をきっかけにWEBの勉強を始め
デジハリママコースを卒業。

現在はフリーで活動して7年、委託契約や単発依頼など多方面で活動しています。
  • Web
  • More
目次
アーカイブ
  • 2025年1月
  • 2024年6月
  • 2023年10月
  • 2023年9月
  • 2023年3月
  • 2021年9月
キーワード別
MAMP (1) php (1) VSCode (1) イラレ (1)
NOZ
運営者
WEB系は備忘録。アパレル関連は経験談を記事にしています。
どなたかの参考になれば幸いです。
お問い合わせ・ご依頼
  • Home
  • Profile
  • All articles
  • Contact
  • Privacy policy

© なりたいスタイル.

  • メニュー
  • 全ての記事
  • 検索
  • 目次
  • トップへ
もくじ