feat: 埋め込み対応サービスの拡張（GitHub, Zenn, コード共有サービス等）

[drillan]

概要

note.comの埋め込み機能として、追加のサービス対応を実装する。
競合サービス（Zenn, Qiita）との比較調査に基づく優先度付け。

背景

現在対応済みのサービス（4種）:

• YouTube
• Twitter/X
• note.com
• GitHub Gist

追加候補サービス

高優先度（技術系記事で頻繁に使用）

サービス	URL例	Zenn/Qiita対応
GitHub（リポジトリ/ファイル）	github.com/owner/repo	両方対応
Zenn.dev	zenn.dev/user/articles/*	-
CodePen	codepen.io/pen/*	両方対応
CodeSandbox	codesandbox.io/s/*	両方対応
StackBlitz	stackblitz.com/edit/*	両方対応
SpeakerDeck	speakerdeck.com/*	両方対応
Docswell	docswell.com/s/*	両方対応

中優先度

サービス	URL例	Zenn/Qiita対応
SlideShare	slideshare.net/*	Qiita対応
Google Slides	docs.google.com/presentation/*	Qiita対応
Asciinema	asciinema.org/a/*	Qiita対応
JSFiddle	jsfiddle.net/*	Zenn対応

低優先度

サービス	URL例	Zenn/Qiita対応
blueprintUE	blueprintue.com/*	両方対応
Mermaid	コードブロック形式	Zenn対応

実装方針

1. embeds.pyにパターン追加
2. 各サービスのoEmbed/API仕様を調査
3. 単体テスト・E2Eテスト追加
4. CLAUDE.mdのテストURL一覧を更新

関連

• note.comエディタ機能のMCP対応状況まとめ #148 note.comエディタ機能のMCP対応状況まとめ

参考URL（調査用）

• note.com埋め込みサービス一覧: https://www.help-note.com/hc/ja/articles/360019596133
• Zenn Markdown記法: https://zenn.dev/zenn/articles/markdown-guide
• Qiita埋め込みコンテンツ: https://qiita.com/Qiita/items/612e2e149b9f9451c144

[drillan]

埋め込みサービス調査方法

note-investigatorを使用した埋め込みAPI調査手順をまとめます。

調査手順

1. キャプチャ開始

mcp__note-investigator__investigator_start_capture(domain="api.note.com")

2. テスト用ドラフト作成

mcp__note-investigator__note_create_draft(title="調査用", body="テスト")

3. エディタページに移動

mcp__note-investigator__investigator_navigate(url="https://note.com/notes/{key}/edit")

4. 手動でURLを貼り付け

ブラウザ上でエディタに調査対象のURLを貼り付け、Enterを押す。

5. トラフィック確認

mcp__note-investigator__investigator_get_traffic(pattern="embed")

6. HTML構造確認

# APIでドラフトのHTML bodyを取得
async with NoteAPIClient(session) as client:
    response = await client.get("/v3/notes/{key}", params={"draft": "true"})
    body = response.get("data", {}).get("body", "")

確認ポイント:

• embedded-service 属性 → サービスタイプ
• embedded-content-key 属性 → 埋め込みキー
• data-src 属性 → 元のURL

7. API動作確認

params = {
    "url": "対象URL",
    "service": "発見したサービスタイプ",
    "embeddable_key": article_key,
    "embeddable_type": "Note",
}
response = await client.get("/v2/embed_by_external_api", params=params)

8. クリーンアップ

mcp__note-investigator__investigator_stop_capture()
mcp__note-investigator__note_delete_draft(article_key="{key}", confirm=True)

---

調査結果サマリー

サービス	サービスタイプ	埋め込み形式	Issue
Zenn.dev	external-article	リンクカード（OGP）	#222
SpeakerDeck	speakerdeck	iframeプレーヤー	#223
Google Slides	googlepresentation	iframeプレーヤー	#224

サービスタイプの分類

タイプ	説明	例
専用タイプ	note.comが個別対応	youtube, twitter, speakerdeck, googlepresentation
external-article	汎用外部記事（OGPベース）	Zenn, その他ブログ
oembed	oEmbedプロトコル対応	noteマネー

備考

• check_type エンドポイント (/v2/embed_by_external_api/check_type?url=...) でURLのサービスタイプを事前確認可能
• 専用タイプがない場合は external-article として処理される可能性あり
• 埋め込み非対応のURLは通常のリンクとして扱われる