倉金家ホームページ

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

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

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

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

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

　本当に使えないのだろうか、試してみよう。というわけで、ページの頭の宣言部分
を
と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でフレームが禁止されたのかとその対策、対応をちょっとは考えてみる必要もあるのではないだろうか。

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

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

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

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

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

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

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

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


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

．．．で、 で　き　た ぁ　！

！！成果発表～！！

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

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

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

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

．．．というわけで、

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

  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)
久々に擬似フレームプログラムを改良。新しいのを掲載しました。改良したのは以下のような点。

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