windowsでウェブサイト開発入門 PHPでプログラミング 2 XAMPPインストール

シェアする

こんにちは。

プログラミングの第一歩として、windowsパソコン上にサーバー環境を構築して、簡単なプログラムを作って、ブラウザで表示するウェブプログラミング入門です。

プログラミング未経験の方でも、ウェブサイト開発の体験ができる内容になってます。

第2回目は、XAMPPのインストールと動作確認。いよいよ作業開始です。

まずは、ウェブサーバーのふるまいをするXAMPPというアプリケーションをパソコンにインストールしましょう。あくまでテスト・開発用ですが、ちゃんとウェブサーバーとして動作します。

過去の講座は↓の通りです。

第1回:概要とウェブサイトの表示される仕組み
第2回:XAMPPのインストールとウェブサーバー起動

windowsでウェブサイト開発入門 PHPでプログラミング 2 XAMPPのインストールとウェブサーバー起動

XAMPPは、Apache(ウェブサーバー)、MySQL(データベースサーバー)、PHP(プログラム言語)、Perl(プログラム言語、今回は使いません)の各アプリがセットになった便利なアプリです。

手軽にWindowsマシンにウェブサーバーを導入できるので、ぜひ、使い方を覚えましょう。

XAMPPのインストール

まず、インストールしましょう。

XAMPPのインストーラダウンロード

XAMPPの配布元Apache Friendsのウェブサイトに行きます。

下図のようなサイトが開いたら「ダウンロード」タブをクリックします。

Windows向けXAMPPの中から新しいバージョンを選びます。下図の場合では、一番下の7.3.4/PHP 7.3.4を選び、「ダウンロード(64bit)」をクリックします。

XAMPPのインストール

では、インストールしていきましょう。

ダウンロードしたフォルダを開き、「xampp-windows-x64-xxx-VCxx-installer.exe」(xxxはバージョン名)をダブルクリックして起動します。

ユーザアカウント制御(UAC)のワーニングが出ます。

「書き込みで問題が起きるのでProgram Filesにはインストールしないでね」って書いてます。問題ないので「OK」で進みます。

インストール(とセットアップ)を開始します。「Next」で進みます。

コンポーネント(構成)を選びます。FTPサーバーのFileZilla、メールサーバのMercury、JavaサーバーのTomcatは不要ですので、チェックを外します。

プログラム言語Perlも使いませんのでチェックを外します。

「Next」で進みます。

インストール先フォルダの設定です。インストーラーの最初に「Program Filesにはインストールしないでね」というワーニングが出てましたね。デフォルトの「C:\xampp」は問題ないので、このまま「Next」で進みます。

Bitnamiはワードプレスなどのインストーラセット(らしい)ですが、不要なので、チェックを外して「Next」で進みます。

「Next」でインストールを開始します。

しばらく待ちましょう。

インストールが終わったら下図の画面になります。

コントロールパネルは、後でスタートメニューに登録してから起動するため、「起動しますか?」のチェックボックスのチェックを外します。

「Finish」をクリックしてインストールを終了します。

ウェブサーバーの使い方

インストールが終わったので、さっそく、ウェブサーバーアプリケーションの動作確認をしましょう。ついでに起動・終了の仕方も覚えましょう。

ブラウザで、ウェブサーバーが起動していないことを確認

まず、ブラウザを開いて、「http://localhost/」にアクセスしてみます。

この段階では、下図のように「サイトにアクセスできません」のようなエラーが発生します。

XAMPPのコントロールパネルを起動

サーバーの起動・終了はコントロールパネルから行います。コントロールパネルを起動して、使ってみましょう。

スタートメニューに登録

まず、起動しやすくするために、登録しましょう。スタートメニューの「XAMPP→XAMPP Control Panel」とたどり、右クリックします。
コンテキストメニューで「スタートにピン留めする」をクリックします。

XAMPP コントロールパネルの起動

それでは起動しましょう。スタートメニューに登録された「XAMPP Control Panel」のアイコンをクリックして、コントロールパネルを起動します。

最初の起動では、言語選択ウィンドウが表示されます。2言語しか選べないので、デフォルトの英語のまま「Save」をクリックして進みます。

ウェブサーバーの起動

さて、やっと、コントロールパネルまでたどり着きました。

まずは、ウェブサーバーアプリケーションであるApacheだけ起動してみましょう。Apacheの行にある「Start」ボタンをクリックします。

正常起動すると、Apacheの文字が緑色の背景になります。また、「Start」ボタンが「Stop」ボタンに変わります。

ウェブサーバーの起動確認

サーバーが起動しているかブラウザで確認してみましょう。

先ほどのブラウザで「http://localhost/」にアクセスするか、「再読み込み」のアイコンをクリックします。

すると、今度は下図のように、「http://localhost/dashboard/」にリダイレクトされて、ウェブページが表示されます。サーバー起動OKのようです。

この段階で、「phpMyAdmin」という、MySQL(データベース)の管理ツールのページに移動してみましょう。メニュー右端にある「phpMyAdmin」をクリックしてみてください。

すると、MySQLサーバーを開始していないため当然なのですが、MySQLへの接続エラーが発生します。

MySQLサーバーの起動と起動確認

しばらくは、データベースは使いませんが、せっかくなので、データベースサーバーも起動することを確認しておきましょう。

コントロールパネルを開き、MySQLの行の「Start」ボタンをクリックして起動します。

無事起動すると、MySQLの文字も背景が緑色になり、「Start」ボタンが「Stop」ボタンに変わります。

もう一度、ブラウザで、「phpMyAdmin」にアクセスすると、今度は、MySQLの管理ツール「phpMyAdmin」が起動します。

下図の画面で右側のサーバーの種類は、「MariaDB」となってますが、MariaDBはMySQLの後継サーバーでMySQLの代わりに使えるので、勉強段階では全く問題なくMySQLとして使っていけますので安心してください。

※実際に実案件での開発では、実サーバー環境とツール、バージョンを合わせるようにしましょう。(場合によっては「なるべく」になります^^;)

ウェブサーバーの終了方法

ここまででXAMPPのインストールと動作確認は終了です。

最後にサーバー・コントロールパネルの終了方法を説明します。

まず、XAMPPのコントロールパネルで、Apacheの「Stop」ボタンをクリックすると、ウェブサーバーを終了します。

同様に、MySQLの「Stop」ボタンをクリックすると、データベースサーバーを終了します。

実際やってみましょう。ApacheとMySQLの「Stop」ボタンをクリックします。

下図のように、Apache、MySQLの文字の背景がなくなり、「Stop」ボタンが「Start」ボタンに戻ります。

コントロールパネルの終了の注意

サーバーを終了したので、最後に、コントロールパネルも終了しましょう。

まず、注意点なのですが、右上の「×」ボタンをクリックすると、コントロールパネルが閉じます。

このとき、コントロールパネルは終了しておらず、アイコンが通知領域に残っています。

アイコンをダブルクリックすると、コントロールパネルが再度開きます。

コントロールパネルの下部ログ表示を見ることでも、コントロールパネルが終了していなかったことがわかります。下図の赤枠にウェブサーバー、MySQLサーバーの開始、終了のログが残っていますね。

ではコントロールパネルを終了させましょう。XAMPPコントロールパネルを終了するには、「Quit」ボタンをクリックします。

終了すると、通知領域のアイコンも消えます。

右上「×」で終了できないことは、つい、忘れがちなので頭の片隅にでも入れておいてください。

というのも、コントロールパネルが残っていることを忘れて、もう一つコントロールパネルを起動できてしまうんです。

例えば、下図は、コントロールパネルでApache、MySQLのサーバーを起動したまま、忘れてしまっていたことを想定して、もう一つコントロールパネルを開いてみたときのウィンドウの表示です。

右下の2つ目のコントロールパネルは、起動したとき、ログ表示欄に、「Apache is already running on port 80(アパッチはすでにポート80で起動してます)」というようなワーニングが表示されます。

コントロールパネルの終了し忘れ、2重起動にご注意ください。

まとめ

今回は、windowsでウェブサイト開発入門 PHPでプログラミング 2 として、XAMPPのインストールとウェブサーバー起動・終了方法を説明しました。

次回以降からは、Visual Studio Code というエディターをインストールして、実際にコードを入力してウェブサイトを作っていきます。

そのためのウェブサーバー導入ですので、今回からは、読むだけでなく、ぜひ、実際に作業をしてみてください。

この記事が気に入ったら
いいね ! しよう