ブレヒロの所持ユニットを使って、オリジナルのミニゲームを作ることは可能です。しかも今はAIの力を借りれば、プログラミングに詳しくない人でもかなり形にできます。
ただし、ここで大事なのは、いきなり「すごいゲームを作ろう」としないことです。順番を間違えると、すぐに行き詰まります。
今回は前編として、自分のパソコンの中だけでゲームの骨格を動かすところまでを目標にします。インターネットに公開して他のプレイヤーにも遊んでもらう方法は、次回の後編で扱います。
まずは自分のパソコンで、自分の所持ユニットが画像つきで表示されて、ゲームとして一通り遊べる状態を目指しましょう。これが「どんなゲームを作るか」「人に公開するか」を考えるための土台になります。
なお、「どんなゲームを作るか」は人それぞれです。この記事では特定のジャンルに限定せず、どんなゲームを作る場合でも共通する進め方を解説します。
私の開発環境について
先にお伝えしておくと、私はCursorというコードを書くための専用アプリに、OpenAIのCodex拡張機能を入れて開発しました。AIのモデルはGPT-5.4です。
Cursorは、普通のコードを書くアプリにAIアシスタント機能がくっついたものだと思ってください。ここにCodex拡張機能を追加すると、「こういうプログラムを作って」と日本語で指示するだけで、AIがコードを書いてくれます。
つまり、自分でプログラムを一行ずつ書くのではなく、AIに「何を作りたいか」を伝えて、AIに書いてもらうという進め方です。この記事で紹介する「AIへの指示」は、すべてこの環境で実際に使ったものがベースになっています。
そもそも、ブレヒロAPIで何ができるのか
まず前提を整理します。
APIとは何かというと、「あるサービスのデータを、別のプログラムから取りに行ける窓口」のことです。レストランにたとえると、APIは厨房とお客さんをつなぐ「注文カウンター」です。お客さん（あなたが作るゲーム）がカウンターに「ユニット一覧をください」と注文すると、厨房（ブレヒロのサーバー）がデータを出してくれる。直接厨房に入って料理するわけではなく、カウンター越しに受け取るだけ。これがAPIの基本的な考え方です。
ブレヒロAPIを通じてできることは、ブレヒロにログインする、ユーザーの所持ユニットや所持スフィアのデータを受け取る、ユニットやスフィアの詳細な情報を受け取る、画像やメタデータ（画像のURLや属性などの付属情報）を受け取る、そしてそのデータを使って別のゲームを作る、ということです。
ここで大事なのは、ブレヒロ本体を直接いじるわけではないという点です。あくまでブレヒロのデータを「読み取って使う」のであって、ブレヒロの中身を書き換えたりはしません。つまり、「ブレヒロの所持資産を使って遊ぶ、まったく別のゲームを作る」ということです。
どんなゲームを作るかはあなた次第です。探索型のダンジョンゲームでもいいし、カードバトルでもいいし、編成クイズでもいい。ブレヒロAPIは「素材を渡してくれる窓口」なので、その素材をどう料理するかは完全に自由です。
公式の開発者向けページをAIに読ませると、話が早い
ブレヒロには、開発者向けの公式ガイドページがあります。
BFH Developer Portal： https://bfh-developer-portal-front.vercel.app/ja/docs
このページには、アプリの登録方法からログインの仕組み、APIの使い方、サンプルのプログラムまで、開発に必要な情報がひととおり載っています。
ここで初心者に強くおすすめしたいのが、このページのURLをそのままAIに渡すことです。
たとえばCursorのCodexに、こう伝えます。
以下のページを参考にして、ブレヒロAPIを使ったブラウザゲームを作ってください。 https://bfh-developer-portal-front.vercel.app/ja/docs
こうすると、AIが公式ドキュメントの内容を踏まえたうえでコードを書いてくれます。自分で仕様書を読み解いてAIに伝え直す必要がありません。「料理のレシピを自分で覚えてシェフに口頭で伝える」のではなく、「レシピ本をシェフに直接渡す」ようなものです。そのほうが正確で、速いです。
今回のゴール：自分のパソコンで骨格を動かす
今回の前編で目指すのは、自分のパソコンの中だけでゲームが動く状態、いわゆる「ローカル環境」での完成です。
ローカル環境とは何かというと、自分のパソコンの中だけでプログラムを動かすことです。たとえるなら、自宅のキッチンで自分のためだけに料理を作るようなものです。お店を開いてお客さんに出す（インターネットに公開する）のはまた別の話で、それは次回の後編で扱います。
今回はまず、自宅のキッチンでレシピを試して「ちゃんと美味しいものが作れる」と確認するところまでを目標にします。
ゲーム作りは6段階で考えるとうまくいく
初心者が一番つまずきやすいのは、ログイン認証も戦闘ロジックも画像表示も画面設計も、全部同時にやろうとすることです。たとえるなら、家を建てるときに基礎工事と内装と外壁塗装を全部同時にやろうとするようなものです。これだと、どこに問題があるのかまったく分からなくなります。
ゲーム作りは次の6段階に分けて、一つずつ進めるのが基本です。
第1段階は、まず動く土台を作ること。第2段階は、Developer Portalでアプリを登録してログイン機能を入れること。第3段階は、所持ユニットと所持スフィアを読み込むこと。第4段階は、画像を表示すること。第5段階は、遊べるゲームにすること。第6段階は、面白くすること。
家づくりにたとえれば、第1段階が「まず柱と屋根だけの骨組みを建てる」、第2段階が「玄関に鍵をつける」、第3段階が「家具を運び込む」、第4段階が「壁紙を貼って見た目を整える」、第5段階が「住めるようにする」、第6段階が「住み心地をよくする」です。この順番を守ることが、途中で挫折しないための最大のコツです。
なお、ここまで読んで「自分はどんなゲームを作ればいいんだろう」と悩む方もいるかもしれません。でも、第4段階までは作りたいゲームのジャンルに関係なくやることは同じです。ログインして、データを取って、画像を出す。ここまでは全員共通の道です。だから、まずはジャンルを決めずに第4段階まで進めてしまって大丈夫です。自分の所持ユニットが画像つきで画面に並んだのを見たとき、「これを使ってこういうことをしたい」というアイデアが自然に湧いてくるはずです。
第1段階：まず動く土台を作る
最初にやるべきことは、API接続ではありません。まずは「ゲームとして最低限の画面」を作ることです。
たとえば、ユニット一覧を表示する画面、何体か選ぶ画面、開始ボタン、メインの画面、結果画面。このくらいの構成です。ゲームのジャンルがまだ決まっていなくても、「データを選んで、何かして、結果が出る」という流れはほぼすべてのゲームに共通します。
この段階では、本物のブレヒロデータでなくても構いません。仮のユニット情報で十分です。「仮のデータ」というのは、たとえば「テストユニットA、HP100、攻撃力50」のように自分で適当に作った架空のデータのことです。本物のデータを使う前に、まずゲームの「器」だけを先に作るわけです。
AIに出す指示も、最初はこのくらいで大丈夫です。
以下のページを参考にして、ブレヒロAPIを使ったブラウザゲームの土台を作ってください。 https://bfh-developer-portal-front.vercel.app/ja/docs まずは仮のデータでよいので、ユニット一覧、選択画面、開始ボタン、メイン画面、結果画面を作ってください。最初は遊べる最小構成を優先してください。ローカル環境（自分のパソコン上）で動かすことを前提にしてください。
ここで大切なのは、「最初はAPIを無視してもいい」と割り切ることです。画面が動く状態を先に作っておくと、次の段階でAPIをつないだときに「何が変わったか」「どこで失敗したか」がはっきり分かります。
第2段階：Developer Portalでアプリを登録して、ログイン機能を入れる
ここが、初心者にとって一番「何をすればいいのか分からない」と感じやすいところです。順番に説明します。
まず、Developer Portalでアプリを登録する
ブレヒロAPIを使うには、まず「あなたのアプリはこういうものです」とブレヒロ側に届け出る必要があります。これは、たとえるなら「お店を開くために営業許可証を取る」ようなものです。許可証がないと、ブレヒロのデータにアクセスさせてもらえません。
登録はBFH Developer Portal（ https://bfh-developer-portal-front.vercel.app/ja/docs ）から行います。「新しいアプリケーションを作成」という画面が出てくるので、そこにアプリの情報を入力していきます。
今回はローカル環境で自分だけ動かすのが目標なので、登録内容もローカル用だけで大丈夫です。 インターネット公開用のアドレスは、次回の後編で追加します。
入力項目が分からなければ、フォームの内容をそのままAIに聞く
この登録フォームには「グラントタイプ」「スコープ」「CORSオリジン」といった見慣れない項目がたくさん並んでいます。正直、初めて見る人は「何を選べばいいか全然分からない」と思うはずです。
そういうときは、フォームの内容をそのままコピーしてAIに貼り付けてしまうのが一番早いです。
たとえば、CursorのCodexやChatGPTに、こう聞きます。
ブレヒロAPIを使ったブラウザゲームを、自分のパソコン上（ローカル環境、localhost:3000）だけで動かしたいです。 BFH Developer Portalで「新しいアプリケーションを作成」という画面が出てきました。 以下のフォームの各項目に、何を入力・選択すればいいか教えてください。
アプリケーション名 *
説明
リダイレクトURI * (1行に1件)
CORSオリジン (1行に1件)
グラントタイプ * ・authorization_code（Standard authorization flow） ・refresh_token（Enable token refresh capability） ・client_credentials（Server-to-server authentication）
レスポンスタイプ * ・code（Authorization Code Flow） ・code id_token（Hybrid Flow）
スコープ * ・openid ・profile ・email ・offline_access
トークンエンドポイント認証方法 * ・client_secret_basic
ログアウト後リダイレクトURI (1行に1件)
クライアントURI ロゴURI プライバシーポリシーURI 利用規約URI 連絡先メール
こうすると、AIが「この項目にはこれを入れてください」「ここはチェックを入れてください」「ここは空欄で大丈夫です」と、一つずつ教えてくれます。
これは、たとえるなら役所の申請書類を窓口の人に見せて「ここ、何て書けばいいですか？」と聞いているのと同じです。分からないまま自分で埋めようとするより、プロに聞いたほうが確実で速い。AIはこういう「フォームの記入案内」がとても得意です。
ここから先は、AIの回答どおりに入力すれば登録できます。ただし、内容を理解しておいたほうが次のステップで困らないので、各項目の意味も説明しておきます。
各項目の意味
「アプリケーション名」 は、あなたが作るゲームの名前です。自分が分かればよいので、たとえば「ブレヒロミニゲーム」のような名前で構いません。
「説明」 は、アプリの簡単な紹介文です。「ブレヒロの所持ユニットで遊ぶミニゲーム」程度で大丈夫です。
「リダイレクトURI」 は、ログインが完了したあとにユーザーを戻す先のアドレスです。今回はローカル環境なので **「http://localhost:3000/callback」だけ**入れれば大丈夫です。たとえるなら、「ログインした後にどこの部屋に案内するか」を指定するものです。インターネットに公開するときの本番用アドレスは、次回の後編で追加します。
「CORSオリジン」 は、あなたのアプリがブレヒロのサーバーにアクセスしてよい「許可されたアドレス」の登録です。今回は 「http://localhost:3000」だけで大丈夫です。
「グラントタイプ」 は、ログインの方式の選択です。ここは「authorization_code」（標準的なログインの流れ）と「refresh_token」（ログイン状態を自動で延長する機能）の2つにチェックを入れます。「client_credentials」はサーバー同士の通信用で、今回は不要です。
「レスポンスタイプ」 は「code」を選びます。これが標準的な方式です。
「スコープ」 は、あなたのアプリがどこまでの情報にアクセスしてよいかの範囲指定です。「openid」「profile」「email」「offline_access」の4つすべてにチェックを入れます。「offline_access」を入れないと、1時間ごとに再ログインしなければならなくなるので、必ず入れてください。
「トークンエンドポイント認証方法」 は「client_secret_basic」（推奨）を選びます。これは「アプリがブレヒロに対して自分が本物であることを証明する方式」です。
「ログアウト後リダイレクトURI」 は、ログアウトしたあとにユーザーを戻す先です。省略可能ですが、入れておくなら 「http://localhost:3000」 です。
「クライアントURI」「ロゴURI」「プライバシーポリシーURI」「利用規約URI」「連絡先メール」 は、アプリの追加情報です。ローカル環境で試すだけなら空欄で構いません。インターネットに公開するときに埋めればよいです。
すべて入力したら「アプリケーションを作成」を押します。すると、Client ID（アプリの識別番号）とClient Secret（秘密の鍵）が発行されます。この2つは必ず控えておいてください。特にClient Secretは一度しか表示されない場合があるので、すぐに安全な場所に保存してください。
次に、この登録内容をAIに伝えてログイン機能を作る
ここがこの記事で最も伝えたいポイントの一つです。いま登録した内容を、そのままAIに伝えてしまいましょう。
AIへの指示はこうです。
以下のページを参考にして、ブレヒロAPIのOAuthログイン機能を実装してください。 https://bfh-developer-portal-front.vercel.app/ja/docs
Developer Portalで以下の設定でアプリケーションを登録しました。ローカル環境で動かすことが前提です。
アプリケーション名：（あなたが登録した名前） リダイレクトURI：http://localhost:3000/callback CORSオリジン：http://localhost:3000 グラントタイプ：authorization_code と refresh_token レスポンスタイプ：code スコープ：openid、profile、email、offline_access トークンエンドポイント認証方法：client_secret_basic
Client IDとClient Secretは環境変数（プログラムの外で管理する設定値）で管理してください。 Client Secretはサーバー側だけで扱い、ブラウザ側のコードには絶対に含めないでください。 ログイン後はセッションで管理してください。 アクセストークンの有効期限が切れたらrefresh_tokenで自動更新する処理も入れてください。
なぜここまで細かく伝えるかというと、AIはあなたがDeveloper Portalで何を設定したか知らないからです。たとえるなら、「家の鍵を作って」と大工さんに頼むとき、「玄関のドアの型番はこれで、シリンダーの種類はこれです」と伝えなければ、合う鍵は作れません。Developer Portalの設定内容は、まさにこの「型番の情報」にあたります。
ここまで渡せば、AIはあなたの登録内容に合ったログイン機能のコードを書いてくれます。
補足：Client Secretの扱いについて
Client Secret（秘密の鍵）は、絶対にブラウザに表示されるコードの中に書いてはいけません。これは家の合鍵を玄関の外に貼り出すようなもので、誰でもあなたのアプリになりすませてしまいます。今回はローカル環境で自分だけが使うとはいえ、この習慣は最初から身につけておくことが大事です。必ずサーバー側（裏方のプログラム）だけで扱い、環境変数という仕組みで管理してください。AIへの指示でもこの点を明記しておけば、AIがその方針でコードを書いてくれます。
第3段階：所持ユニットと所持スフィアを読む
ログインできたら、次はブレヒロの本物のデータを読み込みます。
ここで初心者がハマりやすいのは、APIから返ってくるデータの形が想像と違うことです。たとえば、ユニットの名前もHPも画像も全部まとめて返ってくると思っていたのに、実際にはIDだけが返ってきて、詳しい情報は別の窓口から取る必要があった、ということが普通に起きます。
これは、図書館にたとえると分かりやすいです。「蔵書一覧をください」と頼んだら、本のタイトルや内容ではなく「管理番号の一覧」だけが返ってきた、という状況です。本の中身を知りたければ、その管理番号を使って改めて「この番号の本の詳細を教えてください」と聞き直す必要がある。APIの世界ではこれがごく普通のことです。
だから、AIにはこう伝えます。
APIから返ってくるデータの形式が違っても吸収できるように、データを統一の形に変換する関数を作ってください。ユニットIDしか返らない場合は、詳細APIやメタデータをたどって、名前、属性、レベル、レアリティ、画像まで取れるようにしてください。
この「データの形を統一する」という考え方が非常に大事です。どんな形でデータが返ってきても、ゲーム側ではいつも同じ形で扱えるようにしておく。具体的には、id、name、element（属性）、role（役割）、rarity（レアリティ）、rank、imageUrl、stats（能力値）、artSkill、braveBurstといった項目に揃えておきます。こうしておくと、あとの開発が格段に楽になります。
第4段階：画像を表示する（ここは手間取る前提で進める）
見た目の印象はとても大事です。ユニット名がテキストで並んでいるだけでは、ゲームらしく見えません。画像が出るだけで、一気に「これはゲームだ」という印象に変わります。
ただし、正直に言うと、画像まわりは一発でうまくいくとは限りません。 これはブレヒロAPIに限った話ではなく、外部のデータから画像を取得して表示すること自体が、初心者がつまずきやすいポイントです。
なぜかというと、APIから返ってくるデータの中に画像のURLがそのまま入っているとは限らないからです。たとえるなら、通販で商品を注文したら、商品そのものではなく「倉庫の棚番号」が届いた、という状況です。その棚番号をもとに倉庫に行き、さらに棚の中の箱を開けて、ようやく商品写真が出てくる。APIの画像取得もこれと同じように、何段階かたどらないと目的の画像にたどり着けないことがあります。
だからこそ、AIへの指示の仕方が重要になります。ポイントは、「画像を表示して」ではなく、「画像が出ない前提で、原因を調べながら表示して」と頼むことです。
まず最初のAI指示
最初は、全体の流れをAIに伝えます。
ブレヒロAPIを使ったゲームを作っています。ユニット画像とスフィア画像を表示したいです。
ただし、最初から画像URLがそのまま返るとは限らないので、次の順番で実装してください。
- 所持ユニット一覧を取得する
- ユニット詳細を取得する
- 詳細に画像URLがなければメタデータをたどる
- メタデータからimageの項目を探す
- 見つかった画像URLを画面に表示する
- 失敗時は代替表示にする
同じようにスフィア画像も取得してください。
また、失敗したときに原因が分かるように、調査用の表示やログも追加してください。
この指示のポイントは「最初から失敗する可能性がある」と明言していることです。AIに「うまくいく前提」で書かせると、うまくいかなかったとき原因がまったく分かりません。最初から「失敗したときの備え」を含めて作らせることで、問題が起きても対処できる状態になります。
画像が表示されなかったとき
最初の指示で画像が表示されないことは、十分あり得ます。そのときは慌てずに、次の指示をAIに出します。
画像が表示されません。次の切り分けをしてください。
- APIから返ってきたデータのどの項目に画像の候補があるか洗い出す
- メタデータを取得してimageの項目があるか確認する
- 画像URLが直接画像なのか、さらに別のデータへのリンクなのか確認する
- それでも見つからなければ、実際に返ってきたデータの構造を画面で見えるようにする
ユニット1体を指定して、画像取得の経路を追跡できるようにしてください。
これは、病院のたとえで言えば「どこが痛いか分からないので、まず検査してください」と頼んでいるのと同じです。いきなり治そうとするのではなく、まず原因を特定する。この順番が大事です。
画像の取得経路を調べさせるとき
調査しても画像URLが見つからない場合、もう少し踏み込んだ指示を出します。
このAPIでは画像URLが直接見えない可能性があります。他のサイトでは画像表示に成功しているので、次の観点で調査してください。
- ユニットIDやその他のIDからメタデータのURL規則を推測する
- 基本のメタデータを取得する
- imageの項目があるか確認する
- 画面側ではメタデータのimageを優先して使うようにする
ユニットとスフィアの両方に対応してください。
ここでのポイントは「他のサイトでは画像表示に成功している」という情報を添えていることです。こう伝えると、AIは「画像自体は存在するが、取得経路が違うのだろう」と判断して、別のアプローチを試してくれます。
調査用の機能をしっかり入れたいとき
問題が起きたとき、画面上で原因を追える仕組みがあると格段に楽になります。こう指示します。
画像取得は失敗しやすいので、調査用の機能も入れてください。
必要なのは次です。
- ユニットのAPIから返ってきた生のデータを確認できる画面
- スフィアのAPIから返ってきた生のデータを確認できる画面
- 特定のユニット名を指定すると、その画像候補のURLを一覧で見られる画面
- メタデータを直接取得して、中身が画像なのかさらに別のデータなのか確認できる画面
初心者でも原因が追いやすい形で作ってください。
この「調査用の画面」というのは、たとえるなら車のボンネットを開けてエンジンの状態を見られるようにすることです。普段は使わないけれど、故障したときにこれがあるかないかで、復旧にかかる時間がまったく違います。
画面への表示まで一気に仕上げたいとき
調査が済んで画像のありかが分かったら、最後に表示まで含めてAIに仕上げてもらいます。
画像取得だけでなく、画面への表示まで完成させてください。
要件は次のとおりです。 ユニット画像があれば実際の画像を表示する。失敗した場合は代わりの表示を出す。スフィア画像も同様にする。読み込み中、成功、失敗がそれぞれ分かるようにする。画像が多い場合に重くなりすぎないように、折りたたみ表示も入れる。
まずは確実に表示されることを優先してください。
実際に通りやすいAI指示文の完成版
ここまでの流れをまとめた、コピーしてそのまま使える指示文も載せておきます。
ブレヒロAPIを使ったゲームで、ユニット画像とスフィア画像を表示したいです。ただし、画像URLが単純なAPIの返答に入っていない可能性があるので、次の順番で実装してください。
- 所持ユニット・所持スフィアを取得
- 詳細APIを取得
- 詳細に画像URLがなければメタデータをたどる
- メタデータのimageの項目を探す
- 見つけた画像URLを画面に表示
- 失敗時は代替表示を出す
加えて、問題が起きたとき原因が分かるように、調査用の画面も追加してください。
必要な調査用画面は次のとおりです。 ユニットのAPIから返ってきた生データの確認。スフィアのAPIから返ってきた生データの確認。特定ユニットの画像候補の確認。メタデータの中身の確認。
まずは1体でも画像が出る状態まで持っていき、そのあとで全件に広げてください。
この段階で覚えておきたいこと
画像まわりは一発でうまくいくとは限りません。だからこそAIには、最初から「表示して」ではなく「調査しながら表示して」と頼むのがコツです。とくに「調査用の機能を入れてください」という一言は非常に重要です。この一言があるかないかで、問題が起きたときの対処スピードがまったく変わります。
ここまで来ると、自分の所持ユニットが画像つきで画面に並んでいる状態になります。この時点で、「このユニットたちを使ってこんな遊びができたら面白いな」というイメージが浮かんでくるはずです。次の段階からは、そのイメージを形にしていきます。
第5段階：遊べるゲームにする
ここから先は、あなたが「どんなゲームを作りたいか」によって進め方が変わります。第4段階まではどんなジャンルでも共通でしたが、ここからは自分のアイデアをAIに伝える段階です。
たとえば、探索型のダンジョンゲームを作りたいなら「3体選んで遺跡を進み、戦闘と報酬選択があるゲーム」と伝える。カードバトルを作りたいなら「所持ユニットをカードに見立てて、1対1で出し合う対戦ゲーム」と伝える。編成パズルなら「属性の組み合わせでスコアが変わる編成チャレンジ」と伝える。何を作るかは完全にあなたの自由です。
ここでのコツは、最初から大作を目指さないことです。最初のカレーライスを作るときに、いきなりスパイスを20種類そろえる必要はありません。まずはルウで作る家庭のカレーでいいのです。
AIに伝えるときは、たとえばこういう形です。
ブレヒロの所持ユニットを使った（あなたが作りたいジャンル）のゲームを作ってください。最小の構成で、最後まで一通り遊べることを優先してください。ローカル環境で動くことを前提にしてください。
この段階では「面白さ」より「最後まで一通りプレイできること」が優先です。途中で止まるゲームでは、面白さの検証すらできません。まず動くものを作って、そこから「ここをもっとこうしたい」と改善していくほうがずっと効率的です。
第6段階：面白くする
ここから先が、ゲーム開発としての本番です。
第5段階で「一通り遊べる」状態まで来たら、次は「もう一回やりたい」と思わせる仕掛けを入れていきます。何を面白いと感じるかは人によって違いますし、ゲームのジャンルによっても変わります。だからこの段階では、あなた自身が実際にプレイしてみて、「ここが物足りない」「ここを変えたい」と感じたことをAIに伝えていくのが一番確実です。
このときの伝え方が大事です。「つまらないので面白くしてください」だけでは伝わりません。医者に「具合が悪いです」とだけ言うのと、「昨日から右の奥歯が冷たいものでしみます」と言うのでは、治療の精度がまったく違います。AIへの指示も同じで、何が物足りないのか、どこを変えたいのか、どういう方向に持っていきたいのかを具体的に伝えることが大事です。
たとえば、こういう伝え方です。
このゲームは一通り遊べますが、繰り返し遊ぶ動機が弱いです。選択によってリスクとリターンが変わる仕組みを入れてください。
あるいはこうです。
戦闘の結果が一瞬で決まるので味気ないです。ユニットが順番に行動する演出を入れてください。
あるいはこうです。
初めてプレイする人がどこを押せばいいか分からないので、最初にチュートリアルを入れてください。
このように「自分が感じた不満」を言語化してAIに渡す。これを繰り返していくと、ゲームがどんどんあなたの理想に近づいていきます。
AIへの指示は「段階ごとに具体的に」が鉄則
初心者に一番伝えたいのはここです。AIにうまく仕事をしてもらうには、「全部まとめて雑に頼む」のではなく、「段階ごとに、何をやってほしいかを具体的に言う」ことです。
非常に使いやすい指示のひな形はこうです。
以下のページを参考にして、ブレヒロAPIを使ったブラウザゲームを作りたいです。ローカル環境（自分のパソコン上）で動かすことが前提です。 https://bfh-developer-portal-front.vercel.app/ja/docs
Developer Portalで以下の設定でアプリを登録済みです。 グラントタイプ：authorization_code、refresh_token レスポンスタイプ：code スコープ：openid、profile、email、offline_access 認証方法：client_secret_basic リダイレクトURI：http://localhost:3000/callback CORSオリジン：http://localhost:3000
以下の順番で、一段階ずつ実装してください。
- 仮データで動く最小のゲーム画面
- OAuthログイン（refresh_tokenによる自動更新も含む）
- 所持ユニット取得
- ユニット詳細と画像取得（画像が見つからない場合のメタデータ追跡と調査用画面も含む）
- 所持スフィア取得と装備
- （あなたが作りたいゲームの説明）
毎回、実装だけでなく、動作確認の方法も書いてください。返ってくるデータの形式が違う場合に備えて、データを統一形式に変換する処理も入れてください。Client Secretはサーバー側の環境変数で管理し、ブラウザ側には絶対に含めないでください。
6番目の部分には、あなたが作りたいゲームの内容を自分の言葉で書いてください。「3体で遺跡を探索するゲーム」でも「カードバトル」でも「編成クイズ」でも、何でも構いません。
途中で問題が起きたら、こう追加します。
いま失敗しています。原因が分かるように、画面に調査用の情報を表示する機能を追加してください。エラーの内容やAPIから返ってきたデータの形式も見えるようにしてください。
面白さを改善したいならこうです。
このゲームは機能はありますが、（あなたが感じた具体的な不満）。（あなたが求める改善の方向）を入れてください。
AIは「優秀な大工さん」であって「建築家」ではない
ここは誤解してはいけない点です。AIに丸投げすれば、勝手にすべてうまくいくわけではありません。
AIが得意なのは、画面を作ること、ロジックを書くこと、APIをつなぐこと、不具合を調査すること、改善案を大量に出すこと。つまり「言われたことを高速に形にする」ことです。
一方で人間がやるべきなのは、何を作るか決めること、どの順番で作るか決めること、どこが面白くないかを言葉にすること。つまり「何を建てるか、設計図を描く」ことです。
AIは腕の立つ大工さんです。設計図を渡せば驚くほど速く形にしてくれます。でも、「どんな家に住みたいか」を決められるのは、施主であるあなただけです。
まとめ：今回やったこと、次回やること
今回の前編でやったこと
今回は、自分のパソコンの中でゲームの骨格を動かすところまでを6段階で進めました。仮データで土台を作り、Developer Portalにローカル用の設定でアプリを登録し、OAuthログインを実装し、所持ユニットとスフィアを読み込み、画像を表示し、自分が作りたいゲームの形にまとめ、面白さを調整する。ここまでが前編の範囲です。
この時点で、あなたのパソコンの中には「自分のブレヒロ資産で遊べるゲーム」の骨格ができあがっているはずです。
次回の後編でやること
次回は、このゲームを自分のパソコンの中だけでなく、インターネット上に公開して他のブレヒロプレイヤーにも遊んでもらえるようにする方法を解説します。具体的には、Netlifyというサービスを使ってゲームを公開する手順、Developer Portalに本番用のアドレスを追加する設定変更、他のユーザーがログインして自分の所持ユニットで遊べるようにする対応、などを扱う予定です。
大事なこと
開発環境は、私の場合はCursorにCodex拡張機能を入れてGPT-5.4を使いましたが、AIツールは何でも構いません。大事なのは3つです。「一気に全部」ではなく「段階ごとに具体的に」指示すること。公式の開発者向けページ（ https://bfh-developer-portal-front.vercel.app/ja/docs ）のURLをAIに直接渡すこと。そしてDeveloper Portalで登録した設定内容もAIに伝えること。この3つが成功のコツです。
ブレヒロAPIでゲームを作るというと難しく聞こえるかもしれません。でも実際には、やることを順番に分けていけば、驚くほど整理できます。まずは今回、自分のパソコンの中で骨格を動かすところまでやってみてください。
どんなゲームにするかは、あなた次第です。