今回はXAMPP(ザンプ)をお使いのパソコンにインストールして開発環境を構築する方法についてです。開発環境と言っても新しいパソコンが必要なわけでも無く、お使いのパソコンにインストールすることができます。
- 本記事ではwindows7への導入方法について書きます
- XAMPPのバージョンは「Windowsv 向け XAMPP 5.6.3 (PHP 5.6.3)」です
そもそもXAMPPってなに?
本来は開発環境を用意するのにApacheや使用するWebプログラミング言語を個別にインストールして、個別に設定しなければならないのですが、XAMPPをインストールすることによって必要なものを一括でインストールしてくれるので、誰でも簡単に開発環境を構築出来るすぐれものです。
XAMPPのインストール
それでは、︎webサイト開発のためにXAMPPをインストールしましょう!
ダウンロード
Apache Friendsのサイトへアクセスしてインストーラーをダウンロードします。
今回はwindows7へインストールするので、「Windows 向け XAMPP v5.6.3 (PHP 5.6.3)」をダウンロードします。

「ファイルを保存」を押して、デスクトップなどに保存をしてください。

インストール
インストーラーを実行
ダウンロードした「xampp-win32-5.6.3-0-VC11-installer.exe」を実行するとユーザー アカウント制御の画面が表示されます。「はい」を押してインストールを続行します。

警告画面
セキュリティーソフトが起動していて、インストールが遅くなったりしてしまう可能性があるという警告が出ました。

私の場合そのまま「Yes」をクリックで問題なくインストール出来ましたが、問題が出るようであれば、一旦セキュリティーソフトを停止させたほうがいいかもしれません。
警告画面:その2
既にXAMPPをインストールしたことあるマシーンの場合、このような警告も出るようです。

setup:1 / 7
ようやくインストール画面になりました。
何も考えずに「Next」。

setup:2 / 7
いらないものもあるかもしれませんが、今後必要になるかもという希望を込めてすべてチェックのまま「Next」。

setup:3 / 7
インストール先を変更したい方はここで変更してください。

setup:4 / 7
「Bitnami for XAMPP」の宣伝なのかな?チェックを外してスルーします。

setup:5 / 7
「Next」を押すだけ!

setup:6 / 7
インストールが始まります。

setup:7 / 7
待つこと4分程度。インストールが完了です!

初期設定
インストールも終わり、初期設定をします。
まずは、http://localhost/xampp/splash.phpを開きます。
問題なくインストールされていれば、このような画面が表示されます。
「日本語」をクリックしましょう。

次にこの画面になります。
MySQLやPHPが正常に動いているか確認するために「ステータス」をクリックします。

初期設定:「ステータス」の確認
おっと、文字化けです。

説明が長くなってしまうので、文字化けの直し方はXAMPP:管理画面の文字化けを直すを参考にしてください。
文字化けを修正して、必要なプログラムが動いているのを確認できました。

それでは、「セキュリティ」も確認します。
初期設定:「セキュリティ」の確認
左のナビにある「セキュリティ」か、下記URLよりアクセスしてください。
http://localhost/security/index.php
こっちでも文字化けが!!!
phpのエラーも出ています・・・

このページの、直し方もXAMPP:管理画面の文字化けを直すで公開しているので参考にしてみてください・・・
文字化け修正後はこのようになります。

「要注意」と出ている、3項目は、「MYSQL 項目: "ROOT" パスワード」と「XAMPPのディレクトリ制御 (.htaccess)を設定」をすれば「安全」と変わります。
初期設定:MYSQL 項目: "ROOT" パスワードを設定
それでは早速、http://localhost/security/より
http://localhost/security/xamppsecurity.php
へアクセスし、「MYSQL 項目: "ROOT" パスワード」を設定します。

パスワードを入れて、画像のようにチェックボックスにチェックを入れ、「パスワードを変更しました。」を押してください。

チェックを入れておくと、
C:¥xampp¥security¥mysqlrootpasswd.txt
にパスワードを保存しておいてくれます。万が一パスワードを忘れても安心です。
「パスワードを変更しました。」を押すと次の画面になります。

それでは、XAMPPのコントロールパネルからMySQLを再起動させます。
再起動と言っても、一度止めてから、もう一度開始するだけです。
「MySQL」の「Stop」を押し、

「MySQL」が停止したら「Start」を押してください。

無事に起動しました。

初期設定:XAMPPのディレクトリ制御 (.htaccess)を設定
次に「XAMPPのディレクトリ制御 (.htaccess)」の設定をします。

「ユーザ」と「パスワード」それぞれ記入し、画像のようにチェックボックスにチェックを入れ、「安全なXAMPPディレクトリを作成してください。」を押してください。

先ほどと同様、チェックを入れておくと、パスワードを保存しておいてくれます。
C:¥xampp¥security¥security¥xamppdirpasswd.txt
先ほどアクセスした
http://localhost/security/index.php
へアクセスして、「要注意」が「安全」に変わっていることを確認します。

すべて「安全」になっていることが確認できたら初期設定は終わりです!
お疲れ様でした!!!
公開ディレクトリの確認
それでは最後に、公開ディレクトリの場所をお教えします。
C:¥xampp¥htdocs¥の中が公開ディレクトリです。
下記どちらのURLにアクセスしても同じページが表示されます。
アクセスすると「It works!」と表示されると思います。

上記のURLはどちらもC:¥xampp¥htdocs¥index.htmlのHTMLファイルを表示しています。
C:¥xampp¥htdocs¥index.htmlを変更して、アクセスすると内容が変わったページを確認できると思います!
最後に・・・
冒頭では「誰でも簡単に開発環境を構築出来るすぐれものです。」と書きましたが、初期設定でのエラーが第一の難関となってしまいそうですね・・・
思っていたよりも長くなってしまいましたが、最後まで読んでくれた方 ありがとうございます!
壁を乗り越えて楽しいweb開発をしましょう!