# 小エビの間違いサラダ (Machigai Salad)

<p>
  <a href="https://nostalgic.llll-ll.com"><img src="https://api.nostalgic.llll-ll.com/visit?action=increment&id=github-b66ce845&format=image&theme=github" alt="Visitors" align="middle"></a>
  <a href="https://nostalgic.llll-ll.com/yokoso"><img src="https://api.nostalgic.llll-ll.com/yokoso?action=get&id=github-b66ce845&format=image" alt="Welcome" align="middle"></a>
</p>

紙に印刷された「間違い探し」をスマートフォンのカメラで撮るだけで、左右の絵をパタパタ切り替えて比較できるWebアプリです。画像はすべてブラウザ内で処理され、サーバーには一切送信されません。

**https://machigai-salad.llll-ll.com**

## 特徴

- **完全プライバシー保護** — 画像は一切アップロードされず、すべてブラウザ内で処理
- **コストゼロ** — 外部APIや従量課金のAIサービスは使用しない
- **簡単3ステップ** — 撮る → 角を合わせる → 比べる
- **長押しで切り替え** — 押している間だけ絵が変わる、子供にも直感的なUI
- **自動検出 + 台形補正** — OpenCV.jsで紙の角を検出し、斜め撮りも自動補正
- **コーナーワープ** — 比較画面で4隅をドラッグして微妙なずれを自由変形で補正
- **アンドゥ** — 角調整・比較画面で操作を一手戻せる
- **比較結果シェア** — クネクネ動画（GIF）・おわかりいただけただろうか動画（MP4）を生成してSNSでシェア
- **PWA対応** — ホーム画面にインストールしてアプリのように使える
- **使い方ガイド** — サブタイトル下の「使い方」リンクから llll-ll の解説記事（日英）へ
- **日本語 / 英語対応** — 日本語は `/`、英語は専用URL `/en`（`hreflang` 相互リンク）。`/` はブラウザ言語で自動判定、トグルで切替

## 使い方

1. アプリを開いてカメラで間違い探しを撮影（またはアルバムから選択）
2. 紙の角が自動検出される。ずれていたらドラッグで調整
3. 画面を長押しすると右の絵に切り替わる。離すと左に戻る
4. スライドで位置微調整、コーナーワープで形を合わせる
5. 「アニメーションをつくる」ボタンでクネクネ動画（GIF）またはおわかり動画（MP4）を生成してシェア

## 技術スタック

- **Next.js 15** (静的エクスポート) — React 19 フレームワーク
- **TypeScript 5** — 型安全性
- **Tailwind CSS** — スタイリング
- **OpenCV.js 4.9** — 画像処理（紙の検出、台形補正、左右分割）
- **gif.js** — アニメーションGIF生成（Web Worker）
- **mp4-muxer + WebCodecs** — MP4動画生成（オフリアルタイムエンコード、iOS含む全モダンブラウザ対応）
- **Cloudflare Pages** — ホスティング（GitHub 連携で自動デプロイ）

## 開発

```bash
npm install
npm run dev      # 開発サーバー起動（http://localhost:3000）
npm run build    # ビルド（out/ に静的ファイル生成）
npm run lint     # Lint 実行
```

## デプロイ

Cloudflare Pages の GitHub 連携で `main` ブランチへの push 時に自動デプロイ。

## ライセンス

MIT