【画像解説】Macにローカル環境を迷わず構築する方法

私は、ワードプレスのプラグインが正常に作動するかを試すために、テストサイトを作りたいということを以前ブログに記しました。

ワードプレスのプラグインをローカル環境で試そう

今回は、Mac上にMAMPという無料ソフトを用いてローカル環境を作り、そこにワードプレスをインストールするまでのことを画像を用いて記したいと思います。

なお、専門用語の解説はございませんので、あらかじめご了承下さいますようお願い申し上げます。

この作業を進めるにあたり、WebブラウザにGoogleクロームを使用しましたが、一ヶ所だけGoogleクロームで正常に作動しないところがありましたので、そこだけSafariを使用しました。Safariを使用したところについてもこの記事の中で説明しておりますのでご安心下さい。

また、メモ用紙一枚とボールペンを用意していただきますと、さらに作業を効率良く進められると思います。

それでは始めます。

まず、GoogleクロームでMAMPの公式サイトにアクセスします。

MAMP公式サイト

下の画像が、MAMP公式サイトのトップページです。

mampトップページ

下の画像のように、画面を下にスクロールさせて『DOWNLOAD』をクリックします。

mampトップページ

下の画像が表示されたら、『Download』をクリックします。

mampダウンロードページ

ダウンロードが完了し、ファイルを開くと、下の画像が表示され、『続ける』をクリックします。

mampインストール

下の画像が表示されたら、『続ける』をクリックします。

mampインストール

下の画像が表示されたら、『続ける』をクリックします。

mampインストール

下の画像が表示されたら、『同意する』をクリックします。

mampインストール

下の画像が表示されたら、『このコンピュータのすべてのユーザ用にインストール』をクリックします。

mampインストール

下の画像のように、『続ける』をクリックします。

mampインストール

下の画像が表示されたら、『インストール』をクリックします。

mampインストール

下の画像が表示されたら、パスワードを入力し、その後、『ソフトウェアをインストール』をクリックします。

mampインストール

下の画像が表示されたら、『閉じる』をクリックします。

mampインストール

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

mampインストール

下の画像が表示されたら、MAMPを開きます。

mampインストール

すると、始めてMAMPをインストールされる方のみ「警告」と表示され、その下に「設定ソフトウエアMAMP PROがインストールされました。サーバーの管理はMAMP PRO経由でのみ実行することをお勧めいたします。複数のプログラムを同時に実行すると予測できない結果を招く場合がございます」と表示され、さらにその下に「MAMP起動時にMAMP PROを確認」と表示され、その左横にチェックボックスがありますので、チェックをはずして下さい。

そして、その下に「MAMPを起動」と「MAMP PROを起動」が表示されてますので『MAMPを起動』をクリックします。(この部分の画像を撮り忘れ、掲載できなかったことをお詫び申し上げます。)

下の画像が表示されたら、『設定』をクリックします。

mampインストール

下の画像が表示されたら、二ヶ所にチェックマークが入っていることを確認し、その後、『ポート』をクリックします。

mampインストール

下の画像が表示されたら、ポートはデフォルトのままで問題ないので、『PHP』をクリックします。

mampインストール

下の画像が表示されたら、PHPもデフォルトのままで問題ないので、『Web サーバ』をクリックします。

mampインストール

下の画像が表示されたら、Web サーバもデフォルトのままで問題ないので、『OK』をクリックします。

mampインストール

下の画像が表示されたら、『オープンWebStartの』をクリックします。

mampインストール

下の画像がGoogleクローム上に表示され、画面を下へスクロールさせます。

mampインストール

下の画像が表示されたら。ユーザー名とパスワードをメモし、その後、『phpMyAdmin』をクリックします。

mampインストール

下の画像が表示されたら、『データベース』をクリックします。
mampインストール

下の画像が表示されたら、データベース名を入力します。私は、testと入力しましたが、お好みのデータベース名を英数字で入力して下さい。そして、入力したデータベース名をメモして下さい。

mampインストール

下の画像のように、データベース名入力欄の右隣りの欄は、プルダウンメニューから『utf8_general_ci』を選択し、その後、『作成』をクリックします。

mampインストール

下の画像のように、「このデータベースにはテーブルがありません。」と表示されますが、ワードプレスをインストールする際、自動的にテーブルが作成されるので、ここでは何もしません。MAMP上での作業はここまでです。

mampインストール

次にワードプレスをインストールしていきます。

まず、Googleクロームの別のタブで、ワードプレスの公式サイトにアクセスします。

ワードプレス公式サイト

下の画像が、ワードプレス公式サイトのトップページです。

ワードプレス インストール

下の画像のように、画面を下にスクロールさせて『WordPressをダウンロード』をクリックします。

ワードプレス インストール

ダウンロードが完了したら、Finderを開き、ダウンロードしたファイルを開きます。

ワードプレス インストール

下の画像にあるワードプレスフォルダをコピーします。

ワードプレス インストール

下の画像のように、Finderのアプリケーション内にあるMAMPフォルダを開きます。

ワードプレス インストール

下の画像が表示されたら、htdocsフォルダに、先程コピーしたワードプレスフォルダをペーストし、htdocsフォルダの中にワードプレスフォルダを入れます。

ワードプレス インストール

次に、Safariで http://localhost:8888/ と入力し、リターンキーを押します。

ワードプレス インストール

下の画像が表示されたら、『wordpress/』をクリックします。

注)万が一、下の画像が表示されなかった場合には、Firefox等のWebブラウザで http://localhost:8888/ と入力してみて下さい。

ワードプレス インストール

下の画像が表示されたら、画面を下へスクロールさせます。

ワードプレス インストール

下の画像が表示されたら、『さあ、始めましょう!』をクリックします。

ワードプレス インストール

下の画像が表示されたら、先程メモしたデータベース名、ユーザー名、パスワードを入力し、画面を下へスクロールさせます。

ワードプレス インストール

下の画像が表示されたら、『送信』をクリックします。

ワードプレス インストール

下の画像が表示されたら、『インストール実行』をクリックします。

ワードプレス インストール

下の画像が表示されたら、画面を下にスクロールさせます。

ワードプレス インストール

下の画像が表示されたら、サイトタイトル、ユーザー名、パスワード、メールアドレスを入力します。なお、ユーザー名とパスワードは先程メモしたものではございません。ここで入力したものが、今後、ローカル環境でワードプレスにログインする際に必要となるものです。したがって、お好みのものを入力して下さい。その後、『WordPressをインストール』をクリックします。

ワードプレス インストール

下の画像が表示されたら、『ログイン』をクリックします。

ワードプレス インストール

下の画像が表示されたら、二つ上の画像で入力したユーザー名とパスワードを入力し、その後、『ログイン』をクリックします。

ワードプレス インストール

下の画像が表示されたら、ワードプレスにログイン完了です。大変お疲れ様でした。

ワードプレス インストール

長くなりましたが、お忙しいところ、最後まで読んでいただいてありがとうございました。

スポンサーリンク