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

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

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

対応者:Pedro Maia

試合日程・結果ページでは、シーズンのすべての試合を、終わったものもこれからのものも含めて日付ごとにまとめて一覧表示します。訪問者はディビジョン、カップ戦、チームで絞り込んだり、結果と今後の試合を切り替えたりできます。

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

始める前に

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

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

  • まだリーグがない場合は、まず LeagueRepublic のデモリーグでプロンプトを試してみてください。シーズン ID 153020000 を使用します。

プロンプトの使い方

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

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

  3. どのような見た目にしたいかを伝えます。色やスタイルを説明するか、自分のウェブサイトや気に入ったデザインのスクリーンショットを添付します。たいていは画像がいちばん効果的です。何も指定しなければ、AI がシンプルなデザインを選びます。

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

  5. 渡されたファイルを開きます。ファイルを保存し、ダブルクリックしてブラウザで開きます。

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

プロンプト

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

私のリーグのシーズンのすべての試合を一覧表示する 1 つのウェブページ(ブラウザで開ける 1 つの HTML ファイル)を作成してください。私のシーズン ID は [自分のシーズン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 仕様書に記載されています。

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