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
310
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
920
dissolute fat
shinoharata
0
180
20240520_toranoana_lab.pdf
shinoharata
0
170
民主的なSNSは日本を救う
shinoharata
0
310
Nostr x Gorilla Vim Collaboration
shinoharata
0
390
press_on_nostr_book
shinoharata
0
270
LNBits で始める 家電Hack
shinoharata
0
190
NIP-78 nostr relay storage
shinoharata
0
210
Blueskyのいろいろ作ってみた
shinoharata
0
260
Other Decks in Technology
See All in Technology
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
280
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
170
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
4k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
340
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
520
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
事業を差別化する技術を生み出す技術
pyama86
2
470
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
130
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
190
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
It's Worth the Effort
3n
184
28k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Embracing the Ebb and Flow
colly
84
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Unsuck your backbone
ammeep
669
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Code Reviewing Like a Champion
maltzj
521
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Transcript
Flutter で作る Nostr アプリ
自己紹介 簡単に私の紹介です
0th STEP 演習の準備 5:32 最新版を Push しました 手元の 0_step ブランチを更新しましょう
篠原 拓真 Shino3(しのさん) - X(Twitter): SHINOHARATTT - Nostr : _@shino3.net
- 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 自分の発言を投稿しよう 投稿は単純明快