ドッカーで占いサイトを個人的に作って遊んでみたら子どもが大喜びだった│５０歳から『Ｒｅ：ＬＩＦＥ』やってみた

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

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

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

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

1 どうやって占いの内容を考えるの！？
2 占いのデータを抽出
3 占いのサイトっぽくしてみる
4 星座と日付を指定できるようにする
- 4.1 星座と日付を指定する画面を作成
- 4.2 占いの結果を出力する画面を作成
5 まとめ

どうやって占いの内容を考えるの！？

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

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

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」ファイルを作成します。そして以下のコードを入力していきます。

<?php
    $url = "http://api.jugemkey.jp/api/horoscope/free/2020/05/12";
    $json_data = file_get_contents($url);
    $json_data = mb_convert_encoding($json_data,'UTF-8','ASCII,JIS,UTF-8,EUC-jp,SJIS-WIN');
    $fortune_array = json_decode($json_data,true);
    echo "<pre>";
    var_dump($fortune_array);
    echo "<pre>";
?>

<?php

$url = "http://api.jugemkey.jp/api/horoscope/free/2020/05/12";

$json_data = file_get_contents($url);

$json_data = mb_convert_encoding($json_data,'UTF-8','ASCII,JIS,UTF-8,EUC-jp,SJIS-WIN');

$fortune_array = json_decode($json_data,true);

echo "<pre>";

var_dump($fortune_array);

echo "<pre>";

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

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

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

<?php
    $url = "http://api.jugemkey.jp/api/horoscope/free/2020/05/13";
    $json_data = file_get_contents($url);
    $json_data = mb_convert_encoding($json_data,'UTF-8','ASCII,JIS,UTF-8,EUC-jp,SJIS-WIN');
    $fortune_array = json_decode($json_data,true);

$uranai = $fortune_array["horoscope"]["2020/05/13"];
//echo count($uranai);  //占いの配列がいくつあるかを確認
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星座占い</title>

</head>
<body>
<h1>５月１３日(水）の星座占い</H1>
<?php for($i = 0; $i < count($uranai); $i++){ ?>
    <h2><?php echo $uranai[$i]['sign'] ?></h2>
    <p><?php echo $uranai[$i]["content"] ?></p>
    <ul>
        <li>ラッキーアイテム:<?php echo $uranai[$i]["item"] ?></li>
        <li>ラッキーカラー:<?php echo $uranai[$i]["color"] ?></li>
    </ul>
<?php } ?>

</body>
</html>

<?php

$url = "http://api.jugemkey.jp/api/horoscope/free/2020/05/13";

$json_data = file_get_contents($url);

$json_data = mb_convert_encoding($json_data,'UTF-8','ASCII,JIS,UTF-8,EUC-jp,SJIS-WIN');

$fortune_array = json_decode($json_data,true);

$uranai = $fortune_array["horoscope"]["2020/05/13"];

//echo count($uranai); //占いの配列がいくつあるかを確認

<!DOCTYPE html>

<head>

</head>

<body>

<h1>５月１３日(水）の星座占い</H1>

<?php for($i = 0; $i < count($uranai); $i++){ ?>

<ul>

<li>ラッキーアイテム:<?php echo $uranai[$i]["item"] ?></li>

<li>ラッキーカラー:<?php echo $uranai[$i]["color"] ?></li>

</ul>

<?php } ?>

</body>

</html>

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

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

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

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

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

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

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

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

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

<?php
//ここで出た結果を、結果を出力する「uranai2.php」のﾌｧｲﾙに持っていきます。
if(isset($_GET['my_horoscope']) || isset($_GET['selected_date'])){
    var_dump($_GET['my_horoscope']); //最初は何も選択されていないのでnullと出力される。
    var_dump($_GET['selected_date']); //最初は何も選択されていないのでnullと出力される。
    var_dump(str_replace("-","/",$_GET['selected_date']));  //このように変更すれば、日にちの値の齟齬が解消される。
}

$horoscopes = array("牡羊座","牡牛座","双子座","蟹座","獅子座","乙女座",
                "天秤座","蠍座","射手座","山羊座","水瓶座","魚座");
//$today = date("Y-m-d");
//var_dump($today);  ちゃんと日付がでるかどうかを確認
//追記(for eachの関数化)
function select_horoscopes($horoscopes){  //「select_horoscopes」という関数を作成。引数に$holoscopesをもらう。
    $options;
    foreach($horoscopes as $horoscope):   //一周するごとに$holoscopesに
        $options .= "<option value=\"".$horoscope."\">".$horoscope."</option>".PHP_EOL; //$optionsに右辺をひとつずつ足す(.=は+=と同義)。
    endforeach;
    return $options;
}
//var_dump(select_horoscopes($holoscopes));
?>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星座占い</title>
</head>
<body background = "./uranai4.jpg">
<font color="white">
    <h1>星座占い</h1>
    <form action="./uranai2.php" method="get">
    あなたの星座は？:<br>
    <select name="my_horoscope">
    <?php echo select_horoscopes($horoscopes); ?>  //for each文の代わりに、「select_holoscopes」関数で、呼び出すようにした。
    </select><br>
    占いたい日付:<br>
    <input type="date" name ="selected_date" id="" value=""<?php echo $today ?>">
    <button type = "submit">占う</button>
    <h4>（上のボタンを押すと、占い料5,000円が自動課金されます（シャレですよシャレ）。）</h4>
    </form>
    </font>
</body>
</html>

<?php

//ここで出た結果を、結果を出力する「uranai2.php」のﾌｧｲﾙに持っていきます。

if(isset($_GET['my_horoscope']) || isset($_GET['selected_date'])){

var_dump($_GET['my_horoscope']); //最初は何も選択されていないのでnullと出力される。

var_dump($_GET['selected_date']); //最初は何も選択されていないのでnullと出力される。

var_dump(str_replace("-","/",$_GET['selected_date'])); //このように変更すれば、日にちの値の齟齬が解消される。

}

$horoscopes = array("牡羊座","牡牛座","双子座","蟹座","獅子座","乙女座",

"天秤座","蠍座","射手座","山羊座","水瓶座","魚座");

//$today = date("Y-m-d");

//var_dump($today); ちゃんと日付がでるかどうかを確認

//追記(for eachの関数化)

function select_horoscopes($horoscopes){ //「select_horoscopes」という関数を作成。引数に$holoscopesをもらう。

$options;

foreach($horoscopes as $horoscope): //一周するごとに$holoscopesに

$options .= "<option value=\"".$horoscope."\">".$horoscope."</option>".PHP_EOL; //$optionsに右辺をひとつずつ足す(.=は+=と同義)。

endforeach;

return $options;

}

//var_dump(select_horoscopes($holoscopes));

<!DOCTYPE html>

<head>

</head>

あなたの星座は？:<br>

<?php echo select_horoscopes($horoscopes); ?> //for each文の代わりに、「select_holoscopes」関数で、呼び出すようにした。

</select><br>

占いたい日付:<br>

<h4>（上のボタンを押すと、占い料5,000円が自動課金されます（シャレですよシャレ）。）</h4>

</form>

</font>

</body>

</html>

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

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

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

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

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

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

<?php
if(isset($_GET['my_horoscope']) || isset($_GET['selected_date'])){  //このif文はuranaistartからコピペ。
    $my_horoscope = $_GET['my_horoscope'];
    $selected_date = str_replace("-","/",$_GET['selected_date']); 
    $url = "http://api.jugemkey.jp/api/horoscope/free/".$selected_date;
    @$json_data = file_get_contents($url);  //file_get_contentsにﾃﾞｰﾀがない場合は、falseで返します。
        if(!$json_data){
            die("指定された日付がで不適切です");   //exitと同じく、ここで終了となる。
        }
    $json_data = mb_convert_encoding($json_data,'UTF8','ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $fortune_array = json_decode($json_data,true);
    
    // echo "<pre>";
    // var_dump($fortune_array["horoscope"]["2020/05/13"]);
    // echo "<pre>";
    
    $fortunes = $fortune_array["horoscope"][$selected_date];
}else{  //else文からexit;は付け足しました。
    header("location:./uranaistart.php");  //uranaistart.phpﾍﾟｰｼﾞに移動(location)しなさいよ。
    exit;  //安全装置（誤動作防止）的に、ここで占い終了！と作法的に書いてます。
}

//echo count($uranai);  //占いの配列がいくつあるかを確認
?>
<!--uranai1の繰り返し分のもうひとつのタイプ-->
<!--でもって、自分の星座だけ出すようにしてみた！-->
<!--最後にuranaistart.phpと連動するﾌﾟﾛｸﾞﾗﾑを実装した-->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星座占い</title>

</head>

<body background = "./uranai3.jpg">
<font color="white">
<h1><?php echo $selected_date ?>の星座占い</H1>
<?php
    foreach($fortunes as $fortune):  //<!--持っている配列全部出して！という時に便利（foreach文）-->
        if($fortune["sign"] === $my_horoscope ):  ?>  <!--//if文で、自分の星座だけ、表示するようにしました。-->
        <h2><?php echo $fortune["sign"]?></h2>
        <p><?php echo $fortune["content"]?></p>
        <ul>
  　　　　　 <li>ランキング：第<?php echo $fortune["rank"] ?>位</li>          
　　　　　　 <li>ラッキーアイテム：<?php echo $fortune["item"] ?></li>
            <li>ラッキーカラー：<?php echo $fortune["color"] ?></li>
            <li>金　運（５段階）：<?php echo $fortune["money"] ?></li>
            <li>仕事運（５段階）：<?php echo $fortune["job"] ?></li>
            <li>恋愛運（５段階）：<?php echo $fortune["love"] ?></li>
            <li>総合運（５段階）：<?php echo $fortune["total"] ?></li>
        </ul>
        </font>
<?php
        endif;
    endforeach;
?>
<form action="uranaistart.php" ><button type="submit">もう一度占う！？</button>
</body>
</html>

<?php

if(isset($_GET['my_horoscope']) || isset($_GET['selected_date'])){ //このif文はuranaistartからコピペ。

$my_horoscope = $_GET['my_horoscope'];

$selected_date = str_replace("-","/",$_GET['selected_date']);

$url = "http://api.jugemkey.jp/api/horoscope/free/".$selected_date;

@$json_data = file_get_contents($url); //file_get_contentsにﾃﾞｰﾀがない場合は、falseで返します。

if(!$json_data){

die("指定された日付がで不適切です"); //exitと同じく、ここで終了となる。

}

$json_data = mb_convert_encoding($json_data,'UTF8','ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');

$fortune_array = json_decode($json_data,true);

// echo "<pre>";

// var_dump($fortune_array["horoscope"]["2020/05/13"]);

// echo "<pre>";

$fortunes = $fortune_array["horoscope"][$selected_date];

}else{ //else文からexit;は付け足しました。

header("location:./uranaistart.php"); //uranaistart.phpﾍﾟｰｼﾞに移動(location)しなさいよ。

exit; //安全装置（誤動作防止）的に、ここで占い終了！と作法的に書いてます。

}

//echo count($uranai); //占いの配列がいくつあるかを確認

<!DOCTYPE html>

<head>

</head>

<h1><?php echo $selected_date ?>の星座占い</H1>

<?php

foreach($fortunes as $fortune): //

if($fortune["sign"] === $my_horoscope ): ?>

<ul>

　　　　　 <li>ランキング：第<?php echo $fortune["rank"] ?>位</li>

　　　　　　 <li>ラッキーアイテム：<?php echo $fortune["item"] ?></li>

<li>ラッキーカラー：<?php echo $fortune["color"] ?></li>

</ul>

</font>

<?php

endif;

endforeach;

<form action="uranaistart.php" ><button type="submit">もう一度占う！？</button>

</body>

</html>

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

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

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

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

まとめ

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

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

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