戻る

ChatGPTでhtml更新

2025/01/09


概要

自分が担当しているサイトにこの冬に開催された高校スポーツ全国大会に出場した秋田県代表チームの成績を掲載している。ChatGPTがプロンプトに誠実に更新するかを試した。試したプロンプトは架空のもので実際のものではない。


実際のデータ

大会 男/女 開催日時間 学校名 開催場所
77回全国高校バスケット
Winter Cup 2024
大会サイト		 男子 2024/12/23 14:00 秋田工 - 北陸(福井)
49 - 95		 武蔵野の森
総合スポーツプラザ E コート
女子 2024/12/23 14:00 湯沢翔北 - れいめい(鹿児島)
78 - 56		 東京体育館 A コート
2024/12/24 14:00➁ 湯沢翔北 - 鵬学園(石川①)
63 - 88		 東京体育館 B コート
男子75回,女子36回
全国高校駅伝
大会サイト		 男子 2024/12/22 12:30出発 金足農
58位		 たけびしスタジアム
(京都市西京極)
女子 2024/12/22 10:20出発 秋田北鷹
48位		 (同上)
104回全国高校ラグビー
大会情報サイト		 2024/12/27 12:00① 秋田工 - 高川学園(山口)
35 - 29 		東大阪市花園ラグビー場Ⅲ
2024/12/30 9:30➁ 秋田工 - 山梨学院(山梨)
7 - 38		 東大阪市花園ラグビー場Ⅱ
103回全国高校サッカー
大会サイト		 2024/12/29 14:10① 西目 - 日章学園(宮崎)
1 - 6		 フクダ電子アリーナ
77回春高バレー
大会サイト		 男子 2025/01/05(日)第8試合17:20開始予定① 雄物川 - 松阪工(三重)
2 - 1
25 - 23
20 - 25
25 - 18		 東京体育館 Eコート
2025/01/06(月)第6試合15:00開始予定➁ 雄物川 - 鎮西(熊本)
0 - 2
13 - 25
20 - 25
- 		東京体育館 Bコート
女子 2025/01/05(日)第2試合10:30開始予定① 西彼杵(長崎) - 秋田令和
1 - 2
25 - 13
23 - 25
22 - 25		 東京体育館 Eコート
2025/01/06(月)第3試合11:30開始予定➁ 秋田令和 - 狭山ヶ丘(埼玉)
1 - 2
25 - 22
21 - 25
21 - 25		 (同上)Dコート

変更プロンプト

2025/01/06の秋田令和と狭山ヶ丘(埼玉)の結果を2-1に修正し、2025/01/07の埼玉高校との試合を追加し、全体をレスポンシブ対応にして

*実際とは違うプロンプトのテスト

大会 男/女 開催日時間 学校名 開催場所
77回全国高校バスケット
Winter Cup 2024
大会サイト		 男子 2024/12/23 14:00 秋田工 - 北陸(福井)
49 - 95		 武蔵野の森
総合スポーツプラザ E コート
女子 2024/12/23 14:00 湯沢翔北 - れいめい(鹿児島)
78 - 56		 東京体育館 A コート
2024/12/24 14:00➁ 湯沢翔北 - 鵬学園(石川①)
63 - 88		 東京体育館 B コート
男子75回,女子36回
全国高校駅伝
大会サイト		 男子 2024/12/22 12:30出発 金足農
58位		 たけびしスタジアム
(京都市西京極)
女子 2024/12/22 10:20出発 秋田北鷹
48位		 (同上)
104回全国高校ラグビー
大会情報サイト		 2024/12/27 12:00① 秋田工 - 高川学園(山口)
35 - 29 		東大阪市花園ラグビー場Ⅲ
2024/12/30 9:30➁ 秋田工 - 山梨学院(山梨)
7 - 38		 東大阪市花園ラグビー場Ⅱ
103回全国高校サッカー
大会サイト		 2024/12/29 14:10① 西目 - 日章学園(宮崎)
1 - 6		 フクダ電子アリーナ
77回春高バレー
大会サイト		 男子 2025/01/05(日)第8試合17:20開始予定① 雄物川 - 松阪工(三重)
2 - 1
25 - 23
20 - 25
25 - 18		 東京体育館 Eコート
2025/01/06(月)第6試合15:00開始予定➁ 雄物川 - 鎮西(熊本)
0 - 2
13 - 25
20 - 25
- 		東京体育館 Bコート
女子 2025/01/05(日)第2試合10:30開始予定① 西彼杵(長崎) - 秋田令和
1 - 2
25 - 13
23 - 25
22 - 25		 東京体育館 Eコート
2025/01/06(月)第3試合11:30開始予定➁ 秋田令和 - 狭山ヶ丘(埼玉)
2 - 1
25 - 22
21 - 25
25 - 23		 (同上)Dコート
2025/01/07(火)第1試合09:00開始予定③ 秋田令和 - 埼玉高校(埼玉)
2 - 0
25 - 18
25 - 19		 (同上)Cコート

レスポンシブデザイン

*レスポンシブWebデザインとは、デバイスの画面サイズに合わせてサイト表示を最適化する手法

スマホ画面


htmlコード

*当ページでは便宜上背景色、文字色など変更している

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keyword" content="秋田ふるさと応援団 レポート" />
<meta name="description" content="秋田ふるさと応援団 レポート" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>2024年末、2025年始試合情報</title>
<style type="text/css">
#table1 {width:95%;margin:20px auto;background-color:beige;}
#table1 th , #table1 td {
   border:1px solid black;
   text-align:center;
   padding:0.1rem;
}
#table1 td a {color:red;font-weight:600;}
#table1 td span {color:red;font-weight:600;}
@media (max-width: 768px) {
    #table1 {
        font-size: 0.8rem;
    }
    #table1 th, #table1 td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    #table1 {
        font-size: 0.6rem;
        overflow-x: auto;
        display: block;
    }
    #table1 th, #table1 td {
        padding: 0.3rem;
    }
}

</style>
<script type="text/JavaScript">
function OPEN(h){w = window.open(h,'new','width=1500,height=1200,scrollbars=yes,resizable=yes');w.focus();w.document.body.style.background="dimgray";}
</script>
</head>
<body>
<div id="root">
<h5><span>2025/01/08 現在</span></h5>
<table id="table1">
<thead>
<tr>
<th scope="col">大会</th>
<th scope="col">男/女</th>
<th scope="col">開催日時間</th>
<th scope="col">学校名</th>
<th scope="col">開催場所</th>
</tr>
</thead>
<tbody>
<!-- バスケット -->
<tr>
<th scope="rowgroup" rowspan="3">77回全国高校<b>バスケット</b><br>Winter Cup 2024<br><a href="https://wintercup2024.japanbasketball.jp/" target="_blank" rel="noopener">大会サイト</a></th>
<td>男子</td>
<td>2024/12/23 14:00</td>
<td><b>秋田工</b> - 北陸(福井)<br>49 - <span>95</span></td>
<td>武蔵野の森<br>総合スポーツプラザ E コート</td>
</tr>
<tr>
<td rowspan="2">女子</td>
<td>2024/12/23 14:00</td>
<td><b>湯沢翔北</b> - れいめい(鹿児島)<br><span>78</span> - 56</td>
<td>東京体育館 A コート</td>
</tr>
<tr>
<td>2024/12/24 14:00➁</td>
<td><b>湯沢翔北</b> - 鵬学園(石川①)<br>63 - <span>88</span></td>
<td>東京体育館 B コート</td>
</tr>

<!-- 駅伝 -->
<tr>
<th scope="rowgroup" rowspan="2">男子75回,女子36回<br>全国高校<b>駅伝</b><br><a href="https://mainichi.jp/koukouekiden/" target="_blank" rel="noopener">大会サイト</a></th>
<td>男子</td>
<td>2024/12/22 12:30出発</td>
<td><b>金足農<br><span>58位</span></b></td>
<td>たけびしスタジアム<br>(京都市西京極)</td>
</tr>
<tr>
<td>女子</td>
<td>2024/12/22 10:20出発</td>
<td><b>秋田北鷹<br><span>48位</span></b></td>
<td>(同上)</td>
</tr>

<!-- ラグビー -->
<tr>
<th scope="rowgroup" colspan="2" rowspan="2">104回全国高校<b>ラグビー</b><br><a href="https://www.mbs.jp/rugby/nc/tournament/?t=104" target="_blank" rel="noopener">大会情報サイト</a></th>
<td>2024/12/27 12:00①</td>
<td><b>秋田工</b> - 高川学園(山口)<br><span>35</span> - 29 </td>
<td>東大阪市花園ラグビー場Ⅲ</td>
</tr>
<tr>
<td>2024/12/30 9:30➁</td>
<td><b>秋田工</b> - 山梨学院(山梨)<br>7 - <span>38</span></td>
<td>東大阪市花園ラグビー場Ⅱ</td>
</tr>

<!-- サッカー -->
<tr>
<th scope="rowgroup" colspan="2">103回全国高校<b>サッカー</b><br><a href="https://www.jfa.jp/match/alljapan_highschool_2024/" target="_blank" rel="noopener">大会サイト</a></th>
<td>2024/12/29 14:10①</td>
<td><b>西目</b> - 日章学園(宮崎)<br>1 - <span>6</span></td>
<td>フクダ電子アリーナ</td>
</tr>

<!-- バレー -->
<tr>
<th scope="rowgroup" rowspan="6">77回春高<b>バレー</b><br><a href="https://www.haruko-volley.com//" target="_blank" rel="noopener">大会サイト</a></th>
<td rowspan="2">男子</td>
<td>2025/01/05(日)第8試合17:20開始予定①</td>
<td><b>雄物川</b> - 松阪工(三重)<br><span>2</span> - 1 <br>25 - 23<br>20 - 25<br>25 - 18</td>
<td>東京体育館 Eコート</td>
</tr>
<tr>
<td>2025/01/06(月)第6試合15:00開始予定➁</td>
<td><b>雄物川</b> - 鎮西(熊本)<br>0 - <span>2</span><br>13 - 25<br>20 - 25<br> - </td>
<td>東京体育館 Bコート</td>
</tr>
<tr>
<td rowspan="3">女子</td>
<td>2025/01/05(日)第2試合10:30開始予定①</td>
<td>西彼杵(長崎) - <b>秋田令和</b><br>1 -  <span>2</span><br>25 - 13<br>23 - 25<br>22 - 25</td>
<td>東京体育館 Eコート</td>
</tr>
<tr>
<td>2025/01/06(月)第3試合11:30開始予定➁</td>
<td><b>秋田令和</b> - 狭山ヶ丘(埼玉)<br><span>2</span> - 1<br>25 - 22<br>21 - 25<br>25 - 23</td>
<td>(同上)Dコート</td>
</tr>
<tr>
<td>2025/01/07(火)第1試合09:00開始予定③</td>
<td><b>秋田令和</b> - 埼玉高校(埼玉)<br>2 - <span>0</span><br>25 - 18<br>25 - 19</td>
<td>(同上)Cコート</td>
</tr>
</tbody>
</table>
<br> 
</div>
</body>
</html>

感想

これまでChatGPTをコーデングで使用した経験から、この程度は出来ると想像していたが、しっかりと論理的に更新されて感心している。例えば➂の意味も三回戦として理解し2025/01/07の曜日を火曜日に、2回戦の結果を秋田令和が勝ったようにセットの点数やセットカウントを2対1にしているなど、コードの意味を理解している。


戻る