@takagaki/cortex-decisions-viewer 0.12.39 → 0.12.40

package/dist/render.js

@@ -3956,8 +3956,21 @@ a.ds-tile:hover { text-decoration: none; }
 /* 手順の画像。モーダルの中なので幅で潰れないようにし、枠で「画面の写し」だと分かるようにする。
    🔴 **使っているのは 2 か所**: Google Chat の「スペースにアプリを追加する」手順（#389）と、
    会議カードの「予定を作るときに案件のカレンダーを選ぶ」手順（#452）。片方を撤去しても
-   この規則は消さないこと（消すと残ったほうがモーダルから横に溢れる） */
-.mt-shot { display: block; max-width: 100%; height: auto; margin: 6px 0 0; border: 1px solid var(--border); border-radius: 6px; }
+   この規則は消さないこと（消すと残ったほうがモーダルから横に溢れる）
+
+   🔴 **上限の数字はここ 1 か所だけに置く（#455）。** 2026-09-06 のオーナー実機確認で
+   「画像が大きすぎる」と出たので 640px にした。カード側（guideShot の呼び出し）に幅を
+   書くと、次に上限を変えるときに 3 枚のうち 1 枚だけが取り残される。
+   width: 100% は、モーダルが 640px より狭いときに縮ませるため（max-width だけだと縮まない）。
+   margin の左は 0 のまま＝左寄せ（中央寄せにすると説明の 1 行と軸がずれる）。 */
+.mt-shot { display: block; max-width: 640px; width: 100%; height: auto; margin: 6px 0 0; border: 1px solid var(--border); border-radius: 6px; cursor: zoom-in; }
+/* クリックで原寸幅に戻した状態（#455）。注釈のラベルは原寸 18px で描いてあり、
+   1360px の画像を 640px に縮めると実効 8〜9px になって読めない。**上限を外すだけ**で、
+   ライトボックスも別ウィンドウも拡大鏡も作らない（押した場所から画面が動かない）。
+   🔴 **width も auto に戻す。** .mt-shot の width: 100% が残ると、原寸 900px の
+   Google Chat の 2 枚がモーダルの内側幅（約 996px）まで**引き伸ばされてぼける**
+   ——「原寸の幅に戻す」と言いながら原寸より大きく出すことになる */
+.mt-shot-full { max-width: 100%; width: auto; cursor: zoom-out; }
 /* 0件を黙って見せない（追加フォームだけだと「未登録」か「読めていない」か区別できない） */
 .ds-empty { color: var(--muted); font-size: 12.5px; margin: 4px 0 10px; }
 .sec-input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); }
@@ -4545,6 +4558,36 @@ ${calendarAddUrl.toString()}
     (children || []).forEach(function (c) { if (c) e.appendChild(c); });
     return e;
   }
+  // 手順の画像（.mt-shot）を作る**唯一の口**（#455）。会議カードの 1 枚と Google Chat の
+  // 2 枚がここを通る。
+  //
+  // 🔴 **幅の数字を呼び出し側に書かない。** 上限は CSS の .mt-shot 1 か所だけ。ここで
+  // 受け取るのは src と原寸の width/height と alt だけで、style も width の上書きも渡さない
+  //（渡すと CSP でも弾かれる——csp-compatible.test.mjs の「el() への style プロパティ渡し」）。
+  //
+  // 🔴 **クリックで原寸幅に戻す。** 640px まで縮めると、画像に描いた赤枠のラベル（原寸 18px）が
+  // 実効 8〜9px になって読めない。押されたら .mt-shot-full を付け外しするだけにしてある。
+  // ⚠ **onclick 属性は使わない**（配信先の CSP はインラインのハンドラを実行しない）。
+  // キーボード操作は付けていない——画像が読めなくても**上の 1 行と alt だけで手順は完結する**
+  // 約束なので、拡大は「読める人がもっと見たいとき」の補助に留める。
+  //
+  // ⚠ 受け皿の変数に s / p / src / ext という名前を使わない（コメントの中でも書かない）。
+  // fleet-passthrough の「画面が読むフィールドが受け渡されているか」の走査がその名前に
+  // 当たるので、その名前で属性を組み立てると **fleet-status.json の欄の読み落とし**として
+  // 報告される。（この埋め込み JS はテンプレート文字列なので、バッククォートも書けない）
+  function guideShot(props) {
+    var attrs = {};
+    Object.keys(props || {}).forEach(function (k) { attrs[k] = props[k]; });
+    attrs.class = "mt-shot";
+    // 説明そのものは変えず、押せることだけを 1 語添える（読み上げでも操作が分かる）
+    attrs.alt = (props && props.alt ? props.alt : "") + "（クリックで拡大）";
+    attrs.title = "クリックで拡大";
+    var img = el("img", attrs);
+    img.addEventListener("click", function () {
+      img.classList.toggle("mt-shot-full");
+    });
+    return img;
+  }
   function catBadge(cat) {
     return el("span", { class: "badge cat-" + cat, text: cat || "未分類" });
   }
@@ -6757,9 +6800,10 @@ ${calendarAddUrl.toString()}
       // 手順の画像。**上の1文だけで手順が完結する**（読み上げ・画像が出ない環境）ので、
       // alt にも同じ内容を1文で書く。寸法は属性で明示——書かないと、モーダルを開いた
       // 瞬間に画像の高さのぶん下の操作がずれる（Google Chat の手順と同じ理由）。
-      // loading=lazy は付けない（data: URI には取得が無いので何もしない）
-      box.appendChild(el("img", {
-        class: "mt-shot", src: MEET_SHOT_CREATE_EVENT, width: "1360", height: "949",
+      // loading=lazy は付けない（data: URI には取得が無いので何もしない）。
+      // 表示幅の上限とクリックでの原寸戻しは guideShot / .mt-shot が持つ（#455）
+      box.appendChild(guideShot({
+        src: MEET_SHOT_CREATE_EVENT, width: "1360", height: "949",
         alt: "予定の作成ダイアログ。「カレンダー」の欄で案件のカレンダーが選ばれ、Google Meet を追加するボタンが示され、左の一覧には「マイカレンダーに追加」した案件カレンダーが並んでいる。",
       }));
       // 🔴 **全員が必ず1回押すものなので主ボタンにする**（#452 のオーナー指摘）。
@@ -6781,7 +6825,9 @@ ${calendarAddUrl.toString()}
       // 名乗り券やオーナー権限が無い人にはボタンではなく別の案内を返すので、
       // その人に説明の1行だけ出すと「押してください」が嘘になる
       if (calendarCanRequest()) {
-        box.appendChild(el("p", { class: "mt-cal-note", text: "案件にメンバーを足したら押してください。その人もこのカレンダーを見られるようになります" }));
+        // 🔴 **毎時の自動追従（#451）を必ず書く。** これが無いと「押さないと共有されない」と
+        // 読ませることになり、押し忘れを心配させる。押すのは「すぐに反映したいとき」だけ
+        box.appendChild(el("p", { class: "mt-cal-note", text: "案件にメンバーを足したら押してください。その人もこのカレンダーを見られるようになります（1 時間ごとに自動でも更新されます）" }));
       }
       // 作成済みのまま進行中・失敗の報告が最新なら、その1行だけ添える。
       // **「作れませんでした」とは言わない**（出来ているので嘘になり、押し直すと 2 本目が作られる）
@@ -11154,11 +11200,13 @@ ${calendarAddUrl.toString()}
           // **画像は補助で、上の1文だけで手順が完結する**（読み上げ・画像が出ない環境）。
           // 寸法は属性で明示——書かないと、モーダルを開いた瞬間に画像の高さのぶん下の手順がずれる。
           // loading=lazy は付けない（data: URI には取得が無いので何もしない・Meet と同じ）。
-          // 2枚を div でくるむのは、hintNode の口を広げないため（1手順＝1ノードの約束を保つ）
+          // 2枚を div でくるむのは、hintNode の口を広げないため（1手順＝1ノードの約束を保つ）。
+          // 🔴 **会議カードと同じ guideShot を通す（#455）。** 3 枚が同じ上限・同じ
+          // クリックの振る舞いになる。ここで幅を書き足すと、その 1 枚だけ揃わなくなる
           node: el("div", {}, [
-            el("img", { class: "mt-shot", src: GCHAT_SHOT_STEP1, width: "900", height: "566",
+            guideShot({ src: GCHAT_SHOT_STEP1, width: "900", height: "566",
               alt: "Google Chat のスペースの画面。スペース名の横のメニューが開いていて、その中の「アプリと統合」が赤い枠で示されている。" }),
-            el("img", { class: "mt-shot", src: GCHAT_SHOT_STEP2, width: "900", height: "491",
+            guideShot({ src: GCHAT_SHOT_STEP2, width: "900", height: "491",
               alt: "「アプリと統合」の画面。右上の「＋ アプリを追加」が赤い枠で示され、その下に、このスペースに追加されているアプリの一覧が並んでいる。" }),
           ]),
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.39",
+  "version": "0.12.40",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,