Merge pull request #20 from gpsnmeajp/feature/nip07andPWA

nostterを一部修正、NIP-07, PWAを追加

docs/.vuepress/config.ts

@@ -46,6 +46,8 @@ export default defineUserConfig({
             "/tutorial/make-your-timeline.md",
             "/tutorial/explore-client.md",
             "/tutorial/nip-05.md",
+            "/tutorial/nip-07.md",
+            "/tutorial/pwa-install.md",
           ],
         },
         {

docs/get-started/nostter.md

@@ -11,6 +11,9 @@ nostter (ノスッター) は PC/iOS/Androidで使用できる代表的な Web
 
 * <https://nostter.app/>
 
+nostterはPWAですので、PC・スマホアプリのようにインストールして使用することもできます。
+インストールの手順は [PWAをインストールしよう](../tutorial/pwa-install.md) を参照してください。
+
 ## タイムラインを覗いてみる  {#view-timeline}
 
 nostterでは、アカウントを作る前に、どのような投稿が行われているのか覗くことができます。
@@ -125,41 +128,6 @@ PCやタブレットでは、左の「プロフィール」ボタン、スマー
 - 認証マークが欲しい → [認証マーク？をつけてみよう](/tutorial/nip-05.md)
 - パソコンでも見たい、他のクライアントも試したい → [お気に入りのクライアントを探そう](/tutorial/explore-client.md)
 
-## リレーを設定する {#set-relays}
-
-Nostr は分散型 SNS です。接続先のサーバー (**リレー** と言います) を自分で選ぶことができます。
-リレーは最初からいくつか設定されていますが、適切に設定をリレー設定を変更すると、特定の話題のユーザを見つけやすくなったり、自分をフォローしてもらいやすくなったりします。
-
-リレーに関してもう少し詳しく知りたい方は [リレーって何？](/guide/relay.md) を読んでみると良いでしょう。
-
-PCやタブレットでは、左の「プロフィール」ボタン、スマートフォンでは右下のボタンから人型のアイコンをタップして自分のプロフィール画面を開きます。
-
-![プロフィールボタン](./images/nostter/11-profile-button.webp)
-
-その中から「リレー」をタップします。
-
-![リレーボタン](./images/nostter/15-relay-button.webp)
-
-リレーの設定画面にやってきました。
-
-nostterは日本産なため、すでに日本の主要なリレーは登録されている状態になっています。
-
-![リレー一覧](./images/nostter/16-relay-list.webp)
-
-追加する場合は、「Edit」をタップ後、以下のように赤枠で囲んだ入力欄に入力して「Add」をタップしてください。
-
-![リレー入力欄](./images/nostter/17-relay-input.webp)
-
-設定が完了したら、「Save」をタップして保存し、左上の「ホーム」で元の画面に戻ります。
-
-![リレー保存ボタン](./images/nostter/18-relay-save-button.webp)
-
-::: tip Hint
-Read: チェックを外すと読み込みの対象から外すことができます。(Spamが多いリレーなど)
-Write: チェックを外すと書き込みの対象から外すことができます。(書き込み有料リレーなど)
-:::
-
-
 ## おまけ 1 秘密鍵を安全に保管する {#secure-storage-for-nsec}
 
 ここでは、 iOS の機能を使った秘密鍵の保管方法を 2 つ紹介します。
@@ -194,3 +162,41 @@ iOS に最初からインストールされている「メモ」アプリを利
 
 使いたい機能がなかったり合わないと感じる場合には、他のクライアントも試してみるとよいでしょう。
 [お気に入りのクライアントを探そう](/tutorial/explore-client.md) のページが参考になるかもしれません。
+
+## おまけ 3: リレーを設定する {#set-relays}
+
+Nostr は分散型 SNS です。接続先のサーバー (**リレー** と言います) を自分で選ぶことができます。  
+nostterでは、日本語コミュニティと交流するためのリレーは予めセットされています。そのためこの章の設定をする必要はありません。  
+
+ですが一方で、今後新しいリレーが登場したり、話題別のリレーが登場するかもしれません。  
+その際には、リレー設定を変更すると、特定の話題のユーザを見つけやすくなったり、自分をフォローしてもらいやすくなったりします。
+
+リレーに関してもう少し詳しく知りたい方は [リレーって何？](/guide/relay.md) を読んでみると良いでしょう。
+
+PCやタブレットでは、左の「プロフィール」ボタン、スマートフォンでは右下のボタンから人型のアイコンをタップして自分のプロフィール画面を開きます。
+
+![プロフィールボタン](./images/nostter/11-profile-button.webp)
+
+その中から「リレー」をタップします。
+
+![リレーボタン](./images/nostter/15-relay-button.webp)
+
+リレーの設定画面にやってきました。
+
+nostterは日本産なため、すでに日本の主要なリレーは登録されている状態になっています。
+
+![リレー一覧](./images/nostter/16-relay-list.webp)
+
+追加する場合は、「Edit」をタップ後、以下のように赤枠で囲んだ入力欄に入力して「Add」をタップしてください。
+
+![リレー入力欄](./images/nostter/17-relay-input.webp)
+
+設定が完了したら、「Save」をタップして保存し、左上の「ホーム」で元の画面に戻ります。
+
+![リレー保存ボタン](./images/nostter/18-relay-save-button.webp)
+
+::: tip Hint
+Read: チェックを外すと読み込みの対象から外すことができます。(Spamが多いリレーなど)
+Write: チェックを外すと書き込みの対象から外すことができます。(書き込み有料リレーなど)
+:::
+

docs/tutorial/explore-client.md

@@ -34,19 +34,23 @@ Nostr が元々備えている SNS 的な機能というものは、実は **何
 
 あなたが Web クライアント (ブラウザで動作するクライアント) を使おうとしている場合にはより安全なログイン方法があります。それが次で説明する「NIP-07 認証でログイン」です。(スマートフォンアプリを使おうとしている場合には、残念ながら秘密鍵でログインするしかありません。信頼できるクライアントだけ使うようにしましょう。)
 
-### NIP-07 認証でログイン{#nip-07-login}
+### 拡張機能でログイン{#nip-07-login}
 
-クライアントに秘密鍵を教える代わりに、NIP-07 対応のブラウザ拡張機能をインストールしそれに秘密鍵を教えることで間接的にログインする方法です。この方法でログインした場合も、秘密鍵で直接ログインした場合と同様に、クライアントが提供するすべての機能にアクセスすることができます。
+クライアントに秘密鍵を教える代わりに、ブラウザ拡張機能(NIP-07)をインストールしそれに秘密鍵を教えることで間接的にログインする方法です。この方法でログインした場合も、秘密鍵で直接ログインした場合と同様に、クライアントが提供するすべての機能にアクセスすることができます。
 
-ソースコードが公開されていて **信頼できる** (重要) NIP-07 対応のブラウザ拡張機能を選ぶことで、秘密鍵漏洩のリスクを大きく下げることができます。
+ソースコードが公開されていて **信頼できる** (重要) ブラウザ拡張機能を選ぶことで、秘密鍵漏洩のリスクを大きく下げることができます。
 
 - [nos2x](https://chrome.google.com/webstore/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp)
+- [nos2x-fox](https://addons.mozilla.org/ja/firefox/addon/nos2x-fox/)
 - [Alby](https://getalby.com/)
+- [nostore](https://apps.apple.com/jp/app/nostore/id1666553677)
 
 ……などがよく知られ、広く使われている拡張機能です。
 
 [Scrapbox](https://scrapbox.io/nostr/NIP-07) により詳しいリストがあります。
 
+[詳しい導入手順については、こちらをご参照ください。](nip-07.md)
+
 ## おまけ: hex って何？
 
 クライアントがログイン時に `npub` や `nsec` ではなく `hex` 形式の鍵を要求してくることがあります。これは `npub` や `nsec` をより機械にとって読み取りやすい形に直したものです。[無限ツールズ](https://mugen-tools.com/tools/nostrkey.php)などで相互に変換できます。

docs/tutorial/nip-07.md

@@ -0,0 +1,203 @@
+# ログイン拡張機能 (NIP-07)を使ってみよう
+
+Nostrクライアントアプリを探していると、「拡張機能でログイン」や「Login with Extension」という表記やボタンを見かけることがあると思います。
+
+これは、アプリに直接秘密鍵を入れる代わりに、秘密鍵の保存と取り扱いをブラウザ拡張機能(NIP-07)に集約することで、多種多様なクライアントアプリを安全に使えるようにする仕組みです。
+
+アプリによっては、この拡張機能がないとそもそも利用できないこともあります。
+
+よく知られている拡張機能には以下があります。
+
+- [nos2x](https://chrome.google.com/webstore/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp)
+- [nos2x-fox](https://addons.mozilla.org/ja/firefox/addon/nos2x-fox/)
+- [Alby](https://getalby.com/)
+- [nostore](https://apps.apple.com/jp/app/nostore/id1666553677)
+
+ここでは nos2x と Nostore の導入手順と使用方法についてステップバイステップで説明していきます。
+
++ Nostore  は iOS Safari 向けの拡張機能です。
++ nos2x (Firefox の場合は nos2x-fox) は PC 版 Microsoft Edge/Chrome/Firefox および Android 版 Firefox/Kiwi Browser 向けの拡張機能です。
+
+## nos2x/nos2x-fox (PC/Android)
+
+### 導入手順
+
++ Edge/Chrome/Kiwi Browserの場合: [nos2x](https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp)
++ Firefoxの場合: [nos2x-fox](https://addons.mozilla.org/ja/firefox/addon/nos2x-fox/)
+
+を開き、「インストール」ボタンをクリックします。  
+以降の手順は、Microsoft Edgeを使用した場合を例示します。
+
+![ストア画面](./images/nip-07/nos2x/01-store.webp)
+
+これが出た場合は「許可」をクリックします。
+
+![インストールダイアログ1](./images/nip-07/nos2x/02-install-dialog-1.webp)
+
+「拡張機能の追加」をクリックします。
+
+![インストールダイアログ2](./images/nip-07/nos2x/03-install-dialog-2.webp)
+
+![インストール完了ダイアログ](./images/nip-07/nos2x/04-installed-dialog.webp)
+
+正常にインストールされたら、拡張機能ボタン(パズルのピースのマーク)をクリックします。
+nos2xの横の「・・・」をクリックし、「拡張機能のオプション」
+
+![メニュー](./images/nip-07/nos2x/05-option-menu.webp)
+
+**すでに秘密鍵を持っている人は、「private key:」の欄に入力してください。**  
+もし今から新しいアカウントが欲しい場合は、「generate」ボタンをクリックします。
+
+![設定画面](./images/nip-07/nos2x/06-settings.webp)
+
+秘密鍵を入力、または新規作成したあと、「Save」ボタンがクリックできるようになります。  
+必ずクリックしてください。
+
+![設定保存ボタン](./images/nip-07/nos2x/07-settings-save-button.webp)
+
+これで登録作業は完了です。
+
+### 使い方
+
+#### ログイン時
+
+例えば[Rabbit](https://syusui-s.github.io/rabbit/)を開くとこのような表示が出ます。
+
+![公開鍵読み出しダイアログ](./images/nip-07/nos2x/08-rabbit-dialog-read.webp)
+
+「ログインのためにアプリケーションに公開鍵を渡してもよいか？」という通知で、
+
++ authorize forever (常に許可)
++ authorize just this (今回だけ許可)
++ reject forever (常に拒否)
++ reject (今回だけ拒否)
+
+から選択します。
+
+基本的に「authorize forever」(常に許可)で大丈夫です。
+
+#### 投稿時
+
+何かを投稿したりリアクションしようとしたときにも、以下のような表示が出ます。
+
+![署名ダイアログ](./images/nip-07/nos2x/09-rabbit-dialog-sign.webp)
+
+こちらは「あなたのアカウントで投稿(署名)してよいか？」という通知なので、
+
++ authorize forever (常に許可)
++ authorize kind 1 forever (短文投稿(kind 1)のみ常に許可)
++ authorize just this (今回だけ許可)
++ reject kind 1 forever (短文投稿(kind 1)のみ常に許可)
++ reject (今回だけ拒否)
+
+から選択します。
+
+基本的に「authorize forever」(常に許可)または、「authorize just this」(今回だけ許可)を選択します。
+
+使い方は以上です。
+
+## Nostore (iOS)
+
+### 導入手順
+
+[ここのアプリストアリンク](https://apps.apple.com/jp/app/nostore/id1666553677)または、App Storeを開いて「Nostore」で検索してください。
+
+![ストア画面](./images/nip-07/nostore/01-store.webp)
+
+インストールが終わったら、「設定」アプリを開きます。
+
+![設定アイコン](./images/nip-07/nostore/02-settings-button.webp)
+
+設定アプリ内の「Safari」をタップします。
+
+![設定画面](./images/nip-07/nostore/03-settings-list-of-safari.webp)
+
+「機能拡張」をタップします。
+
+![Safari設定画面](./images/nip-07/nostore/04-safari-settings.webp)
+
+「Nostore」をタップします。
+
+![拡張機能の有効化画面](./images/nip-07/nostore/05-safari-extension-settings.webp)
+
+「機能拡張を許可」をタップします。
+
+![拡張機能の有効化画面(無効)](./images/nip-07/nostore/06-safari-extension-disable.webp)
+
+これで有効化されました。
+
+![拡張機能の有効化画面(有効)](./images/nip-07/nostore/07-safari-extension-enable.webp)
+
+秘密鍵の設定は、利用時に行います。
+
+### 使い方
+
+#### ログイン時
+
+例えば[Rabbit](https://syusui-s.github.io/rabbit/)を開くとこのような表示が出ます。
+ブラウザのコンテキストメニュー「ぁあ」をタップします。
+
+![Safari(Rabbit)の画面](./images/nip-07/nostore/08-rabbit.webp)
+
+「Nostore」をタップします。
+
+![ブラウザのコンテキストメニュー](./images/nip-07/nostore/09-rabbit-enable.webp)
+
+確認メッセージが出ますので、好きな方を選択します。
+おすすめは、「常に許可...」です。
+
+![iOS拡張機能の確認1](./images/nip-07/nostore/10-enable-dialog-1.webp)
+
+「常に許可...」を選択した場合、さらに確認メッセージが出ますので、好きな方を選択します。  
+おすすめは、「このWebサイトで常に許可」です。
+
+![iOS拡張機能の確認2](./images/nip-07/nostore/10-enable-dialog-2.webp)
+
+ここまでの操作は、(選択肢によりますが)nostrを使いたいサイト1つごとに設定が必要です。
+
+**初回利用時は、続いてアカウント(秘密鍵)の設定に入ります。**
+
+Nostoreの設定画面が出るので「Settings」をタップします。
+
+![Nostore設定画面](./images/nip-07/nostore/11-nostore-settings-1.webp)
+
+新しいタブが開き、詳細設定画面になります。
+
+**すでに秘密鍵を持っている人は、「Private Key:」の欄を消して自分の鍵を入力してください。**  
+もし今から新しいアカウントが欲しい場合は、何もせずそのままタブを閉じます。
+
+![Nostore詳細設定画面](./images/nip-07/nostore/12-nostore-details.webp)
+
+秘密鍵を入力したあとは、「Save」ボタンがクリックできるようになります。  
+必ずタップしてください。
+
+**ここまでで初回設定は完了です**
+
+タブを閉じるか戻ってください。
+
+![Safariタブ](./images/nip-07/nostore/13-safari-tab.webp)
+
+Webサイトの画面に戻ると
+
+![Nostore公開鍵読み込みダイアログ](./images/nip-07/nostore/14-nostore-dialog-read.webp)
+
+このような画面が出ます。(出ない場合は、サイトを開き直してください)。
+
+「ログインのためにアプリケーションに公開鍵を渡してもよいか？」という通知で、
+基本的に「Remember selection」(この選択を毎回使用する)をタップしてチェックを付けてから、「Allow」(許可)を選択します。
+
+(チェックを付けない場合、何度も何度も出ることがあります。)
+
+もしこのような画面になった場合は、「NIP-07 拡張機能でログイン」を再度タップしてから、許可を再度行います。
+
+![Rabbit NIP-07画面](./images/nip-07/nostore/15-rabbit-nip-07.webp)
+
+#### 投稿時
+何かを投稿したりリアクションしようとしたときにも、以下のような表示が出ます。
+
+![Nostore署名ダイアログ](./images/nip-07/nostore/16-nostore-dialog-sign.webp)
+
+基本的に「Remember selection」(この選択を毎回使用する)をタップしてチェックを付けてから、「Allow」(許可)を選択します。
+
+使い方は以上です。
+