初心者のためのホームページ作り 第20号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  目次

プレーンテキスト版バックナンバー

今週<第20号>マガジンのおさらい

                   毎週金曜日配信 What's New 2002/9/27
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ オブジェクトを使う・・Flash(フラッシュ)
                クライアント・サイド・イメージマップ

今回は、多くのサイトで利用されているオブジェクトの1つ、Flash と1つの画
像の中に複数のホットリンクを示すイメージマップについて取り上げます。

Flashを扱う

現在、オーサリング・ソフトの1つである Flashを扱うWebサイトが急増し、非常に人気を集めています。Flashが人気を集める大きな要因として、

などの特徴をもっています。特に最新バージョンの Flash MX ではアクセシビリティにも考慮したツールが配布されており、Flash動画を再生できない障害をもった環境の方にも対応されています。また驚くべきことに、世界中のパソコンの98%にプラグイン・ツールが標準で搭載されています。

しかしながら一方で、HTMLを記述する上ですべてのブラウザが同一の要素内で Flashファイルをレンダリングできない皮肉な現実もあります。そのために、HTML4.01では規格外とされている要素(embed)を使わなければ、iCab、Netscape、Mozillaに対応できないという制作者側のジレンマがあるのも事実です。

下記のHTMLを参照してください。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
width="50%" height="50%" id="banban" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version='6,0,0,0'">
       <param name="movie" value="images/banban.swf">
       <param name="loop" value="false">
       <param name="quality" value="high"> 

<embed src="images/banban.swf" width="50%" height="50%" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" loop="false" quality="high"> 
</embed>
   <noembed>
   このページを見るには、Shockwave Flashプラグイン
   またはActiveXコントロールに対応したブラウザが必要です。
   <img src="images/flash_01.gif" width="330" height="198" alt="Sample">
   </noembed> 
</object>

Flashサンプル    (詳しいHTML文の解説は今週号のメールマガジンを参照してください。)

このように、object要素内に embed要素を記述しなければ Flashファイルを読み込んで実行できないブラウザが存在しています。
クライアント・サイド・イメージマップ
1つの画像の中に複数のホットリンクを設定する手法をイメージマップと呼び、イメージマップを実現する設定には2つの方法があります。

サーバ・サイド・イメージマップ

ほとんどの視覚系ブラウザはサーバサイドのイメージマップをサポートしており、ウェブでのデファクトスタンダードとなっています。しかし、サーバサイドのほうは、文字通り、サーバーがクリックごとに反応して適切なHTMLファイルを送信するようになっているため、クライアントサイドのものにくらべて速度が若干遅く、何よりもサーバに CGIプログラムを置かなければなりません。その意味では、一般的ではありません。前回のフォームで述べた通り、CGIプログラムを作成、設置するにはそれなりのスキルと環境が必要になるため、当講座では、クライアント・サイド・イメージマップの利用をお奨めします。

クライアント・サイド・イメージマップ

HTML上で作成するイメージマップで特別なプログラムは必要としません。サーバ・サイドと違って、アクセスが集中しても反応が遅くなることなく瞬時にリンク先に移動できます。

イメージマップを作成するための基本的な知識として、画像上の座標という概念を知る必要があります。

四角形のマップ 円形のマップ 多角形のマップ
左の四角形の図では、左から aピクセル、上から bピクセルの座標を (a,b)
次に、右下の座標、左から、Cピクセル、上から dピクセルに座標を (c,d) として四角形の図を定義します。   HTMLでは <area shape="rect" coords="a,b,c,d">

次に真中の円形の図は、左から aピクセル、上から bピクセル、そして半径 cピクセルとします。  HTMLでは <area shape="circle" coords="a,b,c">

右の三角形は多角形として扱い、それぞれの角の座標を記述します。
HTMLでは <area shape="poly" coords="a,b,c,d,e,f">

このようにして、1つの画像の中に示された座標軸にホットリンクを埋め込んだものをクライアント・サイドイメージマップと呼びます。

イメージマップ・サンプル    (詳しいHTML文は今週号のメールマガジンを参照してください。)

イメージマップのアクセシビリティ

画像が表示できない非視覚系ブラウザにおけるアクセシビリティの対応に、area要素中に alt属性を必ず記述するようにします。それは非視覚系ブラウザではリンクの代替となるもので、重要なポイントです。

また、イメージマップと別にテキストでアンカーを記述しておくのも、すべてのブラウザへのアクセシビリティとなります。複雑な画像の中でホットリンクが見つけにくい場合などには、有効なナビゲーションの手段になり得るでしょう。

ムービーの再生
オブジェクトのもう1つの形式としてムービーが挙げられます。しかしこれもブラウザや環境によって異なったムービーのフォーマットが多数存在し、また mpeg形式を表示する object要素だけでは対応できないブラウザもあり、現在のところ制作者側で様々な形式に対応した記述をしなければならないという混乱した状況にあります。

映像を表示するプラグイン・ツールもいろいろ出回っていますが、決定的な標準にはなっていません。当サイトの準備不足もあり、詳しい解説は別の機会に譲りますが、いずれにしても制作者にはソフトウェア、ハードウェア両面の経済的負担があります。お金のかかる話ではありますが、最近は動画を撮影できるデジタルカメラも多く登場しているので、比較的安価にハードを手にすることができそうです。

ムービーについてはいずれ講座でも取り上げる予定です。ご期待ください。



Copyright(C) 2002-2003 banban@scollabo.com