002 Web機能仕様 (WEB)
画面構成
画面は縦1カラムのシンプルな構成で、上から以下の要素が並ぶ。
- ヘッダー: サービス名「俺のQR」とキャッチコピー
- 入力エリア:
- URL入力用テキストボックス
- 「QRコードを保存する」ボタン (入力がある場合のみ活性化)
- 生成時間表示 (0.000秒形式)
- 成功メッセージ表示領域 (紙吹雪アニメーションと連動)
- プレビューエリア: リアルタイムで生成される付箋風QRコードの表示領域
- 設定・情報エリア:
- 「俺の付箋」クレジット表示のON/OFFチェックボックス
- プライバシー保護のステートメント
- Firebase アクセスカウンター (本日/累計の来訪者・変換数)
画像生成・保存フロー
- ユーザーがURLを入力すると、
qrcode.reactにより非表示のCanvas要素にQRコードが描画される。 - 保存ボタンを押下すると、メインの保存処理が発火する。
- サイズ
600x600の一時Canvasを作成。 - 背景色
#fff9c4(付箋イエロー) で全体を塗りつぶし。 - 中央に白い四角形(QRコードの背景余白)を描画。
- 非表示のQRコードCanvasから画像データを取得し、中央に合成。
- クレジットONの場合は、右下に「powered by 俺の付箋」のテキストを描画。
- サイズ
- File System Access API (
window.showSaveFilePicker) を呼び出す。- デフォルトファイル名は
俺のQR.pngに設定。
- デフォルトファイル名は
- ユーザーが保存ダイアログでパスを決定すると、Blob化された画像データが書き込まれる。
- 保存が完了すると、Firebaseの
stats/globalおよびstats/YYYY-MM-DDドキュメントの保存数(totalSaves,dailySaves)がインクリメントされる。
※ APIをサポートしないブラウザの場合は、従来の <a> タグによるダウンロード(フォールバック)が実行される。
アクセス・統計管理
- Firestore 構造
/stats/global:totalVisitors,totalSavesを保持/stats/YYYY-MM-DD: その日のdailyVisitors,dailySavesを保持
- カウントロジック
- アプリの初期ロード時(
useEffect)に、Firestoreから現在のカウントを取得。 localStorageにvisited_YYYY-MM-DDが存在しない場合のみ、来訪者数(dailyVisitors,totalVisitors)を+1し、localStorageにフラグをセット。これによりF5連打などによる過剰なカウントを防ぐ。- 画像保存完了時は、無条件で保存数(
dailySaves,totalSaves)を+1する。
- アプリの初期ロード時(