どのパソコンからでも編集可能!MAMPを使ったWordPress開発環境の構築【Mac/Windows対応・Dropbox活用】

もくじ

はじめに

Webサイトの開発やテストを効率的に行うには、ローカル環境を構築することがオススメです。
ローカル環境を使うことで、インターネットに公開する前に、安全に自由な開発やテストが可能になります。

今回は、MAMPを使ってMacとWindows両方に対応したローカル環境を構築する方法を解説します。
さらに、Dropboxを活用して複数のパソコン間で環境を共有する便利なテクニックもご紹介します。

MAMPのインストールと初期設定

MAMPとは?

MAMPとは、以下の4つの技術を一括で提供するツールです:

  • Macintosh(マッキントッシュ)
  • Apache(アパッチ)(Webサーバー
  • MySQL(マイエスキューエル)(データベース
  • PHP(ピーエイチピー)(プログラミング言語

MAMPをインストールするだけで、自分の使ってるパソコン上でローカル環境を構築することができ、各ソフトを別々に入手する必要がないため、非常に便利です。

※MAMPはもともとMac向けに特化していましたが、現在ではWindows向けにも提供されており、どちらのOSでも利用可能です。

MacとWindowsでの選択肢

Macでは「MAMP」が広く利用され、Windowsでは「XAMPP(ザンプ)」が一般的には広く利用されています。
しかし、本記事では、MAMPを利用したローカル環境構築を中心に、Dropboxを組み合わせた効率的な運用方法まで解説します。

それでは、早速、MAMPのインストール方法から始めましょう!

MAMPのダウンロードとインストール(Mac/Windows対応)

i.tes+【アイテスプラス】開発環境
MacOS:Monterey (12.6.6)
MAMP:version 6.6 (1211)
Apache:version 2.4.46
MySQL:version 5.7.34
PHP:version 7.4.21
※いろいろ動作確認をしながらアップデートをしています。

公式サイトからダウンロード

MAMP公式サイト(https://www.mamp.info)にアクセスし、対応するOS(MacまたはWindows)のバージョンをダウンロードします。
MAMPは無償版と有償版(MAMP PRO)があり、無償版でも開発環境としては十分なツールです。

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

インストール手順

  1. ダウンロードしたインストーラーを実行します。
  2. 画面の指示に従ってインストールを進めます。
  3. インストール後、MAMPを起動します。
MAMPの起動画面

必要な初期設定

設定は起動画面の「Preferences」のアイコンからできます。

Generalタブ

起動時と終了時の設定ができます。
その他にも、PHPのキャッシュやfavorite linkの設定もできます。

アイテスプラスのGeneralタブ画面

Portタブ

ポートの設定ができます。
MAMP のデフォルトは『8888』『8889』になっていますが、一般的なポートの設定にするには「80 & 3306」をクリックします。
この設定により、Apache にアクセスする URL が『http://localhost:8888/』 から『httt://localhost/』に変更されます。

アイテスプラスのPortタブ画面

Serverタブ

MySQLのバージョンの確認とDocument Root(Web ファイルの配置場所)を設定することができます。
※後ほど補足しますが、ファイル場所は『Dropbox』内に変更しています

アイテスプラスのServerタブ画面

Cloudタブ

クラウド(Dropbox)にバックアップができる機能が追加されましたが、有料サービスなので使っていません
補足で説明する方法ですでに Dropbox に保存してますのでww。

アイテスプラスのCloudタブ画面

ローカル環境でWordPressをセットアップ

WordPressのダウンロードと配置

  1. WordPress公式サイト(https://ja.wordpress.org/)から最新バージョンをダウンロードします。
WordPress公式サイト(https://ja.wordpress.org/
  1. ダウンロードしたファイルをMAMPのhtdocsフォルダに解凍します。
    【非推奨ww】アイテスプラスの場合は、htdocsフォルダ内に開発するクライアント別に(ドメイン名の)フォルダを作って管理しています。
    例)アイテスプラス→『www.ites-plus.com』名のフォルダを作成して、その中にWordPressの解凍したファイル・フォルダ類を入れています。

    ※ ファイル名やフォルダ名に、 . (ドット)は、OSによって不具合も生じる場合もありますのでご注意ください。
    (補足2)をチェック!!
アイテスプラスの管理しているhtdocsフォルダ

データベースの作成とwp-config.phpの編集

  1. MAMPを起動し、「WebStart」からphpMyAdminにアクセスします。
  1. 新しいデータベースを作成します(例: wordpress_db)。
  1. WordPressフォルダ内のwp-config-sample.phpwp-config.phpにリネームし、データベース情報を編集します。

※アイテスプラスでは、wp-config.phpファイルを少し編集しやすいようにオリジナルに改編してあります。

WordPressの初期設定とインストール

  1. ブラウザでhttp://localhost/フォルダ名にアクセスします。
    ※Portタブのところで、デフォルトの『8888』のままであれば、http://localhost:8888/フォルダ名にアクセスします。
  1. インストールウィザードに従って、サイトタイトルや管理者情報を入力します。
必要な情報(タイトル、ユーザー名、パスワード、メールアドレス)を記入
インストールの成功画面
ログイン画面へ移動して、ユーザー名とパスワードを入力してログイン
ログインするとダッシュボードが表示される

まとめ

MAMPを使うことで、簡単にローカル環境を構築し、WordPressの開発やテストが可能になります。
まずは基本的なインストールと設定を終え、自由に試してみてください!

(補足1)MAMPの基本的な活用方法

WebStartでの管理画面の使い方

  • MAMPを起動後、「WebStart」ボタンをクリックすると、管理画面が開きます。
MAMPの起動画面
  • 管理画面からphpMyAdminやその他ツールにアクセス可能です。
管理画面

ローカル環境のサイトを確認する方法

  • ブラウザでhttp://localhost/にアクセスすると、htdocsフォルダ内のファイルが確認できます。
管理しているwebサイトのリンク

(補足2)推奨されるフォルダ命名規則

MAMPのhtdocsフォルダ内で、Webサイトごとにフォルダを作成する際には、以下のルールを推奨します。

基本的な命名ルール

フォルダ名は、半角英数字・アンダースコア(_)・ハイフン(-)を使用するのが理想的です。

推奨されるフォルダ名

example_site
example-site
wordpress_project
mywebsite

避けるべきフォルダ名

example site   (スペースがあるとエラーの原因に)  
example.site   (ドットが含まれると誤認識の可能性)  
MyWebsite2025!  (大文字+特殊記号は推奨されない)  

ドット(.)を使わない理由

ドット(.)を含むフォルダ名は、MAMPやブラウザの設定によっては「ドメイン名」として誤認される可能性があります。
例えば、mywebsite.localのようなフォルダ名を作ると、ローカルドメインの設定と競合することがあるため、フォルダ名にはドットを使用しないのがベストです。

フォルダ名の統一ルール

一貫した命名規則を使うことで、フォルダ管理がしやすくなります。
特に複数のプロジェクトを扱う場合は、以下のようなルールを作ると便利です。

プロジェクトタイプ別の命名例

wp_project_name      (WordPress関連のプロジェクト)
static_project_name  (静的サイト用)
test_project_name    (テスト用プロジェクト)

日付を含める場合

project_20250130
testsite_240130  (西暦下2桁+月日)

文字の大文字・小文字の扱い

フォルダ名には小文字を使うことを推奨します。
Windowsは大文字と小文字を区別しないですが、MacやLinuxでは区別されるため、統一するのがベストです。

(補足3)Dropboxを活用したローカル環境の共有

MAMPのhtdocsフォルダをDropboxに設定することで、複数のパソコン間でローカル環境を共有することが可能です。
この方法は、たとえば自宅と職場、またはデスクトップPCとノートPCで同じ環境を使用したい場合に非常に便利です。
以下に設定手順と注意点を詳しく解説します。

1. Dropboxにhtdocsフォルダを移動する

  1. Dropbox内に「MAMP」というフォルダを作成します。
  2. MAMPのhtdocsフォルダを、作成したDropboxフォルダ内に移動します。

例:
Dropbox/MAMP/htdocsに配置

2. MAMPのドキュメントルートを変更する

  1. MAMPを起動します。
  2. 「Preferences」→「Serverタブ」を選択します。
  1. 「Document Root」を、『Choose..』ボタンをクリックして、Dropbox内のhtdocsフォルダに変更します。

例:
/Users/ユーザー名/Dropbox/MAMP/htdocs

  1. 設定を保存してMAMPを再起動します。

3. シンボリックリンクの作成(必要に応じて)

複数のパソコンでMAMPを使用する際、Dropbox内のhtdocsフォルダをシンボリックリンクとして設定することで、MAMPのデフォルト設定を変更せずに共有が可能です。

Macの場合

ターミナルを開き、以下のコマンドを実行します:

ln -s /Users/ユーザー名/Dropbox/MAMP/htdocs /Applications/MAMP/htdocs

Windowsの場合

  1. コマンドプロンプトを管理者権限で開きます。
  2. 以下のコマンドを実行します:
mklink /d "C:\MAMP\htdocs" "C:\Users\ユーザー名\Dropbox\MAMP\htdocs"

4. 注意点

同期中の操作に注意

Dropboxでファイルが同期中の場合、データの競合が発生する可能性があります。
必ず同期が完了してから作業を行ってください。

データベースの共有について

MAMPのデータベース(MySQL)は通常、Dropboxでは同期されません。
データベースを共有したい場合、dbフォルダをDropboxに移動し、シンボリックリンクを作成します。

例: Macでのコマンド

ln -s /Users/ユーザー名/Dropbox/MAMP/db /Applications/MAMP/db

例: Windowsでのコマンド

mklink /d "C:\MAMP\db" "C:\Users\ユーザー名\Dropbox\MAMP\db"

複数デバイスでの同時使用を避ける

複数のパソコンで同時にMAMPを起動すると、データベースやファイルの競合が発生する可能性があります。
一台ずつ使用するようにしましょう。

5. トラブルシューティング

シンボリックリンクが機能しない

  • コマンドに間違いがないか確認してください。特にパスの指定ミスが多いです。
  • Windowsの場合、管理者権限でコマンドプロンプトを起動していることを確認してください。

Dropboxの同期が遅い

  • 大量のファイルを同期している場合は、同期が完了するまで時間がかかります。
    同期状態を確認してください。

データベース接続エラー

wp-config.php内のデータベース設定を確認し、正しいパスと名前が入力されているかを確認します。

(補足)まとめ

Dropboxを活用すれば、どのパソコンからでも統一された開発環境で作業が可能になります。
ただし、同期のタイミングや競合の可能性には注意が必要です。
シンボリックリンクやdbフォルダの共有設定を活用することで、さらに便利で効率的な環境を整えることができます。

関連記事

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

もくじ