How Skylight was created / Techniques for constructing URL Entity.

https://428lab.connpass.com/event/277114/

Transcript

1. Skylight ができるまで / URL Entity を構成する技法 ぽーまん (@penpenpng.bsky.social) Bluesky/ATProtocol 勉強会 #0
2. Skylight ができるまで
3. 3月3日、嵐は止み、雲間から青空が覗いた
4. そしてペンギンは空を飛んだ - [17:08] ペンギン空を飛ぶ
5. 帰った - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る
6. 武器商人曰く、 - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る - [19:45] TL 取得方法が確立される
7. 🤔 🤔
8. ～回想～
9. 🤔 🤔
10. かくして天窓は開かれた - [17:08] ペンギン空を飛ぶ - [17:30] ペンギン Nostr に帰る - [19:45] TL 取得方法が確立される - ～なぞのじかん～ - [翌 01:11] できた
11. Skylight の価値 - Skylight の目的は iPhone 民以外のための「天窓」＝「青空を少し覗ける」で、拙速が命 - TL が見れてかつ投稿できる、おそらく、たぶん、最初の web クライアント - Skylight 自体に技術的な面白さはない - ただガワを組み立てただけ - 実際、材料は既にほとんど提供されていた - かすてらふぃさんの gist もあったし、 - Charles などがあれば Skyblue 公式の API コールを観察することもできた PC なしでも iPhone の http 覗き見できて便利。おすすめ。
12. Skylight は巨人と周囲の人間の肩の上に座っているだけ これを覗けばだいたい様子はわかるが、型定義はかなーり大雑把というか general なのでここだけは自分で Bluesky 向けに書き直した。 型定義までついてくる @atproto/api SDK があるらしい
13. Skylight は巨人と周囲の人間の肩の上に座っているだけ かっこいいものを素早く作るには CSS フレームワークに乗るのがいいらしい 最初は CSS を素書きするつもりだった。すんでのところでこの会話を思い出し、軽くて component 志向でなおかつテーマが紫の spectre.css を採用。
14. Skylight は巨人と周囲の人間の肩の上に座っているだけ 超絶便利な URL 抽出ライブラリがあるらしい
15. Skylight は巨人と周囲の人間の肩の上に座っているだけ 職場の先輩の在りし日の PR コメント 「TanStack Query はいいぞ」 いいらしい
16. Skylight の今後 - 当初の役目は終わったと考えている - もう Bluesky 向けのクライアントは素晴らしいものがたくさんある - が、自分が満足できるまでアップデートは続けていくつもり - 生み出した手前愛着があり、しばらくは自分のメインクライアントにしたい - 主要な機能で未実装のものが残っているとムズムズするのもある - なんでも完成させることはいいことですよ
17. URL Entity を構成する技法
18. TL;DR - URL 添付機能を実装するためだけに SES Problem を解いた
19. URL が自動でリンクになるわけではない。そう、青空ではね。 何もしないとただのテキストとして投稿される
20. 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)` と読み取るほうが素直だが、ここでは自然な日本語への書き下しを優先している リンク挿入位置からリンク先まで手取り足取り教えてあげなければならないウルトラ面倒仕様
21. URL が自動でリンクになるわけではない。そう、青空ではね。 Bluesky では「h 抜き」などという古代の儀式はもはや不要なのだ 逆に言えば、リンクにするかしないかを選べる柔軟な仕様 Skylight では URL をリンクにしたくないときにはこれを押せばいい
22. じゃあ、こんなときどうする？ – Case1 https://a.com https://b.com 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No
23. じゃあ、こんなときどうする？ – Case1 https://a.com https://b.com 位置: [0, 13) https://b.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) ← 位置は a.com と同じだけど……
24. じゃあ、こんなときどうする？ – Case1 https://a.com https://b.com 位置: [0, 13) https://b.com リンク: Yes 位置: [14, 27) リンク: No 位置: [0, 13) リンク: ??? ← b.com と同じように No になってほしい ← 位置は a.com と同じだけど……
25. じゃあ、こんなときどうする？ – 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
26. じゃあ、こんなときどうする？ – Case2 https://x.com https://y.com 位置: [0, 13) リンク: Yes 位置: [14, 27) リンク: No 果たしてこんなレアケースを考慮する必要があるだろうか。いや、ない。
27. じゃあ、こんなときどうする？ – 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 になってほしい
28. じゃあ、こんなときどうする？ – 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 ということになってる
29. じゃあ、こんなときどうする？ – 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 で一括入力されると……😇
30. Skylight is Minimal Client だ。そうだよね？
31. Skylight is Minimal Client だ。そうだよね？
32. このトリビアの種、つまりこういうことになります 編集前後の URL 列が与えられる。"同一性を保つ" URL のペアを線で結ぶと、△$@♨!! https://a.com https://b.com https://c.com https://b.com https://a.com https://b.com https://d.com
33. このトリビアの種、つまりこういうことになります 編集前後の 文字列 が与えられる。"同一性を保つ" 文字 のペアを線で結ぶと、△$@♨!! A B C B A B D
34. "同一性を保つ" is 何 - 文字列の編集 を以下の操作の繰り返しと考える - 1文字削除 - 1文字挿入 - 最も効率のいい編集を行う。 このとき、編集前後で削除も挿入もされなかった文字のペアは "同一性を保っている" と言えそう。
35. - 文字列の編集 を以下の操作の繰り返しと考える - 1文字削除 - 1文字挿入 - 最も効率のいい編集を行う。 このとき、編集前後で削除も挿入もされなかった文字のペアは "同一性を保っている" と言えそう。 "同一性を保つ" is 何 Shortest Edit Script Problem Edit Graph 上の最短経路の Path において通過した Trace
36. Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D
37. Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 編集前 編集後
38. Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 同じ文字 同じ文字
39. Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 同じ文字 同じ文字
40. Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D
41. スタート ゴール Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この迷路が Edit Graph
42. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 下への移動 ＝ 文字の削除 ✕
43. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 斜めの移動 ＝ 文字のキープ ✕
44. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 右への移動 ＝ 文字の挿入 ✕
45. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D ABC ✕ ✕ _BC BC BAC BA_ BAB BABD スタートからゴールまで ＝ 編集方法
46. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D 最短ルート ＝ 最も効率的な編集方法 今回は問題のサイズが小さいので、素直な 動的計画法+経路復元 で十分速く解ける
47. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D よって今回同一性を保っている URL は……
48. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 ペア
49. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 つの URL に与えられた リンク化フラグだけ維持すればよい
50. ゴール スタート Edit Graph を使って Shortest Edit Script Problem を解く A B C B A B D この 2 つの URL に与えられた リンク化フラグだけ維持すればよい
51. ご清聴ありがとうございました Skylight は favicon とロゴタイプのコントリビューションをお待ちしています