Friction River Software - CakePHP5入門【WebAPI編⑦】JavaScriptから利用

CakePHP5入門【WebAPI編⑦】JavaScriptから利用

Ｂ美

今回は『WebAPI』を利用するHTMLファイルを作りましょう

まずは「get_ymd1」メソッドのほうからね

Ａ子

えっと、「年」「月」「日」という三つの引数を取るわけだから、ドロップダウンリストを三つ用意しようか

<select id="year">
  <option value="1994">1994年</option>
  <option value="1995">1995年</option>
  <option value="1996">1996年</option>
  ・・・（省略）・・・
  <option value="2024">2024年</option>
  <option value="2025">2025年</option>
  <option value="2026" selected>2026年</option>
</select>

<select id="month">
  <option value="1" selected>1月</option>
  <option value="2">2月</option>
  <option value="3">3月</option>
  ・・・（省略）・・・
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>

<select id="day">
  <option value="1" selected>1日</option>
  <option value="2">2日</option>
  <option value="3">3日</option>
  ・・・（省略）・・・
  <option value="29">29日</option>
  <option value="30">30日</option>
  <option value="31">31日</option>
</select>

Ｃ菜

実行ボタンも必要ですねぇ～

<button id="btn1">当選番号を取得</button>

Ｂ美

結果を埋め込む領域も用意してね

そうねぇ、テーブルが良いかしら

Ａ子

OK、こんな感じでどう？

<table border="1">
  <tr><th>実施回</th><td id="lottery_time"></td></tr>
  <tr><th>抽選日</th><td id="lottery_date_str"></td></tr>
  <tr><th>曜日</th><td id="lottery_week_str1"></td></tr>
  <tr><th>六曜</th><td id="lottery_rokuyo_str"></td></tr>
  <tr><th>ナンバーズ３の当選番号</th><td id="num3_str"></td></tr>
  <tr><th>ナンバーズ４の当選番号</th><td id="num4_str"></td></tr>
</table>

Ｃ菜

それに関連してCSSも記述しておきますね～

<style>
table th {
  width:200px;
  padding: 10px;
  color: white;
  background: black;
  text-align: center;
}

table td {
  width:250px;
  padding: 10px;
  text-align: center;
}
</style>

Ｂ美

それじゃ、HTMLファイルを「apitest01.html」という名前で保存して、ブラウザで表示してみなさい
あ、開発環境では「html」ディレクトリの直下に置いたから、URLは下記の通りね

http://192.168.1.205/apitest01.html

Ａ子

うん、良い感じだね

Ｂ美

さて、問題は「JavaScript」部分なんだけど…

document.getElementById('btn1').addEventListener('click', function () {

    const y = document.getElementById('year').value;
    const m = document.getElementById('month').value;
    const d = document.getElementById('day').value;

    const url = `http://192.168.1.205/numapp/api/get_ymd1/${y}/${m}/${d}`;

    fetch(url)
        .then(res => res.json())
        .then(data => {
            if (data.status.code == 200) {
                //OK
                document.getElementById('lottery_time').textContent = "第" + data.result.lottery_time + "回";
                document.getElementById('lottery_date_str').textContent = data.result.lottery_date_str;
                document.getElementById('lottery_week_str1').textContent = data.result.lottery_week_str1;
                document.getElementById('lottery_rokuyo_str').textContent = data.result.lottery_rokuyo_str;
                document.getElementById('num3_str').textContent = data.result.num3_str;
                document.getElementById('num4_str').textContent = data.result.num4_str;
            } else {
                //NG
                alert(data.status.message);
            }
        })
        .catch(error => {
            //通信エラー
            alert("通信エラー");
        });
});

このあたりは（難しく考えずに）定型的な記述だと思っておけば良いわよ

Ｃ菜

「data」という変数にJSONが格納されるから、その下の階層にアクセスするには「.ドット」を使えば良いんですね～？

Ｂ美

正解よ

案外、簡単でしょ？

Ａ子

いや、簡単かぁ？

ま、まぁ良いや
ブラウザで実行確認してみよう

・・・（ドロップダウンリストを選択してから「当選番号を取得」ボタンを押す）・・・

おぉ、2026年2月27日の情報が表示されたよ

Ｂ美

JavaScript内の定数「url」の内容を以下の記述に変更したものを本番環境であるサーバ上に置いておくから、こちらのリンクをクリックして実際に試してみてね
（リンクをクリックすると別ウィンドウで開きます）

const url = `https://friction-river.jp/numapp/api/get_ymd1/${y}/${m}/${d}`;

Ａ子

ふむふむ

んじゃ、次は「get_ymd2」メソッドだね

Ｃ菜

カレンダーを表示して、どこかの日をクリックするごとに（ボタンを押すことなく）情報を取得できるようにしたいです～

<input type="date" id="date">

この一文で「日付選択」は完成ですよ～

Ｂ美

「JavaScript」部分については、いくつか注意点があります

１．イベントを設定するのは日付選択（idは「date」）について
２．「click」ではなく「change」イベント
３．未選択状態については何もしない
４．「encodeURIComponent」メソッドを通して引数を渡す

全体像については、下記の通り

document.getElementById('date').addEventListener('change', function () {

    const ymd = this.value;

    if (!ymd) {
        return;
    }

    const url = `http://192.168.1.205/numapp/api/get_ymd2/${encodeURIComponent(ymd)}`;

    fetch(url)
        .then(res => res.json())
        .then(data => {
            if (data.status.code == 200) {
                //OK
                document.getElementById('lottery_time').textContent = "第" + data.result.lottery_time + "回";
                document.getElementById('lottery_date_str').textContent = data.result.lottery_date_str;
                document.getElementById('lottery_week_str1').textContent = data.result.lottery_week_str1;
                document.getElementById('lottery_rokuyo_str').textContent = data.result.lottery_rokuyo_str;
                document.getElementById('num3_str').textContent = data.result.num3_str;
                document.getElementById('num4_str').textContent = data.result.num4_str;
            } else {
                //NG
                alert(data.status.message);
            }
        })
        .catch(error => {
            //通信エラー
            alert("通信エラー");
        });
});

後半部分については、先ほどの「apitest01.html」と全く同じよ

Ａ子

ファイル名を「apitest02.html」にして保存したあと、ブラウザからアクセスしてみよう

http://192.168.1.205/apitest02.html

↓（左上のカレンダーマークをクリック）

↓（「4」をクリック）

Ｃ菜

完璧です～

ドロップダウンリストよりもカレンダーのほうが使い勝手が良いですね～

Ｂ美

こっちのほうも「url」を下記の一文に書き換えたものを本番環境に設置しておくから、このリンクをクリックしてみてね
（リンクをクリックすると別ウィンドウで開きます）

const url = `https://friction-river.jp/numapp/api/get_ymd2/${encodeURIComponent(ymd)}`;

Ａ子

確認してみたよ

何というか、簡単だったね

Ｃ菜

Ｂ美部長のおかげですよ～

Ｂ美

いや、ChatGPT先生のおかげなんだけどね（苦笑）

あ！
あと、トップページに表示する『WebAPI』の説明文だけど、どうすんの？

Ｃ菜

実は、こっそり作ってますよ～
タブ切り替えにしてるので、確認してみてください～

あ、トップページへのリンクも貼っておきますね～
（リンクをクリックすると別ウィンドウで開きます）

Ａ子

さすがはＣ菜、仕事が早い！

Ｂ美

Ａ子、あなたも見習いなさいね

Ａ子

はいはい（苦笑）

　

　