Google接続の準備

画像の取り込み・記録のバックアップ操作時にGoogleに接続します。運動のたびにログインする必要はありません。設定は一度必要です。

1. Google Cloud Consoleで、この個人用アプリ向けのプロジェクトを作成または選択します。
2. 「APIとサービス」からGoogle Drive APIを有効にします。
3. Google Auth Platformのブランディング・対象を設定します。外部・テスト運用の場合は、自分のGoogleアカウントをテストユーザーに追加します。
4. データアクセスに読み取り専用のスコープ https://www.googleapis.com/auth/drive.readonly を追加します。この試作はフォルダ一覧と画像の取得に使用します。権限自体はDrive全体を読める広さです。
5. クライアントを作成し、種類を「ウェブアプリケーション」にします。「承認済みのJavaScript生成元」に http://localhost:5173 を登録します。公開版は https://plank-tabata-timer.pages.dev を追加します。生成元にパスや末尾のスラッシュは付けません。
6. 発行された「クライアントID」を、タイマーの「画像の設定」→「初回のGoogle接続設定」へ入力します。クライアントシークレットやパスワードは入力しません。
7. 「Driveから画像を更新」を押し、画像を置いたGoogleアカウントでアクセスを許可します。画像の設定で、準備・運動・休憩・ごほうび用の各DriveフォルダIDを入力します。公開版には個人のフォルダIDを埋め込んでいません。未設定の種類は端末内の画像を維持します。

ブラウザがポップアップをブロックした場合は許可してください。アプリのページを再読み込みすると接続用トークンは失われますが、取り込んだ画像は残ります。再接続は更新するときだけです。

タブレットからのLAN IPへのHTTP接続ではGoogle連携を使う構成にしないでください。HTTPSでの提供が必要です。クライアントIDの発行だけでは、タブレット向けの公開は完了しません。

画像フォルダは一般公開不要。Drive側のファイル変更・削除は行いません。端末内のコピーはブラウザのデータ削除や保存領域の整理で消える場合があり、その場合は再取り込みしてください。

Google公式：JavaScriptの準備手順 ／ 接続方式の公式説明

記録のDriveバックアップ

画像と同じOAuthクライアントIDを使い、データアクセスに https://www.googleapis.com/auth/drive.file を追加します。アプリが作成・許可されたファイルに対する権限です。画像用の読み取り専用権限とは別に要求します。

設定メニューの「Driveへ書き出す」を開き、初回設定へIDを入力して、Googleに接続します。マイドライブに日時付きJSONを新規保存します。移行先で同じGoogleアカウント・同じクライアントIDを使い、「Driveから読み込む」からバックアップを選びます。このアプリが作成したバックアップのみ一覧に出ます。

記録とメニューが対象で、画像・音設定・接続情報は含みません。自動同期はしません。読み込み時は追加件数を確認し、記録IDの重複を避けて統合します。同じIDのメニューは読み込む設定へ更新します。画像の再取り込みは別途行います。

タブレットでのGoogle接続にはHTTPSの環境が必要です。LANのHTTP接続では「記録を書き出す」「記録ファイルを読み込む」で移行できます。Macでは承認済みの http://localhost:5173 を使います。localhostと127.0.0.1は別の生成元として扱われます。