メインコンテンツへスキップ
見出し画像

ブラジリアン柔術の試合で「自分や仲間の試合、何時でどのマット?」を簡単に見れるページを作った。

    ブラジリアン柔術の大会に出たことがある人なら、たぶん全員が経験している面倒がある。

    自分の試合が何時に、どのマットで、誰とあるのかを調べるのが、とにかく大変なのだ。

    大会のブラケット(対戦表)は、階級ごとにバラバラのページになっている。男性・青帯・アダルト・ライトフェザー、で1ページ。女性・茶帯・マスター・ライト、でまた別のページ。SJJIFのワールドクラスの大会になると、その数が1,000を超える。

    自分の階級のページを探すだけでもひと苦労なのに、道場の仲間の試合も応援したいとなると、さらに面倒になる。仲間の階級を一人ずつ聞いて、その数だけページを開いて、名前を探して、試合番号と時刻をメモする。会場の電波が弱いと、それだけで20分溶ける。

    というわけで、作った。

    画像
    実際の画面はこんな感じ

    SJJIFワールド選手権2026とワールドノーギ選手権2026から、うちの道場(ARTA)の出場者だけを抜き出したタイムテーブルだ。51名・107試合が1ページに載っている。

    できること

    日付タブで4日間を切り替えられて、表示は3通り。

    • 時間順:その日のARTA勢の試合を時系列で。会場に着いたらまずこれを見る

    • 選手別:誰が何試合あるかが人ごとにまとまる。応援したい人を追える

    • マット別:同じマットの試合が並ぶ。自分のマットだけ見たいとき用

    選手名で検索もできる。51名もいると、当日は検索が一番速い。

    各試合には、時刻・マット番号・対戦相手・相手の所属・階級が入っている。地味に効いているのが**「57 / 105試合目」という表記**で、そのマットのその日の総試合数に対して自分が何番目か、が分かるようにした。柔術の大会は進行が遅れるのが常なので、時刻より「いま何試合目か」で見たほうが確実だからだ。

    カードの左端の色は帯色。白・灰・黄・青・紫・茶・黒で塗り分けてある。眺めたときに同じ帯の仲間が視覚的にまとまるようにした。

    どうやって作ったか

    ここからは作り方の話。結論から言うと、Claudeとの会話だけで、その日のうちにできた。

    きっかけは、少し前にフジロックのタイムテーブルページ(https://ciraf.jp/fujirock/)を作ったこと。自分が見たいアーティストだけを抜き出したページで、これが想像以上に快適だった。それを作りながら「これ、柔術でもできるのでは」と思ったのが始まりだ。

    実際にやったのは、Claudeに「この大会のARTA所属の人をピックアップして」と頼んだだけ。あとは全部やってくれた……と言いたいところだが、途中で2回、けっこう厄介な問題にぶつかっている。ここが面白かったので書いておく。

    壁1:ブラケットのサイトが自動取得を拒否する

    まず、大会サイトはサーバーからの自動アクセスを弾く。Claudeが直接ページを取りに行くと403で門前払いされた。ASJJFもSmoothcompも、IBJJFのブラケットシステムも全部ダメだった。

    解決策は、自分のPCのブラウザ経由で読み取るという方法。私が普段見ているのと同じブラウザからページを開けば、当然ふつうに見られる。そこからClaudeがデータを拾う形にした。1,054ブラケット・4,933試合の読み取りが数分で終わった。

    壁2:最初の抽出が半分以上抜けていた

    最初にできた一覧を見て、道場の仲間の名前がないことに気づいた。指摘したら原因が2つ判明した。

    ひとつは、ブラケット一覧が男女×アダルト/キッズで4ページに分かれていたこと。最初は「男性アダルト」しか読んでいなかった。もうひとつは、渡したURLがノーギの大会で、隣にギの本戦という別大会が並んでいたこと。合わせて8区分。ここを全部読み直して、5試合だった抽出結果が107試合になった。

    さらに厄介だったのがデータの構造で、ブラケットはSVGの画像として描かれていて、出場者が多い階級はページが1/3、2/3と分割される。ページごとに選手のIDが振り直されるため、素直に読むと別ページの選手と所属が入れ替わる。実際、最初の抽出では他道場の選手をARTA所属と誤判定していた。ページ単位で読み分けることで解決した。

    こういう「一見できているのに間違っている」データは、指摘しないと気づけない。出てきた結果を鵜呑みにせず、知っている事実と突き合わせるのは、AIを使ううえで結局いちばん大事な工程だと思う。

    デザインはフジロックから

    見た目はフジロックのページのトーンをそのまま持ってきた。深いインディゴの地にクリームの文字、角丸のカード、オレンジのアクセント。

    一点だけ工夫したのは、フジロックでステージごとの色として使っていた要素を、帯色に置き換えたこと。グリーンステージが緑だったのと同じ役割を、青帯・紫帯・茶帯が果たしている。競技が変わっても、情報の構造が同じなら設計は流用できる。

    白地版も作ってみたが、会場は照明が明るくてスマホが見づらいし、片手で一瞬だけ確認する使い方なので、暗い配色のほうが読みやすかった。

    次の大会に向けて

    このページ、データの配列を2つ差し替えるだけで次の大会に使い回せるように作ってある。ブラケットが公開されたら、また同じ手順で抽出して差し替える予定だ。

    同じ面倒を抱えている道場は多いと思う。柔術に限らず、剣道でも空手でもレスリングでも、「バラバラの対戦表から自分たちの分だけ抜き出したい」という需要はあるはずだ。

    まずは次の大会で実戦投入してみます!

     
     
    尾上裕典|Web制作20年のプロデューサー/シラフ株式会社。https://ciraf.jp Claude Codeでfog mail・Flower mail・天職占い・Weather Music・Drop Your Barsを開発。 AIと作るサービスの裏側を発信。

    あなたへのおすすめ