QR写真共有ルーム｜Next.js+Google Drive製・AI改造プロンプト10種付き
- ダウンロード商品¥ 4,500
━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠️ ご購入前に必ずお読みください ━━━━━━━━━━━━━━━━━━━━━━━━━ 本商品は「すぐ使えるアプリ」ではなく、Next.js / TypeScript で構築されたWebアプリの【ソースコード一式】の納品です。お客様自身（またはエンジニア／AIアシスタント）でデプロイ・セットアップが必要です。 【動作に必要なもの】 ・ホスティング: Vercel Pro（$20/月、商用利用時は必須）または同等のNode.js環境 ・ストレージ: Google Drive（サービスアカウント設定が必要） ・開発環境: Node.js 20+ / npm（ローカル動作確認用） 【セットアップに必要なスキル】 ✅ エンジニア（Next.js / Vercel / Google Cloud の基礎知識） ✅ Claude Code / Cursor などAIアシスタントを使える方（同梱のSETUP.mdをAIに渡せばセットアップ可能） ❌ プログラミング未経験でAIアシスタントも使われない方には推奨しません 【セットアップ時間の目安】 ・エンジニアの方：30分〜1時間 ・AIアシスタント併用：1〜2時間 ソースコードは改変自由です。同梱のAIカスタマイズ用プロンプトで業種別カスタマイズも可能です。 ━━━━━━━━━━━━━━━━━━━━━━━━━ 🎁 購入前に「無料お試し」できます ━━━━━━━━━━━━━━━━━━━━━━━━━ 実際の管理画面・参加者画面を、メールアドレス登録だけで7日間体験できます。クレジットカード登録・本人確認は不要です。 ▶ 体験版ポータル: https://js-portal-sample.vercel.app ▶ 詳しい紹介記事: https://note.com/hitoshikumi/n/n7633433743c8 「思っていたものと違った」を防ぐため、まずは触ってみてからの購入をおすすめします。 ━━━━━━━━━━━━━━━━━━━━━━━━━ 研修・ワークショップ・社内イベント向けの「QR写真共有ルーム」アプリのソースコード一式です。グループワークのアウトプットを発表するときに便利です。 参加者がQRコードを読み取って写真を投稿 → 大画面にリアルタイム表示。データはGoogle Drive上のJSON+画像で管理（DB不要）。 Next.js 16 + React 19 + Google Drive API。Vercel Hobby（無料枠）で運用可能。AI（Claude/Cursor等）でのカスタマイズを想定し、改造プロンプト10種・SPECS.md・CLAUDE.mdを同梱しています。
同梱内容と特徴
■ 同梱物 ・ Next.js プロジェクト一式（app / components / lib / public） ・ README.md（セットアップ手順：Node.js / Google Cloud / Vercelデプロイまで） ・ SPECS.md（API仕様・データ構造・Driveフォルダ構造） ・ CLAUDE.md（AI改造ガイド：触ってよい場所/触らない方がよい場所） ・ プロンプト10種（配色変更・ブランド差し替え・通知連携・認証追加 等） ・ ライセンス.txt ・ .env.local.example ■ 機能 ・ ルーム作成/QR発行/有効期限設定/削除 ・ スマホからの撮影投稿（カメラ起動→回転→トリミング→サーバー側で自動補正） ・ 管理画面のリアルタイムギャラリー（3秒ポーリング） ・ 写真の回転/拡大/削除 ・ チーム名フィルタ ■ 必要なもの（購入後にご自身でご用意ください） ・ Node.js 20 以上 ・ Google Cloud のサービスアカウント（無料） ・ Google Drive（共有ドライブまたはマイドライブ） ・ Vercelアカウント（無料） ■ 注意事項 ・ ライブデモは提供していません（ご自身のGoogle Drive鍵でローカル/Vercel起動が必要） ・ 動作画面は画像でご確認ください ・ 個人・自社利用OK／そのままの再配布・再販売はNG（詳しくは ライセンス.txt） ■ 同梱プロンプト10種（AIに貼るだけで安全に改造） 01. 配色を変える — テーマカラーを一括置換 02. 自社ブランドを反映する — ロゴ/サービス名/フッター差し替え 03. 有効期限を変える — 30分/12時間などプリセット追加 04. 投稿フォームを変える — 「チーム名」を別項目へ、コメント欄追加など 05. 画像処理を変える — 圧縮品質/最大幅/明度補正の調整 06. リアルタイム性を変える — 自動更新間隔（3秒→任意） 07. QRコードのデザインを変える — 色/サイズ/中央ロゴ/印刷用A4化 08. 通知連携を追加する — Slack/Discord/メールへWebhook通知 09. 認証を追加する — 管理画面にパスワード/Google OAuth 10. デザイン全体を作り直す — ガラスモーフィズム/ダークモード等の全面リニューアル 各プロンプトは「AIに渡すテンプレ文＋技術的な補足」のセットです。Claude/Cursorに貼るだけで、コードを壊しにくい改修ガイドラインに沿って提案・実装が進みます。