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
340
abc2023_slide_upload.pdf
Takuma Shinohara
November 23, 2023
Tweet
Share
More Decks by Takuma Shinohara
See All by Takuma Shinohara
いまのBlueskyってどうなの
shinoharata
0
92
四谷ラボとは ※2025/05/31
shinoharata
0
82
What's is Bluesky
shinoharata
0
1.3k
dissolute fat
shinoharata
0
200
20240520_toranoana_lab.pdf
shinoharata
0
200
民主的なSNSは日本を救う
shinoharata
0
350
Nostr x Gorilla Vim Collaboration
shinoharata
0
430
press_on_nostr_book
shinoharata
0
280
LNBits で始める 家電Hack
shinoharata
0
210
Other Decks in Technology
See All in Technology
フィンテック養成勉強会#54
finengine
0
170
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.5k
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
解析の定理証明実践@Lean 4
dec9ue
0
170
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
180
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
350
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
420
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
110
A2Aのクライアントを自作する
rynsuke
1
170
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
RailsConf 2023
tenderlove
30
1.1k
Fireside Chat
paigeccino
37
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Why Our Code Smells
bkeepers
PRO
337
57k
Gamification - CAS2011
davidbonilla
81
5.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Bash Introduction
62gerente
614
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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 自分の発言を投稿しよう 投稿は単純明快