現代のWebで、今もっとも「バカげた」技術、HTTP Clock 。
HTTP Clockを支える技術 ACT.1 では、JavaScriptがなくても ストリーミングHTML と CSS により、時計がつくれることを紹介しました。
しかし、 CSSが使えれば、多くの事ができるのは当然です。
では、CSSを使わない方法を考えてみましょう。
HTTP Clock - SVG Edition ¶
SVGとは？ ¶
ベクター画像形式であり、<rect> で四角を描画することだけにとどまらず、 <text> でテキストを描画することも出来ます。
ストリーミングできるの？ ¶
通常SVGは、Webブラウザによって最後まで受信されてから描画される為、HTMLの様にストリーミングすることは「できません」。
しかしながら、HTMLの中に <svg> で直接埋め込むことで、「じわじわと」描画することが出来ます。
前の要素をどうやって隠す？ ¶
HTTP Clockに於いて大切なのは、前の要素が「なかったこと」になること。
いかなる手段を使っても良いわけですから、単に時刻を上から <rect> で塗りつぶして隠してあげればよいのです。
<html>
<body>
<svg viewBox="0 0 320 120">
<!-- 背景を黒で塗りつぶし -->
<rect x="0" y="0" width="320" height="120" fill="black" />
<!-- 時計を描画 -->
<text x="160" y="40" fill="white">1970-01-01 09:00:00</text>
<!-- ここで激烈にサボタージュ！ -->
<!-- 上から黒で塗りつぶし -->
<rect x="0" y="0" width="320" height="120" fill="black" />
<!-- 更に上に時計を描画 -->
<text x="160" y="40" fill="white">1970-01-01 09:00:01</text>
SVGは原則、あとから来たものが上に描画されますから、これで完成です。
CSSを使ったものより簡潔ですね。
SVGはズルくね？ ¶
と思ったそこのあなた！実は、私も全く同じことを考えました。
HTML「だけ」で、前の表示を「なかったことにする」方法…。
私は数日間考え続けました。朝起きて HTTP Clock …、ご飯を食べながら HTTP Clock …、ひたすらに考え続けました。
そして思いついたのが…
HTTP Clock - SELECT Edition ¶
そう！HTMLのSELECTタグ！
<select>
<option>Option. A</option>
<option>Option. B</option>
<option>Option. C</option>
</select>
プルダウンメニューの、アレです。
これではデフォルトでは何も選ばれず、空白のプルダウンメニューが表示されてしまいます。
以下の例ではどうでしょう。
<select>
<option>Option. A</option>
<option>Option. B</option>
<option SELECTED>Option. C</option>
</select>
Option. C に SELECTED 属性がついている為、最初に表示される選択肢は Option. C です。
では複数の SELECTED がストリーミングされる場合はどうでしょう。
<select>
<option SELECTED>1970-01-01 09:00:00</option>
<!-- 1秒間サボタージュ -->
<option SELECTED>1970-01-01 09:00:01</option>
<!-- 1秒間サボタージュ -->
<option SELECTED>1970-01-01 09:00:02</option>
<!-- 1秒間サボタージュ -->
実験したところ、後から来た SELECTED が優先され、動的に表示が更新されました！(Safariを除く。)
「複数の SELECTED がある場合、最後の SELECTED が優先されるべきである」とHTML仕様書にもありますので、この挙動は仕様通りである訳ですね！
If element’s multiple attribute is absent, and two or more option elements in element’s list of options have their selectedness set to true, then set the selectedness of all but the last option element with its selectedness set to true in the list of options in tree order to false.
https://html.spec.whatwg.org/multipage/form-elements.html#selectedness-setting-algorithm
(仕様書を発掘していただいた RyotaK さん、ありがとうございます。)
え、Safariを除く？ ¶
なんと、Safariでは、<select>タグに突入した時点で、描画が一時停止されてしまいました。
残念。
そもそも、HTMLが「じわじわと」描画されなければならない、なんてことはありませんからね。
HTMLが「じわじわと」描画されることを期待していること自体が、おかしいのです。
これは仕方ないことなのです。
なんとかHTMLストリーミングへの依存を辞めたいところですが…。
次回！HTTP Clock ACT.3！ ¶
次回、HTML無しのHTTP Clock「HTTP Clock ACT.3 」。
お楽しみに！