PHP入門 開発環境の準備 ( XAMPP のインストール方法 )

  • LINEで送る

ローカル開発環境の設定

XAMPP はPHP, Prel などのプログラミング言語を利用してウェブサイトの開発において、ローカル開発環境の中において、サイトをネット上で公開する前にテストする為には重要なものです。

XAMPP は最も人気のある PHP 開発環境です。XAMPP は完全に無償(オープンソース)で MySQL, PHP および Prel を含んだ簡単にインストール出来る Apacheディストリビューションです。インストールと利用が簡単に設定出来るようになっています。

XAMPP のインストール方法

まず、XAMPP のダウンロードサイトにアクセスします。 アクセスしてトップ画面を表示します。 私は、データベースは MySQL を利用していますので、以前のバージョンを利用しますので、下の画面のグリーンの「ダウンロード その他のバージョンについてはこちらをクリックして下さい」をクリックします。

xampp-installers-and-downloads-for-apache-friends

クリックすると、利用している OS によって、Windows, Linux, OS X 用と3つのバージョンがありますので、ご利用環境に合わせてダウンロードして下さい。

download-for-windows-xampp

download-for-linux-xampp

download-for-os-x-xampp

私は個人的には以前のバージョンを利用していますので、「Requirements Add-ons More Downloads」をクリックしてバージョン情報を表示させます。

downloadfor-windows-more-downloads-xampp

すると、ブラウザ用ファイルが表示されるので、ここでは、「XAMPP Windows」をクリックします。

xampp-browse-files-at-sourceforge-net

すると、以前の「XAMPP Windows」用のファイルが表示されるので、利用したいバージョンのファイルを選択してクリックします。

xampp-browse-xampp-windows-at-sourceforge-net-01

今回は「5.6.24」のファイルを選択します。

xampp-browse-xampp-windows-5-6-24-at-sourceforge-net

ファイルのバージョン「xampp-portable-win32-5.6.24-1-vc11・・・」をクリックします。 と、ダウンロードが始まります。ダウンロードが始まりましたら、しばらく時間が掛かりますので、お待ちください。その間は、ほかのところをクリックしないでください。

ダウンロードが終了したら、ファイルを開きます。すると、インストールを続けますか?どうか、問われますが、「Yes」をクリックします。

2016-10-07-8

すると、「XAMPP」の Setup が始まりますので、「Next」をクリックします。

2016-10-07-11

「Next」をクリックすると、次の画面が表示されるます。

2016-10-07-12

画面の左側の枠内の各項目にすべて、チェックが入った状態を確認して「Next」をクリックします。

2016-10-07-13

XAMPP をインストールするフォルダを選択します。 「Next」をクリックします。 そして、インストールする前に下の画面のチェックボックスのチェックを外します。

php%e5%85%a5%e9%96%80-%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%ba%96%e5%82%99-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%92%e5%a7%8b%e3%82%81%e3%82%8b%e5%89%8d%e3%81%ae

チェックを入れたままでもいいですが、ブラウザが起動して、機能を説明するウェブサイトに飛びますから、外しておきます。 そして、「Next」をクリックします。

php%e5%85%a5%e9%96%80-%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%ba%96%e5%82%99-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%92%e5%a7%8b%e3%82%81%e3%82%8b%e5%89%8d%e3%81%ae

 

「Next」をクリックしてインストールが始まります。インストールが完了するまで、すこし待ちます。

php%e5%85%a5%e9%96%80-%e9%96%8b%e7%99%ba%e7%92%b0%e5%a2%83%e6%ba%96%e5%82%99-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%92%e5%a7%8b%e3%82%81%e3%82%8b%e5%89%8d%e3%81%ae

上の画面が表示されると、インストールが完了しました。 「 Do you want to start the Control Panel now?」にチェックが入った状態で「Finish」をクリックすると、XAMPP が起動します。

以上で、XAMPP のインストール方法 の終了です。 次は、XAMPP の起動 の確認です。

 

XAMPP の起動

XAMPP を起動するには、スタートメニューから「すべてのプログラム」  >  「XAMPP」  >  「XAMPP Control Panel」をクリックして、XAMPP を起動します。XAMPP を起動すると、下記の画面が現れます。

2016-10-07-14

サーバーの起動

表示された「XAMPP Control Panel」の画面の 「Apache」と「MySQL」の項目の「Start」のボタンをクリックしてサーバーを起動します。無事起動すると、

2016-10-07

「Apache」の Port(s) の数字列が 「80, 443」で、「MySQL」の Port(s) の数字が 「3306」になり、「Start」のボタンが「Stop」になれば、無事起動することが出来ました。

*上手く起動できない場合は、ポートフォリオが他のアプリケーションと競合している場合があります。

スカイプを利用している場合は、スカイプの設定画面の「設定」  >  「接続」から「上記のポートに変わり 80 と 443 を使う」のチェックが入っている場合、チェックを外してスカイプを再起動してください。 その後、改めてサーバーを起動して下さい。

XAMPP の動作確認

サーバーを起動する事が出来たら、次は動作確認します。

Webブラウザ(Chrome や InternetExplore 等)を立ち上げて、「http://localhost」にアクセスします。

%e6%8a%95%e7%a8%bf%e3%81%ae%e7%b7%a8%e9%9b%86-locahost-dtiger-wordpress

下記の画面が表示されたら、正しく動作しています。

xampp

ここで、Language の中の「日本語」を選択します。

xampp-01

「日本語」をクリックすると、

xampp-1-8-3

上の画面が表示されたら、動作確認が完了しました。

ファイルの設置

XAMPP の動作確認が完了したら、ファイルを設置してみましょう。

PHP のファイルを設置してみます。 下の画面は、テキストエディタで PHP ファイル(test.php)を開いているところです。

2016-10-07-6

この、PHP ファイルはどこに設置すれば、いいのでしょうか?

%e6%8a%95%e7%a8%bf%e3%81%ae%e7%b7%a8%e9%9b%86-explore-dtiger-wordpress

「XAMPP Control Panel」の「Explorer」をクリックします。

2016-10-07-1

「XAMPP」の中の「htdocs」を探します。

*この「htdocs」は ” ドキュメントルート” と呼ばれる特別なフォルダで、ここに設置したものが 「http://localhost/ファイルの名前」 でアクセス出来るようになります。

2016-10-07-2

「htdocs」フォルダの中に、上図のようなファイルがあります。

2016-10-07-3

ここに、先程の「test.php」のファイルをコピーして同階層に貼り付けます。

2016-10-07-5

ここで、ブラウザを立ち上げて、「http://localhost/test.php」にアクセスします。

2016-10-07-7

無事画面が表示されましたが、文字化けしてしまいました。

文字化けした場合

文字化けした場合は、エンコーディングの設定が必要です。

Google Chrome の場合

画面右上の「 横3本線(あるいは、縦3つの点)」  >  「その他のツール(L)」  >  「エンコード(E)」  >  「Unicode ( UTF-8 )」と順にクリックします。

すると、文字化けが解消されました。

2016-10-08-1

このように、文字化けが修正されました。

このように、無事画面が表示されたら、設定の完了です。

 

  • LINEで送る

SNSでもご購読できます。