From 454eb98b23dba4079d3e981138392a2983ea669a Mon Sep 17 00:00:00 2001
From: cm-dyoshikawa <yoshikawa.daio@classmethod.jp>
Date: Fri, 13 Sep 2024 12:04:10 +0900
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E5=B8=B8=E3=81=AE=E5=85=AC=E9=96=8B?=
 =?UTF-8?q?=E7=94=A8URL=E3=82=82=E4=BD=BF=E3=81=88=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../articles/305-example-embed-others.md      |  2 --
 packages/zenn-markdown-html/src/embed.ts      | 10 +++++++--
 .../src/utils/url-matcher.ts                  | 22 ++++++++++++++++++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/zenn-cli/articles/305-example-embed-others.md b/packages/zenn-cli/articles/305-example-embed-others.md
index 4cb6d130..1d13f5f7 100644
--- a/packages/zenn-cli/articles/305-example-embed-others.md
+++ b/packages/zenn-cli/articles/305-example-embed-others.md
@@ -60,8 +60,6 @@ published: true
 
 @[docswell](https://www.docswell.com/slide/LK7J5V/embed)
 
-### embed用でないdocswell URL
-
 @[docswell](https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell)
 
 ## jsfiddle
diff --git a/packages/zenn-markdown-html/src/embed.ts b/packages/zenn-markdown-html/src/embed.ts
index d175ec13..4d25b6be 100644
--- a/packages/zenn-markdown-html/src/embed.ts
+++ b/packages/zenn-markdown-html/src/embed.ts
@@ -18,6 +18,7 @@ import {
   isValidHttpUrl,
   isDocswellUrl,
   extractYoutubeVideoParameters,
+  extractDocswellEmbedUrl,
 } from './utils/url-matcher';
 
 /* 埋め込み要素の種別 */
@@ -80,10 +81,15 @@ export const embedGenerators: Readonly<EmbedGeneratorList> = {
     )}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>`;
   },
   docswell(str) {
+    const errorMessage = 'DocswellのスライドURLが不正です';
     if (!isDocswellUrl(str)) {
-      return 'Docswellのembed用のURLを指定してください';
+      return errorMessage;
     }
-    return `<span class="embed-block embed-docswell"><iframe src="${str}" allowfullscreen="true" class="docswell-iframe" width="620" height="349" style="border: 1px solid #ccc; display: block; margin: 0px auto; padding: 0px; aspect-ratio: 620/349;"></iframe></span>`;
+    const slideUrl = extractDocswellEmbedUrl(str);
+    if (!slideUrl) {
+      return errorMessage;
+    }
+    return `<span class="embed-block embed-docswell"><iframe src="${slideUrl}" allowfullscreen="true" class="docswell-iframe" width="620" height="349" style="border: 1px solid #ccc; display: block; margin: 0px auto; padding: 0px; aspect-ratio: 620/349;"></iframe></span>`;
   },
   jsfiddle(str) {
     if (!isJsfiddleUrl(str)) {
diff --git a/packages/zenn-markdown-html/src/utils/url-matcher.ts b/packages/zenn-markdown-html/src/utils/url-matcher.ts
index 217c2556..0414fe2a 100644
--- a/packages/zenn-markdown-html/src/utils/url-matcher.ts
+++ b/packages/zenn-markdown-html/src/utils/url-matcher.ts
@@ -47,8 +47,15 @@ export function isJsfiddleUrl(url: string): boolean {
   return /^(http|https):\/\/jsfiddle\.net\/[a-zA-Z0-9_,/-]+$/.test(url);
 }
 
+const docswellNormalUrlRegex =
+  /^https:\/\/www\.docswell\.com\/s\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/;
+const docswellEmbedUrlRegex =
+  /^https:\/\/www\.docswell\.com\/slide\/[a-zA-Z0-9_-]+\/embed$/;
+
 export function isDocswellUrl(url: string): boolean {
-  return /^https:\/\/www\.docswell\.com\/[a-zA-Z0-9_,/-]+\/embed$/.test(url);
+  return [docswellNormalUrlRegex, docswellEmbedUrlRegex].some((pattern) =>
+    pattern.test(url)
+  );
 }
 
 export function isYoutubeUrl(url: string): boolean {
@@ -84,6 +91,19 @@ export function extractYoutubeVideoParameters(
   return { videoId, start };
 }
 
+export function extractDocswellEmbedUrl(url: string): string | null {
+  // Embed用URLの場合、そのまま返す
+  if (docswellEmbedUrlRegex.test(url)) {
+    return url;
+  }
+  // Embed用URLでない場合 https://www.docswell.com/s/:username/{slideId}-hello-docswell のslideIdを抽出する
+  const slideId = new URL(url).pathname.split('/').at(3)?.split('-').at(0);
+  if (!slideId) {
+    return null;
+  }
+  return `https://www.docswell.com/slide/${slideId}/embed`;
+}
+
 /**
  * 参考: https://blueprintue.com/
  * 生成されるURLをもとに正規表現を定義した