🎮

【アプリ開発】ドットポケモン図鑑「Pokédex」を作ってみた

に公開
PWA
アプリ開発
Pokémon
Cline
tech

https://github.com/Tomo0108/pokedex-v3

はじめに

こんにちは、ポケモントレーナーの皆さん。
今日ご紹介するのは、ドットで表現されたポケモンを堪能できる図鑑アプリ、その名も「Pokédex」。
ポケモンファンはもちろん、レトロゲーマーにはドストライクな1本です。

💡 インストール方法

アプリURL
https://pokedex-v3-mocha.vercel.app/

📱 スマートフォンの場合

  1. iPhoneユーザー

    • Safariでアプリにアクセス
    • 下部の「共有」ボタンをタップ
    • 「ホーム画面に追加」を選択
    • 完了！ ホーム画面にあの“ポケモン人形”アイコンが鎮座します

  2. Androidユーザー

    • Chromeでアプリにアクセス
    • メニューから「ホーム画面に追加」をチョイス
    • 確認画面で「追加」をタップ
    • ホーム画面にズドンとアプリのアイコン出現

💻 PCの場合

  • Chromeでアプリにアクセス
  • URLバーの右端に表示される“インストールアイコン”をクリック
  • 「インストール」をクリック
  • デスクトップアプリとして使用可能！

🎮 主な機能

  • レトロなデザイン：ゲームボーイ時代のピクセル感をフル再現
  • マルチ言語対応：日本語/英語の瞬時切り替え
  • カスタマイズ可能：スキンカラーとスクリーンカラーを自分色にカスタマイズ
  • 全世代対応：初代から第9世代まで、計1025体ものポケモンをフルカバー
  • 色違い対応：色違いポケモンにも対応しています。

🔧 技術仕様と実装詳細

デプロイメント設定

// vercel.json
{
  "version": 2,
  "buildCommand": "rm -rf .next && npm install && npm run build",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next",
      "config": {
        "installCommand": "npm install",
        "buildCommand": "rm -rf .next && npm run build"
      }
    }
  ],
  "git": {
    "deploymentEnabled": {
      "main": true
    }
  }
}

PWA設定

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['raw.githubusercontent.com'],
  },
}

データフェッチングと状態管理

  • データフェッチング

    • PokeAPIからの取得を効率化するためにキャッシュをかけるなど、読み込みを最適化

  • スプライト管理

    • 世代別スプライトのスタイル切り替え

アーキテクチャ

プロジェクト構造
├── public/
│   ├── icons/
│   │   └── poke-doll.png     # アプリアイコン
│   └── manifest.json         # PWAマニフェスト
├── src/
│   ├── app/
│   │   ├── globals.css       # グローバルスタイル
│   │   ├── layout.tsx        # レイアウトコンポーネント
│   │   └── page.tsx          # メインページ
│   ├── types/
│   │   └── pokemon.ts        # 型定義
│   └── utils/
│       ├── cache.ts          # キャッシュ管理
│       ├── createFallbackImage.js  # フォールバック画像生成
│       └── pokemon.ts        # ポケモンデータ処理

使用技術

  • フレームワーク: Next.js 14
  • スタイリング: Tailwind CSS
  • PWA対応: next-pwa
  • フォント: DotGothic16（ドットの神フォント）

カスタマイズ機能とUI設計

  • カラーテーマ

    • スキンカラー：図鑑の外装色をお好みに
    • スクリーンカラー：ブラウンやグリーン…気分でスクリーンを着せ替え

  • レスポンシブデザイン

    /* モバイルファーストでサクサク */
.pokedex {
  @apply flex flex-col md:flex-row gap-2.5;
  @apply max-w-[1000px] w-full p-4 rounded-lg;
}

/* スクリーン表示の見栄えを最適化 */
.screen {
  @apply w-full max-w-[300px] aspect-square mx-auto;
  @apply sm:w-full sm:max-w-none;
}

  • ゲームボーイ風UIコンポーネント

    • ドット感のあるフォントレンダリング
    body {
  @apply [image-rendering:pixelated];
  @apply [-webkit-font-smoothing:none];
  @apply [-moz-osx-font-smoothing:none];
}
    • インセットシャドウで立体感をプラス
    --shadow-inset: inset -2px -2px 0 0 #000, 
                inset 2px 2px 0 0 #404040;

📝 環境変数

NEXT_PUBLIC_POKEAPI_URL=https://pokeapi.co/api/v2
NEXT_PUBLIC_API_CACHE_TIME=3600
NEXT_PUBLIC_MAX_REQUESTS_PER_MINUTE=100

Discussion