まほ〜のあいらんどけんきゅ〜

フレーム

1.編集画面等でフレームタグを挿入できないか?

HTMLでフレームを表示させるためには、ブラウザがbodyタグを読み込む前にフレーム定義のタグを読み込ませる必要があります。 iらんどでも当初は「ホームページタイトル」の中にフレームを定義するタグを挿入したり、styleタグを挿入して、次に来るbodyタグを無効化することによって、フレームの実現が可能でした。 現在でも、bodyタグが自動挿入されるHPスペースでは、headタグの中にフレーム定義の記述をすることによって、フレームの実現が可能なようです。(現在のブラウザではheadの閉じタグは軽視というか無視されているようです。) しかしながら、iらんどは「ホームページタイトル」にHTMLタグなどを挿入できないような仕様にしてしまいました。 HPタイトルに"[魔法のiらんど]"と挿入されるのを嫌う人がtitleタグなどを記述したために、Mil側で対策をとったようです。 現在のところ、iらんどのTOP編集画面にフレームのタグを記述しても、別にエラーにはなりませんが、bodyタグが先に読み込まれているためにフレームを表示することはできません。

2.JavaScriptで表示する。

それでは、JavaScriptを使って表示させることはできるでしょうか? 結論としてはできます。 以下のような外部ファイルを使います。

window.onload=function(){
	a='<html><head><title>まほ〜のあいらんどけんきゅ〜</title></head>';
	a+='<frameset cols="25%,75%" frameborder="0" border="0" framespacing="0">';
	a+='<frame src="http://ip.tosp.co.jp/GM/TosGm100.asp?I=purest00&P=0&CGP=1&NGP=3" name="m">';
	a+='<frame src="http://ip.tosp.co.jp/i.asp?i=purest00" name="f">';
	a+='</frameset></html>';
	document.write(a);
	document.close();
}

onloadのイベントハンドラを使って、いったんHTMLファイルを読み込んだ後に別のHTMLを上書きしてやろうというものです。 はっきり言って、かなり強引です。 ブラウザの戻るボタンが効かなくなってます。 戻るボタンを押すと、上書きしたHTMLファイルからひとつ前のファイル、即ちScript実行前の画面に戻り、そこでまたonloadが実行されてしまうので、なかなか戻れないわけです。 ブラウザの戻るボタンの脇には履歴を複数戻るためのボタンが設けられていますが、一応メニュー部分にフレーム解除のリンクを設ける必要があるでしょう。 いったん変数に格納してから書き出さないと、IEで読込みがストップすることがあります。(なぜかは不明) また、document.close()を入れないと、Netscapeで読込みが完了しないので、入れるようにしてください。

サンプル

3.別ウィンドウで表示

別ウィンドウでフレーム画面にリンクするのでよければ、 下記のソースを外部ファイルにして、<script src=〜></script>で呼び出せば比較的問題なくフレームが作れます。 他のHTMLファイルを用意する必要がないのがいいですね。 でも、当然JavaScriptが有効でなければ意味がないですけどね。

function Myfram(){
	Mywin=window.open();
	with(Mywin.document){
		open();
		write('<html><head><title>サイト名</title></head>');
		write('<frameset cols="25%,75%" frameborder="0" border="0" framespacing="0">');
		write('<frame src="左側URL" name="A">');
		write('<frame src="右側URL" name="B">');
		write('</frameset></html>');
		close();}
		}
document.write('<a href=# onClick="Myfram()">フレーム</a>');
サンプル

4.metaタグでフレーム画面に飛ばす。

サイトが引っ越したときなどによく使われる飛ばしタグを使って、自動的にフレーム画面に飛ばしてしまおうというものです。 この方法を使っているサイトは意外とあるようです。 具体的には

<meta http-equiv="refresh" content="秒数;url=フレーム画面のURL">

というタグをPC拡張エリアの最初の方に記述します。 拡張子偽装のHTMLファイルを画像倉庫にアップロードしたファイルですと、ブラウザによっては画像ファイルとして認識され表示されないので、iらんど以外のサーバーにアップロードしたHTMLファイルを用いるといいでしょう。

サンプル

5.インラインフレームの中にぶち込む

「JavaScriptがオフの状態でもフレーム画面を表示させたい。しかもiらんどのIDとURLをどうしても使いたい。」という場合には、いっそのこと他サーバーなどにUPしたフレーム画面ごとインラインフレームの中に丸ごと入れて、そのインラインフレームの部分を画面いっぱいに表示させてしまいましょう。 以下のソースはひとつの例です。

<body style="overflow:hidden">
<iframe src="フレーム画面のURL" width="102%" height="100%" scrolling="yes" style="position:absolute;top:0;right:0"></iframe>

<body style="overflow:hidden">のところは、<style><!--body{overflow:hidden}--></style>でも、もちろん構いません。 上のPC拡張エリアに書くことで、携帯とまったく違う画面を見せることができます。

サンプル(PCのみ)

6.インラインフレームの中にリンク先を表示

コンテンツの項目がそれほどの数ではなく、メニュー部分がウインドウの縦幅に収まるような場合には、インラインフレームを画面の片側に表示し、インラインフレームにname属性で名前をつけることにより、クリックしたコンテンツをインラインフレームの中に表示することができます。 ソースの例としては、以下のような感じです。 PC拡張エリアに

<body style="overflow:hidden">
<iframe src="最初に表示させるページのURL" name="名前" width="80%" height="100%" scrolling="yes" style="position:absolute;top:0;right:0"></iframe>
<base target="f">

と書いて、メニュー部分の最初に

<div style="position:absolute;top:10;left:10;width:20%">

等と書いて、携帯エリアにコンテンツを書いていく感じです。 <body style="overflow:hidden">がないと、スクロールバーが2本表示されてしまいます。 また、メニュー部分は下に多少の余白を取っておかないと、下のほうが表示されなくなってしまうので、注意が必要です。(閲覧者はいろいろなモニタサイズで見ています) もちろん右側いっぱいに表示する必要はないので、単に

<iframe src="最初に表示させるページのURL" name="名前" width="80%" height="90%" scrolling="yes" align="right"></iframe>

でも構いません。

サンプル

7.左右にインラインフレーム

インデックスの項目が多くなって、メニューが画面の縦幅で足りなくなったときは、いっそのことメニューもインラインフレームの中に入れて、二つインラインフレームを並べちゃいましょう。 ちゃんと名前をつけて、ターゲット指定してやれば、ちゃんとリンク先をもうひとつのインラインフレームの中に表示することができます。 ソースは以下のような感じです。

<body style="overflow:hidden">
<iframe src="左側に表示させるURL" name="m" align="left" width="25%" height="100%" style="position:absolute;top:5"></iframe>
<iframe src="右側に表示させるURL" name="f" align="right" width="75%" height="100%" style="position:absolute;top:5;right:5"></iframe>
サンプル

8.まとめ

フレームは自分のサイトを閲覧するときには便利なものですが、他人にとっては必ずしも便利とは限りません。 サイト内にたくさんのコンテンツがあって、そのうちの多くを短時間で閲覧したい人が管理人以外にどのくらいいるかが問題でしょう。 もちろん管理人専用のフレーム画面があってもいいと思います。 しかしながら、iらんどは携帯用のHPスペースでもともとフレームには対応していません。 ですから、できれば別サーバーにフレームを表示させるファイルをUPした方がいいと思われます。 どうしてもiらんどでやるのであれば、5.のインラインフレームの中にリンク先を表示するような形にすれば、カウンターも携帯画面と共有することができていいと思います。 また、PC閲覧者にフレーム画面を見せたいのであれば、リンクページや掲示板のページからはtarget指定を_blankなり、_topなりにした方がいいと思います。 _blankだと、いちいち別のウインドウが開いてしまうので、任意の同じ名前でtarget指定すると、常に同じ別ウインドウで開かせることもできます。 リンク先に飛んだのにフレームのメニューが延々とついてこられたら、ネットに慣れてない閲覧者は結構困惑しますからね。 また、一部のフレームに対応していない閲覧者を排除することにもなり、どちらのページを選ぶかを選択させるようにした方が閲覧者に愛想がいいページになることでしょう。 それでも、一度はやってみたくはなると思いますが・・・