フレームの最適化

Updated / Published

サイトの構築においてなくてはならない・欠かすことのできないのがナビゲーションです。ナビゲーションは文書同士を有機的につなぐリンク（通常はa要素）によって構成・提供されます。ただし、最近ではサイドバーを有用する UA も増えています。将来的には文書のヘッダ内に指定されている link要素によって構成・提供されている情報を有用に機能させることができる UA が登場し、新しいナビゲーションのベースとなりえるかもしれません。

あくまでも、現状ではウェブサイトの制作者は、ナビゲーションをユーザに提供するにあたっては、本文、つまりは body要素内にナビゲーション部のリンクを含めて提供する、もしくは frame要素（フレーム）によって本文とナビゲーションを分離して提供する必要があります。そして、どういった形でナビゲーションを提供するかは、ウェブサイトの制作者にその一切が委ねられることになります。しかし、特にフレームでナビゲーションを提供している制作者の多くは、フレームの抱える問題点を解決できるような実装になっていないまま、もしくはその問題点を知らずにフレームを利用していることが多いようです。そこで、本文書ではフレームでナビゲーションを提供する場合の最適化について考えていきます。

フレームが抱える問題点

ひとつのページの表示域を分割してページを表示するフレームを使うことでナビゲーションと本文を分離させ、部分的にユーザビリティを強化してくれます。そう、フレームによるナビゲーションは最短のナビゲート方法を提供してくれます。それだけでなく制作者側からしてもナビゲーションを1つのファイルで共有することができるのでメンテンスが容易におこなえ、更新は最低限の労力で済ませられます。このように一見フレームはユーザにとっても便利で、かつ制作者側も楽ができるものと思われるかもしれません。しかし、ナビゲーションの提供にフレームを採用するとなるとユーザ側とウェブサイトの管理・運営側の双方においても以下のような問題点を抱えてしまうことがあります。

ユーザ（観覧者）視点の欠点

  • ユーザの利用している環境（UA）がフレームに対応していない（フレームを利用できない）場合がある。特にフィーチャフォンの携帯電話端末などに多い。
  • ひとつの画面に複数の文書を表示しているため印刷が困難な場合がある。
  • ブラウザのアドレス欄にはフレーム設定文書（frameset要素）の URI しか表示されないため各フレームページの URI の取得が困難になる。

管理・運営者視点の欠点

  • ナビゲショーン用フレームページにしかリンクがないためサイト内のリンクポピュラリティ向上につながらない。
  • URI の取得が困難なため、ユーザがリンクを張りにくい（張れない）。その結果、リンクポピュラリティの向上につながらない。
  • 検索エンジン経由の際にランディングページが各フレームページの場合、せっかくの訪問者が迷子になるかもしれない。

まずは、ユーザ視点の欠点から詳しくみていきましょう。

"ユーザの環境（UA）がフレームに対応していない場合がある"というのは、視覚ブラウザで言えば、Netscape Navigator 2.0, Internet Explorer 3.0 のバージョンよりフレーム機能に対応していたので、それ以前の Netscape Navigator 1.x系列と Internet Explorer 1, 2 のバージョンが該当します。ただし、今となっては、そのような化石のように古いブラウザを利用しているユーザは皆無であると考えることができますが、フィーチャーフォンの携帯電話端末などには画面の大きさに制限があるためフレームの機能を一切サポートしていないものが多くあります。そして、そもそもフレーム関係の機能は1996年にリリースされた Netscape Navigater 2.0 が独自拡張で搭載していた機能を当時の悪い慣習で規格として取り入れたものであるため、HTML 本来のマークアップではありません。そのため W3C の仕様では、フレームは HTML4.01フレーム設定型DTD と XHTML1.0フレーム設定型DTD にしか定義されていません。また音声出力や点字出力の非視覚環境においては、フレームを使用したページの内容を把握するのが困難で、知らず知らずのうちに利用者を制限してしまっていることにもなりかねません。

"ひとつの画面に複数の文書を表示しているため印刷が困難な場合がある"というのは、比較的新しいブラウザではオプションでページを指定して印刷できますが、たとえオプションがあっても、その方法を知らない場合、ユーザはかなり混乱することになります。またフレームページが一枚に収まらない場合、適切に印刷できないことがあります。この際に制作者側が CSS2 の仕様より定義されたメディアタイプ（"@media screen"）を使用することで、ある程度まではカバーすることができるでしょう。

"フレームを使用していると URI の取得が困難になる"というのは、閲覧するフレーム内のページを切り替えてもユーザのブラウザのアドレス欄には、フレームの基となるフレーム設定文書の URI しか表示されないためです。その結果、各ページの URI が取得できない（取得が困難になる）ためリンクしにくい・されにくいということが言えます。これでは苦労して制作した努力も報われなければ、せっかく WWW上に公開されている各文書もその情報発信力を最大限に活かすことができません。

次に管理・運営者視点の欠点は、主に SEO に関するものです。

検索エンジンは各ページを巡回し、サイト内の情報を収集します。問題が起こるのは検索エンジンのロボットがフレーム内のページであろうとひとつのページとして認識することです。検索エンジンのロボットのようなプログラムでは、それがフレーム内のページであるのか、そしてそのフレームの構成がどのようになっているのかということまでは正しく認識することができません。

その結果、検索エンジンの検索結果でナビゲショーンが不完全なフレーム内のページへユーザが訪問してきた場合、ユーザはそのページから身動きができなくなってしまいます。つまり、せっかくの訪問者を見逃してしまうことになる可能性もあります。なおさら検索エンジンのプログラムは被リンクを重視するといわれているため、せっかくのリンクがひとつのメニューページにだけ統一されていては、リンクポピュラリティの向上にもつながりません。ユーザも URI の取得が困難なため他力での被リンク獲得の機会をも知らず知らずのうちに失ってしまっているのかもしれません。

フレームの享受と最適化

ここまで、ユーザと管理・運営者視点からフレームの欠点を見てきましたが、一方的に悪い面だけを見てフレームでナビゲショーンを提供する方法はダメだと考えるのは早計です。フレームのメリットを享受しながらもフレームの欠点を改善する方法を考えてみましょう。フレームでナビゲーションを提供するかどうかは、制作者の判断に委ねられるわけです。先ほど制作者にとってフレームとは、ナビゲーションをひとつのファイルで共有することができるのでメンテンスが容易におこなえ最低限の労力で済む楽な方法だと述べていましたが、この前言を撤回します。フレームのみでナビゲーションを提供することは楽ができるのではなく、単なる手抜きでしかありません。

フレームのみでのナビゲーションを提供するのは制作者の怠慢といえます。フレームが楽のできるものだというのは忘れてください。もし、フレームのメリットを享受しながらもフレームの欠点を改善したいというのであれば、フレームは決して楽のできるものではなく制作者の作業量をより増やすものだと心得てください。それでは、フレームの欠点を改善する方法に焦点をあててみましょう。

ナビゲーションは全ページで提供する

そもそもフレームだけでしかナビゲショーンを提供していないというのが誤りです。検索エンジン経由の際にランディングページがフレーム内ページであっても、フレーム内ページにもしっかりとナビゲショーンをつけていればまったく問題はありません。フレーム内ページにもリンクが張られていれば、サイト内では被リンクもしっかりと獲得できリンクポピュラリティ向上にもつながります。つまり、結局は楽ができるのではなく、フレーム用のナビゲーションと各フレーム内ページ用のナビゲーションまで記述しなければならなくなるため余計に手間がかかることになります。

フレームは選択できるものにする

ナビゲーションを全ページに記述した上で、サイト構成をフレームで固定するのではなく、常にフレームで閲覧するか・各々のページで閲覧するかを選択できるような機能を提供しましょう。こうすれば各ページごとにフレーム有りで閲覧するのか無しで閲覧するのかユーザ側で選択することができます。こうすることでフレームはよりユーザビリティを強化してくれるものとなり、最短のナビゲート方法としてユーザに提供できるので、メリットをそのまま享受することができます。

非対応環境用に noframes要素を指定する

noframes要素はフレームに対応していない環境の場合に表示させる内容を指定することができます。もちろんフレームに対応した環境では、この部分の記述を無視してフレームを表示するのでフレーム対応環境の邪魔になることもありません。重要なのが、この要素内にどのような記述を施すかです。検索エンジンの検索結果画面にはスニペットと呼ばれる、そのページの要約文が表示されます。そして検索でヒットした膨大なページの中から、ユーザはどのページを訪問するかにあたって、このスニペットの内容が有用であるかどうかが重要な判断材料となります。

そして、noframes要素内の内容はこのスニペットにもなり得ます。しかし、実際に noframes要素内によく記述されている文面はというと、「フレームを使用しているのでフレーム対応環境でご観覧ください」といった類であり、これでは各フレームの内容となっているリソースの表現している情報の代替にもならなければ、フレーム内の情報にもアクセスできないという結局何の意味も成さない内容を記述しているだけです。noframes要素を上手に使えば有用なサイトであるかの判断材料とも成り得る上に、フレーム非対応環境用のナビゲーションにも成り得ます。この2点を考慮した上で noframes要素内に記述する文面は次のようにするといいでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html><head>
<title>W3G - World Wide Web Good</title>
</head>
<frameset cols="150,*">
<frame src="menu.html" title="メニュー" name="menu">
<frame src="main.html" title="コンテンツ" name="main">
<noframes>
<h1>W3G(World Wide Web Good)</h1>
<p>より良いWebを作るための初学者を対象とする情報技術の解説サイトです。</p>
<ul>
<li><a href="menu.html">コンテンツ一覧</a></li>
<li><a href="main.html">トップページ</a></li>
<li><a href="sitemap.html">サイトマップ</a></li>
</ul>
</noframes></frameset>
</html>

以上ここまでフレームを採用したサイト構成を最適化する方法を取り上げましたが、フレームを使用することで、つきまとうデメリットがあります。それは、ユーザの URI の取得が困難になることです。フレームを使用しながら、これを改善・緩和できる良い方法は思いあたりません。フレームを享受するとうことは、イコール、このデメリットも享受しなければならないということを心得てください。

フレームの代替となる技術の利用

フレームは制作者が楽をするためのものではありません。楽がしたい、作業の効率化を図りたいのであれば以下に紹介する技術を利用するようにしましょう。

1, SSI（Server Side Include）

SSI（Server Side Include）という技術を利用するこでフレームのメンテナンスの容易さとほとんど同じ作業量でナビゲーションの提供を代替することが可能です。SSI を利用することで任意の位置に別のファイルを呼び出し・表示することができます。

<!--#include file="呼び出したいファイル" -->

ただし SSI を使用できる環境が整っている（レンタルサーバであればSSI の使用が許可されている）必要があります。SSI を利用すれば、フレームと同様にナビゲーション部をひとつのファイルで共有することが可能です。ただし、サーバの設定に依っては、SSI を使うには拡張子を ".shtml" のファイルに書き換える必要があるなどの制限が設けられています（これらは各種ウェブサーバの設定ファイル、Apacheであれば.htaccess、WindowsのIISであればWeb.configなどで設定できます）。

2, PHPのincludeモジュール

SSI と同様に PHP でも別のファイルを呼び出し・表示することができる includeモジュールという機能があります。PHP を利用する場合も同様に、サーバの設定に依っては、PHPモジュールを使うには拡張子を ".php" のファイルに書き換える必要があるなどの制限が設けられています（これらは各種ウェブサーバの設定ファイル、Apacheであれば.htaccess、WindowsのIISであればWeb.configなどで設定できます）。

<?php include("呼び出したいファイル"); ?>

SSI 同様、PHPファイルの指定箇所に以上のようなソースを記入するだけです。

なお、拡張子の問題については ".html" のままで PHPモジュールを利用したいのであれば、ウェブサーバがApacheの場合は、.htaccess に次のように記述することで、拡張子 ".html" を PHP の MIMEとして出力対象に設定できます。

AddType application/x-httpd-php .html

なお稀に、XHTML の規格で文書を記述していて、かつサーバによってはPHPのショートハンドがONになっている場合があり、XML宣言部分が PHP の宣言と被らないように XML宣言部分を PHP用のコードで記述しなければいけない場合があります。

<?php echo "<?xml version=\"1.0\" encoding=\"文字コード\"?>"; ?>

3, CMS（Contents Management System）

CMS（Contents Management System）は、サイト内のナビゲーション部分を自動生成してくれるため、ページが追加されるたびに関連するページにリンクを追加するといった煩わしい作業から解放されます。CMS には WordPress、Movable Type、Drupal、Xoops、Joomla!、concrete5などのソフトウェアがあります。CMSを利用すれば、作業はテキスト等の記述だけに専念することができるので、作業が大幅に減少することでしょう。ただし、CMSについても利用しているウェブサーバにCMSを利用できる環境が整っている必要があります。

フレームと同じ見栄えを実現するCSS

フレームのようにナビゲーション部分を固定したナビゲーションを構成・提供したい場合は、CSS を使って視覚的にフレームに似せたものを作成することもできます。擬似的にフレームを作成するには、要素を任意の位置に配置できる positionプロパティで表示域に対して固定することで、スクロールしても動かないようにする "fixed" を使った方法がもっとも妥当です。ただし、Internet Explorer6のように"fixed" の値に対応していない UA も少なからずいるため、もうひとうの方法として、内容があふれた場合の表示方法を指定する overflowプロパティを応用して、擬似的にフレームを再現することもできます。その作成例は次の通りです。

body {
height : 100% ; margin : 0 ;
}
div {
margin : 0 2% ; border : 1px solid #000 ;
}
.menu {
width : 20% ; float : left ;
}
.main {
width : 70% ; height : 90% ;
position : absolute ;
top : 0 ; left : 25% ;
overflow : auto ;
}
......
<div class="menu">
メニュー部分
</div>
<div class="main">
メインコンテンツ部分
</div>

ただし、CSS で視覚的にフレーム構成を擬似的に再現できたとしても、フレームのようにナビゲーション部をひとつのファイルに共有することで制作者の作業量を減らすことはできません。擬似フレームでは、各ページにナビゲーション部分を記述することになるので作業量が減ることはありません。そこで、先に取り上げていた SSI や PHP の includeモジュールなどの別ファイルを呼び出し・表示できる技術、またはCMSと組み合わせることで、作業量を大幅に削減できる上に、見た目もフレームに似せたナビゲーションを構成・提供することができるでしょう。