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 Slide

  2. Skylight ができるまで

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 🤔
    🤔

    View Slide

  8. ~回想~

    View Slide

  9. 🤔
    🤔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. URL Entity を構成する技法

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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 になってほしい

    View Slide

  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 ということになってる

    View Slide

  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 で一括入力されると……😇

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide