MAMPを使ってMacにEC-CUBEのテスト環境を構築する方法

MAMPを使ってMacにEC-CUBEのテスト環境を構築する方法

こんにちは。ネットショップコンサルタントの「たぶ」(@yusuke_tanaka34)です。

今日は「MAMPを使ってMacにEC-CUBEのテスト環境を構築する方法」をご紹介します!

「EC-CUBE」でこれからネットショップを作る時や「EC-CUBE」でネットショップを運営している時に、こんなことを思いませんか?

たぶくん
ファイルをいじって、直接ネット上にアップするのは恐いなぁ。パソコン上でテストしてからアップしたいなぁ。

分かります。直接、ファイルをいじってそのままアップロードするのって恐いですよね。

そんな時に便利なのが「MAMP」

パソコン上にデータベースなどのテスト環境を構築することができる、とっても便利なアプリケーションです。

僕も「EC-CUBE」や「WordPress」でWebサイトを構築する時は、必ず「MAMP」を使いテスト環境で試してから、本番環境にアップロードします。

この記事に書いている順番に読み進めてもらえれば、パソコン上に「MAMP」を使ってテスト環境を構築することができます。

テスト環境を構築することで、一度パソコン上で試してからファイルをアップロードできるので安心です。

それでは、実際に「MAMP」をインストールする手順から「EC-CUBE」のインストールまで、詳しくお伝えをしていきますね。




「MAMP」とは

「MAMP」とは

「MAMP(マンプ)」とは、Webアプリケーションを動かすために必要な「Apache」「MySQL」「PHP」という3つのソフトウェアをパッケージにしたものです。

MAMP

【MAMP公式サイト】

「Windows」では「XAMPP(ザンプ)」というアプリケーションが有名です。(できることはほぼ一緒。)

XAMMP

【XAMPP公式サイト】

ただ、「MAMP」は「データベース管理ツール」が「MySQL」なのに対し、「XAMPP」「MariaDB」を使用している点が違います。

「MariaDB」は「MySQL」が派生して開発された「データベース管理ツール」なのですが、「MySQL」の方が一般的に使われているので、今回は「MySQL」を使用してる「MAMP」でテスト環境を構築していきます。

「MAMP」は「Macintosh」「Apache」「MySQL」「PHP」の頭文字を取ったもので、最初はMac専用の「データベース管理ツール」として開発されていました。

しかし、現在(2018年11月)では、「Windows」でも「MAMP」を使用できるようになっています。

「MAMP」は「Apache」「MySQL」「PHP」をパッケージとして一気にインストールすることができるので、ダウンロードしてドラッグ&ドロップするだけで簡単にパソコン上に本番と同じ環境を作ることができるのです。

「EC-CUBE」や「WordPress」のようなPHPプログラムの開発には必須のアプリケーションですね。

「MAMP」をダウンロードすると分かるのですが、無料の「MAMP」と有料の「MAMP PRO」があります。

「MAMP PRO」はプロのWeb開発者やプログラマーのために設計されたアップグレードバージョン。

メールサーバーの機能が使えたり、PHPやApacheのバージョンの切り替えができたりと、かなり多機能になっています。

あと、最近では「MAMP Cloud」というサービスもあり、クラウド上に開発環境を置くことができるようになっています。

ただ、『「EC-CUBE」や「WordPress」のテスト環境を作りたい。』という意味では、無料の「MAMP」で十分です。

それでは、次に「MAMP」のインストール方法をご紹介していきますね。




「MAMP」のダウンロードとインストール

「MAMP」のダウンロードとインストール

まず、「MAMP公式サイト」から、インストールに必要なプログラムファイルをダウンロードします。

MAMP公式サイト

【MAMP公式サイト】

1.左真ん中あたりにある「MAMP」の「Free Download」ボタンをクリック。

「MAMP」の「Free Download」ボタンをクリック

2.windowsの場合は右の「MAMP & MAMP PRO 4.0.1」ボタンを、Macの場合は左の「MAMP & MAMP PRO 5.2」ボタンをクリック。

windowsは「MAMP & MAMP PRO 4.0.1」ボタンを、Macは「MAMP & MAMP PRO 5.2」ボタンをクリック

WindowsとMacのロゴがついているので、分かりやすいですね!

2018年11月15日時点でのバージョンは、Windowsは「MAMP & MAMP PRO 4.0.1」、Macは「MAMP & MAMP PRO 5.2」でした。

3.ダウンロードが開始され、下記のような画面が表示されます。

MAMPのダウンロード完了画面

4.ダウンロードフォルダに入った「MAMP_MAMP_PRO_○.○.pkg」というファイルをダブルクリックします。

「MAMP_MAMP_PRO_○_○.pkg」というファイルをダブルクリック

5.MAMPのインストーラが開くので、「続ける」をクリックします。

MAMPのインストーラが開くので「続ける」をクリック

6.「大切な情報」が表示されるので、「続ける」をクリックします。

「大切な情報」が表示されるので「続ける」をクリック

7.「使用許諾契約」が表示されるので、「続ける」をクリックします。

「使用許諾契約」が表示されるので「続ける」

ちなみに、この「使用許諾契約」は言語を「英語」と「ドイツ語」しか選択できないので、全部読むのは至難の業です。(笑)

8.「このソフトウェアのインストールを続けるには、ソフトウェアの使用許諾契約の条件に同意する必要があります。」と表示されるので、「同意する」をクリックします。

ソフトウェアの使用許諾契約の条件に同意する

9.インストールの確認画面が表示されるので、「インストール」をクリックします。

インストールの確認画面が表示されるので「インストール」をクリック

10.「インストーラが新しいソフトウェアをインストールしようとしています。」と表示されるので、「ユーザー名」と「パスワード」を入力して「ソフトウェアをインストール」をクリックします。

「ユーザー名」と「パスワード」を入力して「ソフトウェアをインストール」をクリック

11.インストールが開始されます。

インストールが開始されます。

12.数分でインストールが完了します。

数分でインストールが完了します

13.「”MAMP & MAMP PRO ○.○”のインストーラをゴミ箱に入れますか?」と表示されるので、「ゴミ箱に入れる」を選択しちゃって大丈夫です。

「MAMP & MAMP PRO ○.○」のインストーラをゴミ箱に入れます

以上で、「MAMP」のダウンロード&インストールは完了です。お疲れ様でした!

次に「MAMP」の設定を行います。

「MAMP」の設定

「MAMP」の設定

次に「MAMP」の設定を行っていきます。

1.「アプリケーションフォルダ」の中に「MAMP」フォルダが入っているので、クリックします。

アプリケーションフォルダの「MAMP」フォルダをクリック

2.「MAMP」フォルダの中の「MAMP」のアイコンをクリックします。

「MAMP」のアイコンをクリック

3.「MAMP」が立ち上がります。

「MAMP」のスタート画面

4.メニューの「MAMP」を押し「Preferences…」をクリックします。

メニューの「Preferences...」をクリック

5.「Ports」の「Set Web & MySQL ports to 80 & 3306」ボタンをクリックします。

「Ports」の「Set Web & MySQL ports to 80 & 3306」ボタンをクリック

6.各ポートの数字が「80」と「3306」に変わるので「OK」をクリックします。

各ポートの数字が「80」と「3306」に変わるので「OK」をクリック

7.「MAMP needs to launch its helper tool to be able to start and stop servers, change users and use cloud functions.」と表示されるので、「ユーザー名」と「パスワード」を入力して「OK」をクリックします。

「ユーザー名」と「パスワード」を入力して「OK」をクリック

以上で、「MAMP」の設定は終了です。お疲れ様でした!

次に、データベースに「EC-CUBE」用のテーブルを作成します。

データベースに「EC-CUBE」用のテーブルを作成

データベースに「EC-CUBE」用のテーブルを作成

次に「MAMP」に入っている「phpMyadmin」を使用し、データベースに「EC-CUBE」用のテーブルを作成していきます。

1.「MAMP」を立ち上げ「Start Servers」をクリックします。

「MAMP」を立ち上げ「Start Servers」をクリック

2.真ん中の「Open WebStart Page」をクリックします。

真ん中の「Open WebStart Page」をクリック

3.ブラウザが立ち上がるので、下の方にスクロールします。

ブラウザが立ち上がるので、下の方にスクロール

4.「phpMyadmin」というリンクがあるので、クリックします。

「phpMyadmin」というリンクをクリック

5.データベースが表示されるので「Databases」をクリックします。

「Databases」をクリック

6.赤枠の部分にお好きなデータベース名を入れ、「Create」ボタンをクリックします。

赤枠の部分にお好きなデータベース名を入れ「Create」ボタンをクリック

この時、真ん中の部分は「utf8_general_ci」になっていることを確認してください。

8.左側のデータベース一覧に新しいデータベースが作成されています。

左側のデータベース一覧に新しいデータベースが作成されています

以上で、「EC-CUBE」用のデータベースの作成が完了です。お疲れ様でした!

次の項目で使うので、作ったデータベースのテーブル名は覚えておいてくださいね。

「EC-CUBE」のダウンロードとインストール

「EC-CUBE」のダウンロードとインストール

次に「EC-CUBE」をダウンロード&インストールしていきます。

「EC-CUBE」のダウンロードに関しては、下記の記事でも説明していますが、念のため再度ダウンロード方法を解説しますね。

EC-CUBE2のインストール方法と具体的な手順

EC-CUBE2のインストール方法と具体的な手順

2018年7月30日
EC-CUBE3の インストール方法と具体的な手順

EC-CUBE3のインストール方法と具体的な手順【2019年版】

2018年7月3日

「EC-CUBE」のダウンロード

最初に「EC-CUBE」のダウンロードから解説します。

まず、EC-CUBE公式サイトから、「EC-CUBE」のデータをダウンロードします。

EC-CUBE公式サイト

【EC-CUBE公式サイト】

1.メニューにある「無料ダウンロード」ボタンをクリックします。

メニューにある「無料ダウンロード」ボタンをクリック

2.「無料ダウンロード」ページに入り、下にスクロールしていきます。

「無料ダウンロード」ページで下にスクロール

3.「最新版ダウンロード」ボタンをクリックします。

「最新版ダウンロード」ボタンをクリック

今回は「EC-CUBE3.0.16」で設定を行います。

4.「EC-CUBEメンバー」の方はログインしてください。

「EC-CUBEメンバー」の方はログイン

5.「EC-CUBEメンバー」ではない方は「新規メンバー登録(無料)」ボタンをクリックします。

「EC-CUBEメンバー」ではない方は「新規メンバー登録(無料)」ボタンをクリック

6.「EC-CUBEメンバー新規登録画面」で必要事項を入力してください。

「EC-CUBEメンバー新規登録画面」で必要事項を入力

「EC-CUBEメンバー新規登録画面」で入力する項目は以下の通りです。

【EC-CUBEメンバー新規登録画面で入力する項目】

  1. 会社名
  2. お名前※必須
  3. 都道府県※必須
  4. メールアドレス※必須
  5. 職種※必須
  6. 業種※必須
  7. 希望するパスワード※必須
  8. メールマガジンが不要な場合はチェック

7.次に利用規約を読んで「上記の利用規約に同意する」にチェックを入れ「確認ページへ」をクリックします。

利用規約に同意して「確認ページへ」をクリック

8.登録内容を確認して「完了ページへ」をクリックします。

「完了ページへ」をクリック

9.「仮登録が完了いたしました。」と表示されます。

「仮登録が完了いたしました。」と表示

10.「EC-CUBEメンバー登録のご確認メール」が送られてくるので、本登録URLをクリックします。

「EC-CUBEメンバー登録のご確認メール」にある本登録URLをクリック

11.「登録が完了いたしました。」と表示されます。

「登録が完了いたしました。」と表示

12.「EC-CUBEメンバー登録のご完了メール」を確認します。

「EC-CUBEメンバー登録のご完了メール」を確認

13.再度、画面上部の「無料ダウンロード」をクリックします。

「無料ダウンロード」を再度クリック

14.再度「最新版ダウンロード」ボタンをクリックすると、ダウンロードが開始されます。

再度「最新版ダウンロード」ボタンをクリック

15.ダウンロードした「EC-CUBE」のファイルをダブルクリックします。

「EC-CUBE」のファイルをダブルクリック

16.解凍された「EC-CUBE」のフォルダをダブルクリックします。

解凍された「EC-CUBE」のファイルをダブルクリック

17.フォルダを開くと以下のようなファイルが入っています。

EC-CUBEのフォルダ内一覧

18.もう一度「MAMP」を開き、中にある「htdocs」フォルダを開きます。

「MAMP」フォルダの中にある「htdocs」フォルダを開く

19.先ほど開いた「EC-CUBE」フォルダから「htdocs」フォルダにファイルを移動します。

「EC-CUBE」フォルダから「htdocs」フォルダにファイルを移動

「EC-CUBE3」の場合、移動するファイルは、

  1. app
  2. html
  3. src
  4. vendor
  5. autoload.php
  6. cli-config.php

の6つ。

20.「EC-CUBE」のファイルを移動するとこんな感じになります。

「EC-CUBE」のファイルを移動後

21.再度「MAMP」を立ち上げ、「Start Server」をクリックします。

再度「MAMP」を立ち上げ「Start Server」をクリック

22.「Google Chrome」などのWebブラウザに「localhost/html/」と打ち込みます。

ブラウザに「localhost/html」と打ち込む

23.すると、URLが「localhost/install/step1」に変わり、EC-CUBEのインストール画面が開きます。

URLが「localhost/install/step1」に変わる

【EC-CUBEのインストール画面】

EC-CUBEのインストール画面

以上で、「EC-CUBE」のダウンロードが完了です。お疲れ様でした!

「EC-CUBE」のインストール

次に「EC-CUBE」のインストールを行っていきます。

1.「EC-CUBE」のインストール画面で「次へ進む」ボタンをクリックします。

EC-CUBEのインストール画面で「次へ進む」ボタンをクリック

2.「権限チェック」画面で問題がなければ「次へ進む」ボタンをクリックします。

「権限チェック」画面で「次へ進む」ボタンをクリック

3.次に「サイトの設定」画面で必要事項を入力します。

「サイトの設定」画面で必要事項を入力

入力する項目は以下の通り。

あなたの店名※必須お好きなお店の名前を入力。
メールアドレス※必須お店の運営で使用するメールアドレスを入力。
管理画面ログインID※必須お好きな半角英数4文字以上50文字以内を入力。
管理画面パスワード※必須お好きな半角英数8文字以上32文字以内を入力。
管理画面のディレクトリ名※必須管理画面へのURLを入力します。(下記のURLの部分)
http://○○.com/□□□□/
お好きな半角英数4文字以上50文字以内を入力。
サイトへのアクセスを、SSL(https)経由に制限します。SSLサーバー証明書をインストール済で、URLがSSL(https://で始まるアドレス)経由の場合、チェックを入れます。
チェックをしなくても先に進めます。
管理画面へのアクセスを、以下のIPに制限します。管理画面へのアクセスを許可したIPアドレスのみにしたい場合、IPアドレスを入力します。
入力しなくても先へ進めます。

※オプションは入力しなくて大丈夫です。

4.こんな感じで必要項目を入力したら、「次へ進む」ボタンをクリックしてください。

必要項目を入力したら「次へ進む」ボタンをクリック

5.次に「データベースの設定」画面で必要項目を入力し、「次へ進む」ボタンをクリックします。

「データベースの設定」画面で必要項目を入力し「次へ進む」ボタンをクリック

入力する項目は以下の通り。

データベースの種類※必須「MySQL」を選択してください。
データベースのホスト名localhost
ポート番号3306
データベース名※必須先ほど作成したデータベースの「データベース名」を入力。
ユーザ名※必須root
パスワード※必須root

データベース情報を確認する方法はこちら

6.こんな感じで入力します。

「データベースの設定」画面入力例

7.「データベースの初期化」画面が表示されるので、そのまま「次へ進む」ボタンをクリックします。

「データベースの初期化」画面で「次へ進む」をクリック

8.以上で「EC-CUBE」のインストールは完了です!

「EC-CUBE」のインストールが完了しました。

9.管理画面にログインしてみましょう。

EC-CUBEログイン画面

10.「html/install.phpは、インストール完了後にファイルを削除してください」と表示されています。

html/install.phpは、インストール完了後にファイルを削除してください

11.「MAMP/html」フォルダに入っている「install.php」を削除します。

「MAMP/html」フォルダに入っている「install.php」を削除

以上で、「MAMPを使ってMacにEC-CUBEのテスト環境を構築する方法」はすべて終了です。お疲れ様でした!

データベース情報を確認する方法

データベース情報を確認する方法

最後に「EC-CUBE」のインストールで打ち込んだ「MAMP」のデータベース情報を確認する方法を解説します。

「MAMP」で設定するデータベース情報はあらかじめ決まっているので、ここで確認した情報を入力してください。

1.まず、「MAMP」を開き「Start Server」をクリックします。

「MAMP」を開き「Start Server」をクリック

2.サーバーが立ち上がったら、「Open WebStart page」をクリックします。

「Open WebStart page」をクリック

3.Webブラウザが立ち上がります。

Webブラウザが立ち上がります。

4.下にスクロールすると「MySQL」の項目にデータベース情報が記載されています。

「MySQL」の項目にデータベース情報が記載されています

【MAMPのデータベース情報】

MAMPのデータベース情報

「EC-CUBE」をインストールする際に、ここに書いてあるデータベース情報を打ち込んでくださいね。




まとめ

今回は「MAMPを使ってMacにEC-CUBEのテスト環境を構築する方法」というテーマでお送りしてきました。

「MAMP」を使って「EC-CUBE」のテスト環境は構築できましたでしょうか?

もう一度おさらいすると、「MAMP」とは

Webアプリケーションを動かすために必要な「Apache」「MySQL」「PHP」という3つのソフトウェアをパッケージにしたもの

です。また、「MAMP」を使ってMacに「EC-CUBE」のテスト環境を構築する手順についてまとめると、

  1. 「MAMP」をダウンロードする。
  2. 「MAMP」をインストールする。
  3. 「MAMP」を設定する。
  4. 「データベース」にEC-CUBE用のテーブルを作成する。
  5. 「EC-CUBE」のダウンロードする。
  6. 「EC-CUBE」をインストールする。

という流れでした。

「EC-CUBE」や「MAMP」について他にも気になることがありましたら、お問い合わせまでご連絡ください。

「MAMP」を使って、スムーズなネットショップの運営を行ないましょう!

以上、ネットショップコンサルタントの「たぶ」でした。

こちらの記事もおすすめです。

EC-CUBEをインストールする時に URLからhtmlを消す2つの方法

EC-CUBEをインストールするときにURLからhtmlを消す2つの方法

2018年7月4日
EC-CUBE3のネットショップにSSLを導入する方法

EC-CUBE3のネットショップにSSLを導入する方法

2018年6月30日

ABOUTこの記事をかいた人

通称:たぶ
30代中頃、東京都在住。
ネットショップコンサルタント。
EC-CUBE、ASP、ショッピングモールなど各種ネットショップでの売上UPが得意。
アパレル系のネットショップの売上を4倍に増やし、月商900万円、年商1億円を達成。
ネットショップ運営の数なら誰にも負けません。
最近、ポメラニアンが気になる。
炊きたての白米が何もよりも好き。