LOGBLOG/CONTACT2018.11.17toolMAMPのバーチャルホスト設定で複数のWordPress環境を作成し、かつスマホで実機確認も出来るようにするローカルでWordPressの開発環境などを作成する際に便利なMAMP。一つのサイトだけであれば特に不自由はしないのですが、バーチャルホスト設定をして複数の開発環境を作成、さらにそれをiPhoneなどで実機確認も出来るようにするにはちょっとしたコツが必要。今回はその方法を紹介していきます。MAMPはすでにインストールしてるよって方は目次から必要な部分まで読み飛ばしてくださいませ。「httpd-vhosts.conf」の編集URLの確認スマホで確認するには各サイトにWordPressをインストールデータベースを作成するWordPressのインストールWordPressの設定まずはMAMPのインストールインストールとダウンロードMAMPのインストーラを公式サイトからダウンロードします。https://www.mamp.info/en/トップにダウンロードへのリンクがあるのでそちらをクリックします。すると以下のダウンロード用の画面が出るのでOSを選んでダウンロードします。私はMac環境なので左側ですが、Win環境は右側のダウンロードボタンをクリックしてください。ダウンロードしたインストーラを開くと以下の画面が出るので流れに沿ってインストールします。初期設定の動作を確認インストールしたMAMPを起動、歯車アイコンからwebサーバの設定を確認します。Serverをクリック。以下のような画面が表示されると思います。htdocsに置いた中身がwebサイトとしてみれますよー的な意味です。その場所にテスト用のファイルを置いてみましょう。こんな感じのindex.phpとかですね。?>そしたらMAMPからサーバを起動。アクセスしてみましょう。Worldが表示されていたらOKです。今回はさらに複数の環境を作成し、WordPressもインストールしたいのでさらに設定を進めていきます。編集するのは以下二つのファイルです。/Applications/MAMP/conf/apache/httpd.conf/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf「httpd.conf」の編集バーチャルホストの設定ファイルを読み込むために「/Applications/MAMP/conf/apache/httpd.conf」を編集します。/Applications/MAMP/conf/apache/extra/httpd-vhosts.confこのように編集。「/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf」を編集して複数の環境を作成できるように設定をします。「httpd-vhosts.conf」を開くと27-42行目まで記入例が記載されてますが、不要なのでコメントアウトしてしまいましょう。その下にポート番号やドキュメントルートなどを追加していきます。"/Applications/MAMP/htdocs/demo-04"</VirtualHost>この記述で4サイト分の記述を追加したことになります。ちなみにポート番号に関してはご参考までに:ポート番号の種類URLの確認では実際にブラウザで確認してみましょう。MAMPを再起動した後に以下のURLにアクセスしてみます。「/Applications/MAMP/htdocs/demo-01/」に入れた内容は「http://localhost:49152」で。・「http://localhost:49155」とブラウザで閲覧できる状態になっていると思います。ちなみに「/Applications/MAMP/htdocs/」の中身は「http://localhost:8888」で表示されます。スマホで確認するにはバーチャルホストで作成したurlはApacheを動かしている端末だけでしか認識できないので、そのままではスマホなどで閲覧ができません。エミュレーターでの確認ではやはり不十分なので実機で確認できるようにしましょう。難しい設定をする必要はありません。「共有」を開くとコンピューター名とアドレスを設定・確認することができます。「コンピュータ名」の下に記載されているアドレスでこのコンピュータにアクセスできますので控えておいてください。(例:mbp.local)このMacのアドレスにMAMPのポート番号をつけて入力するとPC本体・スマホでも共通のurlで確認することが可能になります。※スマホがPCと同じWi-fi環境になっていることが前提です。サーバー機能をいじったりしなくても見れるのでこれで十分かと。各サイトにWordPressをインストールデータベースを作成するMAMP画面の真ん中にあるアイコン部分からスタートページにアクセスします。画面左下の方にあるリンクから「phpMyAdmin」を開きます。データベースのタブを選択し、データベース名を入力して「Create」をクリック。「utf8_general_ci」の部分はそのままで大丈夫です。これで「demo-01」というデータベースが作成されました。次にこのデータベースとWordPressを連携させていきます。公式サイトにアクセスしてWordPressのzipファイルをダウンロードします。ダウンロードした圧縮ファイルを解凍し中身をWordPressを設置するドメインのフォルダに移動します。今回の例でいうと「/Applications/MAMP/htdocs/demo-01」のフォルダ内に移動します。※「wp」フォルダなどに格納したい場合はフォルダを作成するなど適時対応してください。これでWordPressのインストール環境は整ったので各サイトでWordPressの設定をしていきます。「/Applications/MAMP/htdocs/demo-01」のフォルダ内にWordPressのファイルを入れたので「http://localhost:49152」にアクセスするとWordPressの設定画面が開きます。スマホでもWordPressサイトを確認したい場合は「http://localhost:49152」から設定をするのではなく、Macのアドレスを使用した「https://oku-log.com」の方からWordPressを設定をしてください。後からでも変更はできるのですが「http://localhost:49152」で設定を進めたとしても、スマホでは「https://oku-log.com」で確認することになります。WordPressは設定された通りにlocalhostのurlを参照するのですが、スマホだとlocalhostにアクセス出来ず正常にWordPressのサイトを閲覧できなくなります。具体的な設定方法はこんな感じです。後はサイト名やメールアドレスなど必要な情報を入力していけばWordPressの設置が完了。これを各サイトで行えばMAMPのバーチャルホスト設定で複数のWordPress環境を作成し、かつスマホでの実機確認も出来るようになります。ちなみにiPhoneで実機確認するとこのようになります。最初は少々面倒ですが、一度環境を作ってしまえば後は通常のサイト制作と同じように進めていけるかと思います。SQLite】SQLiteのデータベースをGUIで更新する方法2017.08.27toolテンプレートを使用してamp対応のwebサイトを制作するCONTACTご意見やご感想、お仕事のご依頼などお気軽にご連絡ください。