メインコンテンツにスキップ

試合日程・結果一覧を作成する

AI アシスタントを使って、シーズンのすべての試合を一覧表示し、大会やチームで絞り込めるページを作成します。

対応者:Pedro Maia

試合日程・結果ページは、今シーズンのすべての試合(消化済みも未消化も)を日付ごとにまとめて一覧表示します。訪問者は、ディビジョン、カップ戦、チームで絞り込んだり、結果と今後の試合を切り替えたりできます。

開発者である必要はありません。ChatGPT や Claude などの AI アシスタントが、以下の指示をもとにページを作ってくれます。

始める前に

  • リーグに、API をオンにしたゴールドプランが必要です。API を使い始める をご覧ください。

  • シーズン ID が必要です。見つけ方は API のしくみ で説明しています。

  • まだリーグがありませんか? まず LeagueRepublic のデモリーグでプロンプトを試してみましょう。シーズン ID 153020000 を使用してください。

プロンプトの使い方

  1. 下のグレーのボックスからプロンプトをコピーします。

  2. シーズン ID を入力します。[MY-SEASON-ID] を自分の番号に置き換えます。

  3. 見た目の希望を伝えます。色やスタイルを説明するか、自分のウェブサイトやお気に入りのデザインのスクリーンショットを添付します。画像のほうがうまくいくことが多いです。何も伝えなければ、AI がシンプルなデザインを選びます。

  4. AI アシスタントに貼り付けて送信します。

  5. AI が出力したファイルを開きます。保存して、ダブルクリックでブラウザで開きます。

  6. リーグのウェブサイトと見比べて確認します。おかしな点があれば、「延期された試合が結果として表示されている」のように、AI に普通の言葉で伝えてください。修正してくれます。

プロンプト

始める前に、LeagueRepublic JSON API の仕様書 https://docs.api.leaguerepublic.com/leaguerepublic-read-api.md を読んでください。仕様書に記載されているサービス、ウェブアドレス、フィールド名だけを使用し、リクエスト制限、空の値、エラー、「road」がアウェイを意味することに関する規則に従ってください。このアドレスを開けない場合は、作業を止めて、仕様書を貼り付けるよう私に依頼してください。

私のリーグのシーズンのすべての試合を一覧表示する 1 ページのウェブページ(ブラウザで開ける 1 つの HTML ファイル)を作ってください。私のシーズン ID は [MY-SEASON-ID] です。

ページには次の機能を持たせてください。

1. Get Fixtures For Season サービスを使ってシーズンのすべての試合を一度だけ読み込み、絞り込みはすべて再読み込みなしでページ上で行います。

2. 2 つのタブを用意します。新しい順の「結果」と、早い順の「試合日程」(これから行われる試合)です。

3. 試合を日付ごとにまとめ、日付を見出しにします。

4. 各試合について、ホームチーム、スコアまたはキックオフ時刻、アウェイチーム、ディビジョン名またはカップ戦名、カップ戦のラウンド(ある場合)、会場を表示します。

5. 試合そのものから作成したメニューで、ディビジョンまたはカップ戦、およびチームで絞り込めるようにします。

6. 試合が延期された場合は、時刻の代わりにそのことを表示します。日程未定の試合は、「試合日程」タブの末尾にある専用セクションにまとめます。試合日が過ぎているのにまだ結果がない場合は、時刻の代わりに「結果待ち」と表示します。

7. データの再読み込みは 1 分に 1 回以下にしてください。

デザインはすっきりして、スマートフォンでも読みやすくしてください。ファイルの開き方と使い方を、わかりやすい手順で説明してください。不明な点があれば私に質問してください。

デザイン:[希望する見た目を記入、またはスクリーンショットを添付]

うまくいかないときは

  • ハーフタイムやPK戦のスコアが表示されない。この一覧には、現時点ではそうした補足情報は含まれません。マッチハブとチームページには含まれます。

  • 結果が表示されない。結果は、リーグが承認したあとにはじめて表示されます。

  • ページにエラーメッセージが表示される。シーズン ID が正しいか、リーグの API がオンになっているかを確認してください。

  • AI のプレビューウィンドウでページが動作しない。多くのプレビューは、ほかのウェブサイトからデータを取得できません。ファイルを保存して、代わりにブラウザで開いてください。

  • AI が仕様書を読めないと言う。ブラウザで仕様書のアドレスを開き、すべて選択してコピーし、AI に貼り付けてください。

Get Fixtures For Season サービスの詳細は、API 仕様書に記載されています。

こちらの回答で解決しましたか?