漫画で入門！初心者向けプログラミング講座【PHP編】#2　『XAMPP と PHP の環境構築』

漫画坊主です。

 

第２回 漫画で入門！初心者向けプログラミング講座 始めたいと思います。

 

第1回目を見てない方はこちらから
漫画で入門！初心者向けプログラミング講座【PHP編】#1『PHPとは』

 

 

今回は【PHP編】#2『XAMPP と PHP の環境構築』ということで
PHPを動作させるのに必要なツールをインストールしたいと思います。

 

※本編に移る前に注意

 

今回、インストールの手順 が分かりやすいように、何枚か画像を用意しておりますが
こちらは　２０１８年９月３０日　 にスクリーンショットしたものです。

 

バージョンによっては多少違う箇所もあるかと思いますのでご注意ください。
また私の使用しているパソコンの OS が Windows10 ですので、
インストール手順も Windows10 となっております。予めご了承くださいませ。

 

それでは本編開始です！

 

 

 

 

◆xamppとは

◆xampp のインストール

 

それでは【xampp】をインストールしましょう！
まずは下記をクリックして 公式サイト に遷移します。

 

【xampp】インストールはこちらから飛べます　※別ウィンドウが開きます。

 

上記のリンクをクリックすると下記の画像のようなページに遷移します。

 

言語はヘッダの 赤□ を押して「JP」をクリックすると、日本語に切り替わります。

 

たくさん ダウンロードボタン がありますが、
今回は1番最新の【xampp】をインストールしましょう！

 

※2018年9月30日時点では　【7.2.10 / PHP 7.2.10】

 

OSによって ダウンロード箇所が異なります ので、間違えないように気を付けましょう！

ダウンロードボタンをクリックすると下記のページに遷移します。

 

WEBページにいろいろ書かれていますが、特に気にしなくて大丈夫です。
ダウンロードが終わったら赤□をクリックしてください

 

すると下記のメッセージが表示されますので【 YES 】を選択してください。

 

【 YES 】を押すと以下のような注意事項ダイアログが表示されます。

 

これは、ユーザーアカウントの環境下では権限の関係上
「C:\Program Files (x86)」へのインストールは避けるように記載されています。
［OK］をクリックして次に進みましょう。

 

【 OK 】を押すとセットアップ画面が表示されます。

 

セットアップ開始画面ですので
【 NEXT 】をクリックして開始しましょう。

 

【NEXT】をクリックすると下記のページが表示されます。

 

赤□全てにチェックが入っているのを確認したら
【 NEXT 】をクリックしてください。

 

【NEXT】をクリックすると下記のページが表示されます。

 

赤□の部分が【C:¥xampp】であるのを必ず確認してから
【 NEXT 】をクリックしてください。

 

※「¥」マーク が「\」バックスラッシュ と表示されていても大丈夫です。
文字コードの関係で変わるみたいです。

 

【NEXT】をクリックすると下記のページが表示されます。

 

URLがありますが、今回は気にしなくて大丈夫です。
赤□のチェックを外したら【 NEXT 】をクリックしてください。

 

【NEXT】をクリックすると下記のページが表示されます。

 

インストールの準備ができましたので
【 NEXT 】をクリックしてください。

 

【NEXT】をクリックすると下記のページが表示されます。

 

インストールが終了したら赤□が押下できるので
【 NEXT 】をクリックしてください。

 

【NEXT】をクリックすると下記のページが表示されます。

 

これで【xampp】のインストールが終わりました。
このまま【xammp】の使い方の説明をしますので、
赤□にチェックを入れて【Finish】をクリックしてください。

 

すると下記の 言語設定 が出てきます。

 

言語設定に日本語がありませんので、
アメリカの国旗 を選択して【Save】をクリックしてください。

 

すると下記の【XAMPP Control Panel】が起動します。

 

この画面は使う頻度が高いので ショートカット や
タスクバー にピン留めしておくと使いやすいです。

 

それでは【XAMPP Control Panel】の使い方を説明します。

まず、【Start】ボタンが５つあると思いますが、
この講座で使用するのは【Apache】と【MySQL】の２つです。

 

それぞれの用途を簡単に説明すると

【Apache】というのは、WEBサーバーです。
サーバーサイドのPHPは、WEBサーバーがないと動作しません。
【XAMPP Control Panel】の【Apache】を起動することによって
PHPを動かすことができます。

 

次に【MySQL】というのがデータベースのことです。
ユーザーの個人情報やパスワードなど必要な情報を保管しているところです。
様々なWEBシステムで利用されています。

 

残りの３つは今は使用しないので起動する必要はありません。

それでは、【Apache】と【MySQL】のStartボタンをクリックしてみましょう。

 

すると赤□の部分が緑色になりました。
緑色に変われば成功です。

 

念のため動作チェックをしてみましょう。

赤□の部分に【localhost】と小文字で打ち込んで enter を押します。

下記の画面に遷移できれば正常に起動しています。

 

【xampp】の使い方は以上です。
電源を起動するたびに【xampp】を起動する必要がありますのでご注意ください。

 

◆PHPの初期設定

 

続いて【PHP】の 初期設定 も忘れないうちに行いましょう。
画像通りに作業を進めた場合  C:ドライブ  直下に【xampp】というフォルダがあるので開きます。

【xampp】を開くと下記の画面が表示されます。

続いて【php】というフォルダを開くのですが、
その前に【xampp】フォルダの下の方に
【xampp-control.exe】というアプリケーションがあります。

 

これが【Apache】と【MySQL】を起動する【XAMPP Control Panel】ですので、
ショートカットを作らずにアプリケーションを終了してしまった方は
【xampp-control.exe】から起動することができますので覚えておきましょう。

 

では、話を戻して【php】のフォルダを開くと下記の画面が表示されます。

【php.ini】というファイルを開くのですが、どれか分からない状況です。
そんな時は下記の画像を参考にしてください。

 

【表示】タブに切り替えて【ファイル名拡張子】にチェックを入ます。

すると拡張子が表示されます。
今後も拡張子があるとファイルが分かりやすいので、このままにしておきましょう。

 

それでは【php.ini】を開いてください。
開いたときに「どのアプリで開きますか？」と表示される場合がありますが
その場合は、お使いの テキストエディタ で開いてください 。
テキストエディタ を使用していない方は【メモ帳】でも構いません。

 

ファイルを開いたら下記と同じように修正を加えてください。

※No１～７は「;」を消すのを忘れないでください
赤文字の部分は変更箇所ですので、この通りに記述してください。
既に変更点と同じ記述であれば変更しなくて大丈夫です。

 

以上が【PHP】の初期設定です。
お疲れ様でした。

 

テキストエディタ【Sublime Text 3】のインストール手順も
公開してますので合わせてインストールしましょう！

【Sublime Text 3】のインストールはこちら

 

次回からいよいよ【PHP】のプログラミングをしていきます！
まずは基礎から一緒に頑張っていきましょう！！

 

第３回目はこちらから
漫画で入門！初心者向けプログラミング講座【PHP編】#3　『PHPのコードを書いてみよう』

 

最後まで読んで頂きありがとうございました！

 

◆良かったら息抜きに私の描いた漫画も読んでみて下さい！
漫画坊主の漫画はこちらから

◆プログラミングの勉強を続ける場合はこちらから！
プログラミングの勉強はこちらから

 

フォローお願いします！！
◆twitter
◆４コマgram