テレビのアニメはどこから来る? / 第39話

第39話:イトは、短く切ったURLをつなぎ直した|同じsiteで別pageへ届く理由

ピコルート第39話。長いURLをhostだけへ切ってlobbyへ誤配したイトが、scheme、authority、path、query、fragmentをつなぎ直して目的のpageへ届けます。

URLURI componenthostとpathqueryとfragment10分更新

第38話で、standby program pageは会場screenへ戻った。

けれど、まだ一つ仕事が残っている。

離れた三つのprojectorへ、同じpageを開く案内札を送る。

browserから、長い札が出てきた。

https://festival.example/program?view=standby#screen

イトは、札を両手で持ち上げた。

「こんなに長いと、途中で間違える」

projectorの受付が閉じるまで、四十五秒。

イトは、最初の/より後ろをはさみで切った。

残したのは、これだけだ。

https://festival.example/

「同じsiteなら、入口まで分かれば中で見つけてくれるはず」

イトは短い札を三つのprojectorへ送った。

同じsiteには着いた。でも、違うpageだった

三つのscreenが一斉に開く。

表示されたのは、星見フィルム祭のlobby pageだった。

大きな星の印はある。

site名も合っている。

でも、今夜のprogramも、standby pageも、会場用screen sectionもない。

destination origin: reached requested resource: lobby

残り、三十七秒。

イトは、切り落とした長い札を見た。

「同じ建物に着いたのに、欲しいpageじゃない」

ピコは、lobbyを閉じなかった。

代わりに、切れた札を五色のtrayへ置いた。

イト

URLって、siteの場所を示す住所じゃないの?

ピコ

siteの入口だけではなく、その中のtarget resourceまで識別できる

イト

後ろを短くしたら、同じURLの短縮版じゃなくて別のtargetになった?

ピコ

このfixtureではそうだよ。componentを外すと意味が変わる場合がある

URLは、一枚の札に見えるURI

URIは、resourceを識別するcompactな文字列だ。

URLは、その中でもaccessする仕組みや場所を通してresourceを識別する呼び方として使われてきた。

Webでは、browserのaddress barに入れる文字列をURLと呼ぶことが多い。

この物語では、https schemeを持つWeb URLを分けて見る。

RFC 3986のgeneric syntaxでは、URIは次のcomponentに分かれる。

scheme authority path query fragment

全部がすべてのURIに必ずあるわけではない。

schemeごとの規則もある。

それでも、区切り記号を先に見れば、長い札を一文字ずつ暗記せずに読める。

一枚目:schemeは、残りの解釈を決める

最初のtrayに、httpsが入った。

その後ろの:は、scheme名の終わりだ。

schemeは、そのURIをどの仕様で解釈するかを示す。

今回のhttps URLでは、secured HTTP communicationを使ってauthorityへaccessする。

RFC 9110は、https URIについて、相手serverのidentityをauthorityと照合し、保護されたconnectionでHTTPを行うことを定めている。

ただし、httpsだからpageの内容が正しい、商品が安全、相手を信用してよい、とまでは言えない。

守るのは、正しく確立されたconnectionとauthorityの関係だ。

内容の判断まで代わりにはしない。

二枚目:authorityの中からhostを見る

次は、//の後ろだ。

festival.example

generic syntaxでauthorityは//から始まり、次の/、?、#、または文字列の終わりまで続く。

authorityには、hostとoptional portが入る。

今回のauthorityにはportの明記がなく、hostはfestival.exampleだ。

hostはdomain nameの形とは限らず、IP address literal等の場合もある。

この物語のhostは、学習用に予約された.exampleを使う架空名だ。

HTTP(S)では、authorityがどのoriginへauthoritativeなresponseを求めるかを決める大切な境界になる。

だから、pathの中に知っている言葉があっても、authority / hostが違えば同じoriginとは限らない。

でも、hostが同じなら、いつも同じpageになるわけでもない。

イトが送った短い札はhostまで合っていた。

それでlobbyには着いた。

三枚目:pathは、origin内のtargetを分ける

三つ目のtrayには、/programが入った。

pathはhierarchicalな形でresourceを識別するcomponentだ。

/でsegmentが分かれて見える。

しかし、serverのdisk上に同じ名前のfolderがあるとは限らない。

Web applicationがrouteとして解釈し、databaseやprogramからresponseを作ることもある。

https://festival.example/

https://festival.example/program

二つはauthority / hostが同じだ。

それでもpathが違うため、このfixtureではlobbyとprogramという別targetになる。

「建物は同じ。でも、入口のhallと上映programは同じresourceじゃない」

イトは、切り落とした/programをhostの右へ戻した。

四枚目:queryは、pathと一緒にtargetを分ける

四つ目は、?の後ろだ。

view=standby

queryは、pathとともにscheme / authorityの範囲内でresourceを識別するnon-hierarchicalなdataだ。

名前と値に見える書き方は多い。

けれど、その意味はservice側の仕様で決まる。

検索条件、表示mode、page番号、version選択などに使われることがある。

trackingだけに使われるとは限らない。

「長いから不要」と一律に削ることもできない。

このfixtureでは、queryなしの/programは修理中のmain representationを指す。

?view=standbyを付けると、承認済みstandby representationを選ぶ。

queryを落とせば、同じpageを短く表示するのではなく、違う結果になった。

五枚目:fragmentは、serverへ運ぶ札ではない

最後は、#の後ろにあるscreenだ。

fragmentは、resource内のsecondary resourceを間接的に識別する。

今回なら、返ってきたprogram pageの中にある会場screen sectionを指す。

重要な違いがある。

HTTP clientがtarget URIを作るとき、fragment componentは除かれる。

RFC 9110も、fragmentはclient-side processingのために残し、HTTP target URIから外すと明記している。

browserはscheme、authority、path、queryからrequest targetを作る。

representationが返ったあと、#screenを使ってpage内の対象へ進む。

fragmentを変えたときに新しいnetwork requestが必ず発生する、という意味ではない。

pageやbrowserの状態で動きは変わる。

WHATWG URL Standardでも、Web platformのURLをscheme、host、port、path、query、fragmentへ分けてparse / serializeする。

イトに残った三つの案内札

projectorの受付が鳴った。

残り、二十一秒。

五色のtrayの前に、三つの札が開く。

A 短いhostだけをもう一度送る

https://festival.example/

lobbyへ着くことは、もう確かめた。

でもprogram resourceではない。

B pathまで戻し、queryとfragmentは短縮する

https://festival.example/program

program targetへ近づく。

けれど、このfixtureではmain representationがまだ修理中で、会場screen sectionも指定しない。

C 確認済みのfull URLをcomponentどおり戻す

https://festival.example/program?view=standby#screen

standby representationを求め、返ったpage内のscreen sectionへ進める。

ピコは、五つのtrayを照らしただけだった。

「短い方がきれい?」

イトは、lobbyが映った三つのscreenを見る。

切り落としたpath、query、fragmentを見る。

「長さじゃない。どのtargetを開くかを変えない札を送る」

イトはCを選んだ。

自分の手で、scheme、authority、path、queryを一列へつなぐ。

fragmentの札だけは、browser側のbookmark railへ置いた。

イトが切り落とした五色のURL component札をつなぎ直し、scheme・authority・path・queryの四枚をHTTP送出railへ、fragmentの一枚をbrowser側bookmark railへ置き、lobbyではなくstandby programのscreen sectionを選んでいる
hostだけへ短縮せず、targetを変えないfull URLへ戻す。HTTPへ渡すscheme・authority・path・queryと、browser側で使うfragmentをイト自身が分ける。

イトがfull URLを三つのprojectorへ送り直した。

serverへ四枚、browserに一枚

最初のprojectorがURLを受け取る。

browserはhttps schemeを読む。

authorityのfestival.exampleから、対象originへのaccessを始める。

HTTP requestには、/program?view=standbyというtargetが入る。

#screenは入らない。

Web originから、standby programのrepresentationが戻る。

browserはpageを開き、手元に残したfragmentでscreen sectionへ進んだ。

二つ目のprojectorも、同じsectionを映す。

三つ目も、lobbyを通り過ぎて会場用screenへ着いた。

standby program: received screen section: selected locally

残り、七秒。

三つのscreenに、同じ星のprogramがそろった。

イトは、短く切った札を捨てなかった。

hostだけの札にはlobbyの小さなcardを添える。

pathまでの札には、修理中main pageの琥珀cardを添える。

full URLには、standby screenの青いcardを添える。

同じhostでも、三つは同じ結果ではなかった。

はさみではなく、区切り線を残す

受付時計が止まった。

イトは、URLを短くするはさみを箱へ戻した。

代わりに、一枚の長い札へ五本の色境界を残した。

scheme。

authority。

path。

query。

fragment。

文字列は、短くなっていない。

けれど、どこを変えると何が変わるかは見える。

三つのprojectorはstandby screenを映し続ける。

その下には、切り落としたhost-only札と、lobbyの小さなcardが残っていた。

次回:札の先で、pageを作るのは誰?

正しいURLを通ったrepresentationが、browser工房へ運ばれた。

中には、HTMLの骨組み、CSSの色布、JavaScriptの歯車、画像の箱が入っている。

イトは、材料の山と完成したscreenを見比べた。

「serverからpageが完成したまま届くわけじゃないの?」

browser工房の奥で、組立台が動き出した。

次回、ピコルート第40話。

ブラウザは何をしている? Webページ工房へ入ろう

URL componentを図で確かめる

scheme、host、path、query、fragmentの境界と読み方を一枚で整理するなら、URLとは何かでcomponent図を確かめられます。

この物語を、解説で深める

第39話で生まれた疑問を、解説記事で少し深く見ていきます。物語で感じた不思議さを残したまま、言葉と仕組みを順番に整理しましょう。

URLとは?ドメイン・パス・クエリなどアドレスの読み方を読む