1-1 : 開発環境の設定(MAMP)

2019/05/29

概要

開発を行う上で必要となるソフトウェアをインストールします。

  • 開発用テキストエディタ
    • Visual Studio Code
  • ブラウザ
    • Chrome
  • Webサーバー、Database、PHP
    • MAMP(マンプ) ※1

※1. MAMPとは Mac上で動くApache、MySQL、PHP環境をセットにしたソフトウェアです。

開発用コードエディタ

開発用エディタとしてVisual Studio Codeを利用します。Visual Studio Codeはマイクロソフト社が提供している無償の開発用エディタです。
自分が利用したいテキストエディタがある場合は、そちらを利用してください。

また、テキストエディタとリッチテキストエディタやメモ帳などの違いがよくわからない方はVisual Studio Codeをインストールしてください。

Mac用をダウンロードして、インストールしてください。
インストールすると次のような画面が表示されます。

表示されればOKです。

ブラウザのインストール

確認用のブラウザとしてChromeを利用します。
Chromeをインストールしていない方は以下のURLからダウンロードしてインストールしてください。

https://www.google.com/intl/ja/chrome/

デベロッパーツール

Chromeのデベロッパーツールは、デバッグや動作確認でよく利用します。
Chromeの右上のメニュー（三点リーダーのアイコン）をクリックして、その他のツール - デベロッパーツール で起動できます。覚えておきましょう。

MAMPのインストール

ダウンロード

以下のサイトからMAMP& MAMP PRO 5.3 をダウンロードします。

ダウンロードしたら、pkgファイルを展開してインストールを開始します。

インストール

インストールは基本的に設定するものはないので、画面に従って次に進んでいけばインストールできます。
※途中でパスワードを聞かれる箇所がありますが、パスワードを入力して進んでください。


インストールが完了しましたのメッセージが表示されれば終了です。

動作確認

インストールが完了したら起動を確認します。Lanchpad から MAMPを起動します。
MAMPの管理アプリが起動します。 Start Serversをクリックして、サーバーを起動します。

起動すると、ブラウザが起動します。

アドレスバーに localhost:8888/MAMP/?language=English が入っているページが表示されていればMAMPが動作しています。

MAMPの設定

MAMPの設定画面は、MAMPを開いた状態でmacのツールバーからPreferencesを開きます。

各サーバーのポート

サーバーのポートの変更方法を説明します。基本的に以下の操作は行わなくても大丈夫ですが、もし変更が必要になった場合は、以下の手順を実行してください。

Portsタブを開くとApache,MySQLのポートを確認できます。
以下の図では、Apacheは 8888、MySQLは8889で動いています。

ポート番号を変更したい場合は、数字を変更します。
例えば、Apacheを8080に変更してOKをクリックすると、先ほどブラウザで8888で動いていたページが、8080で表示できるように変更されています。

ポート番号が変更されています。

変更した場合はポートを8888に戻しておきましょう。

Document rootの確認

Document rootはWebサイトのコンテンツファイルをおく場所です。WebrootにHTMLやCSSをおくと、ブラウザから表示できるようになります。

Preferencesを開き、Web Serverタブを開きます。
Document Root: の箇所に表示されている場所がコンテンツファイルを置く場所です。変更したい場合はSelectをクリックして、変更したい場所を選択して、OKをクリックします。
ここではデフォルトのままとします。

PHPのバージョン確認

PHPは7.2を使います。**phpのタブを開き、バージョンを7.2に変更します。

PHPの設定

次に、PHPの設定ファイルを編集して次の変更を行います。ターミナル というアプリケーションを起動します。

  • timezone
  • error 出力

次のコマンドを入力しましょう。

$ ls /Applications/MAMP/bin/php/
browscap.ini    php5.6.40   php7.1.26   php7.3.1
php5.4.45   php7.0.33   php7.2.14

先ほど、php7.2.14を設定したので、php7.2.14の設定ファイルを開きます。
vi というエディタを使って開きます。次のコマンドを入力してください。

$ vi /Applications/MAMP/bin/php/php7.2.14/conf/php.ini

実行すると、下画面のような設定ファイルが表示されます。

[PHP]

;;;;;;;;;;;;;;;;;;;
; About php.ini   ;
;;;;;;;;;;;;;;;;;;;
; PHP's initialization file, generally called php.ini, is responsible for
; configuring many of the aspects of PHP's behavior.

; PHP attempts to find and load this configuration from a number of locations.
; The following is a summary of its search order:
; 1. SAPI module specific location.
; 2. The PHPRC environment variable. (As of PHP 5.2.0)
; 3. A number of predefined registry keys on Windows (As of PHP 5.2.0)
; 4. Current working directory (except CLI)
; 5. The web server's directory (for SAPI modules), or directory of PHP
; (otherwise in Windows)
; 6. The directory from the --with-config-file-path compile time option, or the
; Windows directory (C:\windows or C:\winnt)
; See the PHP docs for more specific information.
; http://php.net/configuration.file

表示された状態で次のコマンドを入力します。

/date.timezone

Enterで実行すると、date.timezone という設定項目が検索され、該当行が表示されます。

**検索表示された行***

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
**;date.timezone = "Europe/Berlin"**

; http://php.net/date.default-latitude

この行を次のように変更します。(-の行が変更前、+の行が変更後です）
キーボードからiを入力すると、画面下部に -- INSERT -- という表示がされ、編集モードに変わるので、通常のテキストファイルを変更するように、該当箇所を変更します。

/Applications/MAMP/bin/php/php7.2.14/conf/php.ini

; Defines the default timezone used by the date functions
; http://php.net/date.timezone
- ;date.timezone = "Europe/Berlin"
+ date.timezone = "Asia/Tokyo"

変更が終わったら esc キーを押して :wq を入力、Enterキーで、上書き保存されてテキストエディタが終了します。

これで変更が終了しました。
このままでは変更が反映されないので、設定ファイルを編集したら必ず管理アプリから再起動しましょう。

一度停止します。

停止後再度同じボタンを押して、開始します。

MySQLの設定

MySQLはターミナルを使って、テキストベースのコマンドラインでデータベースを操作することができます。コマンドラインで実行するためには、パスを通す作業を行う必要があります。

パスの設定

MAMPをインストールしただけではMySQLにパスが通っていないのでターミナルからmysqlコマンドが使えるよう、パスの設定をします。
試しに、mysqlと入力してみてください。command not found と返ってくるはずです。

パスは自分のホームディレクトリ直下にある.bash_profileを編集します。

$ cd
$ vi .bash_profile

i を入力して INSERTモードに切り替え、次の内容を末尾に追記します。

~/.bash/profile

export PATH=$PATH:/Applications/MAMP/Library/bin

追記が終わったら esc を押し、wq と入力して終了します。

追記した設定を有効化します。

$ source .bash_profile

設定が有効かmysqlコマンドを実行してみましょう。

$ mysql -u root -p
Enter password:

パスワードを入力します。
MAMPのmysqlの初期パスワードは「root」です。

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 7
Server version: 5.7.25 MySQL Community Server (GPL)

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

上記のようにmysqlのコンソールに接続できれば設定終了です。

「 1. 開発環境を整える 」 の記事一覧 【 事前準備 】 トップページに戻る