🫴

Nostr投稿をWebサイトに簡単埋め込み！Web Componentsライブラリを作った

に公開
Web Components
SNS
nostr
tech

概要

WebサイトにNostrの投稿やプロフィールを簡単に埋め込めるWeb Componentsライブラリ「nostr-web-components」を作りました。

HTMLに1行タグを書くだけで、Twitterのツイート埋め込みのような感覚でNostrコンテンツを表示できます。

実際の表示例

こんな感じでサイトにNostrの投稿やプロフィールを埋め込むことができます。

使用例1

https://tsukemonogit.github.io/nostr-monoGazo-bot/

monogazo

使用例2

https://tsukemonogit.github.io/

投稿の埋め込み、プロフィール表示、投稿一覧など、1行のHTMLタグを書くだけでリアルタイムでNostrから情報を取得して表示されます。

作った理由

  • ブログやサイトにNostrの投稿を引用したい
  • フレームワークに依存しないコンポーネントが欲しかった
  • CDNで手軽に使えるようにしたかった

使い方

1. CDNから読み込み

<script src="https://cdn.jsdelivr.net/npm/@konemono/nostr-web-components@latest/dist/nostr-web-components.iife.js"></script>

2. HTMLタグで投稿を埋め込み

<!-- 投稿の埋め込み -->
<nostr-note id="nevent1qvzqqqqq9gpzq2aj4wlutzft00dg77x4x6pdjy7vnfzxk30pry5lpy6a3l0uks9aqyxhwumn8ghj77tpvf6jumt9qys8wumn8ghj7un9d3shjtt2wqhxummnw3ezuamfwfjkgmn9wshx5uqpr4mhxue69uhhyetvv9ujumn0wd68ytnhd9ex2erwv46zu6nsqyxhwumn8ghj7mn0wvhxcmmvqyghwumn8ghj7mnxwfjkccte9eshquqqyqv8dx4g48jf0gwdyldmsde4z0wpqj65wkpzq3a0d7zjqeacc43huavy3te"></nostr-note>

<!-- プロフィールの埋め込み -->
<nostr-profile user="npub1fuffhzfv7xdrm5htde4mp9e5n6ywn763cq6mzxtetyqvsg66kkasp9zzyz"></nostr-profile>

たったこれだけで、リアルタイムでNostrから投稿を取得して表示されます。

主要機能

nostr-note（投稿表示）

<!-- カード表示 -->
<nostr-note id="nevent1..." display="card"></nostr-note>

<!-- コンパクト表示 -->
<nostr-note id="nevent1..." display="compact"></nostr-note>

<!-- ダークテーマ -->
<nostr-note id="nevent1..." theme="dark"></nostr-note>

<!-- リンク無効化 -->
<nostr-note id="nevent1..." noLink="true"></nostr-note>

<!-- 高さ指定 -->
<nostr-note id="nevent1..." height="200px"></nostr-note>

nostr-profile（プロフィール表示）

<!-- npubでの指定 -->
<nostr-profile user="npub1..."></nostr-profile>

<!-- NIP-05での指定 -->
<nostr-profile user="mono@tsukemonogit.github.io"></nostr-profile>

<!-- 表示形式の選択 -->
<nostr-profile user="npub1..." display="card"></nostr-profile>
<nostr-profile user="npub1..." display="compact"></nostr-profile>
<nostr-profile user="npub1..." display="name"></nostr-profile>

nostr-list（投稿一覧）

Nostrのフィルター機能を使って、条件に合う投稿を一覧表示できます。

<!-- 特定ユーザーの投稿 -->
<nostr-list
  filters='[{"kinds":[1],"authors":["84b0c46ab699ac35eb2ca286470b85e081db2087cdef63932236c397417782f5"],"limit":10}]'
  limit="10">
</nostr-list>

<!-- ハッシュタグ検索 -->
<nostr-list
  filters='[{"kinds":[1],"#t":["nostr"],"limit":8}]'
  limit="8">
</nostr-list>

nostr-stream（リアルタイムストリーミング）

Nostrイベントのリアルタイムストリーミング表示用のコンポーネントです。1ページに1つのみ利用可能です。

<!-- リアルタイムストリーミング表示 -->
<nostr-stream
  filters='[{"kinds":[1],"#t":["nostr"],"limit":10}]'>
</nostr-stream>

<!-- 特定ユーザーのストリーミング -->
<nostr-stream
  filters='[{"kinds":[1],"authors":["84b0c46ab699ac35eb2ca286470b85e081db2087cdef63932236c397417782f5"],"limit":20}]'>
</nostr-stream>

技術的な特徴

Web Components採用

  • React、Vue、Angular などのフレームワークを選ばない
  • 既存のHTML/CSS/JSプロジェクトにそのまま組み込める
  • Shadow DOMによるスタイルの分離

リアルタイム通信

  • WebSocketでNostrリレーに接続
  • 投稿の更新を自動で反映
  • 複数のリレーに同時接続してデータ取得

カスタマイズ性

<!-- カスタムリンク先 -->
<nostr-note id="nevent1..." href="https://lumilumi.app/{id}" target="_blank"></nostr-note>

<!-- 独自のリレー設定 -->
<nostr-container relays='["wss://nos.lol","wss://yabu.me","wss://relay.nostr.band"]'>
  <nostr-note id="nevent1..."></nostr-note>
  <nostr-profile user="npub1..."></nostr-profile>
  <nostr-stream filters='[{"kinds":[1],"limit":10}]'></nostr-stream>
</nostr-container>

使用例

ブログ記事での引用

<p>先日のNostrでの投稿が話題になりました。</p>
<nostr-note id="nevent1..." display="card"></nostr-note>
<p>このように簡単に投稿を埋め込めます。</p>

プロフィールページ

<h2>Nostrでの活動</h2>
<nostr-profile user="npub1..." display="card"></nostr-profile>

<h3>最新の投稿</h3>
<nostr-list
  filters='[{"kinds":[1],"authors":["..."],"limit":5}]'
  limit="5">
</nostr-list>

リアルタイムフィード

<h2>Nostrリアルタイムフィード</h2>
<nostr-stream
  filters='[{"kinds":[1],"#t":["bitcoin","nostr"],"limit":15}]'>
</nostr-stream>

実装の工夫点

パフォーマンス最適化

  • 同一投稿の重複取得を避ける
  • 不要なリレー接続を最小限に抑制
  • レンダリングの最適化

エラーハンドリング

  • リレー接続エラーの適切な処理
  • 投稿が見つからない場合の表示
  • ネットワークエラー時の再試行

今後の予定

  • より多くの表示オプション（現在対応kinds:[0,1,6,7]）
  • パフォーマンスの更なる向上
  • コンテントわーにんぐへの対応（nsfw）(2025/07/25 Done)

リンク

インストール

CDN (推奨)

<script src="https://cdn.jsdelivr.net/npm/@konemono/nostr-web-components@latest/dist/nostr-web-components.iife.js"></script>

npm

npm install @konemono/nostr-web-components

注意: 現在、npm版は設定が複雑になる可能性があります。CDNからの読み込みが最も簡単で確実です。

最後に

NostrをWebに簡単に統合できるツールを目指して開発しました。

GitHubでのIssueやPull Request、フィードバックをお待ちしています。

Discussion