Slide 1

Slide 1 text

Skylight ができるまで / URL Entity を構成する技法 ぽーまん (@penpenpng.bsky.social) Bluesky/ATProtocol 勉強会 #0

Slide 2

Slide 2 text

Skylight ができるまで

Slide 3

Slide 3 text

3月3日、嵐は止み、雲間から青空が覗いた

Slide 4

Slide 4 text

そしてペンギンは空を飛んだ - [17:08] ペンギン空を飛ぶ

Slide 5

Slide 5 text

帰った - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る

Slide 6

Slide 6 text

武器商人曰く、 - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る - [19:45] TL 取得方法が確立される

Slide 7

Slide 7 text

🤔 🤔

Slide 8

Slide 8 text

~回想~

Slide 9

Slide 9 text

🤔 🤔

Slide 10

Slide 10 text

かくして天窓は開かれた - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る - [19:45] TL 取得方法が確立される - ~なぞのじかん~ - [翌 01:11] できた

Slide 11

Slide 11 text

Skylight の価値 - Skylight の目的は iPhone 民以外のための「天窓」=「青空を少し覗ける」で、拙速が命 - TL が見れてかつ投稿できる、おそらく、たぶん、最初の web クライアント - Skylight 自体に技術的な面白さはない - ただガワを組み立てただけ - 実際、材料は既にほとんど提供されていた - かすてらふぃさんの gist もあったし、 - Charles などがあれば Skyblue 公式の API コールを観察することもできた PC なしでも iPhone の http 覗き見できて便利。おすすめ。

Slide 12

Slide 12 text

Skylight は巨人と周囲の人間の肩の上に座っているだけ これを覗けばだいたい様子はわかるが、型定義はかなーり大雑把というか general なのでここだけは自分で Bluesky 向けに書き直した。 型定義までついてくる @atproto/api SDK があるらしい

Slide 13

Slide 13 text

Skylight は巨人と周囲の人間の肩の上に座っているだけ かっこいいものを素早く作るには CSS フレームワークに乗るのがいいらしい 最初は CSS を素書きするつもりだった。すんでのところでこの会話を思い出し、軽くて component 志向でなおかつテーマが紫の spectre.css を採用。

Slide 14

Slide 14 text

Skylight は巨人と周囲の人間の肩の上に座っているだけ 超絶便利な URL 抽出ライブラリがあるらしい

Slide 15

Slide 15 text

Skylight は巨人と周囲の人間の肩の上に座っているだけ 職場の先輩の在りし日の PR コメント 「TanStack Query はいいぞ」 いいらしい

Slide 16

Slide 16 text

Skylight の今後 - 当初の役目は終わったと考えている - もう Bluesky 向けのクライアントは素晴らしいものがたくさんある - が、自分が満足できるまでアップデートは続けていくつもり - 生み出した手前愛着があり、しばらくは自分のメインクライアントにしたい - 主要な機能で未実装のものが残っているとムズムズするのもある - なんでも完成させることはいいことですよ

Slide 17

Slide 17 text

URL Entity を構成する技法

Slide 18

Slide 18 text

TL;DR - URL 添付機能を実装するためだけに SES Problem を解いた

Slide 19

Slide 19 text

URL が自動でリンクになるわけではない。そう、青空ではね。 何もしないとただのテキストとして投稿される

Slide 20

Slide 20 text

URL が自動でリンクになるわけではない。そう、青空ではね。 // 本文を「test https://example.com」とせよ "text": "test https://example.com", "entities": [{ // 投稿にはリンクを含めよ "type": "link", // リンク先は「https://example.com」とせよ "value": "https://example.com", // 本文5文字目直後から24文字目までをリンクにせよ "index": { "start": 5, "end": 24 } }] index は 0-based indexing なので `範囲 [5, 24)` と読み取るほうが素直だが、ここでは自然な日本語への書き下しを優先している リンク挿入位置からリンク先まで手取り足取り教えてあげなければならないウルトラ面倒仕様

Slide 21

Slide 21 text

URL が自動でリンクになるわけではない。そう、青空ではね。 Bluesky では「h 抜き」などという古代の儀式はもはや不要なのだ 逆に言えば、リンクにするかしないかを選べる柔軟な仕様 Skylight では URL をリンクにしたくないときにはこれを押せばいい

Slide 22

Slide 22 text

じゃあ、こんなときどうする? – Case1 https://a.com https://b.com 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No

Slide 23

Slide 23 text

じゃあ、こんなときどうする? – Case1 https://a.com https://b.com 位置: [0, 13) https://b.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) ← 位置は a.com と同じだけど……

Slide 24

Slide 24 text

じゃあ、こんなときどうする? – Case1 https://a.com https://b.com 位置: [0, 13) https://b.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) リンク: ??? ← b.com と同じように No になってほしい ← 位置は a.com と同じだけど……

Slide 25

Slide 25 text

じゃあ、こんなときどうする? – Case1 https://a.com https://b.com 位置: [0, 13) https://b.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) リンク: ??? ← b.com と同じように No になってほしい ← 位置は a.com と同じだけど…… URL 文字列をキーにして リンク化フラグを保持すればいい? (例) a.com -> Yes b.com -> No

Slide 26

Slide 26 text

じゃあ、こんなときどうする? – Case2 https://x.com https://y.com 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No 果たしてこんなレアケースを考慮する必要があるだろうか。いや、ない。

Slide 27

Slide 27 text

じゃあ、こんなときどうする? – Case2 https://x.com https://y.com 位置: [0, 13) https://x.com https://y.com https://y.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No 位置: [28, 41) リンク: ??? 果たしてこんなレアケースを考慮する必要があるだろうか。いや、ない。 ← Yes になってほしい

Slide 28

Slide 28 text

じゃあ、こんなときどうする? – Case2 https://x.com https://y.com 位置: [0, 13) https://x.com https://y.com https://y.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No 位置: [28, 41) リンク: ??? URL をキーにする手法は 同じ URL を複数貼られると破綻する 果たしてこんなレアケースを考慮する必要があるだろうか。いや、ない。 ← Yes になってほしい ← でも y.com は No ということになってる

Slide 29

Slide 29 text

じゃあ、こんなときどうする? – Case3 https://a.com https://b.com https://c.com https://b.com https://a.com https://b.com https://d.com 「Ctrl+A, Ctrl+V により編集されるケース」さえなければ、被編集文字列は文字列中の 1つの連続部分列である仮定を置けるので話が楽だった …… Ctrl+A, Ctrl+V で一括入力されると……😇

Slide 30

Slide 30 text

Skylight is Minimal Client だ。そうだよね?

Slide 31

Slide 31 text

Skylight is Minimal Client だ。そうだよね?

Slide 32

Slide 32 text

このトリビアの種、つまりこういうことになります 編集前後の URL 列が与えられる。"同一性を保つ" URL のペアを線で結ぶと、△$@♨!! https://a.com https://b.com https://c.com https://b.com https://a.com https://b.com https://d.com

Slide 33

Slide 33 text

このトリビアの種、つまりこういうことになります 編集前後の 文字列 が与えられる。"同一性を保つ" 文字 のペアを線で結ぶと、△$@♨!! A B C B A B D

Slide 34

Slide 34 text

"同一性を保つ" is 何 - 文字列の編集 を以下の操作の繰り返しと考える - 1文字削除 - 1文字挿入 - 最も効率のいい編集を行う。 このとき、編集前後で削除も挿入もされなかった文字のペアは "同一性を保っている" と言えそう。

Slide 35

Slide 35 text

- 文字列の編集 を以下の操作の繰り返しと考える - 1文字削除 - 1文字挿入 - 最も効率のいい編集を行う。 このとき、編集前後で削除も挿入もされなかった文字のペアは "同一性を保っている" と言えそう。 "同一性を保つ" is 何 Shortest Edit Script Problem Edit Graph 上の最短経路の Path において通過した Trace

Slide 36

Slide 36 text

Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D

Slide 37

Slide 37 text

Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 編集前 編集後

Slide 38

Slide 38 text

Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 同じ文字 同じ文字

Slide 39

Slide 39 text

Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 同じ文字 同じ文字

Slide 40

Slide 40 text

Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D

Slide 41

Slide 41 text

スタート ゴール Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この迷路が Edit Graph

Slide 42

Slide 42 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 下への移動 = 文字の削除 ✕

Slide 43

Slide 43 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 斜めの移動 = 文字のキープ ✕

Slide 44

Slide 44 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 右への移動 = 文字の挿入 ✕

Slide 45

Slide 45 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D ABC ✕ ✕ _BC BC BAC BA_ BAB BABD スタートからゴールまで = 編集方法

Slide 46

Slide 46 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 最短ルート = 最も効率的な編集方法 今回は問題のサイズが小さいので、素直な 動的計画法+経路復元 で十分速く解ける

Slide 47

Slide 47 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D よって今回同一性を保っている URL は……

Slide 48

Slide 48 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 ペア

Slide 49

Slide 49 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 つの URL に与えられた リンク化フラグだけ維持すればよい

Slide 50

Slide 50 text

ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 つの URL に与えられた リンク化フラグだけ維持すればよい

Slide 51

Slide 51 text

ご清聴ありがとうございました Skylight は favicon とロゴタイプのコントリビューションをお待ちしています