abc2023_slide_upload.pdf

Slide 1

Slide 1 text

Flutter で作る Nostr アプリ

Slide 2

Slide 2 text

自己紹介簡単に私の紹介です

Slide 3

Slide 3 text

0th STEP 演習の準備 5:32 最新版を Push しました手元の 0_step ブランチを更新しましょう

Slide 4

Slide 4 text

篠原拓真 Shino3（しのさん） - X(Twitter): SHINOHARATTT - Nostr : [email protected] - Bluesky : shino3.net

Slide 5

Slide 5 text

篠原拓真 Shino3（しのさん） - JS, TS, Vue, Nuxt, Svelte - PHP（Laravel） - Python, C#, Java, Kotlin… 言語問わず…

Slide 6

Slide 6 text

篠原拓真 Shino3（しのさん） - 個人でのプログラミングなど、開発 - 自動車で走ること - 焼肉、寿司、刺し身（サーモンとか）

Slide 7

Slide 7 text

本日の内容 • Flutter とは • Nostr とは • Nostr の流れ、コミュニティでの活動など • Nostr の技術的な説明 • 今回作るもの • 演習でつくるものの仕様説明 • 演習のすすめかた • 作ってみよう！

Slide 8

Slide 8 text

Flutter とは？アプリケーションをAndroid、iOS、WEB と環境をまたいで使える Flutter に関して簡単にご紹介します

Slide 9

Slide 9 text

Flutter • Google が主導で開発を進めている • 言語には Dart を使用する。 • iOS, Android, Web, Windows, Mac, Linux… とマルチプラットフォームを対象とした開発言語 • 対抗馬としては React Native の存在がある • 2018 年にメジャーリリースされた、比較的新しい言語

Slide 10

Slide 10 text

Flutter の歴史 • 2015年 : 当時は Sky という名前で開発されていた • 2018年 12月 : メジャーバージョンのリリース • iOS, Android を対象としたマルチプラットフォームアプリケーション • 2021年 3月 : Flutter 2.0 のリリース • Flutter が Web 向けのビルドにも対応した • Windows、Mac、Linux アプリケーション向けのビルドが提供開始

Slide 11

Slide 11 text

Flutter の注目度（１）

Slide 12

Slide 12 text

Flutter の注目度（２）

Slide 13

Slide 13 text

Flutter の注目度（３）

Slide 14

Slide 14 text

伸びてる！！！ 👏 👏 👏

Slide 15

Slide 15 text

Nostr とは？ 2023 年 2 月 Nostr が話題になりました新時代の分散型 SNS について少し触れます

Slide 16

Slide 16 text

Nostr とは • Notes and Other Stuff Transmitted by Relays リレーによって通信されるノートやそれ以外のもの • NIP (Nostr Implementation Possibilities) というプロトコル仕様を管理する仕組みがある • NIP-01 という仕様で単一の JSON 構造を定義する

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Nostr の特徴 • NIP-01 という仕様が JSON 構造を定義しています。 • クライアントはWebSocketを用いて複数のサーバー（リレー）と接続するため耐障害性が高い。 • 複数のサーバー管理者がデータを保存でき、配信できるため中央集権にはなり得ない • アカウントは公開鍵と秘密鍵によって成り立つ秘密鍵を用いて全てのJSONに署名をし、投稿の改ざんは不可能

Slide 19

Slide 19 text

日本国内での Nostr • 2月 : 凍結祭りのときに Damus がリリースされる • 2月 : Nostr 勉強会（日本初）を開催（以降、定期的に開催） • 5月 : 技術書典で Nostr の本を出版した • 7月 : X(Twitter) の API リミットでユーザー数が大幅増加 • 11月: Nostrasia イベントが開催 Twitter 創設者のジャック・ドーシーが来日 • 11月: 技術書典で Nostr の本（二冊目）を出版した

Slide 20

Slide 20 text

SoftwareDesign 誌への連載

Slide 21

Slide 21 text

勉強会開催

Slide 22

Slide 22 text

技術書典で本を販売 • 物理本：200冊完売 • 電子版：150冊販売中 • 物理本：150冊完売 • 電子版：100冊販売中

Slide 23

Slide 23 text

Nostrasia での一幕

Slide 24

Slide 24 text

私にとって Nostr とは半生です。

Slide 25

Slide 25 text

技術的な説明 • データ保持・通信の仕組み • データ構造（単一のJSON構造とは？） • 活用例など

Slide 26

Slide 26 text

データ保持・通信の仕組み • リレーと呼ばれる複数のサーバーに接続 • REST API ではなく WebSocket を使用 • 優れた耐障害性を持つ

Slide 27

Slide 27 text

データ構造 • NIP-01 の JSON 構造に基づく { "id": "シリアライズされたイベントデータのSHA-256(32バイト)を小文字の16進数で表記したもの", "pubkey": "公開鍵(32バイト)を小文字の16進数で表記したもの", “created_at”: “秒単位の生成時刻", "kind": "イベントの種類", "tags": [ ["e", "..."], ["...", "他の種類のタグが後に追加される可能性がある"] ], "content":"任意の文字列", "sig": "シリアライズされたイベントデータのSHA-256 （IDフィールドと同じ）に対する署名を16進数で表記したもの" }

Slide 28

Slide 28 text

データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 : みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット（チャットルームなど • Kind 42 : パブリックチャットのコメント

Slide 29

Slide 29 text

データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 : みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット（チャットルームなど） • Kind 42 : パブリックチャットのコメント

Slide 30

Slide 30 text

今回つくるもの Nostr に接続するアプリケーションを作りますアプリケーションの設計を説明します

Slide 31

Slide 31 text

Flutter を使った Nostr アプリ • 使用言語：Flutter • 対象デバイス：iOS, Android（PC, Web） • 仕様 • アカウント作成機能（Kind 0 を投稿する） • 特定チャンネル（Kind 40）に紐づく投稿でタイムラインを表示 • 特定のチャンネル宛にテキスト（Kind 42）を送信 • 作ったアカウントは、他のクライアントでも参照可能

Slide 32

Slide 32 text

実際のデータを見てみましょう https://snowcait.github.io/nostr-playground/

Slide 33

Slide 33 text

画面を設計します

Slide 34

Slide 34 text

未ログイン・初期画面 • アカウント新規作成ボタン押して • 新規キーペアを発行する • kind: 0 を投げる • kind: 0 の内容はコードに記載するアカウント新規作成

Slide 35

Slide 35 text

パブリックチャットの画面 • メッセージごとに表示する • 時系列に上から下へ • 下部が最新 • 下部に投稿ボタンを表示する • 押したら投稿画面へ遷移する ✒ ユーザーID メッセージ・投稿内容チャットユーザーID メッセージ・投稿内容ユーザーID メッセージ・投稿内容ユーザーID メッセージ・投稿内容 ✒

Slide 36

Slide 36 text

投稿画面 • 投稿ボタンは中央 • 投稿はTextareaで対応 • 高さは7行程度 • 画像添付などは今回見送る • 下部はキーボード表示のため、スペースを空ける投稿内容入力新規投稿投稿する

Slide 37

Slide 37 text

設定画面 • 秘密鍵, 公開鍵を表示する • テキストを選択できるようにする • テキストの編集は不可能 • 秘密鍵は●●●●でマスクする • 目のアイコンを押したら見えるようになる • ログアウトを押したら既存のログイン情報を破棄して、トップへ戻るあなたの公開鍵設定ログアウトあなたの秘密鍵

Slide 38

Slide 38 text

0th STEP 演習の準備皆様の手元に準備は完了していますか？ビルドが出来ることを確認しましょう

Slide 39

Slide 39 text

1st STEP 画面の部品を構成設計に基づいて画面遷移を作ります実際のコードを例に説明します

Slide 40

Slide 40 text

1st STEP 画面の部品を構成 • 課題箇所：「// step 1」とコメントが記載されています • 画面表示に関連する class を呼び出すことで画面遷移が発生します • ヘッダーに「戻る」などのナビゲーションが自動で生成されます • Hint : Login.dart にコメントで画面遷移

Slide 41

Slide 41 text

1st STEP 画面の部品を構成 • 「戻る」のナビゲーションが適切ではない場合 • ログイン後、ログイン画面に戻れていい？ • ログアウト後、チャット画面に戻れていい？ • ログインの履歴を破棄してログインする必要がある • Hint: login.dart の1-2 に記載

Slide 42

Slide 42 text

2nd STEP 投稿を取得してみようパブリックチャットのタイムラインを取得してみましょう

Slide 43

Slide 43 text

3rd STEP アカウントを新規作成ボタン一発、いつでもアカウントを作れます

Slide 44

Slide 44 text

4th STEP 自分の発言を投稿しよう投稿は単純明快