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
320
abc2023_slide_upload.pdf
Takuma Shinohara
November 23, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
What's is Bluesky
shinoharata
0
1k
dissolute fat
shinoharata
0
190
20240520_toranoana_lab.pdf
shinoharata
0
180
民主的なSNSは日本を救う
shinoharata
0
330
Nostr x Gorilla Vim Collaboration
shinoharata
0
400
press_on_nostr_book
shinoharata
0
270
LNBits で始める 家電Hack
shinoharata
0
190
NIP-78 nostr relay storage
shinoharata
0
220
Blueskyのいろいろ作ってみた
shinoharata
0
270
Other Decks in Technology
See All in Technology
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.3k
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
130
Reactを段階的に覗いてみる
ytaisei
2
940
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
370
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
技術的負債を正しく理解し、正しく付き合う #phperkaigi / PHPerKaigi 2025
shogogg
7
1.7k
お問い合わせ対応の改善取り組みとその進め方
masartz
1
290
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
1.9k
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
290
Explainable Software Engineering in the Public Sector
avandeursen
0
340
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
200
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
GitHub's CSS Performance
jonrohan
1030
460k
Designing for humans not robots
tammielis
250
25k
Code Reviewing Like a Champion
maltzj
521
39k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.4k
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 自分の発言を投稿しよう 投稿は単純明快