@takagaki/cortex-decisions-viewer 0.12.184 → 0.12.186

package/dist/render.js

@@ -5874,6 +5874,8 @@ a.ds-tile:hover { text-decoration: none; }
    .mt-shot / .mt-carousel-video と同じ「width:100%; height:auto」に任せ、
    枚数を切り替えるたびに高さが変わる（ガタつきはあるが、CSP安全性を優先する） */
 .mt-carousel { margin: 6px 0 0; max-width: 640px; }
+/* Backlog のモーダルの動画（#1353）: 幅は480pxを上限に（狭い画面では100%まで縮む）・モーダルの左右中央に置く */
+.mt-carousel-center { max-width: 480px; margin-left: auto; margin-right: auto; }
 .mt-carousel-slide[hidden] { display: none; }
 .mt-carousel-slide .mt-shot { margin: 0; }
 .mt-carousel-video { display: block; width: 100%; height: auto; margin: 0; border: 1px solid var(--border); border-radius: 6px; background: #000; }
@@ -6828,13 +6830,18 @@ ${story_1.splitByNameLinks.toString()}
   var FIGMA_SHOT_STEP1 = "${figma_guide_images_1.FIGMA_GUIDE_STEP1}";
   var FIGMA_SHOT_STEP2 = "${figma_guide_images_1.FIGMA_GUIDE_STEP2}";
   var FIGMA_SHOT_STEP3 = "${figma_guide_images_1.FIGMA_GUIDE_STEP3}";
-  // Backlog の手順動画のポスターと手順画像5枚（#1353）。理由は src/backlog-guide-images.ts
+  // Backlog の手順動画のポスターと手順画像10枚（#1353）。理由は src/backlog-guide-images.ts
   var BACKLOG_SHOT_POSTER = "${backlog_guide_images_1.BACKLOG_GUIDE_POSTER}";
   var BACKLOG_SHOT_STEP1 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP1}";
   var BACKLOG_SHOT_STEP2 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP2}";
   var BACKLOG_SHOT_STEP3 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP3}";
   var BACKLOG_SHOT_STEP4 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP4}";
   var BACKLOG_SHOT_STEP5 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP5}";
+  var BACKLOG_SHOT_STEP6 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP6}";
+  var BACKLOG_SHOT_STEP7 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP7}";
+  var BACKLOG_SHOT_STEP8 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP8}";
+  var BACKLOG_SHOT_STEP9 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP9}";
+  var BACKLOG_SHOT_STEP10 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP10}";
 
   /**
    * コピーボタンの動き（copyRow と copyInline の共通部分）。clipboard が使えない環境では
@@ -6964,7 +6971,9 @@ ${story_1.splitByNameLinks.toString()}
   //     （配るのは動画1本だけ。ポスターは宣言側が持つ）。あれば <video poster> に付ける
   //   - shots は今の meta.shots と同じ形。画像は data URI 埋め込みのまま（変更なし）
   //
-  // 🔴 **ここでも幅の数字を呼び出し側に書かせない**（CSS の .mt-carousel 1 か所だけ）。
+  //   - guide.counter … true なら画面の説明文を「手順 N / 全体」だけにする（画像の中に文言がある手順用・Backlog）。
+  //     動画スライドの説明文は空（読み上げ用は video の aria-label）。無ければ従来どおり各スライドの見出し
+  // 🔴 **ここでも幅の数字を呼び出し側に書かせない**（CSS の .mt-carousel と、中央寄せ用の .mt-carousel-center だけ）。
   // ⚠ **表示切替は hidden 属性（DOM プロパティ代入）だけ**。インラインの style を書き込む
   // 手段（CSP の検査・csp-compatible.test.mjs が禁じる書き方）は使わない。
   // ⚠ ハンドラは全部 addEventListener（インラインの on* 属性は配信先の CSP が実行しない）。
@@ -6988,12 +6997,16 @@ ${story_1.splitByNameLinks.toString()}
       slides.push({
         node: el("video", videoAttrs),
         caption: guide.video.alt || "",
+        label: null,
       });
     }
-    (guide.shots || []).forEach(function (shot) {
+    var shotList = guide.shots || [];
+    shotList.forEach(function (shot, shotIdx) {
       slides.push({
         node: guideShot({ src: shot.src, width: shot.width, height: shot.height, alt: shot.alt }),
         caption: shot.heading || shot.alt || "",
+        // counter: true の手順は、画面の説明文を「手順 N / 全体」だけにする（画像の中に文言があるため）
+        label: guide.counter ? "手順 " + (shotIdx + 1) + " / " + shotList.length : null,
       });
     });
     if (!slides.length) return null;
@@ -7030,7 +7043,8 @@ ${story_1.splitByNameLinks.toString()}
       // フォーカスが隠れたスライドの中にあったら外枠へ戻す（キーボード操作が途切れない）
       if (document.activeElement && document.activeElement !== root && viewport.contains(document.activeElement)
           && slideEls[current] && !slideEls[current].contains(document.activeElement)) root.focus();
-      caption.textContent = slides[current].caption;
+      // 動画スライドに label は無い（counter 手順では説明文を出さない）。counter の無い手順は従来どおり caption
+      caption.textContent = guide.counter ? (slides[current].label || "") : slides[current].caption;
       dotEls.forEach(function (dotEl, idx) {
         dotEl.classList.toggle("is-active", idx === current);
         if (idx === current) dotEl.setAttribute("aria-current", "true"); else dotEl.removeAttribute("aria-current");
@@ -12539,24 +12553,15 @@ ${story_1.splitByNameLinks.toString()}
       m.modal.appendChild(backlogDesc);
       // 🔴 **つなぎ方の動画（#1353）はモーダルの見出しのすぐ下（説明文より前）に置く。** 鍵の欄の「発行のしかた」の中に置くと、
       // 接続先が 0 件のあいだは鍵の欄ごと出ないので、いちばん要る最初のときに見えない。
-      // 接続先が 0 件のときは開いて出し、つないだあとは畳む（鍵の欄の中には置かない＝同じ動画を 2 か所に出さない）
-      // 説明文は先に追加済みなので、説明文の前へ差し込む
+      // **折りたたまない**（オーナー指摘・2026-10-19）: 接続先の有無によらず、いつもそのまま出す。
+      // 左右中央・幅の上限は CSS の .mt-carousel-center 1 か所。説明文は先に追加済みなので、説明文の前へ差し込む
       var backlogForm = SECRET_FORMS["backlog"];
       var backlogCarousel = backlogForm && backlogForm.guideInModal && backlogTargetsEditable()
         ? buildGuideCarousel("backlog", backlogForm.guide) : null;
       if (backlogCarousel) {
-        var guideFold = el("details", { class: "sec-fold mt-guide-fold", "data-guide-kind": "backlog" }, [
-          el("summary", { text: "つなぎ方を動画で見る" }),
-          backlogCarousel,
-        ]);
-        guideFold.open = keyTargetCount("課題管理") === 0;
-        // 閉じても <video> は DOM に残るので、再生中なら止める（音が鳴り続けない）
-        guideFold.addEventListener("toggle", function () {
-          if (guideFold.open) return;
-          var playing = guideFold.querySelector("video");
-          if (playing && typeof playing.pause === "function") playing.pause();
-        });
-        m.modal.insertBefore(guideFold, backlogDesc);
+        backlogCarousel.classList.add("mt-carousel-center");
+        backlogCarousel.setAttribute("data-guide-kind", "backlog");
+        m.modal.insertBefore(backlogCarousel, backlogDesc);
       }
     } else if (cap === "開発") {
       // 🔴 **開発の開示文は「記録に使う・決定の抽出には使わない」（#660）。** 2026-09-18 の
@@ -18508,40 +18513,68 @@ ${story_1.splitByNameLinks.toString()}
           "（前の担当者のアカウントが無効になると同期が止まります）。",
       },
       // **手順の動画＋画像（#1353）。** 動画の実 URL は guide に置かない（SITE.guideAssets.backlog.video・
-      // build.ts の GUIDE_VIDEO_SOURCES が注入する）。動画が無い配信先では画像5枚だけで成立する。
-      // 画像の並びは動画の流れ（URL をコピー → キーを発行 → 貼る → つながる）に揃える。
+      // build.ts の GUIDE_VIDEO_SOURCES が注入する）。動画が無い配信先では画像10枚だけで成立する。
+      // 画像の並びは手順の順（01→10: URL を貼る欄 → URL をコピー → キーを発行 → 貼る → つながる）。
       // 動画＋画像は鍵の欄ではなく、モーダルの上（見出しの下・説明文の前）に出す（openCapabilityModal の Backlog の項）
       guideInModal: true,
       guide: {
+        // 画像の説明文（カルーセルの下）は「手順 N / 10」だけを出す（画像の中に文言が入っているため）。
+        // 読み上げ用の説明は各画像の alt と動画の aria-label に持たせる（画面には出さない）
+        counter: true,
         video: {
           alt: "Backlog を Cortex につなぐ手順の動画（約1分30秒）。Backlog の URL のコピー、API キーの発行、操作タブへの貼り付け、接続OK の確認までを画面で見せます。",
           poster: BACKLOG_SHOT_POSTER,
         },
         shots: [
           {
-            src: BACKLOG_SHOT_STEP1, width: "1481", height: "993",
-            heading: "1. Backlog のアドレスバーから URL をコピー（操作タブの「接続先を追加」に貼る）",
-            alt: "Backlogのプロジェクトホーム。ブラウザのアドレスバーに cm1.backlog.jp/projects/PJ_CORTEX の形のURLが出ている。",
+            src: BACKLOG_SHOT_STEP1, width: "770", height: "250",
+            heading: "1. Cortex の欄に Backlog の URL を貼る",
+            alt: "手順 1。Cortex の Backlog のモーダル。「接続先を追加」の URL の入力欄が赤枠で示され、「ここに Backlog の URL を貼ります」と書かれている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP2, width: "620", height: "260",
+            heading: "2. Backlog のホームで URL をコピー",
+            alt: "手順 2。Backlog のプロジェクトホーム。アドレスバーの URL が赤枠で示され、「プロジェクトのホームで、この URL をコピー」と書かれている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP3, width: "685", height: "180",
+            heading: "3. 貼り付けて追加",
+            alt: "手順 3。URL を貼った入力欄と「追加」ボタンが赤く囲まれ、「貼り付けて［追加］を押す」と書かれている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP4, width: "790", height: "190",
+            heading: "4. 接続先が並んだら API キーへ",
+            alt: "手順 4。接続先の行が並び、「入れる」ボタンが赤く囲まれて、「接続先が並んだら、次は API キー」と書かれている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP5, width: "540", height: "250",
+            heading: "5. 右上のアイコンから個人設定",
+            alt: "手順 5。Backlog の右上のアイコンのメニューで「個人設定」が赤枠で示されている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP6, width: "560", height: "180",
+            heading: "6. 左のメニューの API",
+            alt: "手順 6。Backlog の個人設定の左のメニューで「API」が赤枠で示されている。",
           },
           {
-            src: BACKLOG_SHOT_STEP2, width: "1536", height: "766",
-            heading: "2. 個人設定 → API のメモに Cortex と入れて登録",
-            alt: "Backlogの個人設定のAPI画面。新しいAPIキーを発行する欄のメモに Cortex と入力されていて、登録ボタンを押す前の状態。",
+            src: BACKLOG_SHOT_STEP7, width: "700", height: "180",
+            heading: "7. メモに Cortex と入れて登録",
+            alt: "手順 7。API の設定画面。メモ欄に「Cortex」と入っていて、「登録」ボタンが赤く囲まれている。",
           },
           {
-            src: BACKLOG_SHOT_STEP3, width: "1536", height: "766",
-            heading: "3. 発行された API キーをコピー",
-            alt: "登録されたAPIキーの一覧に、メモが Cortex の行が増えている。キーは先頭と末尾の文字だけ見え、行のコピーボタンでコピーできる。",
+            src: BACKLOG_SHOT_STEP8, width: "700", height: "160",
+            heading: "8. 発行された API キーをコピー",
+            alt: "手順 8。登録された API キーの一覧で、メモが Cortex の行のコピーボタンが赤く囲まれ、「発行された API キーをコピー」と書かれている。",
           },
           {
-            src: BACKLOG_SHOT_STEP4, width: "1456", height: "819",
-            heading: "4. 操作タブの Backlog の入力欄に貼って保存",
-            alt: "Cortexの操作タブのBacklogのモーダル。API キーを入れる欄（表示は「トークンを貼り付け」）にカーソルがあり、その下に保存ボタンがある。",
+            src: BACKLOG_SHOT_STEP9, width: "775", height: "140",
+            heading: "9. 入れる → キーを貼って保存",
+            alt: "手順 9。Cortex のモーダルで「入れる」を押して出た入力欄と「保存」ボタンが赤く囲まれ、「キーを貼って［保存］」と書かれている。",
           },
           {
-            src: BACKLOG_SHOT_STEP5, width: "1568", height: "773",
-            heading: "5. 「接続OK」と出れば完了",
-            alt: "Backlogのモーダルの接続先の行に、緑の「接続OK」の表示が出ている。登録済みと保存しましたの表示も出ている。",
+            src: BACKLOG_SHOT_STEP10, width: "645", height: "130",
+            heading: "10. 接続を確認して接続OK",
+            alt: "手順 10。接続先の行に緑の「接続OK」が出ていて、「接続を確認」ボタンと一緒に赤く囲まれている。",
           },
         ],
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.184",
+  "version": "0.12.186",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,
@@ -15,7 +15,7 @@
     "dist",
     "assets",
     "!assets/guides/backlog-poster.jpg",
-    "!assets/guides/backlog-shots"
+    "!assets/guides/backlog-annotated"
   ],
   "engines": {
     "node": ">=18"