[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-85160":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":10,"trendingCount":16,"starSnapshotCount":16,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},85160,"tomari-guruguru","rotejin\u002Ftomari-guruguru","rotejin","25方向のマウス追従と口パクに対応したトマリ用ブラウザアバター","https:\u002F\u002Frotejin.github.io\u002Ftomari-guruguru\u002F",null,"JavaScript",157,26,105,1,0,40.03,"MIT License",false,"main",true,[],"2026-06-15 10:05:03","# トマリぐるぐる \u002F トマリトーク\n\nマウスに追従して25方向に振り向き、音声に合わせて口パク・まばたきする、トマリ用のブラウザアバターです。\n\n- **トマリぐるぐる**: マウス追従でキャラクターがこっちを見るシンプル版\n- **トマリトーク**: マイク入力または音声ファイルに合わせて口パクするトーク版\n\n![トマリぐるぐる \u002F トマリトークの動作デモ](guruguru.gif)\n\n---\n\n## セットアップ\n\n必要環境:\n\n- Node.js 22 LTS 推奨\n- Vite 8 の要件: Node.js 20.19+ または 22.12+\n\n```bash\nnpm install\n```\n\n## ローカル起動\n\nWindowsなら `start.bat` をダブルクリックすると、ローカルサーバーを起動してブラウザで開きます。\n\n手動で起動する場合は:\n\n```bash\nnpm run dev\n```\n\nトマリトークが自動で開きます。手動でアクセスする場合は:\n\n```text\nhttp:\u002F\u002F127.0.0.1:5173\u002Ftalk.html\nhttp:\u002F\u002F127.0.0.1:5173\u002Fguruguru.html\n```\n\n注意:\n\n- マイク入力は `localhost` または HTTPS でのみ利用できます。\n- Google Fonts はCDNから読み込むため、初回表示にはネット接続が必要です。\n\n## ビルド\n\n```bash\nnpm run build\nnpm run preview   # ビルド結果をローカル確認\n```\n\npreview は GitHub Pages と同じ `\u002Ftomari-guruguru\u002F` のベースパスで起動します。\n\n```text\nhttp:\u002F\u002F127.0.0.1:4173\u002Ftomari-guruguru\u002Ftalk.html\nhttp:\u002F\u002F127.0.0.1:4173\u002Ftomari-guruguru\u002Fguruguru.html\n```\n\n---\n\n## ディレクトリ構成\n\n```\n.\n├── index.html              # トマリトークへのリダイレクト\n├── guruguru.html              # ぐるぐる版エントリ\n├── talk.html                 # トーク版エントリ\n├── vite.config.js          # Vite 8 ビルド設定\n├── package.json\n├── start.bat               # Windows用起動バッチ\n├── src\u002F\n│   ├── app.jsx             # ぐるぐる版アプリ本体\n│   ├── talk-app.jsx        # トーク版アプリ本体\n│   ├── tweaks-panel.jsx    # 画面右下の調整パネル\n│   └── character-config.js # キャラ画像の参照先を一元管理\n├── public\u002F\n│   └── slices2\u002F            # スライス済みキャラ画像 (Git追跡)\n├── docs\u002F                   # 画像生成・差し替え手順の資料\n│   ├── 01_画像指示例.png\n│   ├── 01_画像生成用テンプレ.png\n│   ├── 01_画像生成用プロンプト.txt\n│   ├── 再生用トマリセリフ.wav\n│   └── 新キャラ差し替え手順.md\n├── tools\u002F\n│   └── slice_character_sheets.py\n├── sheets\u002F                 # 元シート画像 (Git非追跡)\n├── uploads\u002F                # 元アップロード画像 (Git非追跡)\n├── 新キャラ資料\u002F            # 新キャラ素材 (Git非追跡)\n├── LICENSE\n├── ASSET_LICENSE.md\n└── README.md\n```\n\n---\n\n## フレーム画像の仕組み\n\nこのアプリは、キャラクターの向きと表情に応じて `public\u002Fslices2\u002F` 内の画像を1枚ずつ切り替えています。\n\n### 25方向\n\n5列 × 5行の向き差分です。\n\n- 列: 左向き → 正面 → 右向き\n  - `c0`: 左向き \u002F `c1`: 左斜め \u002F `c2`: 正面 \u002F `c3`: 右斜め \u002F `c4`: 右向き\n- 行: 上向き → 水平 → 下向き\n  - `r0`: 強く上を見る \u002F `r1`: 少し上 \u002F `r2`: 水平 \u002F `r3`: 少し下 \u002F `r4`: 強く下\n\n### 6状態\n\n| フォルダ | 目 | 口 |\n|---|---|---|\n| `A` | 開け | とじ |\n| `B` | 開け | 中間 |\n| `C` | 開け | 開け |\n| `D` | 閉じ | とじ |\n| `E` | 閉じ | 中間 |\n| `F` | 閉じ | 開け |\n\n画像パス例: `slices2\u002FA\u002Fr2c2.webp`\n\n`src\u002Fcharacter-config.js` の `basePath` と `ext` で切り替え可能です。\n\n---\n\n## 使い方\n\n### トマリぐるぐる\n\n1. `guruguru.html` を開く\n2. マウスを動かす\n3. キャラクターがマウス方向に合わせて25方向で振り向きます\n4. 自動まばたきも入ります\n\n### トマリトーク\n\n1. `talk.html` を開く\n2. **マイク開始** を押す、または音声ファイルを読み込む\n3. 音量に応じて口が切り替わります（とじ \u002F はんびらき \u002F ぜんかい）\n4. まばたき時は `D\u002FE\u002FF` の目閉じ画像に切り替わります\n\n---\n\n## Tweaks 調整パネル\n\n画面右下の **Tweaks** ボタンから調整できます。\n\n主な項目:\n\n- マイク感度 \u002F 口パクのしきい値 \u002F 口を閉じる速さ \u002F 自動まばたき\n- 追従範囲 \u002F 追従速度 \u002F キャラサイズ \u002F 背景色\n\nOBSなどで使う場合は、背景色をクロマキーしやすい色に調整してください。\n\n---\n\n## 公開URL\n\nGitHub Pagesで公開しています。\n\n```text\nhttps:\u002F\u002Frotejin.github.io\u002Ftomari-guruguru\u002F\n```\n\nトップページは `talk.html` に自動転送されます。\n\n---\n\n## 自分のキャラで作るには\n\nこのアプリで動かすには最終的に **5×5角度シートを6枚** 作る必要があります。\n\n必要な6枚:\n\n```text\nA_目開け_口とじ.png\nB_目開け_口中間.png\nC_目開け_口開け.png\nD_目閉じ_口とじ.png\nE_目閉じ_口中間.png\nF_目閉じ_口開け.png\n```\n\nおすすめの流れ:\n\n1. 自分のキャラクター参照画像を用意する\n2. `docs\u002F01_画像生成用テンプレ.png` と合わせてChatGPT Images 2.0に添付する\n3. `docs\u002F01_画像生成用プロンプト.txt` の指示を使って6枚のシートを作る\n4. 6枚のPNGを `新キャラ資料\u002F` フォルダに入れる\n5. `tools\u002Fslice_character_sheets.py` でスライス画像を生成\n\n詳しい注意点や検証方法は `docs\u002F新キャラ差し替え手順.md` を参照してください。\n\n---\n\n## ライセンス\n\nこのリポジトリは、**プログラム部分** と **キャラクター素材・音声** でライセンスを分けています。\n\n### プログラム部分\n\nプログラムコードは MIT License で公開しています。詳細は `LICENSE` を参照してください。\n\n### キャラクター画像・音声・生成素材\n\nキャラクター画像、スライス済みフレーム、サムネイル、音声ファイルは MIT License の対象外です。\n非商用の範囲でのSNS投稿はOKですが、商用利用や他プロジェクトへの流用は禁止です。\n詳細は `ASSET_LICENSE.md` を参照してください。\n\n---\n\n## 技術スタック\n\n- **Vite 8** — ビルド・開発サーバー\n- **React 18** — UI フレームワーク\n- **@vitejs\u002Fplugin-react 6** — JSX トランスフォーム\n",2,"2026-06-15 02:30:12","CREATED_QUERY"]