abc2023_slide_upload.pdf

Transcript

1. Flutter で作る Nostr アプリ
2. 自己紹介 簡単に私の紹介です
3. 0th STEP 演習の準備 5:32 最新版を Push しました 手元の 0_step ブランチを更新しましょう
4. 篠原 拓真 Shino3（しのさん） - X(Twitter): SHINOHARATTT - Nostr : _@shino3.net - Bluesky : shino3.net
5. 篠原 拓真 Shino3（しのさん） - JS, TS, Vue, Nuxt, Svelte - PHP（Laravel） - Python, C#, Java, Kotlin… 言語問わず…
6. 篠原 拓真 Shino3（しのさん） - 個人でのプログラミングなど、開発 - 自動車で走ること - 焼肉、寿司、刺し身（サーモンとか）
7. 本日の内容 • Flutter とは • Nostr とは • Nostr の流れ、コミュニティでの活動など • Nostr の技術的な説明 • 今回作るもの • 演習でつくるものの仕様説明 • 演習のすすめかた • 作ってみよう！
8. Flutter とは？ アプリケーションをAndroid、iOS、WEB と 環境をまたいで使える Flutter に関して簡単にご紹介します
9. Flutter • Google が主導で開発を進めている • 言語には Dart を使用する。 • iOS, Android, Web, Windows, Mac, Linux… と マルチプラットフォームを対象とした開発言語 • 対抗馬としては React Native の存在がある • 2018 年にメジャーリリースされた、比較的新しい言語
10. Flutter の歴史 • 2015年 : 当時は Sky という名前で開発されていた • 2018年 12月 : メジャーバージョンのリリース • iOS, Android を対象としたマルチプラットフォームアプリケーション • 2021年 3月 : Flutter 2.0 のリリース • Flutter が Web 向けのビルドにも対応した • Windows、Mac、Linux アプリケーション向けのビルドが提供開始
11. Flutter の注目度（１）
12. Flutter の注目度（２）
13. Flutter の注目度（３）
14. 伸びてる！！！ 👏 👏 👏
15. Nostr とは？ 2023 年 2 月 Nostr が話題になりました 新時代の分散型 SNS について少し触れます
16. Nostr とは • Notes and Other Stuff Transmitted by Relays リレーによって通信されるノートやそれ以外のもの • NIP (Nostr Implementation Possibilities) という プロトコル仕様を管理する仕組みがある • NIP-01 という仕様で単一の JSON 構造を定義する
17. Nostr とは • Notes and Other Stuff Transmitted by Relays リレーによって通信されるノートやそれ以外のもの • NIP (Nostr Implementation Possibilities) という プロトコル仕様を管理する仕組みがある • NIP-01 という仕様で単一の JSON 構造を定義する
18. Nostr の特徴 • NIP-01 という仕様が JSON 構造を定義しています。 • クライアントはWebSocketを用いて複数のサーバー（リレー） と接続するため耐障害性が高い。 • 複数のサーバー管理者がデータを保存でき、配信できるため中央 集権にはなり得ない • アカウントは公開鍵と秘密鍵によって成り立つ 秘密鍵を用いて全てのJSONに署名をし、投稿の改ざんは不可能
19. 日本国内での Nostr • 2月 : 凍結祭りのときに Damus がリリースされる • 2月 : Nostr 勉強会（日本初）を開催（以降、定期的に開催） • 5月 : 技術書典で Nostr の本を出版した • 7月 : X(Twitter) の API リミットでユーザー数が大幅増加 • 11月: Nostrasia イベントが開催 Twitter 創設者のジャック・ドーシーが来日 • 11月: 技術書典で Nostr の本（二冊目）を出版した
20. SoftwareDesign 誌への連載
21. 勉強会開催
22. 技術書典で本を販売 • 物理本：200冊 完売 • 電子版：150冊 販売中 • 物理本：150冊 完売 • 電子版：100冊 販売中
23. Nostrasia での一幕
24. 私にとって Nostr とは 半生 です。
25. 技術的な説明 • データ保持・通信の仕組み • データ構造（単一のJSON構造とは？） • 活用例など
26. データ保持・通信の仕組み • リレーと呼ばれる複数のサーバーに接続 • REST API ではなく WebSocket を使用 • 優れた耐障害性を持つ
27. データ構造 • NIP-01 の JSON 構造に基づく { "id": "シリアライズされたイベントデータのSHA-256(32バイト)を 小文字の16進数で表記したもの", "pubkey": "公開鍵(32バイト)を小文字の16進数で表記したもの", “created_at”: “秒単位の生成時刻", "kind": "イベントの種類", "tags": [ ["e", "..."], ["...", "他の種類のタグが後に追加される可能性がある"] ], "content":"任意の文字列", "sig": "シリアライズされたイベントデータのSHA-256 （IDフィールドと同じ）に対する署名を16進数で表記したもの" }
28. データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 : みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット（チャットルームなど • Kind 42 : パブリックチャットのコメント
29. データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 : みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット（チャットルームなど） • Kind 42 : パブリックチャットのコメント
30. 今回つくるもの Nostr に接続するアプリケーションを作ります アプリケーションの設計を説明します
31. Flutter を使った Nostr アプリ • 使用言語 ：Flutter • 対象デバイス ：iOS, Android（PC, Web） • 仕様 • アカウント作成機能（Kind 0 を投稿する） • 特定チャンネル（Kind 40）に紐づく投稿でタイムラインを表示 • 特定のチャンネル宛にテキスト（Kind 42）を送信 • 作ったアカウントは、他のクライアントでも参照可能
32. 実際のデータを見てみましょう https://snowcait.github.io/nostr-playground/
33. 画面を設計します
34. 未ログイン・初期画面 • アカウント新規作成ボタン押して • 新規キーペアを発行する • kind: 0 を投げる • kind: 0 の内容はコードに記載する アカウント新規作成
35. パブリックチャットの画面 • メッセージごとに表示する • 時系列に上から下へ • 下部が最新 • 下部に投稿ボタンを表示する • 押したら投稿画面へ遷移する ✒ ユーザーID メッセージ・投稿内容 チャット ユーザーID メッセージ・投稿内容 ユーザーID メッセージ・投稿内容 ユーザーID メッセージ・投稿内容 ✒
36. 投稿画面 • 投稿ボタンは中央 • 投稿はTextareaで対応 • 高さは7行程度 • 画像添付などは今回見送る • 下部はキーボード表示のため、スペースを空 ける 投稿内容入力 新規投稿 投稿する
37. 設定画面 • 秘密鍵, 公開鍵を表示する • テキストを選択できるようにする • テキストの編集は不可能 • 秘密鍵は••••でマスクする • 目のアイコンを押したら見えるようになる • ログアウトを押したら既存のログイン情報を 破棄して、トップへ戻る あなたの公開鍵 設定 ログアウト あなたの秘密鍵
38. 0th STEP 演習の準備 皆様の手元に準備は完了していますか？ ビルドが出来ることを確認しましょう
39. 1st STEP 画面の部品を構成 設計に基づいて画面遷移を作ります 実際のコードを例に説明します
40. 1st STEP 画面の部品を構成 • 課題箇所：「// step 1」とコメントが記載されています • 画面表示に関連する class を呼び出すことで画面遷移が発生します • ヘッダーに「戻る」などのナビゲーションが自動で生成されます • Hint : Login.dart にコメントで画面遷移
41. 1st STEP 画面の部品を構成 • 「戻る」のナビゲーションが適切ではない場合 • ログイン後、ログイン画面に戻れていい？ • ログアウト後、チャット画面に戻れていい？ • ログインの履歴を破棄してログインする必要がある • Hint: login.dart の1-2 に記載
42. 2nd STEP 投稿を取得してみよう パブリックチャットのタイムラインを 取得してみましょう
43. 3rd STEP アカウントを新規作成 ボタン一発、いつでもアカウントを作れます
44. 4th STEP 自分の発言を投稿しよう 投稿は単純明快