QR写真共有ルーム|Next.js+Google Drive製・AI改造プロンプト10種付き
- Digital4,500 JPY






━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠️ ご購入前に必ずお読みください ━━━━━━━━━━━━━━━━━━━━━━━━━ 本商品は「すぐ使えるアプリ」ではなく、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に貼るだけで、コードを壊しにくい改修ガイドラインに沿って提案・実装が進みます。





