From 301f5b3a20d3536252ae3caa84cc8bf68ee63bb6 Mon Sep 17 00:00:00 2001
From: kojira <kojiran@gmail.com>
Date: Tue, 4 Aug 2026 00:32:05 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=E3=81=8A=E3=81=BF=E3=81=8F=E3=81=98?=
 =?UTF-8?q?=E3=81=8C=E5=BC=95=E3=81=91=E3=82=8B=E3=81=8B=E3=81=A9=E3=81=86?=
 =?UTF-8?q?=E3=81=8B=E3=82=92=E9=96=8B=E3=81=8F=E5=89=8D=E3=81=AB=E5=88=86?=
 =?UTF-8?q?=E3=81=8B=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

次に引ける時刻は前回引いた瞬間に確定しているのに、どこにも覚えていなかった。
そのため「おみくじ」を開くたびに トークン取得 → omikujiGo(peek) の往復を
待たされ、そのあとで初めて「まだ引けない」と分かっていた。押してから待たされた
末に引けないと知らされるのが体感として一番つらい。

- 次に引ける時刻を localStorage に覚える(utils/omikujiCooldown.js)。
  キーに github_id を含め、アカウント切替で前の人の残り時間を見せない
- おみくじページはそれを読んで、通信を待たずにクールダウン表示から始める。
  peek の応答が来たら上書きする(正はサーバー)
- ヘッダのリンクは引けないとき「前回のおみくじ」になる。開く前に、引けるのか
  前回の結果を見に行くだけなのかが分かる

表示を先出しするだけで、実際に引けるかは常にサーバーが決める。端末の時計は
信用せず8時間で頭打ちにする。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/backend.md                      | 17 ++++++
 web/components/CommonHeader.vue      | 45 ++++++++++++--
 web/pages/omikuji.vue                | 37 +++++++++++-
 web/scripts/test-omikuji-cooldown.js | 50 ++++++++++++++++
 web/utils/omikujiCooldown.js         | 88 ++++++++++++++++++++++++++++
 5 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 web/scripts/test-omikuji-cooldown.js
 create mode 100644 web/utils/omikujiCooldown.js

diff --git a/docs/backend.md b/docs/backend.md
index ae211dc..3e5279d 100644
--- a/docs/backend.md
+++ b/docs/backend.md
@@ -444,6 +444,23 @@ Node版との差分(意図的な改善):
   「引く」ボタン押下時に peek 無しで実際に抽選する。おみくじには参拝のようなポイント等の
   ゲーム報酬は無く、フレーバー(占い)のみ。
 
+### 引けるかどうかを開く前に伝える
+
+peek はサーバー往復(トークン取得 + `omikujiGo`。関数がコールドなら数秒)を伴うため、
+これだけに頼ると**「おみくじ」を開くたびにスピナーを見せられ、待った末に
+「まだ引けない」と分かる**。次に引ける時刻は前回引いた瞬間に確定しているので、
+覚えておけば待たせる必要が無い。
+
+- `web/utils/omikujiCooldown.js` が次に引ける時刻を localStorage に持つ
+  (キーに `github_id` を含め、アカウント切替で前の人の残り時間を見せない)。
+  純関数で `storage` を注入でき、`web/scripts/test-omikuji-cooldown.js` で検証する。
+- おみくじページはマウント時にこれを読み、残っていれば**通信を待たずに**
+  クールダウン表示から始める。peek の応答が来たら上書きする(正はサーバー)。
+- ヘッダのリンクは引けないと分かっているとき「前回のおみくじ」になる。
+  開く前に、引けるのか前回の結果を見に行くだけなのかが分かる。
+- あくまで表示を先出しするだけで、**実際に引けるかは常にサーバーが決める**。
+  端末の時計は信用せず、8時間(最長のクールダウン)で頭打ちにする。
+
 ### フロント
 
 - `web/pages/omikuji.vue`(状態管理・API呼び出し)と `web/components/OmikujiResult.vue`
diff --git a/web/components/CommonHeader.vue b/web/components/CommonHeader.vue
index 2734b76..b335903 100644
--- a/web/components/CommonHeader.vue
+++ b/web/components/CommonHeader.vue
@@ -38,7 +38,9 @@
         </ul>
         <ul class="navbar-nav mb-2 mb-lg-0" v-if="isLogin">
           <li class="nav-item">
-            <nuxt-link class="nav-link active" to="/omikuji">おみくじ</nuxt-link>
+            <nuxt-link class="nav-link active" to="/omikuji">{{
+              omikujiLabel
+            }}</nuxt-link>
           </li>
           <li class="nav-item">
             <nuxt-link
@@ -61,19 +63,54 @@
 
 <script>
 import { mapGetters } from "vuex";
+import { loadOmikujiRemaining } from "@/utils/omikujiCooldown";
 
 export default {
   data() {
-    return {};
+    return {
+      // おみくじの残り秒(0なら引ける)。開く前に分かるようにリンクの文言へ出す。
+      omikujiRemaining: 0,
+      omikujiTimerId: null,
+    };
+  },
+  mounted() {
+    this.refreshOmikuji();
+    // 残り時間はページを開かなくても減っていく。1分ごとに見直して、
+    // 引けるようになったらリンクの文言を戻す。
+    this.omikujiTimerId = setInterval(this.refreshOmikuji, 60 * 1000);
+  },
+  beforeDestroy() {
+    if (this.omikujiTimerId) clearInterval(this.omikujiTimerId);
   },
-  mounted() {},
   methods: {
     logout() {
       this.$store.dispatch("logout");
     },
+    refreshOmikuji() {
+      this.omikujiRemaining = loadOmikujiRemaining(
+        this.user && this.user.github_id,
+        Date.now()
+      );
+    },
   },
   computed: {
-    ...mapGetters(["isLogin"]),
+    ...mapGetters(["isLogin", "user"]),
+    // 引けないと分かっているときは「前回のおみくじ」。押す前に、引けるのか
+    // 前回の結果を見に行くだけなのかが分かる。
+    omikujiLabel() {
+      return this.omikujiRemaining > 0 ? "前回のおみくじ" : "おみくじ";
+    },
+  },
+  watch: {
+    // ログイン直後やアカウント切替でユーザーが変わったら取り直す
+    // (キーに github_id が入っているため)。
+    user() {
+      this.refreshOmikuji();
+    },
+    // ページ遷移のたびに見直す(おみくじを引いた直後に文言が変わる)。
+    $route() {
+      this.refreshOmikuji();
+    },
   },
 };
 </script>
diff --git a/web/pages/omikuji.vue b/web/pages/omikuji.vue
index 47bf899..cea7599 100644
--- a/web/pages/omikuji.vue
+++ b/web/pages/omikuji.vue
@@ -87,6 +87,10 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { mapGetters } from "vuex";
 import ResultCard from "@/components/OmikujiResult";
 import OmikujiScene from "@/components/OmikujiScene";
+import {
+  saveOmikujiCooldown,
+  loadOmikujiRemaining,
+} from "@/utils/omikujiCooldown";
 
 function resolveCurrentUser(auth) {
   return new Promise((resolve) => {
@@ -110,6 +114,18 @@ export default {
     };
   },
   async mounted() {
+    // 覚えている残り時間があれば、通信を待たずにクールダウン表示から始める。
+    // ここで待たせると「押してから待たされた末に引けないと分かる」になる。
+    // サーバーの応答が来たら上書きされる(正はあくまでサーバー)。
+    const remaining = loadOmikujiRemaining(
+      this.user && this.user.github_id,
+      Date.now()
+    );
+    if (remaining > 0) {
+      this.remaining = remaining;
+      this.state = "cooldown";
+      this.startTimer();
+    }
     await this.fetchStatus();
   },
   beforeDestroy() {
@@ -129,7 +145,9 @@ export default {
     },
     // 引かずに現在の状態(引ける/クールダウン+前回結果)を取得する。
     async fetchStatus() {
-      this.state = "loading";
+      // 既に出せるものがあるなら、確認中もそれを出したままにする。
+      // ローディングに戻すと、せっかく即表示した意味が無くなる。
+      if (this.state !== "cooldown") this.state = "loading";
       const token = await this.getToken();
       if (!token) return;
       try {
@@ -182,6 +200,11 @@ export default {
         this.remaining = this._pendingRemaining || 0;
         this.pendingResult = null;
         this.state = "cooldown";
+        saveOmikujiCooldown(
+          this.user && this.user.github_id,
+          this.remaining,
+          Date.now()
+        );
         this.startTimer();
       } else {
         // 演出が結果より先に終わった(スキップ等)→ サーバー状態を取り直す
@@ -189,6 +212,17 @@ export default {
       }
     },
     applyResponse(d) {
+      // 次に引ける時刻を覚えておく(次に開いたとき待たせないため)。
+      // 引ける状態なら記録を消す。
+      if (d.status === "success" || d.status === "cooldown") {
+        saveOmikujiCooldown(
+          this.user && this.user.github_id,
+          d.remaining_seconds || 0,
+          Date.now()
+        );
+      } else if (d.status === "available") {
+        saveOmikujiCooldown(this.user && this.user.github_id, 0, Date.now());
+      }
       if (d.status === "success") {
         this.result = d.result;
         this.remaining = d.remaining_seconds || 0;
@@ -220,6 +254,7 @@ export default {
           this.remaining = 0;
           // 引ける状態へ。前回結果は残しつつボタンを出す。
           this.state = "available";
+          saveOmikujiCooldown(this.user && this.user.github_id, 0, Date.now());
         }
       }, 1000);
     },
diff --git a/web/scripts/test-omikuji-cooldown.js b/web/scripts/test-omikuji-cooldown.js
new file mode 100644
index 0000000..36e5314
--- /dev/null
+++ b/web/scripts/test-omikuji-cooldown.js
@@ -0,0 +1,50 @@
+const assert = require("assert");
+const m = require("../utils/omikujiCooldown");
+
+function fakeStorage() {
+  const map = {};
+  return {
+    getItem: (k) => (k in map ? map[k] : null),
+    setItem: (k, v) => { map[k] = v; },
+    removeItem: (k) => { delete map[k]; },
+    _map: map,
+  };
+}
+
+const now = 1_700_000_000_000;
+
+// 保存した残り時間が読める
+let s = fakeStorage();
+m.saveOmikujiCooldown("428875", 3600, now, s);
+assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 3600);
+// 時間が進めば減る
+assert.strictEqual(m.loadOmikujiRemaining("428875", now + 600_000, s), 3000);
+// 過ぎたら0、記録も消える
+assert.strictEqual(m.loadOmikujiRemaining("428875", now + 3_600_001, s), 0);
+assert.strictEqual(s.getItem(m.storageKey("428875")), null);
+
+// 別ユーザーの残り時間は見えない
+s = fakeStorage();
+m.saveOmikujiCooldown("428875", 3600, now, s);
+assert.strictEqual(m.loadOmikujiRemaining("99999", now, s), 0);
+
+// 引ける(0以下)を保存すると記録を消す
+s = fakeStorage();
+m.saveOmikujiCooldown("428875", 3600, now, s);
+m.saveOmikujiCooldown("428875", 0, now, s);
+assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 0);
+
+// 壊れた値は0
+s = fakeStorage();
+s.setItem(m.storageKey("428875"), "ぐちゃぐちゃ");
+assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 0);
+
+// 端末の時計が大きくずれていても8時間で頭打ち
+s = fakeStorage();
+s.setItem(m.storageKey("428875"), String(now + 999 * 3600 * 1000));
+assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 8 * 3600);
+
+// localStorage が使えなくても落ちない
+assert.strictEqual(m.loadOmikujiRemaining("428875", now, null), 0);
+
+console.log("omikujiCooldown: 全て通過");
diff --git a/web/utils/omikujiCooldown.js b/web/utils/omikujiCooldown.js
new file mode 100644
index 0000000..a17461a
--- /dev/null
+++ b/web/utils/omikujiCooldown.js
@@ -0,0 +1,88 @@
+// おみくじのクールダウンをローカルに覚えておく。
+//
+// 次に引ける時刻は前回引いた瞬間に確定しているのに、どこにも保存していな
+// かったため、「おみくじ」を開くたびに トークン取得 → omikujiGo(peek) の
+// 往復を待たされ、そのあとで初めて「まだ引けない」と分かっていた。押してから
+// 待たされた末に引けないと知らされるのが体感として一番つらい。
+//
+// 保存しておけば、ページは待たずにクールダウン表示から始められるし、
+// ヘッダのリンクの文言も開く前に変えられる。サーバーの応答が正であることは
+// 変わらない(ここに保存するのは表示を先に出すためだけ。実際に引けるかは
+// 常にサーバーが決める)。
+//
+// 判定は storage を注入できる純関数にしてあり、Nodeで決定論的に検証できる
+// (sanpaiSession.js と同じ流儀)。
+
+// アカウントを切り替えたときに前の人の残り時間を見せないよう、キーに
+// github_id を含める。
+var STORAGE_PREFIX = "debug-shrine:omikuji-next-at:";
+
+function storageKey(githubId) {
+  return STORAGE_PREFIX + (githubId == null ? "" : String(githubId));
+}
+
+function defaultStorage() {
+  // プライベートモード等で localStorage が使えない環境では諦める
+  try {
+    return window.localStorage;
+  } catch (e) {
+    return null;
+  }
+}
+
+// サーバーから残り秒を受け取ったときに呼ぶ。remainingSeconds が 0 以下
+// (=引ける)なら記録を消す。
+function saveOmikujiCooldown(githubId, remainingSeconds, now, storage) {
+  storage = storage || defaultStorage();
+  if (!storage) return;
+  if (typeof remainingSeconds !== "number" || remainingSeconds <= 0) {
+    clearOmikujiCooldown(githubId, storage);
+    return;
+  }
+  try {
+    storage.setItem(storageKey(githubId), String(now + remainingSeconds * 1000));
+  } catch (e) {
+    // 容量超過等。保存できなくても表示が遅くなるだけなので黙って続行
+  }
+}
+
+// 残り秒を返す。引ける・不明・壊れたデータなら 0。
+// 端末の時計は信用しきれないので、これはあくまで表示の先出し用。
+function loadOmikujiRemaining(githubId, now, storage) {
+  storage = storage || defaultStorage();
+  if (!storage) return 0;
+  var raw;
+  try {
+    raw = storage.getItem(storageKey(githubId));
+  } catch (e) {
+    return 0;
+  }
+  if (!raw) return 0;
+  var nextAt = Number(raw);
+  if (!isFinite(nextAt) || nextAt <= now) {
+    clearOmikujiCooldown(githubId, storage);
+    return 0;
+  }
+  // 端末の時計が大きくずれている場合に何時間も先を表示しないよう、
+  // 最長のクールダウン(8時間)で頭打ちにする。
+  var remaining = Math.ceil((nextAt - now) / 1000);
+  return Math.min(remaining, 8 * 60 * 60);
+}
+
+function clearOmikujiCooldown(githubId, storage) {
+  storage = storage || defaultStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(storageKey(githubId));
+  } catch (e) {
+    // noop
+  }
+}
+
+module.exports = {
+  STORAGE_PREFIX: STORAGE_PREFIX,
+  storageKey: storageKey,
+  saveOmikujiCooldown: saveOmikujiCooldown,
+  loadOmikujiRemaining: loadOmikujiRemaining,
+  clearOmikujiCooldown: clearOmikujiCooldown,
+};

From d78892c597fb487fd58da5cf242d1bc4ab1eafc3 Mon Sep 17 00:00:00 2001
From: kojira <kojiran@gmail.com>
Date: Tue, 4 Aug 2026 00:36:11 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=81=AB?=
 =?UTF-8?q?=E3=81=8A=E3=81=BF=E3=81=8F=E3=81=98=E3=81=AE=E3=82=AB=E3=82=A6?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=83=80=E3=82=A6=E3=83=B3=E3=82=92=E5=87=BA?=
 =?UTF-8?q?=E3=81=97=E3=80=81=E5=89=8D=E5=9B=9E=E3=81=AE=E7=B5=90=E6=9E=9C?=
 =?UTF-8?q?=E3=82=92=E3=81=99=E3=81=90=E8=A6=8B=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

引けるかどうかは前回いつ引いたかだけで決まり、それは前回引いた瞬間に確定して
いる。にもかかわらずどこにも覚えていなかったため、開くたびに omikujiGo(peek)
の往復を待たされ、そのあとで初めて「まだ引けない」と分かっていた。

- 次に引ける時刻と前回の結果を localStorage に持つ(utils/omikujiCooldown.js)
- トップページにカウントダウンを出す。クールダウン中はボタンを
  「前回のおみくじ」にする。ここではサーバーに問い合わせない
- おみくじページは保存した結果とカウントダウンを通信を待たずに出す。
  「前回のおみくじ」を押せばその場で過去の結果が見える
- ヘッダのリンクも同じ表記にする

表示を先出しするだけで、実際に引けるかは常にサーバーが決める。端末の時計は
信用せず8時間で頭打ち。別端末では保存が無いので従来どおり peek から復元する。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/backend.md                      |  28 ++++---
 web/components/CommonHeader.vue      |   4 +-
 web/pages/index.vue                  |  38 ++++++++-
 web/pages/omikuji.vue                |  53 ++++++++-----
 web/scripts/test-omikuji-cooldown.js |  76 ++++++++++++------
 web/utils/omikujiCooldown.js         | 113 ++++++++++++++++++---------
 6 files changed, 217 insertions(+), 95 deletions(-)

diff --git a/docs/backend.md b/docs/backend.md
index 3e5279d..56dcf13 100644
--- a/docs/backend.md
+++ b/docs/backend.md
@@ -446,20 +446,24 @@ Node版との差分(意図的な改善):
 
 ### 引けるかどうかを開く前に伝える
 
-peek はサーバー往復(トークン取得 + `omikujiGo`。関数がコールドなら数秒)を伴うため、
-これだけに頼ると**「おみくじ」を開くたびにスピナーを見せられ、待った末に
-「まだ引けない」と分かる**。次に引ける時刻は前回引いた瞬間に確定しているので、
-覚えておけば待たせる必要が無い。
+引けるかどうかは**前回いつ引いたか**だけで決まり、それは前回引いた瞬間に確定して
+いる。にもかかわらずどこにも覚えていなかったため、「おみくじ」を開くたびに
+トークン取得 + `omikujiGo`(peek) の往復(関数がコールドなら数秒)を待たされ、
+そのあとで初めて「まだ引けない」と分かっていた。
 
-- `web/utils/omikujiCooldown.js` が次に引ける時刻を localStorage に持つ
-  (キーに `github_id` を含め、アカウント切替で前の人の残り時間を見せない)。
+- `web/utils/omikujiCooldown.js` が**次に引ける時刻と前回の結果**を localStorage に
+  持つ(キーに `github_id` を含め、アカウント切替で前の人のものを見せない)。
   純関数で `storage` を注入でき、`web/scripts/test-omikuji-cooldown.js` で検証する。
-- おみくじページはマウント時にこれを読み、残っていれば**通信を待たずに**
-  クールダウン表示から始める。peek の応答が来たら上書きする(正はサーバー)。
-- ヘッダのリンクは引けないと分かっているとき「前回のおみくじ」になる。
-  開く前に、引けるのか前回の結果を見に行くだけなのかが分かる。
-- あくまで表示を先出しするだけで、**実際に引けるかは常にサーバーが決める**。
-  端末の時計は信用せず、8時間(最長のクールダウン)で頭打ちにする。
+- **トップページ**: クールダウン中は「次のおみくじまで ◯時間◯分」を出し、
+  ボタンを「前回のおみくじ」に変える。引ければ「おみくじを引く」に戻る。
+  ここでは**サーバーに問い合わせない**(前回いつ引いたかだけで決まるため)。
+- **おみくじページ**: マウント時に保存した状態を読み、**通信を待たずに**
+  前回の結果とカウントダウンを出す。peek の応答が来たら上書きする(正はサーバー)。
+  クールダウンが明けていて前回の結果だけある場合は、結果を添えてボタンを出す。
+- **ヘッダ**: 同じく引けないときは「前回のおみくじ」表記。
+- あくまで表示を先出しするだけで、**実際に引けるかは常にサーバーが決める**
+  (端末の時計は書き換えられる)。残り時間は8時間(最長のクールダウン)で頭打ち。
+  別端末では保存が無いので、従来どおり peek の応答から復元される。
 
 ### フロント
 
diff --git a/web/components/CommonHeader.vue b/web/components/CommonHeader.vue
index b335903..767c4df 100644
--- a/web/components/CommonHeader.vue
+++ b/web/components/CommonHeader.vue
@@ -75,9 +75,9 @@ export default {
   },
   mounted() {
     this.refreshOmikuji();
-    // 残り時間はページを開かなくても減っていく。1分ごとに見直して、
+    // 残り時間はページを開かなくても減っていく。30秒ごとに見直して、
     // 引けるようになったらリンクの文言を戻す。
-    this.omikujiTimerId = setInterval(this.refreshOmikuji, 60 * 1000);
+    this.omikujiTimerId = setInterval(this.refreshOmikuji, 30 * 1000);
   },
   beforeDestroy() {
     if (this.omikujiTimerId) clearInterval(this.omikujiTimerId);
diff --git a/web/pages/index.vue b/web/pages/index.vue
index a025a77..586d676 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -43,10 +43,16 @@
               >
                 参拝する
               </button>
+              <!-- 引けないと分かっているときは「前回のおみくじ」。押せば
+                   前回の結果がその場で出る(通信を待たない)。 -->
               <nuxt-link to="/omikuji" class="btn btn-lg btn-outline-light">
-                おみくじを引く
+                {{ omikujiRemaining > 0 ? "前回のおみくじ" : "おみくじを引く" }}
               </nuxt-link>
             </div>
+            <div v-if="omikujiRemaining > 0" class="mt-2 small text-muted">
+              次のおみくじまで
+              <span class="fw-bold">{{ omikujiRemainingText }}</span>
+            </div>
             <div class="mt-4 p-2 d-inline-block">
               <div class="rounded border p-2 w-100 mb-2" v-if="isLogin">
                 <img
@@ -148,6 +154,10 @@ import {
 } from "firebase/auth";
 import { mapGetters } from "vuex";
 import Ranking from "@/components/Ranking";
+import {
+  loadOmikujiRemaining,
+  formatOmikujiRemaining,
+} from "@/utils/omikujiCooldown";
 
 export default {
   layout: "single",
@@ -163,16 +173,33 @@ export default {
       registerError: false,
       // らぼみの吹き出し。SSR/CSRの差異を避けるため mounted で選ぶ(初期は空)。
       labomiLine: "",
+      // 次のおみくじまでの残り秒(0なら引ける)。localStorage から読むだけで、
+      // サーバーには問い合わせない(引けるかは前回いつ引いたかだけで決まる)。
+      omikujiRemaining: 0,
+      omikujiTimerId: null,
     };
   },
   mounted() {
     this.pickLabomiLine();
+    this.refreshOmikuji();
+    // 1秒ごとに減らす。0になったらボタンの文言が「おみくじを引く」に戻る。
+    this.omikujiTimerId = setInterval(() => {
+      if (this.omikujiRemaining > 0) this.omikujiRemaining -= 1;
+    }, 1000);
+  },
+  beforeDestroy() {
+    if (this.omikujiTimerId) clearInterval(this.omikujiTimerId);
   },
   watch: {
     // ログイン状態が変わったら(認証復元含む)セリフプールを切り替える
     isLogin() {
       this.pickLabomiLine();
     },
+    // 認証復元でユーザーが入ったら残り時間を読み直す
+    // (保存キーに github_id が入っているため)。
+    user() {
+      this.refreshOmikuji();
+    },
   },
   async beforeMount() {
     const auth = getAuth();
@@ -186,6 +213,12 @@ export default {
     });
   },
   methods: {
+    refreshOmikuji() {
+      this.omikujiRemaining = loadOmikujiRemaining(
+        this.user && this.user.github_id,
+        Date.now()
+      );
+    },
     // らぼみのセリフ(オタクに優しいギャル。口調は docs/character.md 準拠)。
     // 表示のたびにランダムで1つ選び、再訪の楽しみにする。
     pickLabomiLine() {
@@ -274,6 +307,9 @@ export default {
   },
   computed: {
     ...mapGetters(["isLogin", "user"]),
+    omikujiRemainingText() {
+      return formatOmikujiRemaining(this.omikujiRemaining);
+    },
   },
 };
 </script>
diff --git a/web/pages/omikuji.vue b/web/pages/omikuji.vue
index cea7599..42b5e64 100644
--- a/web/pages/omikuji.vue
+++ b/web/pages/omikuji.vue
@@ -87,10 +87,7 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { mapGetters } from "vuex";
 import ResultCard from "@/components/OmikujiResult";
 import OmikujiScene from "@/components/OmikujiScene";
-import {
-  saveOmikujiCooldown,
-  loadOmikujiRemaining,
-} from "@/utils/omikujiCooldown";
+import { saveOmikujiState, loadOmikujiState } from "@/utils/omikujiCooldown";
 
 function resolveCurrentUser(auth) {
   return new Promise((resolve) => {
@@ -114,17 +111,23 @@ export default {
     };
   },
   async mounted() {
-    // 覚えている残り時間があれば、通信を待たずにクールダウン表示から始める。
-    // ここで待たせると「押してから待たされた末に引けないと分かる」になる。
+    // 覚えているものがあれば、通信を待たずにその場で出す。ここで待たせると
+    // 「押してから待たされた末に引けないと分かる」になる。
     // サーバーの応答が来たら上書きされる(正はあくまでサーバー)。
-    const remaining = loadOmikujiRemaining(
+    const saved = loadOmikujiState(
       this.user && this.user.github_id,
       Date.now()
     );
-    if (remaining > 0) {
-      this.remaining = remaining;
-      this.state = "cooldown";
-      this.startTimer();
+    if (saved) {
+      this.result = saved.result;
+      if (saved.remainingSeconds > 0) {
+        this.remaining = saved.remainingSeconds;
+        this.state = "cooldown";
+        this.startTimer();
+      } else if (saved.result) {
+        // 引ける。前回の結果を添えてボタンを出す。
+        this.state = "available";
+      }
     }
     await this.fetchStatus();
   },
@@ -147,7 +150,9 @@ export default {
     async fetchStatus() {
       // 既に出せるものがあるなら、確認中もそれを出したままにする。
       // ローディングに戻すと、せっかく即表示した意味が無くなる。
-      if (this.state !== "cooldown") this.state = "loading";
+      if (this.state !== "cooldown" && this.state !== "available") {
+        this.state = "loading";
+      }
       const token = await this.getToken();
       if (!token) return;
       try {
@@ -200,9 +205,10 @@ export default {
         this.remaining = this._pendingRemaining || 0;
         this.pendingResult = null;
         this.state = "cooldown";
-        saveOmikujiCooldown(
+        saveOmikujiState(
           this.user && this.user.github_id,
           this.remaining,
+          this.result,
           Date.now()
         );
         this.startTimer();
@@ -212,16 +218,18 @@ export default {
       }
     },
     applyResponse(d) {
-      // 次に引ける時刻を覚えておく(次に開いたとき待たせないため)。
-      // 引ける状態なら記録を消す。
-      if (d.status === "success" || d.status === "cooldown") {
-        saveOmikujiCooldown(
+      // 次に引ける時刻と前回の結果を覚えておく(次に開いたとき待たせないため)。
+      if (
+        d.status === "success" ||
+        d.status === "cooldown" ||
+        d.status === "available"
+      ) {
+        saveOmikujiState(
           this.user && this.user.github_id,
           d.remaining_seconds || 0,
+          d.result || this.result,
           Date.now()
         );
-      } else if (d.status === "available") {
-        saveOmikujiCooldown(this.user && this.user.github_id, 0, Date.now());
       }
       if (d.status === "success") {
         this.result = d.result;
@@ -254,7 +262,12 @@ export default {
           this.remaining = 0;
           // 引ける状態へ。前回結果は残しつつボタンを出す。
           this.state = "available";
-          saveOmikujiCooldown(this.user && this.user.github_id, 0, Date.now());
+          saveOmikujiState(
+            this.user && this.user.github_id,
+            0,
+            this.result,
+            Date.now()
+          );
         }
       }, 1000);
     },
diff --git a/web/scripts/test-omikuji-cooldown.js b/web/scripts/test-omikuji-cooldown.js
index 36e5314..b13016c 100644
--- a/web/scripts/test-omikuji-cooldown.js
+++ b/web/scripts/test-omikuji-cooldown.js
@@ -1,3 +1,5 @@
+// utils/omikujiCooldown.js の純関数テスト。
+// 実行: node web/scripts/test-omikuji-cooldown.js
 const assert = require("assert");
 const m = require("../utils/omikujiCooldown");
 
@@ -5,46 +7,76 @@ function fakeStorage() {
   const map = {};
   return {
     getItem: (k) => (k in map ? map[k] : null),
-    setItem: (k, v) => { map[k] = v; },
-    removeItem: (k) => { delete map[k]; },
-    _map: map,
+    setItem: (k, v) => {
+      map[k] = v;
+    },
+    removeItem: (k) => {
+      delete map[k];
+    },
   };
 }
 
-const now = 1_700_000_000_000;
+const now = 1700000000000;
+const result = { tier: "大吉", fortune: "ビルドが通る" };
 
-// 保存した残り時間が読める
+// 保存した残り時間と結果が読める
 let s = fakeStorage();
-m.saveOmikujiCooldown("428875", 3600, now, s);
-assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 3600);
+m.saveOmikujiState("428875", 3600, result, now, s);
+let got = m.loadOmikujiState("428875", now, s);
+assert.strictEqual(got.remainingSeconds, 3600);
+assert.deepStrictEqual(got.result, result);
+
 // 時間が進めば減る
-assert.strictEqual(m.loadOmikujiRemaining("428875", now + 600_000, s), 3000);
-// 過ぎたら0、記録も消える
-assert.strictEqual(m.loadOmikujiRemaining("428875", now + 3_600_001, s), 0);
-assert.strictEqual(s.getItem(m.storageKey("428875")), null);
+assert.strictEqual(
+  m.loadOmikujiState("428875", now + 600000, s).remainingSeconds,
+  3000
+);
+
+// 過ぎたら0。ただし前回の結果は残す(「前回のおみくじ」を出せるように)
+got = m.loadOmikujiState("428875", now + 3600001, s);
+assert.strictEqual(got.remainingSeconds, 0);
+assert.deepStrictEqual(got.result, result);
 
-// 別ユーザーの残り時間は見えない
+// 別ユーザーの記録は見えない
 s = fakeStorage();
-m.saveOmikujiCooldown("428875", 3600, now, s);
-assert.strictEqual(m.loadOmikujiRemaining("99999", now, s), 0);
+m.saveOmikujiState("428875", 3600, result, now, s);
+assert.strictEqual(m.loadOmikujiState("99999", now, s), null);
 
-// 引ける(0以下)を保存すると記録を消す
+// 引ける(0)として保存しても結果は残る
 s = fakeStorage();
-m.saveOmikujiCooldown("428875", 3600, now, s);
-m.saveOmikujiCooldown("428875", 0, now, s);
-assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 0);
+m.saveOmikujiState("428875", 0, result, now, s);
+got = m.loadOmikujiState("428875", now, s);
+assert.strictEqual(got.remainingSeconds, 0);
+assert.deepStrictEqual(got.result, result);
 
-// 壊れた値は0
+// 何も無ければ null
+assert.strictEqual(m.loadOmikujiState("428875", now, fakeStorage()), null);
+
+// 壊れた値は捨てて null
 s = fakeStorage();
 s.setItem(m.storageKey("428875"), "ぐちゃぐちゃ");
-assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 0);
+assert.strictEqual(m.loadOmikujiState("428875", now, s), null);
+assert.strictEqual(s.getItem(m.storageKey("428875")), null);
 
 // 端末の時計が大きくずれていても8時間で頭打ち
 s = fakeStorage();
-s.setItem(m.storageKey("428875"), String(now + 999 * 3600 * 1000));
-assert.strictEqual(m.loadOmikujiRemaining("428875", now, s), 8 * 3600);
+s.setItem(
+  m.storageKey("428875"),
+  JSON.stringify({ nextAt: now + 999 * 3600 * 1000, result: null })
+);
+assert.strictEqual(
+  m.loadOmikujiState("428875", now, s).remainingSeconds,
+  m.MAX_COOLDOWN_SECONDS
+);
 
 // localStorage が使えなくても落ちない
+assert.strictEqual(m.loadOmikujiState("428875", now, null), null);
 assert.strictEqual(m.loadOmikujiRemaining("428875", now, null), 0);
 
+// 表示用の整形
+assert.strictEqual(m.formatOmikujiRemaining(2 * 3600 + 30 * 60), "2時間30分");
+assert.strictEqual(m.formatOmikujiRemaining(45 * 60 + 5), "45分5秒");
+assert.strictEqual(m.formatOmikujiRemaining(30), "30秒");
+assert.strictEqual(m.formatOmikujiRemaining(-1), "0秒");
+
 console.log("omikujiCooldown: 全て通過");
diff --git a/web/utils/omikujiCooldown.js b/web/utils/omikujiCooldown.js
index a17461a..fdda398 100644
--- a/web/utils/omikujiCooldown.js
+++ b/web/utils/omikujiCooldown.js
@@ -1,21 +1,28 @@
-// おみくじのクールダウンをローカルに覚えておく。
+// おみくじの「次に引ける時刻」と「前回の結果」をローカルに覚えておく。
 //
-// 次に引ける時刻は前回引いた瞬間に確定しているのに、どこにも保存していな
-// かったため、「おみくじ」を開くたびに トークン取得 → omikujiGo(peek) の
-// 往復を待たされ、そのあとで初めて「まだ引けない」と分かっていた。押してから
-// 待たされた末に引けないと知らされるのが体感として一番つらい。
+// 引けるかどうかは前回いつ引いたかだけで決まる。それは前回引いた瞬間に
+// 確定しているのに、どこにも保存していなかったため、「おみくじ」を開くたびに
+// トークン取得 → omikujiGo(peek) の往復を待たされ、そのあとで初めて
+// 「まだ引けない」と分かっていた。押してから待たされた末に引けないと
+// 知らされるのが体感として一番つらい。
 //
-// 保存しておけば、ページは待たずにクールダウン表示から始められるし、
-// ヘッダのリンクの文言も開く前に変えられる。サーバーの応答が正であることは
-// 変わらない(ここに保存するのは表示を先に出すためだけ。実際に引けるかは
-// 常にサーバーが決める)。
+// 前回の結果も一緒に持っておく。クールダウン中の「前回のおみくじ」は
+// 通信を待たずにその場で出せる(サーバーにも omikuji_result があるので、
+// 端末を変えれば peek の応答から復元される)。
+//
+// 保存するのは表示を先に出すためだけで、実際に引けるかは常にサーバーが
+// 決める(端末の時計は書き換えられる)。
 //
 // 判定は storage を注入できる純関数にしてあり、Nodeで決定論的に検証できる
-// (sanpaiSession.js と同じ流儀)。
+// (sanpaiSession.js と同じ流儀)。web/scripts/test-omikuji-cooldown.js 参照。
+
+// アカウントを切り替えたときに前の人の結果や残り時間を見せないよう、
+// キーに github_id を含める。
+var STORAGE_PREFIX = "debug-shrine:omikuji:";
 
-// アカウントを切り替えたときに前の人の残り時間を見せないよう、キーに
-// github_id を含める。
-var STORAGE_PREFIX = "debug-shrine:omikuji-next-at:";
+// クールダウンの最長(8時間)。端末の時計が大きくずれていても、これ以上の
+// 残り時間は表示しない。
+var MAX_COOLDOWN_SECONDS = 8 * 60 * 60;
 
 function storageKey(githubId) {
   return STORAGE_PREFIX + (githubId == null ? "" : String(githubId));
@@ -30,46 +37,63 @@ function defaultStorage() {
   }
 }
 
-// サーバーから残り秒を受け取ったときに呼ぶ。remainingSeconds が 0 以下
-// (=引ける)なら記録を消す。
-function saveOmikujiCooldown(githubId, remainingSeconds, now, storage) {
+// サーバーの応答を受け取ったときに呼ぶ。
+// remainingSeconds が 0 以下なら「引ける」として記録する(結果は残す)。
+function saveOmikujiState(githubId, remainingSeconds, result, now, storage) {
   storage = storage || defaultStorage();
   if (!storage) return;
-  if (typeof remainingSeconds !== "number" || remainingSeconds <= 0) {
-    clearOmikujiCooldown(githubId, storage);
-    return;
-  }
+  var seconds = typeof remainingSeconds === "number" ? remainingSeconds : 0;
+  var record = {
+    nextAt: seconds > 0 ? now + seconds * 1000 : 0,
+    result: result || null,
+  };
   try {
-    storage.setItem(storageKey(githubId), String(now + remainingSeconds * 1000));
+    storage.setItem(storageKey(githubId), JSON.stringify(record));
   } catch (e) {
     // 容量超過等。保存できなくても表示が遅くなるだけなので黙って続行
   }
 }
 
-// 残り秒を返す。引ける・不明・壊れたデータなら 0。
-// 端末の時計は信用しきれないので、これはあくまで表示の先出し用。
-function loadOmikujiRemaining(githubId, now, storage) {
+// { remainingSeconds, result } を返す。何も無ければ null。
+// remainingSeconds が 0 なら引ける(結果は前回のもの)。
+function loadOmikujiState(githubId, now, storage) {
   storage = storage || defaultStorage();
-  if (!storage) return 0;
+  if (!storage) return null;
   var raw;
   try {
     raw = storage.getItem(storageKey(githubId));
   } catch (e) {
-    return 0;
+    return null;
+  }
+  if (!raw) return null;
+  var record;
+  try {
+    record = JSON.parse(raw);
+  } catch (e) {
+    clearOmikujiState(githubId, storage);
+    return null;
+  }
+  if (!record || typeof record.nextAt !== "number") {
+    clearOmikujiState(githubId, storage);
+    return null;
   }
-  if (!raw) return 0;
-  var nextAt = Number(raw);
-  if (!isFinite(nextAt) || nextAt <= now) {
-    clearOmikujiCooldown(githubId, storage);
-    return 0;
+  var remaining = 0;
+  if (record.nextAt > now) {
+    remaining = Math.min(
+      Math.ceil((record.nextAt - now) / 1000),
+      MAX_COOLDOWN_SECONDS
+    );
   }
-  // 端末の時計が大きくずれている場合に何時間も先を表示しないよう、
-  // 最長のクールダウン(8時間)で頭打ちにする。
-  var remaining = Math.ceil((nextAt - now) / 1000);
-  return Math.min(remaining, 8 * 60 * 60);
+  return { remainingSeconds: remaining, result: record.result || null };
+}
+
+// 残り秒だけ欲しいとき(ヘッダやトップの文言切り替え)。
+function loadOmikujiRemaining(githubId, now, storage) {
+  var state = loadOmikujiState(githubId, now, storage);
+  return state ? state.remainingSeconds : 0;
 }
 
-function clearOmikujiCooldown(githubId, storage) {
+function clearOmikujiState(githubId, storage) {
   storage = storage || defaultStorage();
   if (!storage) return;
   try {
@@ -79,10 +103,23 @@ function clearOmikujiCooldown(githubId, storage) {
   }
 }
 
+// 残り秒を「2時間30分」「45分」「30秒」の形にする(表示専用の純関数)。
+function formatOmikujiRemaining(seconds) {
+  var s = Math.max(0, Math.floor(seconds));
+  var h = Math.floor(s / 3600);
+  var m = Math.floor((s % 3600) / 60);
+  if (h > 0) return h + "時間" + m + "分";
+  if (m > 0) return m + "分" + (s % 60) + "秒";
+  return s + "秒";
+}
+
 module.exports = {
   STORAGE_PREFIX: STORAGE_PREFIX,
+  MAX_COOLDOWN_SECONDS: MAX_COOLDOWN_SECONDS,
   storageKey: storageKey,
-  saveOmikujiCooldown: saveOmikujiCooldown,
+  saveOmikujiState: saveOmikujiState,
+  loadOmikujiState: loadOmikujiState,
   loadOmikujiRemaining: loadOmikujiRemaining,
-  clearOmikujiCooldown: clearOmikujiCooldown,
+  clearOmikujiState: clearOmikujiState,
+  formatOmikujiRemaining: formatOmikujiRemaining,
 };

From 3c8aba1ae0cf1b28879490b563ef7dc9be607a90 Mon Sep 17 00:00:00 2001
From: kojira <kojiran@gmail.com>
Date: Tue, 4 Aug 2026 00:41:23 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=E3=82=AB=E3=82=A6=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=83=80=E3=82=A6=E3=83=B3=E3=82=92=E7=B5=B6=E5=AF=BE=E6=99=82?=
 =?UTF-8?q?=E5=88=BB=E3=81=8B=E3=82=89=E8=A8=88=E7=AE=97=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

残り秒を1秒ずつ引いていたため、タブが背面にあると setInterval が間引かれて
(止まることもある)実際より長い残り時間を表示していた。戻ってきたときに
「引けるのに引けないと見える」ことになり、今回直したかった症状そのものが
再発する。

- おみくじページ: 明ける時刻を決めて毎tickそこから計算する
- トップページ: 保存済みの「次に引ける時刻」から毎tick計算し直す
- 残り時間の整形を omikujiCooldown.js に一本化し、両ページで同じ表記にする

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/pages/index.vue   |  8 ++++----
 web/pages/omikuji.vue | 25 ++++++++++++++++---------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/web/pages/index.vue b/web/pages/index.vue
index 586d676..cc68fe3 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -182,10 +182,10 @@ export default {
   mounted() {
     this.pickLabomiLine();
     this.refreshOmikuji();
-    // 1秒ごとに減らす。0になったらボタンの文言が「おみくじを引く」に戻る。
-    this.omikujiTimerId = setInterval(() => {
-      if (this.omikujiRemaining > 0) this.omikujiRemaining -= 1;
-    }, 1000);
+    // 1秒ごとに保存済みの「次に引ける時刻」から計算し直す。残り秒を引き算で
+    // 減らすと、タブが背面のとき setInterval が間引かれて実際より長い残り時間を
+    // 表示してしまい、引けるのに「前回のおみくじ」のままになる。
+    this.omikujiTimerId = setInterval(this.refreshOmikuji, 1000);
   },
   beforeDestroy() {
     if (this.omikujiTimerId) clearInterval(this.omikujiTimerId);
diff --git a/web/pages/omikuji.vue b/web/pages/omikuji.vue
index 42b5e64..6c871f4 100644
--- a/web/pages/omikuji.vue
+++ b/web/pages/omikuji.vue
@@ -87,7 +87,11 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { mapGetters } from "vuex";
 import ResultCard from "@/components/OmikujiResult";
 import OmikujiScene from "@/components/OmikujiScene";
-import { saveOmikujiState, loadOmikujiState } from "@/utils/omikujiCooldown";
+import {
+  saveOmikujiState,
+  loadOmikujiState,
+  formatOmikujiRemaining,
+} from "@/utils/omikujiCooldown";
 
 function resolveCurrentUser(auth) {
   return new Promise((resolve) => {
@@ -254,8 +258,16 @@ export default {
     },
     startTimer() {
       if (this.timerId) clearInterval(this.timerId);
+      // 残り秒を1秒ずつ引くのではなく、明ける時刻を決めて毎回そこから計算する。
+      // タブが背面にあると setInterval は間引かれる(止まることもある)ため、
+      // 引き算だと戻ってきたときに実際より長い残り時間を表示してしまい、
+      // 「引けるのに引けないと見える」という直したかった症状が再発する。
+      const deadline = Date.now() + this.remaining * 1000;
       this.timerId = setInterval(() => {
-        this.remaining -= 1;
+        this.remaining = Math.max(
+          0,
+          Math.ceil((deadline - Date.now()) / 1000)
+        );
         if (this.remaining <= 0) {
           clearInterval(this.timerId);
           this.timerId = null;
@@ -275,13 +287,8 @@ export default {
   computed: {
     ...mapGetters(["user"]),
     remainingText() {
-      const s = Math.max(0, this.remaining);
-      const h = Math.floor(s / 3600);
-      const m = Math.floor((s % 3600) / 60);
-      const sec = s % 60;
-      if (h > 0) return `${h}時間${m}分`;
-      if (m > 0) return `${m}分${sec}秒`;
-      return `${sec}秒`;
+      // トップページと同じ表記にする(整形は omikujiCooldown.js に一本化)。
+      return formatOmikujiRemaining(this.remaining);
     },
     shareUrl() {
       return this.$config.baseUrl;