【Nostr】Webサイトにビットコインの投げ銭ボタンを設置しよう【Zap】

2023-12-12T09:33:04Z

この記事は Nostr Advent Calendar 2023 第一会場第二会場の第二会場12日目の記事です。
11日目はpenpenpngさんの『RxJS を学ばずに使う rx-nostr』、Uchijoさんの『1週間で作るnostrクライアント with Flutter』でした。

Nostr（以下ノスター）にはZap（以下ザップ）というビットコインを使った投げ銭機能があります。ザップはノスターというSNSの中だけのものと思いがちですが、ノスターの外の普通のWebサイトでもザップすることができます。

例えば以下の私のサイトにザップボタンを設置しています。

左側のボタンです。

押すと以下のように表示され、ここからビットコインの投げ銭ができます。

設置する手順

ノスターのアカウントを持っていない場合は作ろう
ザップボタンをWebサイトに設置しよう
例：
```
<button id="nostr-zap-target" aria-label="Zap(ビットコインの投げ銭)ボタン"
        data-npub="npub1a3pvwe2p3v7mnjz6hle63r628wl9w567aw7u23fzqs062v5vqcqqu3sgh3"
        data-note-id="note1pqk7a5j2lc2rduz4k4468xgsccg5sru8uja7uvxr6eh9zwz0xtlqh5y9ly"
        data-relays="wss://nostr.mutinywallet.com,wss://relay.nostr.band,wss://relayable.org,wss://nos.lol,wss://nostr.bitcoiner.social,wss://yabu.me,wss://nostr-relay.nokotaro.com,wss://relay.nostr.wirednet.jp">
    Zap
</button>
<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.21.0"></script>
```
・data-npub= と data-note-id= は自分のものに変更してください。
npubは自分のユーザーIDです。自分のプロフィールページから見ることができる npub1~ からはじまる63文字です。
noteは投稿IDです。設定しなくても構いませんが設定した方が分かりやすくなります。（後述）
・data-relays= はザップの情報を送信するリレーです。このままでも問題ないかと思いますが変更することもできます。
・src="https://cdn.jsdelivr.net/npm/nostr-zap@0.21.0" の部分はザップボタンのバージョンが上がっていた場合、変更する必要があります。上記リンクの本家を確認してください。
ザップする側がアカウント名付きでしたい場合、PCにAlby拡張機能を入れてノスターアカウントと紐づけてからザップしよう

Albyとノスターの紐づけ方：Albyのノスター設定ガイド（英語）

これでノスター外でもザップできるようになります！

以上！

…このままだとこの記事が終わってしまうので

以下、ザップのいいところを紹介していきます

区別していない方も居ますが、ビットコインのライトニングによる送金は
・ノスターを介さない普通のライトニング送金
・ノスターを介すライトニング送金、つまりザップ
があります。

例えばこのような画像への送金は普通のライトニング送金です。

上記の画像内容は lightning:lokuyow@getalby.com となっていて、lokuyow@getalby.com は私のライトニングアドレスです。
これをライトニングウォレットで読み込むと私のライトニングアドレスへビットコイン（Sats、以下サッツ）を送金できます。

これはノスターを介さず単にライトニングアドレスへ送金しているので普通のライトニング送金となります。これでも十分メリットがあり、法定通貨での投げ銭と比較するとビットコインを使ったライトニングの投げ銭は

海外からも投げ銭を受けやすい
手数料が安い
価値が上がる可能性がある

というのが挙げられると思います。更に上記に加えてザップの利点は

誰からの投げ銭か分かる
何に対しての投げ銭か分かる
第三者もそれらの情報をみることができる

というのが挙げられます。

これらは何かしらの法定通貨建ての投げ銭サービスや暗号通貨系プラットフォームを使えば普通にできることだと思います（このSpotlightも！）。しかし特定の企業やプラットフォームに依存したサービスは終了してしまえば、そこで作ったアカウントも投げ銭の履歴もすべて消えてしまうリスクがあります。さらに特定の企業に依存したサービスは手数料が高くなりやすいです。

ノスターは基本的に特定の団体や企業、組織に依存していません。データを複数の人の複数のリレー（サーバー）に保存できます。また自分でリレーの運用やデータの保管をすることもできます。サービス終了の概念がない、もしくは可能性が限りなく低いと言えます！

ザップの利点についてそれぞれ詳しくみていきます。

誰からの投げ銭か分かる

tanakeiさんが私に39sats投げたことが分かる

投げる側がノスターアカウントを持っていれば、そのアカウントから投げたという情報を加えることができます。これは普通のライトニング送金ではできません。

誰からの投げ銭か分かるようにするためには少し面倒な点があります。
投げ銭する側がブラウザ拡張機能のAlby* に自分のノスターアカウントを設定した状態で投げ銭をしないといけません。

Albyのノスター設定ガイド（英語）

* 他のウォレットからでもできそうですが、現状alby以外の方法を私は知りません。知ってる方がいれば教えてください🙏

ノスターアカウントと紐づいていない普通のウォレットから投げた場合は匿名アカウントからのザップになります。ノスターやってない人でも安心。

何に対しての投げ銭か分かる

普通のライトニングアドレスをサイトに張り付けた場合を考えてみます。ひとつのライトニングアドレスをひとつのサイトにしか公開していない場合、そのライトニングアドレスへの投げ銭は全てそのサイトに対する投げ銭と言ってもいいでしょう。しかしライトニングアドレスを複数の場所で公開している場合、その投げ銭が何に対する投げ銭なのか分からなくなります。

ノスターのザップはひとつのライトニングアドレスであっても様々な対象に紐づけて区別できます。アカウントへのザップ、投稿へのザップ、公開チャットへのザップ、DMへのザップ、長文コンテンツへのザップなどなど。

ただしアカウントへザップを設定した場合はやはり他の投げ銭と区別することができません。そこでここでは投稿へのザップを使って何に投げ銭されたのかを判別します。

例えば ”○○へのザップ” というような投稿を先にしておき、ザップボタンからのザップ先をそのノートID（note1~）に指定します。

例えば私は上記投稿をザップ先に指定しています。この投稿のノートIDは note1pqk7a5j2lc2rduz4k4468xgsccg5sru8uja7uvxr6eh9zwz0xtlqh5y9ly となっています。

ノートIDを見る方法はクライアントによりますが、nostterなら投稿の詳細から右のボタンを押していけば見れる Event ID です。

設定例：

<button id="nostr-zap-target" aria-label="Zap(ビットコインの投げ銭)ボタン"
        data-npub="npub1a3pvwe2p3v7mnjz6hle63r628wl9w567aw7u23fzqs062v5vqcqqu3sgh3"
        data-note-id="note1pqk7a5j2lc2rduz4k4468xgsccg5sru8uja7uvxr6eh9zwz0xtlqh5y9ly"
        data-relays="wss://nostr.mutinywallet.com,wss://relay.nostr.band,wss://relayable.org,wss://nos.lol,wss://nostr.bitcoiner.social,wss://yabu.me,wss://nostr-relay.nokotaro.com,wss://relay.nostr.wirednet.jp">
    Zap
</button>
<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.21.0"></script>

これで何に対しての投げ銭か分かるようになります。