貴殿らの説明は下手でござるシリーズ。待望の第n弾。

WebとかWebブラウザというものについてインターネットで検索したとき、表面的な情報しかわかんない。「上水道とは」って検索かけて「蛇口をひねると水が出ます」「手をかざすと出るタイプの蛇口もあるます」「ごく微量の塩素が入るます」くらいのもの。なにもわからない。俺が知りたいのはそんな情報ではない。俺は対象物の説明ではなく、どういう発想とかアイデアで生み出されたのかってところが知りたいんです。

だから俺が書けばいい。そして用語リンクや綴り以外は検索せず記憶を頼りに書くので、以下の情報は部分的に正しくないかも。詳細は自分で調べなよ。

想定読者は上下水道についての知識を何一つ持ち合わせていないバカです。じゃあいくぜ!ギヒィィィィィヒッヒッヒッイッイィィィ!!!フワァーーオ!!!1111

◆インターネット情報やりとり(読まんでよし)

前提の話をする。読まなくてもいい。読んだっていい。

Webブラウザではインターネット上の情報を読み、更新することができる。ということは何となくわかるでしょう。

そういうインターネット上の情報は世界中の色々な場所にあるサーバーと呼称されるコンピューターに記録されている。より厳密かつ大雑把に言えば、サーバーソフトウェアというアプリケーションが動いているコンピューターが、己に接続されている外部記憶装置(HDDとかSSD)にアクセスしてデータを読み出し、われわれのパソコン/スマホ/他に情報を返却してくれている。情報の種類として文字やエロ画像、エロ動画などあるが、Webブラウザはそういう色々なデータを画面上に配置して表示することができているっぽい。

サーバーというコンピューターに接続する側のコンピューターは、サーバーと対比してクライアントと呼ばれる。クライアント(機器)上で動くサーバー接続用のソフトウェアもクライアントと呼ばれる。

サーバーは特殊な専用のコンピューターである必要もなく、ノートパソコンでもスマホでもサーバーにすることができる。サーバーはIPアドレスを買うなり貰うなり掴み取るなりすれば誰でも自由に立てることができる。

サーバーには謎のピコピコ光る線がぶっ刺さっていることが多く、そのケーブルはネットワークに繋がっている。そのネットワークがインターネットである場合、そのサーバーはインターネット上のサーバーであると言える。インターネット(いわゆるThe Internet)は実体としてまず(略

◆通信(読まんでよし)

通信機器って言われて思いつく一番素朴な道具は糸電話だろう。糸電話はその両端を人間が保持してその時間での通信、すなわちリアルタイムな通信をする。これはモールス通信(初期の電報)、手旗信号船舶信号電話と同じく誰かと誰かがそこにいて双方向に信号を送ったり受けたりせねばならない。

電話、糸電話は端末から端末へ回線を繋いだまま、線を一本占有したまま話す回線交換の仕組みを採る。だから例えば震災時に要求が増加すると(物理的あるいは論理的な)空き回線が枯渇しやすいんで電話は繋がりにくくなる(輻輳)。また、誰かと電話している人は既に回線を埋めているので他の人からの電話を同時に受けることが苦手。コールウェイティングという(略

回線交換のWikiのリンクを張ろうとしたらIIJの解説ページが検索トップに出てきて、内容が分かりやすかったんでリンクを張っておく。

回線交換のリアルタイム通信、コネクション繋ぎっぱ通信、人間がその場にいなければならない通信がダルかったんで、インターネットの通信は回線交換ではなくパケット通信と自動応答を基礎として成り立っている。そして基本的にクラサバ(クライアントサーバーモデル)構成を採る。クラサバじゃないインターネット上の通信で代表的なものにはP2P通信等あって、クライアント同士で通信できたりもしている。インターネットの技術要素を使って通話する仕組みはVoIP(Voice over IP)と呼ばれる。電話番号を使用したVoIPがIP電話

色々書いたっていうか話が逸れたけど何が言いたいのかと言えば、インターネットは電話と違うパラダイム(発想)で動いているということ。でも広義のインターネットは電話回線上に実装することもできるし、変換を噛ませれば電話回線からThe Internetに接続できる。あるいはインターネットではないパソコン通信というネットワークが電話回線上に構築されていた。ダイヤルアップ通信(略

電信電話の話もかなり面白いというか掘りきれないほど色々な話があるので興味あるなら調べるよろし。今後はIP網になっちゃうけど。

2026年にサ終するiモードという日本が生んだ世界初の携帯端末から接続できるIPネットワークはインターネットとiモードのネットワークが悪魔合体している。最近はIOWNという新たなネットワークが開発されており、話題のNTT法も関係するグローバル(略

◆インターネットとブラウザ

サーバーには我々の求めるデータが入っている。ほんでサーバーは我々の操るクライアントからの要求(リクエスト)を待ち受けている。

サーバーから得られそうな一番素朴な情報は例えば文字列(テキストデータ)かもしれないんで、サーバーからテキストを受け取りたいという要望が発生する。するよね?だって遠く離れた人が掲示しているテキストを読めるのは改めて考えたら凄いことだ。凄すぎて絶対に漏らす。

インターネット上に公開されているテキストを表示したいときに必要なものは以下かもしれない。

  • 指定されたサーバーにリクエストを送ってレスポンスを受け取るためのプログラム
  • 受け取ったテキストを表示するプログラム

上記のプログラムの組み合わせによりインターネット上のサーバーにアクセスするクライアントを構成できそうだが、そのクライアントはWebブラウザではない。すなわちインターネットを利用する際Webブラウザは必須ではなく、インターネットとWebブラウザはセットじゃない。

WebブラウザWebクライアント(インターネット)クライアント

インターネット上のサーバーにアクセスして情報を得るためにWebブラウザは必ずしも要らないのに、なんで我々はWebブラウザを使用しているのか。そもそもWebってなんなのか。インターネットとどう違うのか。というところを読み解いていきます。

◆ハイパーテキスト

クライアントでサーバーにアクセスしてテキストデータを取得できる。翻って、サーバーはテキストデータを掲示できている。ほんとか?というところで以下のページを見てみ。

https://www.rfc-editor.org/rfc/rfc1.txt

すごい…インターネット上のテキストが読めるわ…きも…

ほんで、世界初と噂されているインターネットのアドレスが以下。

http://info.cern.ch/

とてもシンプルなページだけど、これはテキストではないわな。我々がテキストエディタで表現できる情報の範疇を超えている。

  • 文字の太さが場所によって違う
  • リストが表示されている
  • 文字にリンクが張ってあってクリックしたら別のページに移動できる

なんでテキストには成し得ない表現をサーバーから得ることができているのだろうか。恐ろしい。コンピューターウイルスかも。ちがうの?じゃあなに。

それはね。info.cern.chのサーバーがクライアントにWebページを返却して、クライアントがWebページを解釈できるWebブラウザであったからに他ならないんだよ。

インターネットが始まる前から、テキストを超越せしハイパーテキストという概念があった。ハイパーテキストはテキストとテキストをハイパーリンクにより繋ぐことができて、文書(ページ)間の遷移を容易にする。例えば国語辞典の🐔の項目をテキストで表現したとき、🐔の幼体は🐤であることに言及できたとしても🐤の項目を参照するためには辞書を引き直さねばならない。それがテキストの限界。かたやハイパーリンクを実装できる電子辞書であれば🐔から🐤にワンアクションでジャンプできます。便利。リンクってほんとにハイリア人。

インターネットは情報の掲示ができるんで、掲示間の遷移、つまりハイパーテキストの考え方と親和性高くないか?むしろ掲示間の遷移がワンアクションで済まなければ面倒。

電子辞書はネットワークに繋がってないし各メーカーが独自にハイパーテキストの仕組みを実装したればいいけど、インターネットは複数のサーバーが参加するネットワークである。それゆえにハイパーテキストの表現に共通の仕様が必要になりそうじゃない?作ろう?という文脈が今のWebのはじまりだった。

ハイパーテキストを書くための仕様のひとつがHTML(Hyper Text Markup Language)である。HTML以外のハイパーテキストを表現する記法はいまんところインターネットではほぼ利用されていない。あったとしてもWebに公開する時にはHTMLに変換されていたりする。

◆World Wide Web

インターネットはハイパーテキストのための仕組みではないんだけど、ハイパーテキストを掲示できるんだからそうしたい。というところで、インターネット上でハイパーテキストを表現してサカり合う考え方にWorld Wide Webという名前が付けられた。それがWeb。インターネット上のWeb。WebをブラウジングするためのクライアントをWebブラウザと呼ぶし、WebにHTMLを公開するためのサーバーが原義のWebサーバー。

ワールドワイドは良いとして、なぜWeb(網)なのか。それはつまりネットワークのケーブルがさながら網のようである…みたいな話を聞いたこともあるけど、文書と文書に張られたリンクの繋がりを網に見立てたんじゃないか。そんな気がしているけど本当のところはどうだったか。調べてこい。

▼www

インターネット上のサイトのアドレスには「www」が含まれるものがあるwwwwwwうはwwwwおkwwwwwwwwww

https://www.google.com

このwwwはWorld Wide Webの頭文字をとったもの。これはアルファベットという謎の企業が「google.com」というインターネットのドメインを持っていて、そのgoogle.comの配下にWorld Wide Web用のサブドメインを「www.google.com」という名前で作っておいていると捉えることができる。これは整理整頓のためにそうしているというだけで、別にwwwというサブドメインを作らんでもunko.google.comでもなんでもWebサイトは公開できる。慣習としてwwwサブドメインでWebページを公開しているサイトは多いし、そういうサイトが多いからWebブラウザはアドレスバー(オムニボックス)の「www.」を省略して表示していることも多い。

サブドメインにwwwとついていれば、とりあえずWebサイトが公開されていると予想できる。

World Wide Web以外に、例えばメールサービスを公開するんなら「mail.example.com」というサブドメイン名を作ってもいいし、FTPなら「ftp.example.com」とか「sftp.example.com」というサブドメインを作ってもいい。

◆HTTP

インターネットはInternet Protocolというプロトコル(ルール、通信の規約)でパケット通信をする。IPアドレスのIPはInternet Protocolのこと。そのIPは機能が生々しすぎて扱いづらいので、IPの上にTCPとかUDPというプロトコルを被せて使いやすくしている。TCP/IPの組み合わせが特に利用されるのでインターネット・プロトコル・スイートと名付けられている。

TCP/IPとかのプロトコルを使ってHTMLをサーバーから受け取りたいんだけど、それもそれで使いづらいんで更にプロトコルを被せたい。というのでHTTP(Hyper Text Transfer Protocol)が発生した。我々がURLで目にするHTTPはIPとかTCP/UDPとかUDP上のQUICの上に載っている。ほんでHTTPはセキュリティ上あぶないので、危なくないHTTPSというプロトコルに切り替えが進んでいる。SはSecureのS。WebサーバーとはつまりHTTP(S)に対応しているサーバーを指す。

Webサイトを見ているとたまに目につく404 Not FoundとかはHTTPという通信規約上のエラーを意味している。なれば、デジタルの雰囲気を表現しようとして歌詞に404とか含めている曲はWebだけの話をしている。電子機器の話でもインターネットの話でもなくWebの話をしている。

◆Webページ

Webページは実体としてHTMLというのは分かった。HTMLって何が何なのか。正味は文字です。

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>テストページ</title>
</head>

<body>
  <h1>テスト</h1>
  <p>ふがふがほげほげ</p>
  <p style="color:red;">ぴよぴよ</p>
  <img src="https://picsum.photos/200" style="border: solid;" />
  <div>
    <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
      poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">
    </video>
  </div>
  <div>
    <audio src="https://samplelib.com/lib/preview/mp3/sample-15s.mp3" controls="" controlslist="nodownload"></audio>
  </div>
</body>

</html>

上記は文字が太かったりリンクだったりしていないのでプレーンなテキストである。そして内容はHTMLである。すなわちHTMLはプレーンテキストにより記述されている。この内容をテキストエディタに貼っ付けて「unko.html」という名前で保存してダブルクリックすればブラウザが起動して文字がペロペローンと表示されてくる。そして画像と動画とオーディオも表示されてくる。HTML自体はインターネットと直接的には関係ないので、自分で手元で書いたHTMLであっても、インターネット上に置かずともWebブラウザで表示することができる。

HTMLはTagという部品を並べることで文書の構造を表現しており、Webは根本的にはこういうことで動いている。だからWebページの見た目を変えたければ難しくもなく書き換えることもできよう。

◆見た目

先ほど見たとおり、ハイパーテキストを表現するにあたってHTMLがある。HTMLは文書の構造を表現出来てたんだけど、世の中のページは文字が赤かったり太かったり背景に色がついていて綺麗。その綺麗さはどうやって実現しているんだろか。それはね。スタイルシートを使っているんだよ。

CSS: カスケーディングスタイルシート | MDN (mozilla.org)

詳しい説明する気ないけど、HTMLのTag等に対してスタイルを当てればなんやかんや色々な視覚効果が起こる。いや視覚効果は起こらないかも。視覚効果って何?

CSSはWebページのうち見た目のみを司っている。要素の並べ方を変えたり簡単なアニメーションも可能。そしてCSSはHTMLと一体のものではない。CSSは見た目の話をしているだけなので、例えばSVGという画像フォーマットに対してスタイルを当てることもできる。

WebブラウザはHTMLとCSSを解釈してウィンドウに描画(レンダリング)をする。レンダリングするプログラムっていうか部品のことをレンダリングエンジンと呼ぶ。ブラウザによってレンダリングエンジンは異なっているが、共通するレンダリングエンジンを使っているブラウザもありけり。

  • Firefox
    • Gecko⇒Servo
  • Chrome、新Edge
    • WebKit⇒Blink
  • Safari
    • WebKit

◆動的Webページ

今までの話を総合した感じ、ユーザーごとに別のWebページを見せることって難しそう。なんでってHTMLファイルを事前に用意してWebサーバーからリクエストに応じて返却することしかできなさそうだから。それは不便なんで、WebクライアントからのリクエストによってWebサーバー側でプログラムを動かしてHTMLをその場で組み立てて返却するという仕組みが考えられた。それがCGI(死語)。CGIは非効率なんで、いまはCGIっぽいものが世界中のサーバーで動いている。

Common Gateway Interface – Wikipedia

静的なHTMLファイルをサーバーから返すのではない、要求によって動的にHTMLを組み立てるという概念はDHTML(Dynamic HTML(死語))と呼ばれる。

あとCookie。

HTTP cookie – Wikipedia

Webサーバーは概ねリクエストにレスポンスを返すことしかできないんで、Webサーバーに複数のWebブラウザがアクセスしてきたときにそれが誰からのリクエストなんだか判別することができない。それは嫌なので、取り決めとしてWebサーバーから返ってくるCookieという文字情報を次回以降のリクエストにそのままくっ付けるという仕組みが考えられた。そうすればCookieによってWebブラウザをどのユーザーが使ってんだか判別することもできるわ。だから例えばCookieが盗聴されると他の人間が自分に成りすませるし100万円とか盗まれたりする。初期のCookieはセキュリティがグッチョングッチョンのドピュドピュだったんで引き締めるように仕様が進んでいる。

◆JavaScript

かつてのHTMLはハイパーテキストでしかなかったんで、ページ間の移動とフォームの入力くらいしかできなかった(語弊あり)。でも、文書を見せる以上にWebではいろいろな事が出来たい。出来たいのでブラウザ上で動作するプログラミング言語が開発されたりしつつ巡り巡ってJavaScriptとしてブラウザに実装されている。

JavaScript | MDN (mozilla.org)

JavaScriptを使うことにより通信や画面上の要素の能動的な操作が可能になるのでWebページの表現がリッチになる。詳しくは説明しない。

WebサーバーからHTMLと一緒にJavaScriptを受け取り、ユーザーのブラウザ操作やら何やら(イベント)に対応してJavaScriptを動かすことができる。JavaScriptはHTMLのTag(の抽象的なハンドルであるDOM)の操作と通信ができる。だから画面遷移せず様々な機能を実現することができて画期的だった。その画期的だった考えをAjax(Asynchronous JavaScript And XML(死語))と呼ぶ。死語が多いな。

最強のWebサイトを想定したとき、そのページにはJavaScriptは最小限でしか存在していないだろうとも思える。いいWebサイトとはどんな貧弱な端末に対してでも高速に表示できるサイトであるからして、JavaScriptの出番は小さい。いまんところゼロにはしづらいけど。

JavaScriptはブラウザの上で動くもんだが、それをブラウザの外で動かしたいという人間もいた。そいつらがNode.jsというJavaScript実行環境を作成したため、Webサーバーの側もJavaScriptで記述できるようになった。ブラウザのJavaScriptとNode.jsのJavaScriptがそれぞれ別に進化してしまったんで、互換性が取れなくてまた不幸が起こったりしていた。最近は共通仕様が定められてきてるゆえ乖離が埋められつつあるけど、JavaScriptは何かと不幸を起こしがち。

▼Wasm

いままでブラウザ上で直接的に実行できるプログラミング言語はJavaScriptだけだったんだが、あんまり美味しくない。細かい制御できねぇし設計上パフォーマンスも出し切れないし無駄にメモリも食うし。だから高速に細かく並列で動かせるプログラミング言語が必要とされ、Wasm(WebAssembly)が開発された。HTMLもCSSもJavaScriptもプレーンテキストにより記述できたが、Wasmはパフォーマンス重視であり、コンピュータに読解しやすいアセンブリ言語っぽく記述される。

Wasmは後発の仕様であるから、クソから生み出されたJavaScriptよりか大分慎重に設計され、それゆえにWebとは疎結合。つまりブラウザに依存しないので別の場所で動かしやすい。言語仕様がハードウェア非依存として作られてもいるからポータビリティが高い。名前にWebって付けるべきじゃなかったと思うほどにどこでも動かせる。逆にブラウザから動かすのには一癖あったりもする。

Wasm(とWasmランタイム)はそれ自体でWebサーバーソフトウェアを動かすことができる。それどころかWasm上に仮想マシンを立てることすらできる。どういうことかと言えば、ブラウザ上でサーバーを動かすことができるんで、そのWebブラウザ上に立ってるWebサーバーにWebブラウザ上のWebブラウザからアクセスすることができる。なんだかこわい。

◆Webアプリケーション

JavaScriptが動かせるようになったWebは、それ自体がアプリケーションになっていけた。クソデカ電子辞書から電子辞書以外のこともできるアプリケーションにもなった。アプリケーションになったにせよHTMLという文書とCSSからなるスタイルで画面は構成されている。

おまえ「文書どころじゃなくWebでゲームが動いてた気がするけど」

そうね。動いてます。

  • HTMLゲーム
    • HTMLとCSSとJavaScriptをガチャガチャと無暗に頑張って作られたゲーム。
  • ゲーム

Webと頭に付いているWebGLとWebGPUが今でも使える機能で、Webの標準。ついてないものは非標準で今は使えない。かつて(最近)までの貧弱Webでは音声すらまともに再生できなかったんで、Flashやら使ってインタラクティブなWebサイトを作成せざるを得なかった。WebGLが登場してからゲームは暫くの間それで実装されていたし今も大活躍しているが、扱いづらい上に堅牢ってこともない。最近WebGPUが生えてきたので誰しもが移行するだろう。

HTML5(死語)のCanvasというTagにより四角くスペースをとって、あとはもうそこにゲームを描画しちゃえばいいのよ。

◆なんでブラウザで画像とか表示できんの?

そのブラウザがその画像フォーマットに対応しているから。

HTML の画像 – ウェブ開発を学ぶ | MDN (mozilla.org)

ブラウザが対応していない画像は表示できない。AVIFという死にかけの画像フォーマットはChromeで表示できるけど、JPEG XLというナウい画像フォーマットはChromeで表示できない。Firefoxでは2024年4月現在BetaビルドでJPEG XLを表示できるし、Safariでも17から表示できる

そのブラウザが対応していない画像フォーマットであっても、その画像データを誰かのライブラリとか自分で書いたプログラムによりデコードしてCanvasに描画すれば表示はできちゃうものではある。

mp3とかoggとかの音声も同じ話。mp4とかwebmとかの動画も同じ。

◆現況と名称の齟齬

▼HTML

HTMLはもはやハイパーテキスト以上の表現力を持っているので名前が変…ということでもない。HTMLだけだとかなり文書であり、CSSで見た目を弄ったりJavaScriptでDOMを弄ったり通信したりしないとWebアプリにはならない。

Web世界は仕様の分離が上手です。HTMLもCSSも双方の依存度が小さく設計してある。ただし、JavaScriptは歴史的経緯から分離が巧くやれてない部分が多め。

▼HTTP

HTTPはもう名前が即してない。ハイパーテキスト以外もTransferしまくっていて汎用性がかなり高いんだもの。これはWebProtocolと言ってしまって差し支えない。HTTPにはバージョンがあるんだけど、どっかのタイミングで名前変えちゃえば良かったんじゃないかなと思います。

HTTP の進化 – HTTP | MDN (mozilla.org)

HTTPの発達はビンビンなので、HTTP上で様々なプロトコルの代用ができるようになってもいる。全部HTTP上で動かせばいいじゃん世界になりつつある。

◆Webの技術をご家庭に

今後の自然な流れとして、Web技術はWebから漏れ出す。なぜかと言えばWebを構成する各仕様がWebから巧く分離されていて他に流用が効くから。そういうWebの技術を利用したネイティブのアプリケーションやサーバーがブラウザを離れて世の中を席巻していく。その最後のピースはWasmだった。

いま、例えばWindowsとかMacとかLinux系とかのOSでPCが動いているかもしれんが、そのOSをWasm(+WASI)で記述できる。コンテナ技術もWasmが置き換える。適したランタイムがあればラズパイの上でもWasmが走るだろう。つまり組み込み機器の上でRTOSよろしくWasmのコードが走る。Webゲームを作ればそれがPCでもSwitchでもPS4でもXboxでもとりあえず動く。ExcelでPythonを動かすとかいうクソ馬鹿げた狂気の沙汰も「Wasmあるやん」で封殺できる。30億のデバイスで走るJavaのVMをWasmが食いちぎり殺す。そういう世界になっちゃう。

と俺は勝手に妄想している。遠からずそうなるんじゃないの。

◆なんでブラウザは複数あるのか

みんなでひとつのブラウザを作ればいいじゃん?と考えてしまいがちだが、Webの独立性を担保するためにブラウザベンダーが複数必要なのかもしれない。

例えばChromeしか世の中になかったらWebは今よりももっと不公平で消費者に厳しい存在になっていたかもしれない。だから複数の団体や企業が集まってそれぞれ標準を提案したり標準に準拠したりしつつブラウザを実装している。こだわりがないんならなるべくFirefoxを使おう。余計なことをしないから今はChromeより強い。俺はBraveメインでサブにFirefoxを使っている。

◆結

書くの疲れた。Webについてなんとなくニュアンスがわかっただろうか。わかったからといってどうするというのか。我々にはエロ動画を見ることしかできないのに。

興味を持ったワードがあったら、そこから色々調べて自分で何かを作ってみればよいでしょう。無料で莫大な情報にアクセスできてしまう時代にあなたは生きてます。WebがあるのにWebをやれないんならその責任はあんたにある。非合法サイバネ手術してインターネットに脳のシナプスを直結してIRCコトダマ空間で電子オーガニック・スシを食え。オタッシャデー!!!

たぶん違法アップロード