倉金家ホームページ

趣味の部屋／ホームページ余話

HTML5への対応フレーム

2011年03月10日公開(初期バージョン1.00掲載)
2015年07月08日更新(最新バージョン1.50掲載)

　HTML5では従来あったフレーム(frameset+frameタグ)が廃止されてしまいます。今までこのホームページはフレームを使って表示していましたが、この際HTML5対応にしようとフレームの代替にインラインフレーム(iframeタグ)を使うことにしました。
　現在でも画面の左右を区切って案内などを記した部分を設けているページもありますが、ページ全体でスクロールされてしまい利用しにくい、幅の変更ができないなど従来のフレームに比べていまいち不満な部分もあります。で、従来のフレームのような動作ができるようにしてみたいと思います。
　従来のフレーム(framesetタグ)を使わずその表示や動作をまねたいわゆる疑似フレームということですが、従来のフレームと同等の表示ができ、さらには従来のフレームにない機能の追加やオリジナルデザインなども可能です。

まずはフレームに関して。

　今のところHTML5では旧来のいわゆるフレームタグ(frameset,frameなどのタグ)は廃止され、使用禁止ということになるようだ。(禁止という表現は正しくないかもしれないが、仕様から抹殺されるとすれば実質的にはそういうことだろから、以下禁止と表現。)

　もしそうなれば、世の中べたページのブログばやりだしホームページ作成ソフトもいずれ従来のフレームはサポートしなくなるだろうから、仮にHTML5でも使えるインラインフレーム(iframe)を使うにしてもプロかそれに準ずる技術を持った人か、あるいは私のような暇人でないとフレームページなどはつくれなくなってしまう。
うまく使えば人間にはとても読みやすいページを作れるにもかかわらず非常に残念なことだ。

　このサイトでは左に記事のタイトルとその記事へのリンク、右に記事のページを従来からフレームを使って表示している。これが一番わかりやすく、見やすいように思う。
　さらにはこのサイト→ふいちゃんの中国日記のようにページ数が多くなると(なんと3000ページ越え)、見やすさと作成・管理の容易さも含めてこれ以上いい方法が思い浮かばない。
　ナビのMENU(INDEX)部分だけを一つのページにまとめることでMENU部分ひいてはサイト全体の制御がとてもやりやすくなる。両方を同一ページに入れ込んだらとてもこうはいかない。
さらには統一的にサイトの中にさらにサイトを構築したり、昔の単独ページや表示法の全く異なるページを自由に取り込んだりと、サイト構築に資する自由度のメリットも大きい。

　ときにHTML5では従来のフレーム(frameset+frame)は実際どう表示されるのだろうか？

どうなるのか試してみよう

　本当に使えないのだろうか、試してみよう。というわけで、ページの頭の宣言部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
........

を

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
........

とHTML5の表記指定に書き変えて表示してみると、どのブラウザでも従来どおりフレームを使ったページがちゃんと同じように表示される。もちろんフレームの幅変更等も従来どおり機能する。
MSIE, Firefox, Google Chrome, Opera, Safari, SeaMonkey, LunascapeすべてOK。（ただしいずれもWindowsXP版で現時点(2011年3月)での最新バージョン。）
　HTML5の仕様ではframeset,frameなどのタグはなくなるが、一方ブラウザへの指針では従来の機能は継続してサポートすべしとなっているようだし、今まで表示されたものが表示されなくなったらそのブラウザはだめだと人は離れてしまうだろうから現実問題としてはなくせないのだろう。実際に平然とやってしまっている人もいる。

じゃあどうしょうか

ということで考えたら、いくつかの案が浮かんだ。

１．	実際にはHTML５でもframeset+frameタグは使える(動作はする)ようなので、かまわずこのまま使う。 (仕様には準拠しない。)
２．	トップページだけHTML4でframesetを使いフレームを定義、フレーム内のページはHTML5。 (いちおう仕様に準拠。)
３．	HTML5でframeseやframeタグは使わず同等の表示ができるようにがんばってみる。 (仕様に準拠。)
４．	divなどでナビゲーションと記事内容の分割はするが一枚ページとして表示させる。 (仕様に準拠。)
５．	分割は一切やめて各記事一枚ページでのみ表示する。トップにでもナビゲーションページを別途用意。 (仕様に準拠。)

で、ちょっと考えてみる。

１．	のかまわずHTML5でフレームを使うはのちょっと危険。
	長いレンジではHTML５完全対応と銘打って(HTML5宣言では)使えなくなる可能性もあるし新しいブラウザが出たらはなから使えないかもしれない。
	それに法律や規則はもとより世の中の約束事は非常識なものでない限りなるべく守るべきだろう。
２．	のトップページだけHTML4のフレームページにするのは最も楽。
	でも簡単すぎてしょっぱなからはこれでやる気はしない。最後の手段。
３．	のHTML5に準拠して同等の表示をするのは今後のことを考えると、できるならやりたいところ。
	ただ少々苦労するな。iframeタグとjavascriptを使うことになると思うが。
４．	のdivなどを使って一枚ページに表示するのはプログラムをちょっと変えればできるだろう。
	ただ(普通にやると)メニュー部分と記事が同時スクロールされることになりまた上に戻らなくてはならず、これがめんどうでとってもきらい。
	それに一枚のページにごたごたといろんなことを書き込まれては携帯の小さな画面で見る人や検索ロボットさんにも読みにくかろう。
５．	はフレームは一切使わずにということだが、別の記事を読むにはいちいちページを切替ねばならず読みにくくなるのは間違いない。
	一方フレーム用に作ったページをトップページで振り分けて個々に表示するのは簡単にできるので、少なくともフレーム非対応ブラウザに応用するにはいいだろう。

といったところだが、どれで対応するかを決める前に、なぜHTML5でフレームが禁止されたのかとその対策、対応をちょっとは考えてみる必要もあるのではないだろうか。

　言われていることは、
①ユーザビリティーが悪い
②検索エンジンとの相性が悪い
というのがもっとも大きい理由のようだ。

①ユーザビリティーが悪い？

　．．．これについては、はっきり言ってもっともなことだ。
思えば昔フレームが使えるようになった頃、皆こぞって必要のない部分にまで過度にフレームを使い、さらにはnoframesタグでフレーム非対応のブラウザでも同等の内容を取得できるようにしておくべきところに多くの人の入れた言葉が、「フレームの使えないブラウザではご覧になれません」．．．
これでは禁止になるのはしかたないなあ。…実は自分も初期の頃見様見まねでやってしまっていた！
私はそのころちょうどパソコンを買い換えたからこの被害にはあわなかったが、そうでなければきっと腹がたったろう。いまでも時折あるようだ。

フレームの使えるブラウザに対してのみフレームを使うというのが一番正しい対応だろう。

　また、フレーム間制御でページを切り替えたりするとその情報は(やりようによっては)アドレスバーのURLには反映されず、その場合ブックマークしても必ずそのページに戻れるとは限らない。
ただしこれはフレームを使うせいだと勘違いしてる人も多いようだが、同じURLに対して内容の変化する、いわゆる動的なページでは常に起こりうる現象で、要は運用の問題。フレームでは実はどちらでも自由にできる。
　フレームを使ってないブログでも検索サイトから行ったらその記事は古いためか、すでに表示されず、タグも付けられておらず、検索オプションもないので記事を見つけられないということだってよくある。

　必要ならトップページから書き変えてアドレスバーにページ情報を反映させればいいだけだが、あるページだけでなくサイトのトップから見てほしいなどでわざとページ情報を隠したい場合などもあり痛し痒しといったところ。(このサイトはどちらにでも簡単に切替できるようになっており、最近記事数が増えたので表示するようにした。)

よって、フレーム(あるいはこれにに類する表示)を使うとしても、
フレーム表示可能なブラウザに対してのみフレームを使って表示する。
なるべくページURLを表に出すようにする。
ということで全く問題にはならないだろう。

②検索エンジンとの相性が悪い？？

　．．．おそらくこれはフレームが出たての頃の話で、今の主要な検索エンジンはフレームにも対応してるようだ。(検索エンジンを甘くみてはいけない。)
でももしフレーム内の記事内容がページそのものと一体とはみなされないとすれば検索上少し不利なのかもしれない。これを相性が悪いと言うなら確かにそうだが。
　しかしながらフレームを使う前提でナビページと記事ページをしっかり分離しておいた方がちょっとした工夫でフレーム非対応のブラウザや検索エンジンにも読みやすいように個別にも表示できるので、全く問題にはならないか、むしろ有利だと思う。(アクセスの判定と表示の振分参照)
現にこのサイトにくる人のほとんど(99.9%以上)は検索サイトからだし、検索サイトにはなぜだか意外と高順位にランクされていたりもする。

　私の見解では過去の経験と実績もふまえ、①の対応とあわせてこれも全く問題にはならない。
→ 検索サイトに上位表示してもらう参照。 …2012.7.24記事追加

(2016.2.7 追記)
最近のgooglebotはjavascriptで書いたHTML5用のこのフレームページを読んで中の記事にしっかりアクセスしてきます。少なくともGoogle検索に関してはフレームを使ったから、あるいはjavascriptを使ったから検索されないなどという心配はしなくていいようです。もっともGoogleはブラウザだって作ってるんだから別段不思議でもないか。最近の検索エンジンの進歩はすごいな。
一方MSIE6とかMSIE8とかを騙っている得体のしれない情報収集ロボットは相変わらず中の記事にはアクセスできてはいません。

　さらに言えばホームページは本来人間が見るべきためのもので、それを犠牲にして人間より先に検索ロボットが読みやすいようにだなんて本末顛倒のようにも思うし、はたまた世の中のすべての情報を集めようという某国情報収集機関の思惑が働いてるのではなどと勘ぐったりもしてしまう。

チャレンジ！チャレンジ！

　上記のようなことを考えると結局悪かったのは<frameset>タグそのものの仕様あるいは実装であって、決して<frameset>が実現していたユーザインターフェースが悪かったわけではない。むしろ人間向けの優秀な表示方法だったと言えると思う。
そうすると<frameset>や<frame>を使わずに似たような表示ができればベストだなと思われてくる。
３の「frameset,frameタグは使わず同等の表示」というのにしよう！これなら文句はないだろう。

　で、例によってまずは検索してみる。でもフレームが使えなくなる、困ったねーといった話ばかりで、２のトップページで従来のHTML4を使ってフレームを定義してあとはHTML5でその内容を表示するという以外の具体的解決事例が全く出てこない。
まだだれもやってはいないらしい。
それなら年寄りのぼけ防止も兼ねてつくってみよう。どうしてもだめなら２のHTML4とHTML5の組み合わせでいけばいいし。
．．．というわけで、チャレンジを開始したのでした。

　基本的にはインラインフレームのiframeタグを使います。これは従来のフレーム(frameset+frame)で複数分割されたフレームのうちの１つのframeとほぼ同じで、機能が少し限定されますのでそこを簡単なjavascriptで補うことにします。

　もちろん従来のフレームの機能、すなわちフレームサイズの変更、フレームごとのスクロール、フレーム間制御などは従来どおりできて、さらにはフレーム内に表示されるページには一切手を加えることなく従来と同じように表示されることが前提です。

　また、小さい画面でも記事が見やすいように、一発でメニュー画面を縮小するボタンもつけてみましょう。どうせやるならさらに便利にならないとおもしろくありません。

．．．．で、この間ぱそぱそとコーディングとテストを繰り返すこと数日．．．．

つぶやきの記録

まずはターゲットブラウザはFirefoxで開始しよう。最も標準的だから。

bodyでイベントキャッチできない。そうか、イベントがフレーム内ページのほうに落ちてしまうんだ。イベントキャッチ用divをつくってイベントをキャッチしよう。
あれ、キャッチできないブラウザがある！なんでだ？．．．やあっとわかった。内部がまったく空だとだめなんだー。目立たないよう何か入れておこう。

画面の外にいっちゃった。戻せない！制限と余裕をつけよう。

ブラウザによって区切り線の見え方がすこしちがうな。

すべてのブラウザがHTML5に対応しているわけではないな。
HTML4の指定方法でないとだめなのもある。HTML4の書き方も残るが仕方ないか。

ブラウザの寸法を変えたとき従来のフレームのように画面書き換えはしてくれないのかー。

従来のフレームと変わらないとみんな気がつかないから面白くないな。
一発縮小ボタンをつけてみよう。便利かもしれない。

歳のせいか頭が全然まわらなくなってきてる。
でももう一息、すべてのブラウザで同じスクリプトで動くようがんばろう。

いろんなブラウザでテストするのは疲れる。
　MSIE, Firefox, Chrome, Opera, Safari, SeaMonkey, Lunascape, Sleipnir

．．．で、できた。

ついでに上下分割版もつくっておこう。
．．．．

．．．で、で　き　たぁ　！

！！成果発表～！！

　すでにこのページがそのHTML5＋インラインフレーム、すなわち<iframe>タグを使って表示されているかもしれません。

　かもしれませんと言ったのは、今のところ動作が確認できたバージョン以上のPC用ブラウザに対してのみこの表示をしているためで、それ以外は従来のHTML4によるフレームで表示させています。(さらに携帯端末では全くフレームを使わない表示になっていると思います。…携帯もってないので確認できない。)
　確認したブラウザは、PC用の、MSIE 7, Firefox3, Chrome9, Opera9, Safari5, SeaMonkey2, Lunascape6, Sleipnir2。
<iframe>は昔からあるのでこれ以下のバージョンでも問題ないのかもしれませんが、残念なことに古いバージョンのブラウザがないためもう動作確認ができないのでした。

ソースコード公開

　「HTML5フレーム禁止対抗スクリプト」と称して、ソースコードを公開いたします。
．．．とは言ってもブラウザでトップページのソースを見ればわかるんだけどね。
ただこのサイト特有の設定などは除いて、ついでなので上下分割版もつくってさらに各エンコーディングにも変換して使いやすくしておきました。

　左右版と上下版を組み合わせて、フレームの中にフレームを入れていけばいかようにも分割はできるとは思います。(ここでテストできます。)
　Ｔ型分割版やΠ型分割版も作ることは可能と思いますが、特に使う気もないのでやりません。それに単純な縦横の分割を組み合わせた方が動的な対応もできて良いような気もしますし、最近のパソコンのディスプレーはテレビの画面に合わせてかやたら横長になっているようなので左右分割版で充分だと思います。

．．．というわけで、

←まずは一例として左右および上下分割版UTF-8のコード。
　従来のフレームにはない余計な機能をつけたりしたので少し長くなってはいますが。
コードテキストをそのまま出力します。
文字化けしましたら文字エンコーディングUTF-8を指定してください。
ブラウザあるいはパソコンの改行コードの違い?により改行されない場合があるようです。
その場合ソースを表示すればちゃんと見れるかもしれません。

　以下は作成したコードの.htmlファイルそのものです。
なので普通にクリックするとこのフレームの中にまた同じページが表示されます。その中でまたクリックすると、．．．試して見てください。
(携帯端末ではうまく表示されないかもしれません。携帯端末はもっていないのでわからない。)
　但し制御用のCookieが個別には設定されておらず共通なので、フレームを２つ以上開いて画面サイズ変更や記事指定などの操作をするとお互い干渉してめちゃくちゃになります。見るだけ！(さわっちゃだめよー見るだけよーなんて昔どこかで言われたな。)
元に戻すには再読み込みするか、「戻る」ボタンでお戻りください(ブラウザによってはうまく戻れない場合もあるようですが)。

  2011年3月10日 V1.00 …いちおう動作確認した最初のバージョン。
  〜この間ブラウザによる違い修正、バグ修正、改良など。〜
  なるべく最新バージョンを掲載しておくようにします。

  2015年7月7日 V1.50(TANABATA Version)

左右分割版(UTF-8)	左右分割版(EUC-JP)	左右分割版(Shift-JIS)

index5LRF-UTF8.html	index5LRF-EUCJP.html	index5LRF-SJIS.html

上下分割版(UTF-8)	上下分割版(EUC-JP)	上下分割版(Shift-JIS)

index5ULF-UTF8.html	index5ULF-EUCJP.html	index5ULF-SJIS.html

　ダウンロードするなら右クリックで「対象をファイルに保存する」「名前をつけてリンク先を保存」などでファイルを保存する指定をすればダウンロードできます。(Windowsの場合です。他はそれなりに。)
　あるいはダウンロードの小部屋からダウンロードできます。他のお薦めダウンロードも一緒に置いてあります。

　使う際には慣例により名前をindex.htmlあるいはindex5.htmlなどと変え、必要な設定をした上でサイトに設置してください。

　簡単にメリット、デメリットをまとめておきます。

メリット：
(1)	HTML5の仕様に準拠。大手を振ってHTML5の宣言ができる。
(2)	従来の<frameset>と比べ独自の動作や機能の追加、デザインなどが可能(特にやってないけど)。
デメリット：
(1)	ブラウザによっては従来のフレームページ、あるいは単独ページに行くよう振り分けが必要。フレームの使用可否について言えば従来のフレームを使っても結局同じことだが、振り分けるのはフレームを定義したトップページのみなので別にどうということもない。で、アクセスの種別も判定して振り分け。 →アクセスの判定と表示の振分 …(3)追記 2011.8.31 通常ブラウザ名をかたったあやしい情報収集ロボットには(検索ロボットとして登録してフレームを解除してやらないと)記事が読めないようだが、不審なアクセスよけにはちょうどいい。ある意味これはメリットとも言える。
(2)	従来のブラウザ組込のフレームに比べフレーム区切りの移動の動作が少し遅いが、よほどひどい分割をしない限り変える人はまずいないから関係ないかも。ページのスクロール動作は変わらないようだ(こちらはブラウザ組込の機能だから？)。
(3)	印刷については最初ちょっと心配したが従来のフレームと同様右クリックでのフレーム選択印刷もOKのようだ。ブラウザにこの機能がなければ別ウィンドウに該当フレームだけ表示させればいいので、私は親切にもメニューに「別ウィンドウに表示」というのを設置しておいた。

といったところでしょうか。

　試してみて良かったら、あるいは改良したよなどの投稿をいただけるとうれしいです。
　なお私はjavascriptは全く得意ではありませんので、もしjavascriptがお得意でしたらご自分でチャレンジしてみるのもよろしいかと。よりエレガントなのが作れると思います。たいして難しくはありませんでしたが各ブラウザでテスト、確認、調整するのにはけっこう時間と労力をくいました。

(追記 2012.7)
　divとjavascrriptを使ってもほぼ同じようなことができますが、iframeを使うよりだいぶ複雑になりそうです。(htmlファイル名を指定してあとはブラウザ任せというわけにはいかない。)
　例として私も使ってるWebShareというファイルブラウザソフトがdivとjavascriptを使ってフレームのような画面分割をしています。ソースを見ればわかりますがトップでは単に入れ物としてのdivのコンテナを定義しているだけで、その中身はほとんどphpとjavascriptで書き出しています。(さまざまなユーザアクションには応えられるがとてもたいへん。でもまさにphpとjavascriptプログラムの宝庫です。)
参考： → ファイルブラウザWebShare

(追記 2015.7)
久々に擬似フレームプログラムを改良。新しいのを掲載しました。改良したのは以下のような点。

１．	片方のフレーム(ここでは左のメニューフレーム)を最初非表示状態から開始できるようにしました。
	検索サイトから来てそのページだけ見て帰る人が多いので無駄な表示はしないことにします。
２．	そのかわりフレームの表示非表示切替タブを目立つようにしておきました。
３．	ユーザのフレームの表示非表示、サイズの変更を極力記憶、再現するようにしておきました。
４．	フレームサイズの変更がしやすいよう小改良しました。