50歳から自分の好きな職業に簡単に転職できるの? ここは「がっちゃん 」が実際に体験した転職への道を記録するブログである

Dockerで作った「Webサーバ環境」に、サイコロゲームのサイトをアップする

どうも!職業訓練生のがっちゃんです!

50歳にして、長期人材育成「情報セキュリティ管理者資格」コースを絶賛受講中です!

 今回は、Dockerで作った「Webサーバ環境」に、サイコロゲームのサイトを作っていくお話です。

 Dockerで「Webサーバ環境」を作成するにはこちら、「仮想環境DockerならWebサーバ環境はチョー簡単に作れる」をご参照ください。

まずはDockerを起動

 「Docker Quickstart Terminal」を起動し「docker start php」で、前回作った「phpコンテナ」をスタートさせます。こないだ作ったのがそのままで、コンテナがキチンと動いていれば、ブラウザソフト(今回もgoogle chromeを使います)でURLに「192.168.99.100」と入力すれば以下のような画面が出てきます。

phpフォルダにサイコロの画像を保存

 以前作成した「php」フォルダにサイコロの画像を保存します。「php」フォルダ内に「dice_images」というフォルダを作成しましょう。

 以前作成した「php」フォルダは自分のPCの「C:\Users\ユーザ名\php」にあるはずです。サイコロの画像は以下よりダウンロードして下さい。または自分で好きな画像をダウンロードしてきてもOKですよ。ただし、あとあとのプログラムにも影響してくるので、サイコロの画像を保存するフォルダ名とファイル名は同じにしておいていただけるとスムーズにプログラム作成ができると思います。

・サイコロの画像
dice1.png」「dice2.png」「dice3.png」「dice4.png」「dice5.png」「dice6.png

 こんな感じにダウンロードできたらOKです。

サイコロの画像を表示させる

 次はコードエディタ「Visual Studio Code」でホームページを作成していきます。まずはサイコロの画像を表示させてみましょう。そのためのコードがこちらです。ファイル名は「playdice.php」としました。

 以下のコードなら「Visuai Studio Code」の入力支援を使えば簡単に入力できます。

 まずは「playdice.php」ファイルを作成し、「html」と入力すれば入力支援コードが出てきますので「html:5」を選択すると、あっという間にホームページの骨子ができます。

 また、「h1」と入力してEnterキーを押すだけで<h1></h1>と入力支援

 「img」と入力するだけで「 <img src=“” alt=“”>」と入力支援してくれます。

 ブラウザ画面で「192.168.99.100/playdice.php」と入力して表示させると、以下のようになるはずです。

 どうです!?表示されましたか?表示されなかった場合、画像のソースとなるアドレスの書き間違いの可能性が高いです。私と違うフォルダ名やファイル名で作成している人は、自分が設定したフォルダ名、ファイル名にしてくださいね。

サイコロの画像をランダムで出す

 次はブラウザを更新させるたびに、サイコロの目がランダムで出るようにします。ここからやっとphp言語を使ってプログラミングです。php言語でのプログラミングは<?php  ?>で囲む約束があります。

 ここまで入力出来たら「crtl」+「s」で保存します。で、ブラウザソフトで「192.168.99.100/playdice.php」を見てみましょう。サイコロが表示されましたか?表示されるようでしたら、そのままブラウザの「更新」ボタン(以下の画像の黄色く塗ったボタンです)を押してサイコロの目が変わっていくかも確認してください。

 ※エラーが出ちゃった場合は目を皿のようにして間違いを見つけてください。

 例えば以下のようなエラー文字が出た場合は、『「playdice.php」ファイルの「14行目」を実行しようとしたんだけどぉ、予測できない構文エラーが見つかっちゃったんだぁ。ちょっと修正してよ。』みたいなことが書かれています。適当な訳文ですみません。

Parse error: syntax error, unexpected ‘ja’ (T_STRING) in /var/www/html/playdice.php on line 14

 今回は、8行目の入力時に「”」が一つ抜けていたためにエラーになっていました。

 $dice_images = “./”.PATH.”/dice”.$number.”.png; を
 $dice_images = “./”.PATH.”/dice”.$number.”.png;  に修正して解決しました。
エラーの原因が「ここだよ!」と言ってくれないので見つけ出すのは毎度ひと苦労です。

ボタンを押すとサイコロの目がかわる

 ブラウザの更新ボタンでは味気ないので、ちゃんとしたボタンを作ってサイコロの目が変わるようにしてみましょう。以下のようにプログラムを改造します。

 どうですか?ボタンができましたか?ちなみに <p>タグでボタンとサイコロの画像の間に1行空くようにしています。これなかったらボタンとサイコロの画像がピッタリくっついて、なんかイヤです。

※あとはアレンジで、サイコロの画像を3つ出すようにしたりして遊んでみてください。

 ホントはこのあと、関数だけ別のファイルにして呼び出すようにしたり、POSTとかGETの呼び出し方でどうやらこうやら勉強したんですが、ちょっとむずかしいから飛ばしました。そのへんのところはまたの機会に紹介しますね。

 それでは本日も最後までお付き合いいただき、ありがとうございました!

スポンサーリンク
最新情報をチェックしよう!