Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Skylight was created / Techniques for constructing URL Entity.

How Skylight was created / Techniques for constructing URL Entity.

penpenpng

March 17, 2023
Tweet

More Decks by penpenpng

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Skylight ができるまで

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ~回想~

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. URL Entity を構成する技法

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 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)` と読み取るほうが素直だが、ここでは自然な日本語への書き下しを優先している
    リンク挿入位置からリンク先まで手取り足取り教えてあげなければならないウルトラ面倒仕様

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. じゃあ、こんなときどうする? – 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

    View full-size slide

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

    View full-size slide

  25. じゃあ、こんなときどうする? – 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 になってほしい

    View full-size slide

  26. じゃあ、こんなときどうする? – 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 ということになってる

    View full-size slide

  27. じゃあ、こんなときどうする? – 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 で一括入力されると……😇

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. ゴール
    スタート
    Edit Graph を使って Shortest Edit Script Problem を解く
    A
    B
    C
    B A B D
    ABC


    _BC
    BC BAC
    BA_ BAB BABD
    スタートからゴールまで = 編集方法

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide