自分もそうなのですが、デザイナー寄りの人にとって開発用のWebサーバーを自前で用意するのはなかなか敷居が高いものです。しかし、XAMPPを使えば、あっという間に、しかも簡単に自分のローカルマシーン上にWebサーバー(Apache)を用意できてしまいます。PHPやデーターベース(MySQL)もインストールされるので、WordPressも使えますし、phpを使った小規模なバックエンド開発も行なえます。

今回は、とても便利なこのXAMPPのインストールと基本的な使い方に関して扱いたいと思います。

スポンサーリンク




目次

  1. どのバージョンをインストールするか
  2. インストール方法と使い方
  3. 設定の変更方法

1. どのバージョンをインストールするか

執筆時点の最新バージョンは7.3.1ですが、バージョン7系からVMware(仮想マシン)化してしまい、DocumentRootを含めたXAMPP全体が仮想マシンとしてマウントされるようになりました。その結果localhostが使えなくなり、Macが接続している実アドレス(192.168.1.x 等)のネットワークまでも使えなくなってしまったのです。

つまり同じLANに接続されている他のマシーンからもアクセスできなくなってしまいました。例えば、スマホでコーディング中のhtmlの確認をすることができなくなってしまったのです!

お手軽さがXAMPPのウリだと認識していたのに、むしろ不便になってしまってちょっと残念です。個人的に一番痛かったのは、DocumentRootの変更ができなくなってしまった点です。自分はDropboxの中に幾つか進行中のプロジェクトを入れておき、作業時にConfigのDocumentRootを書き換えて作業していたのに、それができなくなってしまったんですよね。

このような事情から、個人的にはやっぱり5.6.xがオススメです。バージョンアップもちょこちょこされているので、根強い人気があるのしょう。少なくとも暫くはまだ使えそうです。

maxOS Mojaveになった当初は5.6.3xでボタン上の文字が消えてのっぺらぼうになってしまい使いにくかったんですが、5.6.39から解消されています。記事執筆時点で5.6系は5.6.40になっていました。

前置きが長くなってしまいましたが、それでは、早速ダウンロードしてみましょう。

XAMPPのオフィシャルサイトにアクセスします。
https://www.apachefriends.org/jp/

XAMPPのトップページ

トップページにアクセスしたたら、グローバルメニューの「ダウンロード」をクリックします。

先程から説明してるように、今回は5.6.40をインストールしますので、それを選んでダウンロードしてください。

5.6.40をダウンロード

ダウンロードが完了したら、ダウンロードフォルダ内の.dmgファイルをダブルクリックします。

2. インストール方法と使い方

上記の画面になったら、「XAMPP.app」をダブルクリックします。基本的にはそのまま「> Next」をクリックして進んでいきます。

「Learn more about Bitnami for XAMPP」はオプションです。Bitnami とは、WordPressなどをインストールできるサービスです。今回は不要なのでチェックを外しました。

あとはインストールが完了するまで待つのみ。1〜2分程度で完了します。

これでインストール完了です。この状態でApecheは起動してるのでlocalhostにアクセスしてみましょう。
http://localhost

この画面が表示されれば、インストール成功です!

ここでは操作用のメイン画面「Manage Servers」の操作方法についても簡単に説明しておきましょう。

<下側のボタン>

  • Start All … 全てのサービスをスタート
  • Stop All … 全てのサービスをストップ
  • Restart All … 全てのサービスを再起動

<右側のボタン>

  • Start … 選択したサービスをスタート
  • Stop … 選択したサービスをストップ
  • Restart … 選択したサービスを再起動
  • Configure … 設定メニューを表示

3. 設定の変更方法

さて、お次はDocumentRootの変更について説明しておきましょう。

まず、動いているサービスを全てストップさせてください。それから「Configure」ボタンをクリックします。

サービスが動いている時に設定をいじると、サービスが止まらなくなったり、動作がおかしくなったりするので注意が必要です。

この画面が表示されたら「Yes」をクリックします。アラートが消えたら「Open Conf File」をクリックします。

アプリケーションの「メモ」で「httpd.conf」が開きます。⌘ + Fキーで検索バーを表示させて「DocumentRoot」と検索すると該当箇所が表示されます。見つけられたら、任意のパスを指定して保存して終了させてください。これでDocumentRootの設定が変わりました。

Apacheをスタートさせる前に一つ注意点があります。それは、指定したDocumentRootのパーミッションが適切でないと、「403 Forbidden」エラーが表示されます。その場合は「ターミナル」を起動して、chmodコマンドでそのディレクトリのパーミッションを755に変更すれば大丈夫です。

いかがでしたか?お手軽にローカル開発環境を構築できてしまうXAMPPはインフラ周りに弱いフロントエンジニアやデザイナーの強い味方なのです。