Blueskyのいろいろ作ってみた

Slide 1

Slide 1 text

Blueskyのいろいろつくった話 2023/06/02 – Blueksy/AT Protocol勉強会 #1.5

Slide 2

Slide 2 text

もくじ • 自己紹介 • The-Blueを作ってみた • Bsky-MassDriverを作ってみた • Bksy-Albumを作ってみた • Jiho-Botを作ってみた • SkyLog, Sky-highを作ってみた • 今後の展望

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

Shino3（しのさん）です

Slide 5

Slide 5 text

Shino3（しのさん）です • プログラマ・エンジニア • 最近はWeb系 • 組み込みソフトウェアが最初 • 2019年からWEB等の業界に • PHP/Laravelがメイン • 必要に応じてどの言語も書きます

Slide 6

Slide 6 text

Shino3（しのさん）です • 個人開発：Bluesky, Nostr • 自動車競技など。走ること • スマートフォン・ガジェット等 • 自作キーボードの設計・開発 • 推し：WeatherNews Live 檜山沙耶さん

Slide 7

Slide 7 text

The Blue つくってみた

Slide 8

Slide 8 text

Bluesky Client • 何回も紹介させて頂いてるので割愛 • Bluesky Meetup in Tokyo – first take の動画を御覧ください

Slide 9

Slide 9 text

The Blueの問題点 Vue2 Nuxt2

Slide 10

Slide 10 text

The Blueの問題点 Vue2 Nuxt2 サポートがそろそろ切れそう

Slide 11

Slide 11 text

The Blueの問題点 • タイムラインの構築 • 投稿・リプ・リポスト、ふぁぼ等・・・ • 通知一覧を表示 • プロフィールや投稿のページを表示 • その他、表示したい情報などの設定

Slide 12

Slide 12 text

The Blueの問題点やること多すぎなんよ・・・ • タイムラインの構築 • 投稿・リプ・リポスト、ふぁぼ等・・・ • 通知一覧を表示 • プロフィールや投稿のページを表示 • その他、表示したい情報などの設定

Slide 13

Slide 13 text

でも？

Slide 14

Slide 14 text

Webも Androidも

Slide 15

Slide 15 text

公式があるやんけ！！

Slide 16

Slide 16 text

優先度を下げよう！

Slide 17

Slide 17 text

開発停止！！

Slide 18

Slide 18 text

Bsky-Massdriver つくってみた

Slide 19

Slide 19 text

投稿専用 Webクライアント •現在、唯一の機能

Slide 20

Slide 20 text

投稿専用 Webクライアント • 投稿のみに特化！！ • 投稿しかできない！！ • すか廃仕様（後ほど言及します） • PWA対応 • 思い立ったら即投稿

Slide 21

Slide 21 text

投稿専用 Webクライアント •URLクエリパラメータ対応！！

Slide 22

Slide 22 text

投稿専用 Webクライアント •URLクエリパラメータ対応！！

Slide 23

Slide 23 text

投稿専用 Webクライアント •URLクエリパラメータ対応！！

Slide 24

Slide 24 text

投稿専用 Webクライアント •URIエンコードってめんどくさいよね？？？

Slide 25

Slide 25 text

投稿専用 Webクライアント •URLクエリパラメータ対応！！

Slide 26

Slide 26 text

The Blueの問題点より Vue2 Nuxt2 サポートがそろそろ切れそう

Slide 27

Slide 27 text

The Blueの問題点より • 慣れていたNuxt→Svelteベースに変更 • お勉強と実績作り • TypeScriptに対応

Slide 28

Slide 28 text

The Blueの問題点より • 慣れていたNuxt→Svelteベースに変更 • お勉強と実績作り • TypeScriptに対応できた！！！

Slide 29

Slide 29 text

Bksy-Album つくってみた

Slide 30

Slide 30 text

自分の投稿画像を追いかけるツール • MassDriverをベースに改造 • ログイン機能をそのまま継承 • 過去3,000件の投稿から画像を抽出 • 投稿の抽出は、SkyLogとかSkyHighの流用（後述）

Slide 31

Slide 31 text

自分の投稿画像を追いかけるツール • なんでつくったの？

Slide 32

Slide 32 text

自分の投稿画像を追いかけるツール • なんでつくったの？ノリと勢い！！

Slide 33

Slide 33 text

自分の投稿画像を追いかけるツール • なんでつくったの？ブルスコに投稿した画像を追いかけるツールみたいなの無いかな？

Slide 34

Slide 34 text

自分の投稿画像を追いかけるツール • なんでつくったの？ブルスコに投稿した画像を追いかけるツールみたいなの無いかな？

Slide 35

Slide 35 text

自分の投稿画像を追いかけるツール

Slide 36

Slide 36 text

自分の投稿画像を追いかけるツール

Slide 37

Slide 37 text

Jiho-bot つくってみた

Slide 38

Slide 38 text

ほぼ30分おきに時間を投稿してくれます • JavaScriptでバッチ処理をする練習 • 30分おき

Slide 39

Slide 39 text

実装 • Momentで現在時刻を取得 • 投稿！ • 以上！！

Slide 40

Slide 40 text

実装 • momentで現在時刻を取得 • 投稿！ • 以上！！それだけ！？

Slide 41

Slide 41 text

設更計変

Slide 42

Slide 42 text

実装 • momentで現在時刻を取得 • 投稿！ • 6分間の間でランダム • →ほぼ時間通りなBotが完成 • node-cronを使用 • cron→supervisorに変更

Slide 43

Slide 43 text

実装デバッグが簡単になった！！！

Slide 44

Slide 44 text

実装だいじ！！

Slide 45

Slide 45 text

SkyLog SkyHigh つくってみた

Slide 46

Slide 46 text

一日一回、投稿数を集計します

Slide 47

Slide 47 text

なんでつくったの？ • 自分の投稿数、気になるな・・・・？ • なんかめっちゃ、つぶやく人おる • この人いつもTLで見かけるじゃん

Slide 48

Slide 48 text

なんでつくったの？ • 自分の投稿数、気になるな・・・・？ • なんかめっちゃ、つぶやく人おる • この人いつもTLで見かけるじゃん作るわ！！

Slide 49

Slide 49 text

実装 • 過去の投稿を3,000件遡る • 1回のGetリクエストで最大100件まで取得可能  フォロワー一覧  指定ユーザーの投稿一覧 • Cursolを使って再帰処理 • 日付で判定して、24時間ぶん集計する

Slide 50

Slide 50 text

実装 • 過去の投稿を3,000件遡る • 1回のGetリクエストで最大100件まで取得可能  フォロワー一覧  指定ユーザーの投稿一覧 • Cursolが取れるので再帰処理を実装 • 日付で判定して、24時間ぶん集計するクライアント作った経験が役に立ったヮ