Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
abc2023_slide_upload.pdf
Search
Takuma Shinohara
November 23, 2023
Technology
0
360
abc2023_slide_upload.pdf
Takuma Shinohara
November 23, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
BlueskyMeetup in Fukuoka アイデアソン
shinoharata
1
80
BlueskyMeetup in Fukuoka アイデアソン結果発表
shinoharata
1
66
いまのBlueskyってどうなの
shinoharata
0
120
四谷ラボとは ※2025/05/31
shinoharata
0
100
What's is Bluesky
shinoharata
0
1.4k
dissolute fat
shinoharata
0
210
20240520_toranoana_lab.pdf
shinoharata
0
210
民主的なSNSは日本を救う
shinoharata
0
360
Nostr x Gorilla Vim Collaboration
shinoharata
0
440
Other Decks in Technology
See All in Technology
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
S3アクセス制御の設計ポイント
tommy0124
3
210
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Done Done
chrislema
185
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fireside Chat
paigeccino
39
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
180
9.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Transcript
Flutter で作る Nostr アプリ
自己紹介 簡単に私の紹介です
0th STEP 演習の準備 5:32 最新版を Push しました 手元の 0_step ブランチを更新しましょう
篠原 拓真 Shino3(しのさん) - X(Twitter): SHINOHARATTT - Nostr :
[email protected]
- Bluesky : shino3.net
篠原 拓真 Shino3(しのさん) - JS, TS, Vue, Nuxt, Svelte -
PHP(Laravel) - Python, C#, Java, Kotlin… 言語問わず…
篠原 拓真 Shino3(しのさん) - 個人でのプログラミングなど、開発 - 自動車で走ること - 焼肉、寿司、刺し身(サーモンとか)
本日の内容 • Flutter とは • Nostr とは • Nostr の流れ、コミュニティでの活動など
• Nostr の技術的な説明 • 今回作るもの • 演習でつくるものの仕様説明 • 演習のすすめかた • 作ってみよう!
Flutter とは? アプリケーションをAndroid、iOS、WEB と 環境をまたいで使える Flutter に関して簡単にご紹介します
Flutter • Google が主導で開発を進めている • 言語には Dart を使用する。 • iOS,
Android, Web, Windows, Mac, Linux… と マルチプラットフォームを対象とした開発言語 • 対抗馬としては React Native の存在がある • 2018 年にメジャーリリースされた、比較的新しい言語
Flutter の歴史 • 2015年 : 当時は Sky という名前で開発されていた • 2018年
12月 : メジャーバージョンのリリース • iOS, Android を対象としたマルチプラットフォームアプリケーション • 2021年 3月 : Flutter 2.0 のリリース • Flutter が Web 向けのビルドにも対応した • Windows、Mac、Linux アプリケーション向けのビルドが提供開始
Flutter の注目度(1)
Flutter の注目度(2)
Flutter の注目度(3)
伸びてる!!! 👏 👏 👏
Nostr とは? 2023 年 2 月 Nostr が話題になりました 新時代の分散型 SNS
について少し触れます
Nostr とは • Notes and Other Stuff Transmitted by Relays
リレーによって通信されるノートやそれ以外のもの • NIP (Nostr Implementation Possibilities) という プロトコル仕様を管理する仕組みがある • NIP-01 という仕様で単一の JSON 構造を定義する
Nostr とは • Notes and Other Stuff Transmitted by Relays
リレーによって通信されるノートやそれ以外のもの • NIP (Nostr Implementation Possibilities) という プロトコル仕様を管理する仕組みがある • NIP-01 という仕様で単一の JSON 構造を定義する
Nostr の特徴 • NIP-01 という仕様が JSON 構造を定義しています。 • クライアントはWebSocketを用いて複数のサーバー(リレー) と接続するため耐障害性が高い。
• 複数のサーバー管理者がデータを保存でき、配信できるため中央 集権にはなり得ない • アカウントは公開鍵と秘密鍵によって成り立つ 秘密鍵を用いて全てのJSONに署名をし、投稿の改ざんは不可能
日本国内での Nostr • 2月 : 凍結祭りのときに Damus がリリースされる • 2月
: Nostr 勉強会(日本初)を開催(以降、定期的に開催) • 5月 : 技術書典で Nostr の本を出版した • 7月 : X(Twitter) の API リミットでユーザー数が大幅増加 • 11月: Nostrasia イベントが開催 Twitter 創設者のジャック・ドーシーが来日 • 11月: 技術書典で Nostr の本(二冊目)を出版した
SoftwareDesign 誌への連載
勉強会開催
技術書典で本を販売 • 物理本:200冊 完売 • 電子版:150冊 販売中 • 物理本:150冊 完売
• 電子版:100冊 販売中
Nostrasia での一幕
私にとって Nostr とは 半生 です。
技術的な説明 • データ保持・通信の仕組み • データ構造(単一のJSON構造とは?) • 活用例など
データ保持・通信の仕組み • リレーと呼ばれる複数のサーバーに接続 • REST API ではなく WebSocket を使用 •
優れた耐障害性を持つ
データ構造 • NIP-01 の JSON 構造に基づく { "id": "シリアライズされたイベントデータのSHA-256(32バイト)を 小文字の16進数で表記したもの",
"pubkey": "公開鍵(32バイト)を小文字の16進数で表記したもの", “created_at”: “秒単位の生成時刻", "kind": "イベントの種類", "tags": [ ["e", "..."], ["...", "他の種類のタグが後に追加される可能性がある"] ], "content":"任意の文字列", "sig": "シリアライズされたイベントデータのSHA-256 (IDフィールドと同じ)に対する署名を16進数で表記したもの" }
データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 :
みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット(チャットルームなど • Kind 42 : パブリックチャットのコメント
データ種別の定義 • Kind 0 : ユーザーのプロフィールなど • Kind 1 :
みんなの投稿 • Kind 6 : リポスト • Kind 7 : いいねなどのリアクション • Kind 40 : パブリックチャット(チャットルームなど) • Kind 42 : パブリックチャットのコメント
今回つくるもの Nostr に接続するアプリケーションを作ります アプリケーションの設計を説明します
Flutter を使った Nostr アプリ • 使用言語 :Flutter • 対象デバイス :iOS,
Android(PC, Web) • 仕様 • アカウント作成機能(Kind 0 を投稿する) • 特定チャンネル(Kind 40)に紐づく投稿でタイムラインを表示 • 特定のチャンネル宛にテキスト(Kind 42)を送信 • 作ったアカウントは、他のクライアントでも参照可能
実際のデータを見てみましょう https://snowcait.github.io/nostr-playground/
画面を設計します
未ログイン・初期画面 • アカウント新規作成ボタン押して • 新規キーペアを発行する • kind: 0 を投げる •
kind: 0 の内容はコードに記載する アカウント新規作成
パブリックチャットの画面 • メッセージごとに表示する • 時系列に上から下へ • 下部が最新 • 下部に投稿ボタンを表示する •
押したら投稿画面へ遷移する ✒ ユーザーID メッセージ・投稿内容 チャット ユーザーID メッセージ・投稿内容 ユーザーID メッセージ・投稿内容 ユーザーID メッセージ・投稿内容 ✒
投稿画面 • 投稿ボタンは中央 • 投稿はTextareaで対応 • 高さは7行程度 • 画像添付などは今回見送る •
下部はキーボード表示のため、スペースを空 ける 投稿内容入力 新規投稿 投稿する
設定画面 • 秘密鍵, 公開鍵を表示する • テキストを選択できるようにする • テキストの編集は不可能 • 秘密鍵は••••でマスクする
• 目のアイコンを押したら見えるようになる • ログアウトを押したら既存のログイン情報を 破棄して、トップへ戻る あなたの公開鍵 設定 ログアウト あなたの秘密鍵
0th STEP 演習の準備 皆様の手元に準備は完了していますか? ビルドが出来ることを確認しましょう
1st STEP 画面の部品を構成 設計に基づいて画面遷移を作ります 実際のコードを例に説明します
1st STEP 画面の部品を構成 • 課題箇所:「// step 1」とコメントが記載されています • 画面表示に関連する class
を呼び出すことで画面遷移が発生します • ヘッダーに「戻る」などのナビゲーションが自動で生成されます • Hint : Login.dart にコメントで画面遷移
1st STEP 画面の部品を構成 • 「戻る」のナビゲーションが適切ではない場合 • ログイン後、ログイン画面に戻れていい? • ログアウト後、チャット画面に戻れていい? •
ログインの履歴を破棄してログインする必要がある • Hint: login.dart の1-2 に記載
2nd STEP 投稿を取得してみよう パブリックチャットのタイムラインを 取得してみましょう
3rd STEP アカウントを新規作成 ボタン一発、いつでもアカウントを作れます
4th STEP 自分の発言を投稿しよう 投稿は単純明快