## 概要
[[Bluesky]]の投稿を[[Obsidian]]のエディタ上や[[Obsidian Publish]]で埋め込みたい。
## ソリューション
[[Obsidian]]ではサポートしていないため、[[iframeタグ]]を使って埋め込みます。
### 表示サンプル
<div class="bluesky-embed-container">
<iframe height="295px" class="bluesky-embed" src="https://embed.bsky.app/embed/did:plc:bi2l5vkitdtgw364ixidbint/app.bsky.feed.post/3ma3yi3rpv22d?colorMode=system" scrolling="no" frameborder="0" loading="lazy"> </iframe>
</div>
### やり方
#### [[HTML]]
以下を挿入します。
```html
<div class="bluesky-embed-container">
<iframe height="295px" class="bluesky-embed" src="https://embed.bsky.app/embed/<投稿情報>?colorMode=system" scrolling="no" frameborder="0" loading="lazy"> </iframe>
</div>
```
`height` は対象ポストによって最適値が変わるので、手動で調整が必要です。
`src` のURLに含まれる `<投稿情報>` は `投稿を埋め込む` で表示される[[URL]]から取得します。
![[2025-12-30-20-43-46.avif|frame]]
*対象ポストの共有メニューから*
![[2025-12-30-20-44-29.avif|frame]]
*コードをコピーする*
以下がコピーされたテキストです。
```
<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:bi2l5vkitdtgw364ixidbint/app.bsky.feed.post/3ma3yi3rpv22d" data-bluesky-cid="bafyreigaetomncxhmdraxzwsea42rukg4tdwre2gs2sfbg2j6vnllre3oy" data-bluesky-embed-color-mode="system"><p lang="ja">descriptionやupdatedは結局手動トリガーになってる気がします。
updatedは『意味としての変更』を検知できれば自動化も不可能ではないですが、それが結構難しい...</p>— tadashi-aikawa (<a href="https://bsky.app/profile/did:plc:bi2l5vkitdtgw364ixidbint?ref_src=embed">@tadashi-aikawa.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:bi2l5vkitdtgw364ixidbint/post/3ma3yi3rpv22d?ref_src=embed">2025年12月16日 19:58</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
```
`data-bluesky-uri` の `at://did:plc:bi2l5vkitdtgw364ixidbint/app.bsky.feed.post/3ma3yi3rpv22d` から `did:plc:bi2l5vkitdtgw364ixidbint/app.bsky.feed.post/3ma3yi3rpv22d` をコピーし、`https://embed.bsky.app/embed/` と `?colorMode=system` の間に入れれば完成です。
https://embed.bsky.app/embed/did:plc:bi2l5vkitdtgw364ixidbint/app.bsky.feed.post/3ma3yi3rpv22d?colorMode=system
#### [[CSS]]
以下のようにします。
```css
.bluesky-embed-container {
display: flex;
justify-content: center;
}
.bluesky-embed {
width: 360px;
}
```
`360px` にしているのはPCでもスマホでも最適な `height` で表示するためです。[[Obsidian]]だと[[iframeタグ]]のコンテンツをレスポンシブにすることはできない ([[JavaScript]]が使えない) ので、このような制限を設けています。