50歳からの人生 自分の好きなことやって生きていくことができるのか!? ここは「がっちゃん 」が実際に体験したことを記録し、楽しく人生を過ごせるためのヒントをさぐる研究所です!

Dockerで星占いのホームページを作って遊んでみた

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

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

 今回は、Dockerで作った「Webサーバ環境」に、占いのホームページをアップする勉強のお話しです!

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

どうやって占いの内容を考えるの!?

 まずはここですよねぇ。占いの専門家なら自分で考えられるんでしょうが、シロウトの私には占いなんて・・・ねぇ。

 ご安心ください!「利用条件を守ってくれたら個人で使用するのなら無料で使っていいよ!」という大変ありがたい占いサイトがあります!ここではまったくの非公開サイトで勉強するために使用するので、利用規約に合致します。ありがたく使わせていただきましょう。

http://jugemkey.jp/api/waf/api_free.php

 画面を下のほうにスクロールしていき「利用規約に同意する」を押すと次のような画面が出てきて占いデータの使い方が表示されます。これらを使って占いのホームページを作っていくことにします。

 今回は「Json」というデータの書き方ルールを使ってデータのやり取りをします。「Json」のことが分かりやすく説明されているサイトをご紹介させていただきますので、少しお勉強願います。

「分かりそうで」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.info/word13798.html
 それでも「Json」のことが分からない時は、分かったふりして、次に進んでいきましょう。

占いのデータを抽出

 先日、Dockerで作成した「phpコンテナ」を起動させます。コードエディタ「Visual Studio Code」を起動してphpフォルダ内に「uranai.php」ファイルを作成します。そして以下のコードを入力していきます。

 一度「ctrl」+「s」キーで保存してブラウザソフト(今回もgoogle chromeを使います)で「192.168.99.100/uranai.php」と入力して見てみましょう。以下のような文字だらけの画面になれば正解です。文字だらけですが「あ、占いのデータが並んでる!」ってわかると思います。

占いのサイトっぽくしてみる

 上のデータで占いができることが分かりましたね。次はこのデータを使って、より「占いのホームページ」っぽい作りにしていきましょう。

 それでは毎度のことですがブラウザで「192.168.99.100/uranai.php」を見てみましょう。以下のようになったらOKです。

 どうです!?星占いのサイトっぽくなりましたね。せっかくなので、もっと星占いのサイトっぽくしていきましょう!

星座と日付を指定できるようにする

 今までは占う日のデータを引っぱってきて、すべての星座の占いを表示させていました。でも、せっかくですから「星座と日付を指定する画面」から「占いの結果を出力する画面」に遷移させるようにしてみましょう。

 背景も白のままだと味気ないので、星座占いっぽい背景画像を付けてみることにします。よかったら以下からダウンロードして下さいね。背景画像は自分の好みの画像にしてくださって結構です。プログラムでは「uranai3.jpg」と「uranai4.jpg」としていますので、このファイル名に合わせていただくか、プログラムのほうを、好みの画像ファイル名に変更してくださいね。

 画像の保存先は、ホームページを作って保存している「php」フォルダに保存します。

占いサイトの背景画像
uranai3.jpg」「uranai4.jpg

星座と日付を指定する画面を作成

 まずは「星座と日付を指定する画面」(uranaistart.phpファイル)を作成します。作成する場所は「php」コンテナと同期させている「php」フォルダに作成しましょう。

 入力が完了したら、ブラウザで「192.168.99.100/uranaistart.php」と入力してみましょう。うまく出来上がれば、以下のようなサイトが表示されます。

 エラーメッセージが出た場合は、目を皿のようにしてプログラムコードを見てくださいね。たいていはホンマにしょうもないところでエラーになっています。

 星座占いのサイトっぽくなりましたねぇ。次は占いの結果を表示させる画面を作っていきましょう。

占いの結果を出力する画面を作成

 ファイル名を「uranai2.php」として同じく「php」フォルダに作成していきます。プログラムは以下の通りです。

 今回は、占いのデータ(ランキングや金運、仕事運など)をすべて表示させるようにしてみました。

 どうですか?うまく入力できましたか!?では、ブラウザで「uranaistart.php」画面を表示させて、「星座名」と「占う日付」を入力して「占う」ボタンを押してみて下さい!

 ちなみに、日付入力欄の「▼」マークを押すとこんな感じにカレンダーが出てきます。これは、「input type=“date”」というコマンドをブラウザソフト「google chrome」で見るとこのように表示されます。他のブラウザソフトでは微妙に表示が違ってきますので、よかったら確認してみてください。

 さて、占い結果の画面は、こんな感じに表示されましたでしょうか?

 こんな風に表示されれば完成ですね!残念ながらエラーが表示されているかたは、またもや目を皿のようにしてプログラムのコードチェックをしてください。

まとめ

 占いは、女の子ならキライな子はいませんね。わが家でこれを作って、嫁さんや娘に見せたら結構盛り上がってくれました!でも「この占い、お父さんが勝手に作ったんちゃう!?怪しいわぁ。」という嫌疑はかけられてしまいます。「いやいやJsonデータでどうとかこうとか・・・」としゃべってもご理解いただくのは難しいので「いやいや本職の占い師さんが占ってくれたデータを入れてるんだよぉ」とちょっと制作過程とは違いますが、こう言ったほうが理解してくれるかな、と思います。

 こんな風に面白みのあるサイトを制作すると「こんな仕事も楽しそう」と子どもにも分かってもらえるのがいいですね。「我が子もプログラム言語を学んで、面白いアプリを作って大儲けするのだ!」と思ったのでした。

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

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