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
350
abc2023_slide_upload.pdf
Takuma Shinohara
November 23, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
いまのBlueskyってどうなの
shinoharata
0
100
四谷ラボとは ※2025/05/31
shinoharata
0
89
What's is Bluesky
shinoharata
0
1.3k
dissolute fat
shinoharata
0
210
20240520_toranoana_lab.pdf
shinoharata
0
200
民主的なSNSは日本を救う
shinoharata
0
350
Nostr x Gorilla Vim Collaboration
shinoharata
0
440
press_on_nostr_book
shinoharata
0
280
LNBits で始める 家電Hack
shinoharata
0
210
Other Decks in Technology
See All in Technology
Jitera Company Deck / JP
jitera
0
250
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.6k
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
610
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
320
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
210
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
260
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
140
PdM業務における使い分け
shinshiro
0
670
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
100
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
It's Worth the Effort
3n
185
28k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Facilitating Awesome Meetings
lara
54
6.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Music & Morning Musume
bryan
46
6.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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 自分の発言を投稿しよう 投稿は単純明快