@takagaki/cortex-decisions-viewer 0.12.196 → 0.12.198

package/dist/render.js

@@ -6840,10 +6840,19 @@ ${story_1.splitByNameLinks.toString()}
   var MEET_SHOT_STEP11 = "${meet_guide_images_1.MEET_GUIDE_STEP11}";
   var MEET_SHOT_STEP12 = "${meet_guide_images_1.MEET_GUIDE_STEP12}";
   var MEET_SHOT_STEP13 = "${meet_guide_images_1.MEET_GUIDE_STEP13}";
-  // Figma の「発行のしかた」に載せる手順の画像（#547）。理由は src/figma-guide-images.ts
+  // Figma の手順動画のポスターと手順画像11枚（#1353）。理由は src/figma-guide-images.ts
+  var FIGMA_SHOT_POSTER = "${figma_guide_images_1.FIGMA_GUIDE_POSTER}";
   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}";
+  var FIGMA_SHOT_STEP4 = "${figma_guide_images_1.FIGMA_GUIDE_STEP4}";
+  var FIGMA_SHOT_STEP5 = "${figma_guide_images_1.FIGMA_GUIDE_STEP5}";
+  var FIGMA_SHOT_STEP6 = "${figma_guide_images_1.FIGMA_GUIDE_STEP6}";
+  var FIGMA_SHOT_STEP7 = "${figma_guide_images_1.FIGMA_GUIDE_STEP7}";
+  var FIGMA_SHOT_STEP8 = "${figma_guide_images_1.FIGMA_GUIDE_STEP8}";
+  var FIGMA_SHOT_STEP9 = "${figma_guide_images_1.FIGMA_GUIDE_STEP9}";
+  var FIGMA_SHOT_STEP10 = "${figma_guide_images_1.FIGMA_GUIDE_STEP10}";
+  var FIGMA_SHOT_STEP11 = "${figma_guide_images_1.FIGMA_GUIDE_STEP11}";
   // 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}";
@@ -12593,7 +12602,19 @@ ${story_1.splitByNameLinks.toString()}
       // 🔴 **Figma の説明文（c-07・新設）。** 追加の欄の手順 4（何が同期されるか）と手順 1 の前提
       // （トークンの登録）を、ここに 1 回だけ置く。鍵の欄は 0 件のあいだ畳まれているので、入れる欄が
       // 出ること（ファイルを足すと出る）も 1 句で言う。発行の手順そのものは鍵の欄（正本）が持つ
-      m.modal.appendChild(el("p", { class: "modal-desc", text: "ここに並んでいる Figma ファイルの画面名とコメントを、Figma へのリンクつきで毎晩同期します（画像は取り込まれません）。あらかじめ Figma のトークンの登録が要ります（ファイルを足すと入れる欄が出ます）。やめるには「このファイルを外す」を押してください。" }));
+      var figmaDesc = el("p", { class: "modal-desc", text: "ここに並んでいる Figma ファイルの画面名とコメントを、Figma へのリンクつきで毎晩同期します（画像は取り込まれません）。あらかじめ Figma のトークンの登録が要ります（ファイルを足すと入れる欄が出ます）。やめるには「このファイルを外す」を押してください。" });
+      m.modal.appendChild(figmaDesc);
+      // 🔴 **Figma のつなぎ方の動画＋画像（#1353）は Backlog と同じ配置**（見出しのすぐ下・説明文より前・折りたたまない・中央・幅 480px 上限）。
+      // 投入の口が無い（つなげない）配信先には出さない
+      var figmaForm = SECRET_FORMS["figma"];
+      if (SITE.intake && figmaForm && figmaForm.guideInModal) {
+        var figmaCarousel = buildGuideCarousel("figma", figmaForm.guide);
+        if (figmaCarousel) {
+          figmaCarousel.classList.add("mt-carousel-center");
+          figmaCarousel.setAttribute("data-guide-kind", "figma");
+          m.modal.insertBefore(figmaCarousel, figmaDesc);
+        }
+      }
     } else if (cap === "共有資料" && (!adapter || adapter === "google-drive")) {
       // 🔴 **Google Drive 専用の説明文（c-07・新設）。** SharePoint 等の別のアダプタの窓には出さない
       // （Markdown 化の約束は Drive の取り込みの話）。追加の欄の手順 3 が持っていた文
@@ -18655,36 +18676,81 @@ ${story_1.splitByNameLinks.toString()}
       // 特に file_comments:read の欠落は「同期は緑なのに指摘だけ増えない」という
       // 気づきにくい壊れ方をする（コメント同期は後から足した機能で、この案内が追随していなかった）。
       // 書き込み権限は1つも要らない。files:read（非推奨・広範）は選ばせないこと。
-      // **画像内の番号（①〜⑧・下の shots）と、この文の言い回しの向きを揃える。**
-      // 文の側には数字を振らない——振ると画像の丸数字と二重に採番することになり、
-      // 「文の1番」と「画像の①」がずれたときに矛盾して見える（#547）
-      how: "Figma の左上の名前 → Settings → Security タブ → Personal access tokens の Generate new token で発行します。名前は任意（例: cortex token）、期限は90日などにし、スコープは file_content:read と file_comments:read の2つだけにチェックを入れてください（どちらも読み取りのみ・書き込み権限は要りません）。",
+      // **動画の読み上げ・画像の札（下の shots）と、この文の言い回しの向きを揃える。**
+      // 文の側には数字を振らない——振ると画像の手順番号と二重に採番することになり、
+      // 「文の1番」と「画像の1」がずれたときに矛盾して見える
+      how: "Figma でファイルを開き、左上のメニュー → Help and account → Account settings → Security タブ → Personal access tokens の Generate new token で発行します。名前は任意（例: cortex token）、期限は90日などにし、スコープは file_content:read と file_comments:read の2つだけにチェックを入れてください（どちらも読み取りのみ・書き込み権限は要りません）。",
       // **スコープが正しくても、招待が無いと読めない。** トークンは「そのアカウントが
       // 見られるファイル」しか読めないので、招待漏れは 404 になる。権限の問題に見えないため
       // 現場で切り分けに時間がかかる（実際に踏んだ）。入力欄の隣に書いておく。
       note: "発行したアカウントを、対象の Figma ファイルに閲覧者として招待しておいてください（招待が無いとトークンが正しくても読めません）。"
         + "発行するのは、対象ファイルのあるチームで Dev または Full の席を持つ方にしてください。閲覧席（View/Collab）のトークンは取得回数が月 20 回までで、夜間同期が数日で止まります。",
-      // **手順の画像3枚（#547）。** buildGuideCarousel（#1353）を通す1枚ずつ送りの枠に乗せる。
-      // 見出しは画像の並び順（1〜3枚目）、画像の中の丸数字（①〜⑧）は1枚の中の細かい手順
-      // ——役割が別なので、見出し側に丸数字を混ぜない。
-      // 動画は無し（guide.video を省略）。将来動画を足すときは、この guide にそのまま
-      // video: { alt } を足すだけで済む（SITE.guideAssets.figma.video が注入された日から配信開始）
+      // **手順の動画＋画像（#1353）。** Backlog と同じ形（動画の実 URL は SITE.guideAssets.figma.video・build.ts の
+      // GUIDE_VIDEO_SOURCES が注入する）。画像の並びは手順の順（01→11: Figma の行 → リンクをコピー → トークンを発行 → 貼る → つながる）。
+      // 動画＋画像は鍵の欄ではなく、モーダルの上（見出しの下・説明文の前）に出す（openCapabilityModal の Figma の項）
+      guideInModal: true,
       guide: {
+        // 画像の説明文（カルーセルの下）は「手順 N / 11」だけを出す（画像の中に文言が入っているため）
+        counter: true,
+        video: {
+          alt: "Figma を Cortex につなぐ手順の動画（約1分30秒）。Figma のファイルのリンクのコピー、読み取り用のトークンの発行、操作タブへの貼り付け、接続OK の確認までを画面で見せます。",
+          poster: FIGMA_SHOT_POSTER,
+        },
         shots: [
           {
-            src: FIGMA_SHOT_STEP1, width: "1000", height: "1114",
-            heading: "1. 左上の名前 → Settings",
-            alt: "Figma左上の自分の名前を押すとメニューが開き、その中のSettingsが赤枠で示されている。",
+            src: FIGMA_SHOT_STEP1, width: "960", height: "540",
+            heading: "1. 操作タブで Figma の行を押す",
+            alt: "手順 1。Cortex の操作タブのデザインの Figma の行が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP2, width: "960", height: "540",
+            heading: "2. Figma でファイルを開き Share →［Copy link］",
+            alt: "手順 2。Figma の Share の窓で［Copy link］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP3, width: "960", height: "540",
+            heading: "3. リンクを貼って［追加］",
+            alt: "手順 3。Cortex の Figma のモーダルの「Figma ファイルを追加」の欄と［追加］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP4, width: "960", height: "540",
+            heading: "4. ファイルが並んだら、次はトークン",
+            alt: "手順 4。ファイルの行と［登録する］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP5, width: "960", height: "540",
+            heading: "5. 左上のメニュー → Help and account → Account settings",
+            alt: "手順 5。Figma の左上のメニューで Help and account と Account settings が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP6, width: "960", height: "540",
+            heading: "6. Security タブ →［Generate new token］",
+            alt: "手順 6。Account settings の Security タブと Generate new token が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP7, width: "960", height: "540",
+            heading: "7. 名前は自由・期限は 90 days",
+            alt: "手順 7。トークンの名前の欄と期限（90 days）が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP8, width: "960", height: "540",
+            heading: "8. file_content:read と file_comments:read の 2 つだけにチェック →［Generate token］",
+            alt: "手順 8。権限の一覧で file_content:read と file_comments:read の 2 つのチェックが赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP9, width: "960", height: "540",
+            heading: "9. トークンをコピー（見られるのはこの画面だけ）",
+            alt: "手順 9。発行されたトークンの欄が赤枠で示されている（値は伏せ字）。",
           },
           {
-            src: FIGMA_SHOT_STEP2, width: "1200", height: "1145",
-            heading: "2. Security タブ → Generate new token を押す",
-            alt: "Settings画面のSecurityタブが赤枠で示され、下のPersonal access tokensにあるGenerate new tokenのリンクも赤枠で示されている。",
+            src: FIGMA_SHOT_STEP10, width: "960", height: "540",
+            heading: "10.［登録する］→ トークンを貼って［保存］",
+            alt: "手順 10。Cortex のトークンの欄と［保存］が赤枠で示されている。",
           },
           {
-            src: FIGMA_SHOT_STEP3, width: "1100", height: "1428",
-            heading: "3. 名前・期限・スコープを決めて発行する",
-            alt: "Generate new tokenダイアログ。Token name欄・Expiration（90日）・file_comments:readとfile_content:readのチェックボックス・Generate tokenボタンが、それぞれ赤枠で示されている。",
+            src: FIGMA_SHOT_STEP11, width: "960", height: "540",
+            heading: "11. 「接続OK」と「登録済み」が出れば完了",
+            alt: "手順 11。ファイルの行の「接続OK」とトークンの「登録済み」が赤枠で示されている。",
           },
         ],
       },
@@ -18998,7 +19064,7 @@ ${story_1.splitByNameLinks.toString()}
     // meta.guide を持つ種別（Figma）はカルーセル1つに乗せる。meta.guide も meta.shots も
     // 持たない種別（Backlog）ではこの節は素通りする
     if (meta.guide && meta.guideInModal) {
-      // モーダルの上に出している種別（Backlog）は、ここには重ねない
+      // モーダルの上に出している種別（Backlog・Figma）は、ここには重ねない
     } else if (meta.guide) {
       var carousel = buildGuideCarousel(kind, meta.guide);
       if (carousel) guidanceBox.appendChild(carousel);

package/package.json

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