どうも！職業訓練生のがっちゃんです！
５０歳にして、長期人材育成「情報セキュリティ管理者資格」コースを絶賛受講中です！
今回は、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ですよ。ただし、あとあとのプログラムにも影響してくるので、サイコロの画像を保存するフォルダ名とファイル名は同じにしておいていただけるとスムーズにプログラム作成ができると思います。
こんな感じにダウンロードできたらOKです。
サイコロの画像を表示させる
次はコードエディタ「Visual Studio Code」でホームページを作成していきます。まずはサイコロの画像を表示させてみましょう。そのためのコードがこちらです。ファイル名は「playdice.php」としました。
以下のコードなら「Visuai Studio Code」の入力支援を使えば簡単に入力できます。
まずは「playdice.php」ファイルを作成し、「html」と入力すれば入力支援コードが出てきますので「html:5」を選択すると、あっという間にホームページの骨子ができます。
また、「h1」と入力してEnterキーを押すだけで<h1></h1>と入力支援
「img」と入力するだけで「 <img src=“” alt=“”>」と入力支援してくれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サイコロ(PHP版)</title> </head> <body> <h1>サイコロ</h1> <img src="./dice_images/dice2.png" alt=""> <img src="./dice_images/dice6.png" alt=""> </body> </html> |
ブラウザ画面で「192.168.99.100/playdice.php」と入力して表示させると、以下のようになるはずです。
どうです！？表示されましたか？表示されなかった場合、画像のソースとなるアドレスの書き間違いの可能性が高いです。私と違うフォルダ名やファイル名で作成している人は、自分が設定したフォルダ名、ファイル名にしてくださいね。
サイコロの画像をランダムで出す
次はブラウザを更新させるたびに、サイコロの目がランダムで出るようにします。ここからやっとphp言語を使ってプログラミングです。php言語でのプログラミングは<?php ?>で囲む約束があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php //サイコロの目を生成します define('PATH','dice_images'); //関数定義(playdiceの処理を関数で名dice_imagesでまとめます) function make_dice(){ //ランダムで1から6の数字を出す $number = mt_rand(1,6); $dice_images = "./".PATH."/dice".$number.".png"; return $dice_images; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サイコロ(PHP版)</title> </head> <body> <h1>サイコロ</h1> <!- 画像のアドレスをphp言語で以下のように変更、make_dice関数で -> <!- 得た画像のソースとなるアドレスを入れるようにします。-> <img src="<?php echo make_dice(); ?>" alt=""> </body> </html> |
ここまで入力出来たら「crtl」+「s」で保存します。で、ブラウザソフトで「192.168.99.100/playdice.php」を見てみましょう。サイコロが表示されましたか？表示されるようでしたら、そのままブラウザの「更新」ボタン（以下の画像の黄色く塗ったボタンです）を押してサイコロの目が変わっていくかも確認してください。
※エラーが出ちゃった場合は目を皿のようにして間違いを見つけてください。
例えば以下のようなエラー文字が出た場合は、『「playdice.php」ファイルの「14行目」を実行しようとしたんだけどぉ、予測できない構文エラーが見つかっちゃったんだぁ。ちょっと修正してよ。』みたいなことが書かれています。適当な訳文ですみません。
今回は、８行目の入力時に「”」が一つ抜けていたためにエラーになっていました。
ボタンを押すとサイコロの目がかわる
ブラウザの更新ボタンでは味気ないので、ちゃんとしたボタンを作ってサイコロの目が変わるようにしてみましょう。以下のようにプログラムを改造します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php //サイコロの目を生成します define('PATH','dice_images'); //関数定義(playdiceの処理を関数で名dice_imagesでまとめます) function make_dice(){ //ランダムで1から6の数字を出す $number = mt_rand(1,6); $dice_images = "./".PATH."/dice".$number.".png"; return $dice_images; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ボタン押したらサイコロの目が変わるよ</title> </head> <body> <h1>ボタンを押したらサイコロの目が変わるよ！</h1> <!- form actionでボタンを押したときの動きを設定 -> <!- button でボタンを作成します -> <form action= "playdice.php" > <button type="submit">サイコロを振る</button><p> </form> <img src="<?php echo make_dice(); ?>"> </body> </html> |
どうですか？ボタンができましたか？ちなみに <p>タグでボタンとサイコロの画像の間に１行空くようにしています。これなかったらボタンとサイコロの画像がピッタリくっついて、なんかイヤです。
※あとはアレンジで、サイコロの画像を３つ出すようにしたりして遊んでみてください。
ホントはこのあと、関数だけ別のファイルにして呼び出すようにしたり、POSTとかGETの呼び出し方でどうやらこうやら勉強したんですが、ちょっとむずかしいから飛ばしました。そのへんのところはまたの機会に紹介しますね。
それでは本日も最後までお付き合いいただき、ありがとうございました！
