パソコンにWebサーバを作る XAMPP の最新版を入れる

Image [39]

PCでWebプログラムの開発をしていますが、その開発環境としてXAMPP(ザンプ)を使っています。XAMPPは開発する人だけでなく、WordPressなどのCMSを使ってサイトを作っている人が「まずローカルで確認してから」というような時にも自分のパソコンでWebサーバと同じような環境で確認できるので便利です。
また、ちょっとプログラム勉強してみたい、という方もローカルにWebサーバの環境があれば気軽にプログラムを作って動かしてみることができます。
ということで、最新のXAMPPをインストールしてどんな風に動かせるのかについて書きます。

XAMPPのダウンロードとインストール

XAMPPってなに?については以前、「xamppにWordPressをインストールする手順 xamppってなに?」に書きましてのでよろしければご覧ください。

最新版のXAMPPをインストールするにあたって、あなたのPCにXAMPPをインストールするのが初めて OR XAMPPが既にインストールされていてそのバージョンのXAMPPを残したいのかによって方法が違います。

・初めてインストールする時

Image

http://sourceforge.jp/projects/xampp/

こちらの xampp-win32-5.6.3-0-VC11-installer.exe をダウンロードして実行してください。

インストーラーの中でチェックボックスを外すなどするところがあるようです。私の場合既にインストールしてあって、試してみることができませんので、詳しく書いてあったこちらを参照ください。

今さら聞けない!XAMPPをインストールする方法【超初心者向け】 (2)XAMPPインストール

・XAMPPが既にインストールされて他のバージョンも残したい

私の場合はこちらでした。他のバージョンが3つも(^_^;入っています。一つのXAMPPで共存させる方法もあるようですが、私はそのとき動かしたいXAMPPごとに立ち上げて実行させています。その前提で、複数のXAMPPをインストールする方法について書きます。

まず、

Image [1]

http://sourceforge.jp/projects/xampp/releases/

このページに行って、

Image [2]

その他全ファイルのXAMPP Windows をクリック

Image [3]

フォルダの中で一番新しいバージョン(今は5.6.3)をクリック

Image [4]

xampp-win32-5.6.3-0-VC11.zip というファイルをクリックしてダウンロードします。

Image [5]

ダウンロードしたファイルを解凍すると xampp というフォルダができます。このフォルダ名を他のバージョンのxamppと区別するために

Image [6]

xampp56 という名前に変更します。そのフォルダを任意の位置(私の場合はc:\ 直下)に移動します。
移動したら xampp56 フォルダを開いて、

Image [7]

setup_xampp.bat をダブルクリックします。

Image [8]

このような表示になるので、任意のキーを押します(私はリターンキーを押しました)。
表示が消えてセットアップが終了しました。

XAMPPコントロールパネルからApacheとMySQLを起動する

xampp-win32-5.6.3-0-VC11-installer.exeからインストールした場合は何も変更しなければ c:\xamppzipからインストールした場合は自分で指定した場所、私の場合は c:\xampp56 を開きます。

Image [13]

xampp-control.exe をダブルクリックしてXAMPPコントロールパネルを開きます。

Image [14]

最初の1回だけ、この 英語 or ドイツ語 の選択画面が開きます。英語にチェックが入っているので OK ボタンをクリックします。

Image [15]

コントロールパネルが開きました。Apache 行の Actions にある、 start ボタンをクリックします。

Image [17]

Apacheが立ち上がりました。MySQL行の Actions にある、 start ボタンをクリックします。

Image [18]

MySQLが立ち上がりました。

最初の1回だけ

Image [19]

このように Windowsの警告 画面が出ることがありますが アクセスを許可する をクリックします。

今回は最初だったので、このような感じでしたがこれ以降は

xampp-control.exe をダブルクリックしてXAMPPコントロールパネルを開く→Apacheのstartをクリック→MySQLのstartをクリック

これだけでXAMPPが立ち上がるので、PCでWebサーバ環境を動かすことができます。終了するときは、

Apacheのstopをクリック→MySQLのstopをクリック

で終了します。別バージョンのXAMPPを立ち上げたいときはすでに立ち上がっているXAMPPを終了してからスタートします。

XAMPPのトップ画面を表示して確認してみる

さっそくブラウザから確認してみます。ブラウザのURL欄に localhost と入力してリターンしてください。

Image [21]

このような画面が出ます。最初の一回だけですが、ここで 日本語 をクリックします。

Image [22]

これがXAMPPのトップ画面です。

Image [23]

phpinfo() をクリックしてみます。

Image [24]

このようにphpinfoが表示されます。色々な設定をここから確認することもできます

Image [25]

phpMyAdmin をクリックすると

Image [26]

MySQLを管理するツールが表示されます。+マークが付いたりして、以前のバージョンより進化しています。WordPressなどのCMSでは大概MySQLでデータベースを作ることになるので、この画面はよく使うと思います。

テストプログラムを作って動かしてみる

いわゆるレンタルサーバーで html や php を置いて動かす場所は、XAMPPですと

Image [29]

xamppフォルダの下にある htdocs の下となります。

たとえば先ほどのxampp画面も

Image [30]

htdocsの下に xamppというフォルダがあり、そこから表示されています。localhost しか指定してないのに、xampp フォルダから表示しているのは htdocs 直下の index.php に

と書いてあるので、xamppに遷移しています。

私は1つのサイト毎にhtdocsの下に1つフォルダを作っています。テストプログラムを動かすために「phptest」というフォルダを作ってそこでphpを動かしてみようと思います。

Image [31]

phptestというフォルダを作ってその中に datetime.php というファイルを作り、中身を

このように書いて保存します。

ブラウザのURL欄に 

Image [32]

localhost/testphp/datetime.php

と入力して表示させると

Image [33]

このように 日付と時刻 が表示されました。

php.iniの修正

先ほどのテストプログラムですが、実際には時刻が違っていました。これはタイムゾーンの設定が違うからのようです。

XAMPPをインストールしたフォルダを開き、その中にある php フォルダに php.ini があるのでテキストエディタで開きます。

というタイムゾーンを指定しているところが有り、デフォルトだと Europe/Berlin になっているのでこれを

このようにして保存します。

XAMPPコントロールパネル

Image [35]

Apachestopをクリックして

Image [36]

startをクリックします。

Image [37]

これで今修正したphp.iniの内容が反映されます。

実行してみると

Image [34]

このように、正しい現在時刻となりました。

まとめ:自分のパソコンにWebサーバ環境があると色々できて便利です

このように自分のパソコンにWebサーバ環境を作るのは割と簡単でした(^^)。自分のパソコンならすぐに修正して結果を見ることが出来るし、自分のパソコンからしか見ることが出来ないので間違ったことをしても影響範囲が少なくて安心です。

WordPressをインストールしたかったら、「xamppにWordPressをインストールする手順」 こちらを参考にインストールしてみてください。WordPressだけでなく色々なCMSを試したいときも自分のパソコンだけで動作を確認できるので便利になります。

私としては今普通に使っているXAMPPが5.3と3つぐらいバージョンが古く、PHPのバージョンも古いので最新のXAMPPで新しいPHPの勉強などしていきたいと思います(^^)/。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る