インラインフレームの歴史

みなさまこんにちは。今日はインラインフレームについてのおしゃべりを一つ。



Web制作においては日々新しい技術が出て来るので、そのキャッチアップのみならず、どれを「今」の制作に採用して行くかを判断するのは、技術者にとっても難しいものです。



私はどちらかというと安定してきたものを使うのが好きなのであまり最新のものは使わないのですが、昨今のようにあまりに技術進歩が速いとそうも言っておられず、ちょこちょこと新しい技術などを試しています。その際いつも思うのは「正解」や「確実」は無いという事です。これは良さそうと思って採用しても廃れてしまうものはありますので、新しい技術を試すのはリスクの多い投資です。



ただ一つ確実に必要なのは「変化する（できる）習慣」。



「変化する」というのはかなり難しい技術（？）なのです。何よりの障害は自分自身の精神的抵抗。新しいものにガガガっと世の中の趨勢が移った時にそれに対応して自分も変化できるようにするには、日頃から変化に対応できる習慣付けをしておく事が必要なのだと思います。



などとと考えながら、今日はインラインフレーム（アイフレーム、<iframe>）、またその前身フレーム（<frame>）の歴史に思いを馳せてみたいと思います。


インラインフレームとは

インラインフレーム（ inline frame ）は「文中に配置できる枠」の意味で、Webページの任意の場所に他のWebページを取り込んで窓のように見せる技術です（図参照）。

フレームとインラインフレームの登場

インラインフレームの前身であるフレーム（<frame>）は、ブラウザのウィンドウ全体を分割して別のページを表示する技術です。これが明確にいつ頃から使えるようになったか今調べが付かないのですが、私がWebサイトを作り始めた 1995年頃には「こんな事もできちゃうぜ！」的に登場していたと思います。



今となってはフレームは「非推奨」ですが、その頃は「メニューのページとコンテンツのページを別々に作って組み合わせて表示すれば効率的！すごい！」という位置づけだったのです。



その後、ウィンドウ全体の分割ではなく Web ページ内の任意の位置に別のページを表示できるインラインフレームが使えるようになったのは 1997年とされています。最初は Internet Explorer の独自仕様でした。

検索エンジンの登場により非推奨

インラインフレームの登場と前後して既に検索エンジン Google が誕生している（1997年）のですが、日本で認知が進んできたのは 2000年くらいですね。



検索エンジンは検索キーワードが含まれるページを検索結果として表示するため、Webアクセスの際に検索エンジンの利用が一般的になると、検索エンジンからフレームやインラインフレームの中のページに直接アクセスしてしまい制作者側が意図したものとは別の見え方をしてしまうという問題が出てきました。



このため、フレームやインラインフレームの利用が嫌われるようになりました。



これにはまた、以下の要因もあったと思います。



- ネットワークインフラの発達により、ページ分割して転送量を節約する必要が無くなった。

- CMSやその他のWeb制作ツールの発展によって、「全ページのメニューを一括で変更する」などの作業が簡単になった。

広告やウィジェット表示用に復権

フレームの方はそのまま廃れてついには公式なHTMLの仕様上からも廃止されてしまうのですが、インラインフレームの方は急速に発達したWeb広告表示やウィジェット（ウェブページ上のミニアプリ）表示に使われ、現在も健在です。

現在のインラインフレーム利用状況

Web ページ内の任意の位置に他のページの内容を表示する方法はインラインフレーム以外にも、JavaScript を使ってもできるようになりました（※1）。この新しい手法では HTML形式のページだけではなくデータベースからデータだけを引き出して（＝転送効率がよい）加工した上で表示する事ができますので、こちらの方法は常に最新のデータを表示する必要のあるサイトでよく使われています。



※1 これらの新しい技術は「Ajax（えいじゃっくす、あじゃっくす）」と総称されています。



ただこの方法はブラウザの方に処理の負担をかけますので、小規模サイトについては私はインラインフレームを愛用しています。

インラインフレームの場合に検索エンジンからフレーム内のページにアクセスしてしまう問題については以下のような解決方法があり、検索エンジンの問題は今となってはあまり起こらないようです。検索エンジン側でも親フレームとの関連付けをしてくれているのかもしれません。

インラインフレーム利用の際の検索エンジン対応

- 判別用 JavaScript を仕掛けておき、もしフレーム内のページに直接アクセスされてしまったら親ページに転送する

- インラインフレーム内のページを検索エンジンに登録するかを選ぶ事ができる（※2）



※2 <meta name="robots" content="noindex, follow">  というメタタグで検索エンジンへの登録を回避できます。

レスポンシブWebデザインとの兼ね合い

さてそれでは今後のインラインフレームの利用はどうなるでしょう？



先日レスポンシブ Web デザイン手法（※3）で Web サイトを作っていたのですが、この手法は「ウィンドウの表示幅」を表示切り替えのキーにしているため、PC用の表示であっても、含まれるインラインフレームの幅 が小さいとその中だけタブレット用の表示になってしまう、という事がありました。私の場合は原型となる「Webデザインテンプレート」を購入して制作する ので（※4）最初原因が分からず少し悩みました。



もちろん、インラインフレーム部分だけそれぞれまた別に設定をしておけばよいだけなのですが、気楽に使える感は無くなってしまうかも知れません。

このため、今後はまたインラインフレームの使用は減り、上述のような JavaScript 手法でページを構成する方法がメジャーになってくるかなと予想しています。



※3 一つのHTMLコードでPC・スマホ（スマートフォン、iPhone など）・タブレット（iPad など）に対応させる手法。具体的には、CSSでそれぞれの表示幅に適した設定を作っておいて切り替える。



※4 残念ながらデザインかできないので...

おまけ：インラインフレーム関連技術情報

- インラインフレームのスクロールバーを出さない方法（コンテンツの量に合わせて高さを変更）
- インラインフレームへの直接アクセスを回避する方法（JavaScript でジャンプ）
- インラインフレーム内のアンカーにリンクする方法