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

チームページを作成する

AI アシスタントを使って、1 つのチームの結果と今後の試合を表示するページを作成します。

対応者:Pedro Maia

チームページでは、1 つのチームのシーズンをひと目で確認できます。勝ち、引き分け、負けを含む結果と、参加しているすべての大会の今後の試合が表示されます。クラブのウェブサイトに最適です。

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

始める前に

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

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

  • リーグのウェブサイトに表示されているとおりに正確に書いたチーム名が必要です。

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

プロンプトの使い方

  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 つのウェブページ(ブラウザで開ける 1 つの HTML ファイル)を作成してください。私のシーズン ID は [自分のシーズンID]、チーム名は [自分のチーム名] です。

ページでは次のことを行ってください。

1. 最初に読み込むときに、シーズンの試合からチームの ID を見つけ、その後 Get Fixtures For Team サービスを使います。ID は記憶しておき、再度調べなくて済むようにします。

2. チーム名をタイトルとして使います。

3. 試合を「結果」(新しい順)と「今後の試合」(近い順)に分けます。

4. 各試合について、日付、大会(カップ戦のラウンドがあればそれも)、対戦相手、ホームかアウェイか、スコアを表示します。スコアは私のチームを先に表示します。

5. 結果には、チームから見た「勝」「分」「敗」を表示します。同点で終わり PK 戦で決着した場合は、「分」の代わりに PK 戦の勝者と PK 戦のスコアを表示します。

6. 前半など、スコアの追加の詳細があれば小さな文字で表示します。試合が延期された場合は、時刻の代わりにその旨を表示します。試合日が過ぎてもまだ結果がない場合は、時刻の代わりに「結果待ち」と表示します。

7. データの再読み込みは 1 分に 1 回までにします。

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

デザイン:[希望するデザインを説明するか、スクリーンショットを添付]

うまくいかないときは

  • チームが見つからないと表示される。チーム名がリーグのウェブサイトと完全に同じ表記になっているか、そのチームがそのシーズンに参加しているかを確認してください。

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

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

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

Get Fixtures For Team サービスの詳しい情報は API 仕様書に記載されています。

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