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

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

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  目次

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

今週＜第20号＞マガジンのおさらい

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

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

■ Flashを扱う

現在、オーサリング・ソフトの１つである 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ファイルを読み込んで実行できないブラウザが存在しています。

１つの画像の中に複数のホットリンクを設定する手法をイメージマップと呼び、イメージマップを実現する設定には２つの方法があります。

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

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

ほとんどの視覚系ブラウザはサーバサイドのイメージマップをサポートしており、ウェブでのデファクトスタンダードとなっています。しかし、サーバサイドのほうは、文字通り、サーバーがクリックごとに反応して適切な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">

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

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

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

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

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

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

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

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