XAMPPでローカルDB開発環境(構築編1)

<h2>XAMPPをインストールする</h2>

<div>
    <h3>インストールするXAMPPのバージョン</h3>
    <p>下記のページから「PHP7.2.5」以上のXAMPPをダウンロードします。</p>
    <p>今回は「LARAVELバージョン5.5」をダウンロードします。それに伴い「LARAVELバージョン5.5」が対応している、「PHP7.2.5」以上のXAMPPをダウンロードし、ローカル開発環境として使用します。xamppのインストール画面では、phpのバージョンごとにインストールするxamppを選択するようになっているのですが、「PHPバージョン8系」では「LARAVEL5.5」が使えない可能性がありますので、「PHPバージョン7系」のXAMPPをインストールしてください。</p>

    <a href="https://www.apachefriends.org/jp/download.html">https://www.apachefriends.org/jp/download.html</a>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288217.png" alt="XAMPPインストールページ">
    </figure>
</div>

<div>
    <h2>インストール手順</h2>
    <p>ダウンロードした「XAMPP-windows-installer.exe」をクリックして、インストールを開始します。</p>
    <p>exeファイルがダウンロードできたら、起動しインストールを行います。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288414.png" alt="XAMPP_installer.exeファイルアイコン">
    </figure>
</div>

<div>
    <p>通常インストール時には「Cドライブ/programfile/」にソフトがダウンロードされますが、programfileに解凍してしまうと、トラブルが多く不便なので、今回はCドライブの直下にダウンロードを行います。</p>
    <p>OKを押して、ダウンロード先の選択画面に進みます。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288653.png" alt="「ProgramFiles配下にダウンロードは避けて下さい」の警告文">
    </figure>
</div>

<div>
    <p>スタート画面です。Nextボタンを押して次の画面へ進みます。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634288904.png" alt="XAMPP_SetupWizardのスタート画面">
    </figure>
</div>

<div>
    <p>次はインストールするツールを選びます。基本的に全部インストールでOKです。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634289154.png" alt="ダウンロードソフト選択画面">
    </figure>
</div>

<div>
    <p>次にインストール先のフォルダです。デフォルトでCドライブ直下にインストールするようになってますので、このままでOK。</p>

    <small>※制作を進めていくと1G以上のサイズになってしまうこともあるので、ダウンロード先をDドライブに変更しても動作に問題はありません</small><br><br>
</div>

<div>
    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634289231.png" alt="保存先のフォルダ選択画面">
    </figure>
</div>

<div>
    <p>続けて言語設定です。</p>
    <p>「English」を選択して「Next」をクリックしましょう。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634289295.png" alt="XAMPPコントロールパネル言語選択画面">
    </figure>
</div>

<div>
    <p>BitnamiというPHPとMySQLのセットになっているツールなど、XAMPPに搭載されているツール説明機能紹介の文が表示されます。</p>
    <p>「Next」をクリックして、進みます。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290719.png" alt="BitnamiやDrupalなど、XAMPPに搭載されているツールの説明画面">
    </figure>
</div>

<div>
    <p>続けて「Next」をクリックしていくとインストールが実行されます。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290819.png" alt="XAMPPのインストール画面">
    </figure>
</div>

<div>
    <p>XAMPPを起動して、コントロールパネルが表示されるとインストール完了です。</p>
    <p>画像のように上から『Apache』『MySQL』の「Start」ボタンをクリックして起動しましょう。</p>

    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634290875.png">
        <figcaption></figcaption>
    </figure>
</div>

<div>
    <h3>Apacheが起動できない場合</h3>
    <p>Apacheが起動できない場合、別のソフトが同じポート番号を使っている可能性があります。</p>

    <p></p>上の画像でPort80と表示されている通り、80番をXAMPPは使ってます。例えば、Skypeなども80番を使用している事が多いので、Skypeを使ってる場合は終了(Quit)してから試してみてください。それでもダメなら、その80番を使ってるアプリを探して終了してからApacheを起動しましょう。
    <p></p>

    <p>ブラウザに「http://localhost/」と入力し、XAMPPにアクセスしてみましょう。
    このように表示されれば、XAMPPの仮想サーバーがちゃんと動いているということが確認できます。</p>
    <figure class="wp-block-image">
        <img src="https://dawn-phase2-dev.s3.ap-northeast-1.amazonaws.com/curriculum/uploads/2110/1634291428.png" alt="XAMPPダッシュボード画面">
    </figure>
</div>

<div>
    <h3>ブラウザで確認する</h3>
    <p>「XAMPP/htdocs/」に配置したファイルを確認するときは、ブラウザに「http://localhost/」で始まるURLを入力することで、XAMPPのApacheサーバーを経由して確認することができます。</p>

    <p>(例)「XAMPP/htdocs/test/test.php」を作成して、ブラウザからそのファイルを確認する時</p>

    <div class="code-snippet">
        <div class="where-file">階層構造<br></div>
        <div class="hcb_wrap">
            <pre class="prism undefined-numbers lang-php">XAMPP<br>
  └ htdocs<br>
    └ test<br>
     └ test.php<br>
</pre>
        </div>
    </div>
    <p>この場合は、「http://localhost/test/test.php」のように、htdocs配下からがlocalhost以降のパスになるように記述します。</p>
    <p>※直接ブラウザにphpファイルをドラッグドロップしても、ブラウザがphpを処理できないので、ソースコードがそのまま表示されてしまいます。</p>
    <p>ブラウザで確認の際は、上記のURLで開いてXAMPPのApacheサーバーを通して確認しましょう。</p>
</div>