2018-06-27

君は <meta http-equiv="page-enter"> を覚えているか

それは IE 4〜5.5 が全盛の頃の話…。

昔の「ホームページ」は、ページ遷移の時にワイプやフェードインといった効果を付けていたのだ。

今回は、今は亡き 「Page-Enter」と「Page-Exit」によるページ間トランジション の回顧話。

Page-Enter とは

Page-Enter とは、そのページを開いた時に発生するトランジション効果を設定できる、meta 属性のこと。

以下のような meta 要素を head 要素内に書くと有効になる。

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)">

<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.8,Transition=23)">

blendTrans() の方はフェードイン固定。revealTrans() の方は Transition= 以降の数値を 0 〜 23 のいずれかに指定することで、23種類のトランジション効果を選択できた (23 は 0 〜 22 の効果をランダムに使用するので、種類としては23種類)。

Page-Exit とは

Page-Exit とは、Page-Enter とは逆、そのページから去る時の効果を指定できる。

書き方は Page-Enter とほぼ同じ。

<meta http-equiv="Page-Exit" content="RevealTrans(Duration=2.500,Transition=6)">

トランジション効果は画像などにも使えた

トランジション効果は、CSS の filter プロパティを使って画像の読み込み時などにも指定できたようだ。

<img src="image1.gif" style="filter: blendTrans(Duration=1.0) revealTrans(Duration=1.0, Transition=3);">

こうした効果は、HTML を直接書かなくともホームページビルダーなどで設定できたりしたので、使っていた人も多いのではないだろうか。

当時の解説サイト

当時の解説サイトで現存しているモノを適当にリンクしておく。

参考 : トランジション
参考 : HTMLタグ - メタタグでトランジション効果を出す/ホームページマスター
参考 : トランジションのHTMLタグ、解説とサンプル
参考 : HTML
参考 : ページの切り替方法
参考 : "ÁŽêŒø‰Ê

IE のみの機能

この機能は IE4 から登場した機能で、IE5.5 ぐらいまではよく使われていた。

もちろん NN (ネスケ) では動作せず、CSS の filter プロパティがそうだったように、完全に IE の独自拡張だった。

IE8 までは対応していたようだが、IE10 以降は IE 自身も Page-Enter・Page-Exit のサポートを止めたようで、現在この効果を確認する術はない。

参考 : META http-equiv="Page-Enter"について質問です。 - ... - Yahoo!知恵袋

こういうちょっとした動きを与える仕組みを総称して、当時は Dynamic HTML (ダイナミック HTML)、略して DHTML と呼んでいた。大抵は JavaScript による DOM 操作だったりしたのだが、このページ間トランジションは meta 要素で実装するので、「ダイナミック HTML」の呼び名にふさわしい技術だと思う。

Page-Enter と Page-Exit の実行順序

Page-Enter と Page-Exit の実行順序はこうだ。

「ページ A」には Page-Exit 効果、「ページ B」には Page-Enter 効果が指定されていたとする
ページ A で「ページ B」へのリンクを押下する
ページ B のコンテンツを全て読み込む
ページ B の表示の準備ができたところで、ページ A の Page-Exit 効果が発動する (ページ A における onUnload 相当のタイミング)
Page-Exit 効果が終わったら、ページ B の Page-Enter 効果が発動する (ページ B における onLoad 相当のタイミング)

要するに、ページ A から見て、遷移先のページ B の内容が全て読み込み終わり、裏側でレンダリングが完了したところで、初めて Page-Exit および Page-Enter トランジションが発動するのだ。

このことから容易に想像が付くと思うが、遷移先ページが重たいと中々遷移が行われないのだ。

この特殊効果には、ひとつ問題があります。
ページ全体の読み込みが完了しないうちは効果が始まらないのです。

ですので、重いページに使用すると
いつまで経ってもページが表示されない
などということになりかねません。

また、 http-equiv=page-exit を使う場合で
ジャンプ先のページの容量が大きい場合には、
いつまで経っても他のページにジャンプできない
ということになってしまいます。

使用するページの容量などに注意してください。

参考 : 特殊効果を使う

Fajax : Fake Ajax

このトランジション機能は、ページ遷移時に動きを付ける、という目的だけでなく、ページが遷移したように見せない方法としても使われていたようだ。

例えば、「フォーム送信した情報が同ページの下部に追加表示される」ような動きを付けたい場合、今となっては Ajax 通信して appendChild() でもすれば良い話だが、当時は非同期通信なんてなかったので、必ずフォーム送信による画面遷移が発生していた。

ページ遷移が発生すると、手前のページが消え、空白の画面が表示されてから、次のページが表示される。このチラつきをなくすため、このトランジション効果を利用するのだ。

すると、遷移後のページの準備ができるまでは手前のページを表示したままレンダリングをブロックしておき、素早くトランジション効果を付けることで、あたかもページ遷移することなくコンテンツが動的に変化したかのように見せることができる、という寸法だ。

海外ではコレを Fajax、Fake Ajax と呼んでいたようだ。

It is known as Fajax (fake ajax).

For example, when submitting a form and the next page is mostly similar to the new page, the entire page isn't whited out and redrawn, it blends smoothly to the next (IE only).

参考 : What is the use of http-equiv="Page-Enter"? - CodeProject
参考 : 特殊効果を使う

当時この使い方は思いつかなかった。

ロストテクノロジー感がスゴイ

Page-Enter と Page-Exit についてはそれほど普及しなかったのか、marquee や blink と違い、サポートされている現行ブラウザが一つもないというのが面白い。

そして今の時代の技術では「2ページ間でアニメーション効果を付けながら画面遷移する」方法がなく、再現不可能な作り、というのも興味深い。

(もちろん、SPA で作ってコンテンツを差し替える時にアニメーションをさせれば同様な動き自体は実現できなくはないのだが、実際に2つの HTML ファイル間を遷移しながらアニメーションする方法はないはず)

HTML・CSS・JavaScript の役割の違いを考えれば、このメタタグがやっていたことはおかしなことなのだが、なんだかこの当時の「みんな頑張っている感」みたいなのが好きで、またこのトランジションを見たいなぁ、と思ったりする。