2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

第1回:家庭の1,000枚以上のポケモンカードを超綺麗かつ簡単に管理できるWebアプリを作った話

Posted at

結論

家庭の1,000枚以上のポケモンカードを超綺麗かつ簡単に管理できるWebアプリを作りました。

デモ動画: 短縮版 ※FULLバージョンはGitHub README参照

課題感:なぜポケモンカード管理アプリを作ったのか

私の家では夫婦でポケカを楽しんでいます。
しかし大人買いと共に、ある深刻な問題に直面するようになりました。

それは、管理コストの増大 と、それに伴って、遊びたくてもデッキを満足に組むのに時間がかかりすぎて遊べないこと です。

  • デッキを組もうとしたら、「使いたいカードが見つからない」
  • デッキを少し修正したいが、「手持ちの中で入れ替え候補になるカードを洗い出すのが大変」

アナログなTCG(トレーディングカードゲーム)の宿命とはいえ、 「もっとスマートにストレスなくカードを管理し、本来の目的であるデッキ検討に時間を割けないか?」

解決策:「P TCG Home Gym Manager」とは

ということで、自宅専用のポケモンカード管理Webアプリとして、「P TCG Home Gym Manager」 を開発することにしました。

こだわりは、

  • ただのデータベースではなくWebアプリとしてユーザーが何も考えずに直感的に使えること
  • AIの力で登録の手間を極限まで減らすこと
  • エンジニアの端くれとして技術的面白さを感じられること

主な特徴は以下の3点です。

  1. 爆速検索: 独自のフィルタリングで、欲しいカードが瞬時に見つかる
  2. AI一括登録: 写真を撮るだけで、AIがカードを識別し自動登録(YOLO + Gemini)
  3. 進化サーチ: ポケモンの進化系統を可視化し、デッキ構築をサポート

Djangoとhtmxを組み合わせたSPA(Single Page Application)風のサクサクとした挙動により、ストレスフリーな操作感を実現しています。
自宅のローカルネットワーク内で動作し、PCはもちろん、スマホやタブレットからもアクセスできます。

主要機能紹介

1. 検索・フィルタリング機能

カード管理において最も重要なのは検索です。
このアプリでは、名称のキーワード検索に加え、属性によるフィルタを実装しています。

これにより、「水タイプのたねポケモンで、HPが〇〇以上のやつ」といった曖昧な条件でも、手持ちのカードからすぐに候補を見つけ出すことができます。

機能面に加え、非機能面についても工夫しています。
家庭用のスペックの限られたデプロイ環境×4桁以上のデータ量(画像ファイル含む)の条件下でも、ストレスフリーな操作感を得られることを重視しています。

2. AI一括登録(ハイブリッドAI戦略)

最も苦労したのがデータ登録の簡略化です。
日本のポケカは公式APIの提供がないため、公式サイトのクローリング or 手動登録、を選ぶ必要があります。
クローリングは向こうのサーバに負荷をかけたらアウトなので非現実的、とはいえ、何千枚ものカードを手入力で登録するのも、現実的ではありません。
そこで、写真を撮るだけ で登録できる機能を実装しました。

技術的には、ローカルAI(YOLO-World)とクラウドAI(Google Gemini)を組み合わせたハイブリッドなアーキテクチャを採用しています。

  1. YOLO-World(ローカル): 画像からカードの領域を高速に検出・切り出し
  2. Gemini(クラウド): 切り出した画像からカード名、型番などをOCR・解析

ユーザーは、スマホでカードを並べて撮影するだけ。あとはAIがバックグラウンドで解析し、カード情報を提示してくれます。
提示された内容を人間が確認・修正する必要はありますが(HITL的考え方)、0からの登録よりは10倍楽です。

3. 進化サーチ

デッキ構築時によくあるのが、進化先のカードはあるけど進化元がない、という事態です。
「進化サーチ」機能では、特定のポケモンを選択すると、その進化系統(進化元・進化先)の手持ち状況を一目で確認できます。

これにより、デッキ構築の試行錯誤が圧倒的にスムーズになりました。

4. どこからでもアクセス

本アプリはDockerコンテナとして、自宅MacBook上で稼働させています。

家の中のWi-Fiに繋がっていれば、別のPCからでもスマホからでも、同じデータにアクセス可能です。レスポンシブデザインにも対応しているため、カード登録はPCで勢いよく済ませ、スマホ片手にデッキを組む、といった使い方ができます。

家庭内DXと言っても過言ではない、はず。

今後の展望

現在はMVPとして、家族が必要とする最小限の機能を実装した段階です。
今後は以下のようなアップデートを計画しています。

  1. クラウド公開: 自宅外からもアクセス可能に。
  2. ユーザー管理・ログイン機能: 各個人のデッキ管理などを個別化
  3. タグ付け機能: マスタに縛られずに各個人が好きな観点(タグ)でカードを分類
  4. AI精度のさらなる向上: PoCの継続・学習データの蓄積による認識率アップ

まとめ:TCGプレイヤーとエンジニアの皆様へ

趣味の課題を技術で解決することは、エンジニアにとって最高の遊びの1つだと思っています。
要件定義相手もスケジュール/コスト交渉相手も、自分(あるいは家族)のみ、制約はなくあるのは自由だけです。

今回の遊びへの主なこだわりは、以下の通りです。

  • 技術: モダンかつ実用的な構成
    • Djangoの堅牢さ
    • htmxによる手軽な動的UI
    • DaisyUIによるコンシューマライクなデザイン
    • YOLOとGeminiというAI技術のPoCと採用
    • 検索に最適化したデータモデリング
  • 開発プロセス: 生産性を最大化するためのモダンなワークフロー(個人開発にはtoo muchかも)
    • Dockerによる環境分離
    • GitHubでの丁寧な運用・進捗管理
    • AIエージェントとのペアプログラミングによる仕様書駆動開発

これらの詳細は、次回以降の記事でシリーズ化してまとめていく予定です。

(予定)

  • 第2回:Django + htmx + DaisyUI:開発者の「認知負荷」と「実装工数」を最小化するWeb開発
  • 第3回:YOLO(ローカル)×Gemini(クラウド): ハイブリッドAI戦略と技術検証結果
  • 第4回:1GB Raspberry Piでの動作最適化: RasPiデプロイへの挑戦 失敗と学び
  • 第5回:個人開発こそDevOps:GitHub運用とDocker環境分離
  • 第6回:正規化より検索体験:ポケモンとトレーナーズを1テーブルで管理する実践的DB設計
  • 第7回:目的のためのMVP:目的達成のために最速で必要な価値を届けるAgileな決断
  • 第8回:AIエージェントと実践する仕様書駆動開発: 人間はコードではなく意思決定を書く

もし、「自分もこんなアプリを作ってみたい」「この技術構成について詳しく知りたい」と思われた方は、ぜひ次回の記事もご覧ください。

また、2月を目処にSaaS版としての一般公開も検討中です(予定は未定)。
もし少しでも興味を持っていただけたら、いいねやコメントで応援いただけると開発の励みになります!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?