NFLの試合結果を記録するページと結果を表示するページを作成した
NFLの試合結果を記録するページと結果を表示するページを作成した。2023年のNFLも全力で楽しむために！
(Week 1 が終わったが・・・ロジャースさん。。。マジかよ。。。推しチームの危機っす。。。早くも。。。)
NFLのファンである私は、同一週に複数の試合を見て楽しんでいる。
好きなチームの試合も観るが、勢いのあるチーム、連勝が続いているチームの試合を見たい。そのため、試合結果を確認する必要がある。
しかしながら、公式ページを見てしまうと、既に今週の試合結果も載ってしまっていることが多く、自分のペースで試合結果を記録したかった。
(迂闊にFacebookを開いたり、公式ページを開くと直ぐに結果が見れてしまうため、興ざめてしまう...)
NFLの試合結果を入力し、SQL文を生成するページを作成！
APIで結果を取得したかったが、公式の無料APIは無く、パートナー契約をする必要があったので断念。スクレイピングをやれば出来るじゃ?っとも思ったが、上手くいかず、時間もなかったので断念。
クラウド環境においてそのままDBに挿入させても良かったが、セキュリティをつける必要があり(一応）、時間的に余裕が無いのでローカルでSQL文を生成 -> コピペで挿入。っという方法を採用。
構成
- HTML + Javascript で作成
工夫したところ
- 32チームの結果を手動入力するため、入力ミスを出来るだけ減らしたかった。
- そのため、選択したチームは値リストから減らし、HTMLの要素を再生成する方法を取った。
コーディング
- Map を使ってリストを作成し、値リストを生成する
let teamList = new Map() teamList.set("SF", "49ers"); teamList.set("CHI", "Bears"); teamList.set("CIN", "Bengals"); teamList.set("BUF", "Bills"); teamList.set("DEN", "Broncos"); teamList.set("CLE", "Browns"); teamList.set("TB", "Buccaneers"); teamList.set("ARI", "Cardinals");
- 選択したチームをリストから削除し、selectの要素を再生成する
function recreateSelectValues(caller) { let winner = document.getElementById("winner"); let loser = document.getElementById("loser"); let draw1 =document.getElementById("draw1"); let draw2 = document.getElementById("draw2"); let byeWeek = document.getElementById("byeWeek"); if (caller === "winORlose") { // remove win team and lose team from map teamList.delete(winner.value); teamList.delete(loser.value); } else if (caller === "byWeek") { // remove bye week from map teamList.delete(byeWeek.value); } else if (caller === "draw") { // remove draw teams from map teamList.delete(draw1.value); teamList.delete(draw2.value); } // let currenWinterTean = winner.childElementCount; for (let i = 0; i < currenWinterTean; i++) { winner.children[0].remove(); // console.log(i); } let currenLoserTean = loser.childElementCount; for (let i = 0; i < currenLoserTean; i++) { loser.children[0].remove(); } let currenDraw1Tean = draw1.childElementCount; for (let i = 0; i < currenDraw1Tean; i++) { draw1.children[0].remove(); } let currenDraw2Tean = draw2.childElementCount; for (let i = 0; i < currenDraw2Tean; i++) { draw2.children[0].remove(); } let currenTean = byeWeek.childElementCount; for (let i = 0; i < currenTean; i++) { byeWeek.children[0].remove(); // console.log(i); } // generate team values again. generateTeamsValues(); } -- select 要素の子要素を再生成する function generateTeamsValues() { teamList.forEach(function (value, key, teamList) { let op = document.createElement("option"); op.value = key; op.text =value; op.className = "teamList"; document.getElementById("winner").appendChild(op); }) .....
試合結果を各ディビジョン毎に表示させるページを作成!!
php で mySQL にアクセスして取得する。
もう少し、weekが進んだら画面ショットを張る予定。
開発環境
- XAMMP.
- Apacheのデフォルトの設定では、 xampp -> htdocs 以下にファイルを置く必要あったので、こちらにディレクトリを作成し、コーディングして行った。
- エディタは、Visial Stadio Codeを採用。
本番環境
mySQLでは、SQL結果セットをクローズしないと、次のSQLを実行できないらしい(?)ので、その点を気を付けた。
/* 注意: 全てのレコードが取得されるか、結果セットがクローズされるまで
サーバーとやりとりを行うあらゆる関数は実行できません。あらゆる呼び出しは
'out of sync' を返します */
mysqli_query($link, "SET @a:='this will not work'");
こんな感じ。
<?php function generate_week_record($year, $mysqli){ // Get Max Week Number $sql = "SELECT MAX(WEEK) FROM team_result where YEAR = ".$year; $result = $mysqli->query($sql); $NUMBER_OF_WEEK = 0; if ($result = $mysqli->query($sql)) { // Get results while ($row = $result->fetch_assoc()) { $NUMBER_OF_WEEK = $row["MAX(WEEK)"]; } // Close results set $result->close(); } $Header = null; for ($i = 1; $i <= $NUMBER_OF_WEEK; $i++) { $Header = $Header."<td>"."Week ".$i."</td>"; } echo "<tr>"."<td>Team</td>".$Header."</tr>"."\n"; }
学んだこと&感想
- 自身としては初めてjavascriptを使った。javascriptの本は数冊読んだが、一からコーディングするのは初めて。慣れない所も多かったが楽しかった。
- 特にHTMLは静的であるため、これを扱うことに苦労した。何で初期化されないの？ループさせているんだが、上手くいかないな・・・?っということがあった。
- フロントエンドの開発も楽しい。
- 今更ながらXAMMPの使い方が分かったw XAMMP素晴らしいっす。。。笑
- サーバーサイドは、javaを使いたかったが、自身のLightsail環境は最安の環境であるため、メモリ不足の可能性があった。
- javaでもアプリ作成を頑張りたいが、、、次は何を作ろうか。。。
