ローカルとは、自分のパソコンのことで、そこに疑似サーバーを構築して、開発するための環境を構築しましょう。
というのが、今回のお話です。
WordPressが自分のパソコンで動いてくれたらうれしくないですか？
サーバー上で直接開発しても問題なくはないですが、いちいち、FTPでファイルをアップするのも面倒ですし、すでに公開中のものだったりすると…怖くてたまりません。
それに比べ、ローカル環境でなら、いくらミスしてもエラーが出ても、何の支障もありません。
そこで、テストやチェックを行い、「大丈夫！」となったらサーバーにアップできれば安心です。
ですので、ローカル開発環境は絶対に必要になってきます。
開発環境を構築できるツール
ローカルに開発環境を構築するための一般的なツールは、これらが挙げられます。
- XAMPP
- MAMP
- Local（旧 Local By Flywheel）
この中で、一番簡単に導入できるのは、「Local」ですが、個人的には「XAMPP」か「MAMP」をお勧めします。
「XAMPP」と「MAMP」は「何が違うの？」と尋ねられても答えられないほど、似たようなツールで、「XAMPP」はWindows、「MAMP」はMacという認識でしかありません。
ただ、どちらも、Windows版・Mac版がありますので、Macに「XAMPP」、Windowsに「MAMP」をインストールできます。
ちなみに、ボクはWindowsで「MAMP」を使ってメインに開発している変わり者です。
MAMPのインストール
公式サイトからMAMPをダウンロードします。
インストーラーを起動して「next」で次の画面に進みます。
今回は「MAMP PRO」も「Apple Bonjuor」も必要ないのでチェックを外して、次の画面へ進みます。
ライセンスの同意を求められますので、「I accept the agreement」を選択して、次の画面の進みます。
インストール場所を尋ねられますので、好きな場所を指定します。
よくわからないときは、デフォルトのままにして次へ進みます。
メニューへのショートカット先を尋ねられるので、先ほどインストールした場所を選択してください。
デフォルトのままなら、そのまま次に進みます。
デスクトップにアイコンを作るかどうか尋ねられます。必要ないなら、チェック外してください。
後からいつでも生成・削除できるので、よくわからないときは、そのままにして次に進みます。
インストールの準備ができました。
内容を確認して「Install」でインストールします。
次の画面になればインストールは完了です。「Finish」でインストーラーを終了させましょう。
MAMPの設定
インストールが完了したら「MAMP」を起動します。
MAMPのコントロールパネル左上の「MAMP」から「Preferences」を開きます。
「Ports」に移動して、「80 & 3306」をクリックして、ポートの設定をします。
次に「Server」に移動して、「Document Root」を確認してください。
デフォルトでは、インストールした場所の「htdocs」が指定されています。
この「htdocs」内で作業していきますので、結構なファイル数をここに置くことになります。
Cドライブの容量に不安のある方は、別ドライブに変更することをお勧めします。
ボクはDドライブに「hrdocs」というフォルダを別に作り、そこで作業をしています。
ここではデフォルトの状態で進めます。
「OK」をクリックして設定を終了します。
localhostにアクセス
ブラウザを開いて「http://localhost」にアクセスしてみると、このような画面になります。
ざっくりいうと、接続は成功しているので「htdocs」内の「index.php」を削除してくださいってことです。
ですので、インストールした「MAMP」ディレクトリの「htdocs」に移動して「index.php」削除します。
※ボクは削除せず「__index.php」とリネームして、念のためとっておいてあります。
すると画面がこのように変わり、「htdocs」にアクセスできたことが確認できると思います。
これで、開発するための準備が整いました。
MAMPにWordPressをインストール
それではMAMPに「WordPress」をインストールしていきましょう。
WordPressの準備
まずは、WordPress公式サイトから本体コアファイルをダウンロードします。
解凍したら「htdocs」に設置します。
フォルダ名は好きに変えてください。その名前がそのままURLになります。
ここでは、フォルダ名を「wp-test」にしてみました。
「http://localhost」にアクセスすると「wp-test」のリンクができていますので、アクセスします。
WordPressのインストールが始まる画面になります。
データベース接続のために、いろいろ入力を求められます。
そもそも、このWordPress用のデータベースを作っていないので、「データベース名」すらわかるわけありません。
というわけで、データベースを作成していきましょう。
データベースの作成
MAMPのコントロールパネルの「Open Webstart page」をクリックするとMAMPのスタートページが開きます。
「http://localhost/MAMP/」と直接アクセスしても大丈夫です。
そのページの中段に「MySQL」というブロックがあります。
そこに「phpMyAdmin」というリンクがありますので、そこから「phpMyAdmin」を開きます。
英語表記では分かりにくいので、「Language」を「English」から「日本語」に変更して、日本語表記にします。
メニューの「データベース」から、データベースを作成します。
「データベース名」は好きな名前を付けてください。
サイト名に関係する名前にしておくと、データベースが増えたとき、戸惑わなくなります。
ここでは「test_db」にしました。
照合順序はMySQLのデフォルトの「utf8_general_ci」のままで大丈夫です。
「作成」をクリックしてデータベースを作成します。
データベースの一覧に「test_db」が確認できます。
データベースと接続
先ほどのMAMPスタートページの「MySQL」のブロック戻ると、接続情報が記載されています。
MAMPでは、データベースに接続するための「ホスト名」は「localhost」、「ユーザー名」「パスワード」は「root」だと確認できます。
つまり、WordPressとデータベースを接続するために必要な情報はこのようになります。
データベース名 … 「test_db」
ユーザー名 … 「root」
パスワード … 「root」
データベースのホスト名 … 「licalhost」
これらを入力して「送信」します。
データベースとの接続に成功したら「インストール実行」です
WordPressのインストール
必要事項を入力していくのですが、ローカルで動くものなので、セキュリティとか気にしなくて問題ありません。
「ユーザー名」や「パスワード」は簡単で覚えやすいものにしておいた方が良いでしょう。
実際にメールが来ることはありませんので、「メールアドレス」は普段使っているものでもかまいませんし、適当なメアドでもかまいません。
今回のWordPrss設定情報はこのようにしました。
最後に「WordPressをインストール」をクリックします。
次のような画面になれば、インストール成功です。
最後にまとめ
MAMPのインストールからWordPressのインストールまでを簡単に説明しました。
今さら感が強いとは思うのですが、そういえば、説明したことなかったなと思ったので、記事にしてみました。
開発環境があるというのは、作業のあり方を根本から変えてくれます。
また、データベースを触る機会が増えてくれば、知識・技術の幅も大きく広がることになるはずです。