毎週金曜日配信 What's New 2003/6/6
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第54号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
等幅フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にしてください。
今週のコンテンツ
■ Webデザイン 第４回 --- ナビゲーションの設計
■ HTML講座 第４回 --- HTMLの作り方とヘッダの役割
■ XHTML講座 その16 --- 動画を扱う（MPEG）
■ タグの解説 --- blockquote要素
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Webデザイン 第４回
ハイパーテキストとしてのリンクの設定は重要な役目があります。HTMLが普通
の文書ではないことを、文書がリンクすることによって、はっきりと理解するこ
とができます。
Webデザインを作成する上で大切なことは、サイト内でのナビゲーションの設計
です。ナビゲーションとは、「案内人」という意味を持ち、各ページに記される
リンクこそが、その役目を担っているのです。
ディレクトリは、木（ツリー）構造で示されるということを前回解説しました
が、ナビゲーションも、この構造に沿って設計する必要があります。
ページを作成する前に、ナビゲーションがどんなストーリーで展開されていく
のか、前もって十分検討しておきます。
そして、練りこまれたナビゲーションは、必ず「設計書」に記録しておくこと
を、強くお勧めします。
■ナビゲーションの追加
例えば、ある完成された Webサイトで、もし、何らかの理由で１ページ必要
になってきたと仮定した場合、制作者は大混乱に陥ります。
トップページに１つリンクを加えればいいというわけにはいかないのです。
つまり、加えられた新たなページが持つ情報によっては、他のディレクトリに
ある他のページからリンクすることも十分考えられます。
それによる手直しは、そう簡単というわけではありません。
しかし設計段階で、そのようなことを十分に予測することを考えた配慮がな
されていれば、それほどあわてることはありません。
設計書には、各ページの情報やナビゲーションの一覧が書かれています。設
計段階で十分に練りこまれたページの情報を記録しておくことは、将来の更新
や変更に威力を発揮します。
そうした設計書を見て確認することで、簡単にナビゲーションを追加したり
変更したりすることができます。
また、各ディレクトリの最初のページをローカル・インデックス、つまり、
そのディレクトリの目次のページにしてしまうことで、頻繁に発生する追加の
ページに対応できます。
サイトのトップページが総合的な目次のページなら、各ディレクトリのトッ
プページは、局所的な目次となるでしょう。
■何故、ナビゲーション・デザインは重要なのか？
行き止まりのページに遭遇した経験がありませんか？ あるいは、目的のペ
ージにたどり着くまで、たくさんの操作を強いられた経験がありませんか？
ナローバンド（通信速度の遅い環境）のユーザも少なくありません。通信費
を気にしながらインターネットにアクセスしている心境は、私にも経験があり
ます。
そうしたユーザに対して、目的のページに達するまで、幾つかのリンクを強
いることは、ナビゲーション設計のミスです。ユーザをイラつかせたりしては
いけません。
Webデザインでは、ディレクトリ構造の設計時に、そのツリー構造からナビ
ゲーションが浮かんできます。各ページに通ずるリンクとは、まさにサイト全
体の動脈となっているわけですから、非常に重要なのは理解できると思います。
（第５回ユーザビリティにつづく）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML講座 第４回
HTML文書を作成するための基本的な規則や作り方について解説します。また、
HTML文の中で記述するヘッダ部についても触れておきます。
◆タグとは？
文書の各要素別に「タグ」と呼ばれるHTMLの基本的なマークアップを行います。
タグは、必ず半角英字で記述しなければなりません。全角では、HTMLになりませ
んので、注意してください。
HTMLでは、タグを記述する半角文字は、基本的には大文字と小文字を区別しま
せん。どちらを使ってもまったく問題ありません。ですが、当講座では、将来を
考えて小文字を採用しています。
（XHTML、XMLでは小文字でなければならない、という規則があるためです。）
タグは < と > の鍵括弧で囲んで記述します。この鍵括弧の中に、仕様書で決
められたタグを書き込んでいきます。
タグという意味は、「荷札」と翻訳されている通り、文書内容の構成要素を区
切ってマークアップするという意味から、そのように呼ばれています。
○コンテナタグ
タグには大きく分けて２種類あり、ほとんどが開始タグと終了タグのペアに
なっています。
例えば、
<p>初心者のためのホームページ作り</p>
これは段落をあらわすタグですが、最初の <p> と、最後の </p> が、対に
なっているのが理解できます。このような対になったタグを、コンテナタグと
呼びます。終了タグは、そのタグの名前の前にスラッシュ 「 / 」を記述して
終わりであることを示します。
<p> と、</p> との間のテキスト（文字列）などを、コンテンツと呼びます。
そして、タグを含めた要素内容を、「要素：Element」と呼び、この場合は、
p要素（段落要素）とも呼びます。
○空タグ
終了タグを持たないタグがあります。空（から：エンプティ）タグと呼ばれ
るもので、１つのタグで完了します。
例えば、
<img src="hana.png" width="250" height="180" alt="花の絵">
これは、静止画像を表示する imgタグを用いていますが、</img> という
ような終了タグを持っていません。この img要素に限らず、他にも空タグが
ありますが、詳しくは、その都度解説します。
○省略が可能なタグ
HTMLでは、省略可能なタグが存在します。例えば、<html>、<head>、<body>
などは、開始タグ、終了タグを省略しても、HTML文書として扱われます。
また、終了タグを省略できるタグも幾つか存在します。
ただし将来のことを考えると、ちゃんとした記述法を学び取ることは大切な
ことです。XHTML、XMLでは、すべて省略することができません。その意味から
も、今のうちから開始タグ、終了タグの記述を習慣づけるようにしましょう。
当講座では、すべてのタグに、開始タグ、終了タグを記述します。
◆HTMLはどうやって作る？
タグを入力してホームページ作りをするには、それなりのソフトウェアが必要
です。と言っても高価なソフトは必要ありません。
当講座では、自身の手によってタグを入力してホームページを作るわけですか
ら、いわゆるオーサ（作成支援）ソフト（注１）は要りません。HTMLは、単なる
標準テキスト（プレーン・テキスト）形式で作成するので、通常、OSに付属して
いるテキストエディタで十分です。
テキストエディタとは、Windows環境ならば「メモ帳」、Linuxならば「vi」、
Macintosh ならば「SimpleText」を指します。とにかくメモリを食わない容量の
小さい軽量なエディタを使いましょう。
なお、フリー（無料）の優れたソフトウェアなどがありますので、ネット上で
探して入手しておくのも方法です。
ちなみに、私は有料（4000円）ですが、軽量で高機能な「秀丸」を利用してい
ます。残念ながら Windows版しかないのが難です。Macintosh で作成するときに
は、もっぱら「SimpleText」を使っています。
秀丸のホームページ http://hide.maruo.co.jp/
◆Webブラウザ
当然といえば当然ですが、作成したHTML文書を見るためには、普通の人ならば
視覚系ブラウザというソフトウェアが必要です。
ブラウザは、今はほとんどの OS に標準で搭載されています。また、ブラウザ
を作っているメーカーの中で、無償で提供しているものもたくさんあります。
代表的な Webブラウザは以下の通りです。
○Microsoft Internet Explorer
Windowsに標準で搭載されています。Mac版も用意されており、自由に入手す
ることができます。UNIX系はリリースされておりません。
講座では、MSIEと呼びます。現在のバージョンは 6.0、Mac版は 5.2です。
○Netscape
老舗のブラウザで、今でも熱烈なファンがいます。
現在のバージョンは、7.0、各種プラットフォーム向けにフリーで用意されて
いるのがうれしいところでしょう。非常によくできた視覚系ブラウザです。
○Mozilla
Netscapeのレンダリングエンジンに採用されている視覚系ブラウザ。オープ
ンソースなので、誰でも自由にプログラムを改造することができます。比較
的軽量なブラウザなので、古いパソコンにはお勧めです。
また、各プラットフォーム向けに、無償で提供されています。日本語版も
あります。
○Opera
ノルウェー製の新進気鋭の軽量ブラウザ。レンダリングも早くて最近人気が
急上昇しています。日本語版、各プラットフォーム向けが用意されています
が、フリー版は広告が表示されてしまいます。
○Safari
Apple社が総力を挙げて作っている視覚系ブラウザ。現在はまだベータ版で、
動作の安定は保証されていません。今年末には、正式版がリリースされると
アナウンスされています。
ただし、最新の Mac OS 10.2以降が対象となっていますので、それ以前の
Macintoshでは利用することができません。今のところベータ版なので無料。
○Lynx
テキストブラウザで、非視覚系ブラウザといわれています。画像や色などの
表現には向いていません。正しい文法で記述されているHTML以外では、表示
がめちゃくちゃになる場合が多々あります。
日本語版はありませんが、日本語を表示します。各プラットフォーム向け
に、フリーで提供しています。
■Webブラウザのバージョンと表示
ソフトウェアは日々進化し、バージョンアップを繰り返しています。ブラウ
ザも、自身の機能を上げたり、W3C の新たな勧告に対応したりして、新しいバ
ージョンが発表されています。
当然、機能が上がるわけですから、新しいバージョンと古いバージョンでは
表現がまったく異なったりします。
同様に、同じブラウザ銘柄で、同じバージョンでも、OSが異なると、やはり
表現が異なってしまい、まるで違うメーカーのものじゃないかと思うほどです。
対応策はありません。仕方がないことです。
ただし、HTML文書が論理的な構造で作られていれば、それほど大きな違いはあ
りません。
古いブラウザには、セキュリティ面の脆弱性が指摘されており、またソフト
自体のバグもあります。
HTMLを作成する側にとって、ブラウザの銘柄を数種持つことは重要な意味が
あります。ブラウザごとに表現が違うわけですから、自分が作ったHTML文書を
数種のブラウザで確認することは大切なことです。
特に初心者には強くお勧めします。
◆HTML ヘッダの記述
前回説明したとおり、HTMLを構成するのは、文書型定義の宣言、ヘッダ部、そ
して本文の３つがあります。ここではその中の「ヘッダ部」について詳しく解説
します。
■ヘッダとは？
ワープロなどで作成する文書に、ヘッダ、本文、フッタなどを示す内容が書
かれているのを見かけることが多々あります。
HTMLのヘッダは、そのような文書とは少し違って、ここではユーザエージェ
ント（ Webブラウザなど）や Webサーバへ伝える文書情報などを示すための、
重要な役目を持っています。
■ヘッダが伝える情報とは？
ヘッダ部で伝えられる情報とは大体以下の通りです。
○文書の文字コード
そのHTML文書が、どのような文字コードで書かれているのかを伝えます。
文字コードについては、「第56号」で解説します。
○文書のMIMEタイプ
文書が、どのような形式で書かれているのかを伝えます。
MIMEタイプとは、Multipurpose Internet Mail Extensions の略で、電子
メールで使われるプロトコル（通信手順）で文書の形式を示します。
つまり Webサーバと、Webブラウザ間で取り決めた文書形式を指定します。
○文書の要約とキーワード
検索サーチ（注２）に取り上げてくれることを期待する記述で、ページ内容
の簡単な説明と、そのキーワードを記述します。
○他の文書との関係
そのHTML文書が、HTML文書を含む他の文書と、どのような関係にあるのかを
伝えます。
○文書の題名
文書の題名を伝えます。視覚系ブラウザでは、タイトルバーに表示されます
が、ヘッダで記述する中で、唯一ブラウザに表示されるものです。
HTMLでは、この題名を省略することができません。絶対に。
○他の文書の読み込み
HTML文書の中で、他の文書を読み込んで表現するときに用いられます。
◆ヘッダの記述
ヘッダで示す情報の具体的な記述法は以下のとおりです。なお、ヘッダ部は、
<head> 〜 </head> の間で書かれます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta name="description" content="ホームページ作成講座">
<meta name="keywords" content="HTML,ホームページ,初心者,Web制作">
<link rev="made" href="mailto:banban@scollabo.com">
<link rel="next" href="ht1.html">
<title>初心者のためのホームページ作り</title>
</head>
非常に簡単にまとめました。このほかにもありますが、一般的にはこれで十分
だと思います。説明は以下の通りです。
■解説
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
前回解説しました文書型定義（DTD）の宣言です。DTDは、必ずHTML文書の冒頭
で宣言しなければなりません。ここでは、HTMLStrict（厳格仕様）を宣言して
います。大文字と小文字を区別しますので注意してください。
<html lang="ja">
htmlタグは、タグセット（タグの集合）におけるツリー構造の頂点に立つ要素
として位置づけられた、いわばルート要素です。（コンテナタグです。）
このタグの終わりを示す終了タグの範囲に、ヘッダ部と本文が配置されます。
終了タグは、文書の最後で記述されます。
なお、このタグで用いられている属性（タグの役割情報） lang は、文書の
内容がどの言語を採用しているかを示しています。ここでは ja という値で、
日本語を採用していることを明示しています。
この、lang属性の記述は必須ですので、忘れないようにしましょう。
<head>
ヘッダ情報をこのタグの範囲で記述します。コンテナタグです。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
文書のMIMEタイプを明示しています。文書が Shift_Jis という文字コードで
記述していることを示しています。（空タグです。）
MIMEタイプは、テキストベースで記されたHTML文書であることを Webサーバ
に伝えられ、Webブラウザがその情報を受け取ります。
http-equiv属性は、HTMLのメタデータ（コンピューターへの指示データ）を
Webサーバから送信させたい場合に name属性の代わりに利用するプロパティと
しての役目があります。
ただし、すべてのサーバが必ずしもHTTPヘッダとして送信するわけではなく
実際にはブラウザ側でこの内容をチェックすることが多いようです。HTML文書
をサーバに置いたときに意味を成すものです。
この属性の値（あたい）に、「Content-Type」を示しますが、これは文書の
MIMEタイプを意味しています。
content属性とは、http-equiv属性で示された プロパティの値として明示す
るものです。２つの属性はペアで利用されます。
ここでは、文書のMIMEタイプが、「text/html」つまり、テキストベースで
記述されたHTML文書ということをサーバに伝えます。
セミコロンの後の charset=Shift_Jis" とは、文書を作成したときの文字コ
ードが「シフトJIS」のコードを利用していることを明示しています。
なお、セミコロンの後に半角スペースをおいたほうが、正式な記述法である
というような専門書を読んだことがありますが、正確なことはわかりません。
（文字コードについては、次週のメールマガジンで解説します。）
<meta name="description" content="ホームページ作成講座">
metaデータの要約を示しています。検索サーチに似ろ割れることを期待します
が、期待程度でしかありません。
現在の代表的な検索サーチでは、文書のタイトル、文書の内容などを参照し
てキーワードの代わりとしています。必ずしも、ここで明示された内容を検索
サーチに拾ってもらおうとは考えないほうが賢明でしょう。
<meta name="keywords" content="HTML,ホームページ,初心者,Web制作">
上記に同じ。文書内容のキーワードを明示します。カンマで区切って複数のキ
ーワードが記述できます。
これら要約文、キーワードは通常、サイトのトップページで記述されます。
<link rev="made" href="mailto:banban@scollabo.com">
文書の作成者を明示しています。いわゆる非視覚系ブラウザでは、文書内容に
ついて問い合わせたいときに、ここで示されたメールアドレスを使います。
この構文は、必須というわけではありませんが、文書の作者を明示すること
の意味は、何らかの事故や問い合わせに対応するために、是非明記しておきた
いところです。視覚系ブラウザはサポートしておりません。（空タグです。）
なお、作者を明示する addressタグを利用する方法もあります。
<title>初心者のためのホームページ作り</title>
文書の題名を示しています。視覚系ブラウザでは、タイトルバーに表示します。
また、「お気に入り」などのブックマークをするときに、この題名が利用さ
れます。
この題名の明示は絶対に省略してはいけません。文書構造上、非常に重要な
役割があり、省略することは文法違反となります。
titleタグは、コンテナタグなので終了タグを忘れずに。
なお、多くの検索サーチで拾われるキーワードとなります。文書内容がすぐ
に理解できるタイトルを考えて記述しましょう。
</head>
ヘッダ部の終わりを示す終了タグです。
■ヘッダの役割
冒頭にも述べましたが、ヘッダ部は主に、Webサーバ、Webブラウザに対して、
HTML文書が持つ内容を伝える役目があります。
基本的にコンピューターへの細かな指示を与えることが記述されます。特に
非視覚系ブラウザには、文書の位置関係を示すことができるので、リンクの役
目をする場合の項目を記述することができます。
ヘッダ部は、単に文書のタイトルだけを記述する場所ではありません。正し
い文書内容を、より正確に伝えるためにも、しっかりした構文が求められます。
次回は、文字コードと、HTMLの本文を記述するに当たっての決まりごとにつ
いて詳しく解説します。
（注釈用語解説）
○オーサリング・ソフトウェア
オーサとは「支援」という意味があり、ここではホームページ作成支援ソフト
を指します。
有料、無料など幾つかの人気のあるソフトウェアがありますが、特に、MSIE
に付属でついてくる FrontPage や、Netscape の Composer は無料で手に入る
ので人気があります。
オーサソフトの吐き出すHTMLは、銘柄やバージョンによっては非常に醜いも
のが多く当てにはできません。これらオーサによって、ひどい目にあったユー
ザは少なくないと思います。とても便利なのですが・・・
○検索サーチ
検索を専門とする Webサイト（Googleなど）では、検索ロボットというソフト
ウェアを使って、世界中の Webサイトを巡り、検索に必要な要約文などを拾い
集めます。
主に文書のタイトルと、コンテンツ内容の数行を拾い集めて、自身のデータ
ベースに登録します。metaタグで示される要約文とキーワードは無視する場合
が多いようです。
なお、有名な詮索サイトである「Yahoo」は検索サーチではなく「登録型」
の代表的なタイプです。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座 動画を扱う
最近の Webページでは、様々の種類の動画が取り上げられています。その大き
な要因としてブロードバンドの普及が、映像を主体とした動画コンテンツの提供
を加速しています。
少し前までは大変高価な DV(デジタルビデオ) カメラが必要でしたが、最近は
比較的安価なデジタルカメラでも動画撮影ができるようになり、ビデオ映像が身
近になってきました。
■動画と圧縮技術
動画、それもビデオ動画の容量は非常に大きく、例えば Windowsで標準の AVI
形式では、10秒の再生に何と、100MB（メガバイト）を必要とします。
そのために、静止画像で用いられる GIF形式や、JPEG形式のように、動画フ
ァイルも圧縮してやらなければなりません。
以下に説明する各種の動画方式は、結局は圧縮技術の違いによるものです。
それぞれの方式に従ったエンコード（注１）を用いるために、それを再生する
ためのデコード（注２）として、プラグインツールを公開しています。
それぞれのエンコード方式には長所と欠点を併せ持っており、どれがベスト
なのか判断に苦しむところです。
■動画の種類
Webページで現実に利用されている動画の代表的な方式は以下の通りです。
○QuickTime方式（拡張子 .mov）
アップル社が独自に開発したソフト、QuickTime上で生成される動画ファイル。
高画質、ストリーミング技術（ダウンロードしながら映像を表示する）に優れ
Macintoshコンピューターでは標準装備されています。
○WindowsMedia方式（拡張子 .asf あるいは wmv）
Windowsに標準装備しています。プレーヤーだけでなく、制作ツールも無償で
提供しており、OSの普及とともに人気が出ています。
Macintosh版も用意されていますが、Macユーザで利用している人は少ないよ
うです。圧縮率が高くストリーミング技術も取り入れています。
○RealMedia方式（拡張子 .rm）
歴史が古く、Windows、Macintosh、UNIX系などをサポートしています。最初に
ムービープレーヤーでこれほど広くプラットフォームに対応したのは、Real方
式だけでした。（最近は多くのプレーヤーがあります。）
ただし、頻繁にバージョンアップしているので、ユーザが面倒くさくなって
それが原因で人気が下降していることも災いして、普及率が急激に下がってい
ます。
■MPEG方式
MPEGとは ISO（国際標準化機構）の中にあるワーキンググループの名前がそ
のまま動画形式の名称になりました。Moving Picture Experts Group（MPEG）
が策定した規格で、米国エミー賞を受賞した動画の圧縮技術です。
規格は、MPEG-1、MPEG-2、MPEG-4があり、2001年にはマルチメディアデータ
の検索性を高めるための情報記述方式を規定した MPEG-7 が登場しています。
MPEG-1方式は、主に CD-ROM向けの映像・音声データ圧縮を想定し、その画質
は、ビデオの VHS程度といわれている圧縮技術です。
DVDビデオに適用されている MPEG-2 は、720× 480ドットの画像を１秒間に
30コマ表示し、高画質で DVDビデオだけでなくデジタル衛星放送にも利用され
ており、画質はハイビジョンに匹敵すると言われています。
なお、MPEG-3形式は草案だけで勧告されず、破棄されています。
現在は、MPEG-4形式が主流になりつつありますが、ハード、ソフトなどの関係
から、今でも MPEG-1は人気があります。
MPEG-4という圧縮技術は、携帯電話や電話回線などの通信速度の低い回線を
通じた、低画質、高圧縮率の映像の配信を目的とした規格で、動画と音声合わ
せて、64kbps程度のデータ転送速度で再生できることを目指しています。
何よりもファイルサイズを小さくできる（MPEG-2の約半分）特徴を持ってい
るため、Web上からの配信には適したといえます。
ただし、エンコード用ソフトウェアの入手は、少しばかりの経済的負担が強
いられます。
■MPEG-4におけるライセンス問題
昨年、MPEG-4ビデオ圧縮技術の特許ライセンス管理団体である 米国MPEG LAは
MPEG-4方式を利用したソフトウェアや機器のメーカーだけでなく、コンテンツ
事業者からもライセンス料を徴収すると発表しました。
これに怒ったソフトウェアや機器メーカー、コンテンツ配信事業者から抗議
と提案のレターが MPEG LA社に送られ、その後、ライセンスに関する再検討が
行われ、同年７月に新たなライセンスに関わる条件が発表され、合意に達しま
した。
その合意内容は、MPEG-4ビデオ関連製品に加え、サービスについてはコンテ
ンツ事業者やサービス事業者が収入を得た場合にのみライセンス料を徴収し、
またさまざまなビジネスモデルにおいてMPEG-4ビデオ技術の普及を促進するた
めに、以下のような取り決めを行いました。
・１年間のライセンス料に適切な制限を設ける
・ライセンス料の報告を必要としないオプションを設ける
・少数の配布についてはライセンス料を徴収しない
・ライセンス先のビジネスモデルに合ったオプションを用意する
今後半年間にライセンス契約を結んだ団体に対しては、2000年１月１日から
2003年12月31日までに販売した製品についてライセンス料を徴収しない方針も
掲げました。
ライセンスに関する MPEG LA社の発表（英語）
http://www.mpegla.com/news/n_02-07-15_m4v.html
■どの方式をサポートすればよいか？
ビデオカメラで撮影したビデオを、それぞれのフォーマットでエンコードす
るためには、それぞれの形式に応じたエンコード用ソフトウェアが必要です。
しかし Webサイト上で動画を公開しても、訪れるユーザに、エンコードに応
じたプラグインツールがなければ再生することができません。
Macintoshでは、QuickTime、Windowsでは、WindowsMedea、Linuxでは、Riel
というようにそれぞれの形式ファイルを用意できれば一番いいのですが、作る
側は大変です。
また、肝心なのは、XHTML1.1では、embed要素をサポートしておりません。
HTMLでは、各プラグインに応じた動画ファイルを再生するために、HTML規格外
の embed要素を用いることが多いのですが、XHTML1.1では使えません。
では、XHTML1.1では、動画を再生することができないのでしょうか？
実は驚くほど簡単です。
◆XHTML1.1で示す動画ファイルの表現
扱う動画方式がどのようなものであっても、それをブラウザ上で機能させるた
めには以下の通り、アンカーを用いる方法があります。
<a href="sample.mpg">MPEG形式の動画</a>
<a href="sample.mov">QuickTime形式の動画</a>
このアンカーをクリックすると、ブラウザで搭載されている動画プレーヤーの
プラグインが呼び出されて、動画ファイルをダウンロードして再生を始めます。
ただし、そのようなプラグインやソフトがない場合には、動画ファイルそのも
をダウンロードするダイヤログボックスが現れ、ユーザのハードディスクに保存
するようなメッセージが現れます。
動画を再生するツールがない場合、ファイルをダウンロードしてもハードディ
スクの肥やしにもなりません。そのために、以下のように説明を加えます。
<p>MPEG映像の再生 <a href="sample.mpg">サンプル画像</a></p>
■object要素を使う
最新のHTML/XHTMLの仕様書では、動画を含むオブジェクトは object要素で
表現するように強く推奨しています。
記述法
<object data="sample.mpg" type="video/mpeg" width="320" height="250">
サンプル動画（MPEG方式）</object>
なお、object要素の classid属性で、プラグインツールのプログラムを呼び出
す方法があります。
classidが指定するクラス名
Quicktime 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
RealMedia CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
WindowsMedia 22D6F312-B0F6-11D0-94AB-0080C74C7E95
例えば、QuickTimeを呼び出す場合は、
<object data="sample.mpg" type="video/mpeg" width="320" height="250"
classid="02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
サンプル動画（MPEG方式）</object>
これによって、ブラウザはインストールされている QuickTimeを呼び出すか、
または、インストールされていない場合には、インストール先を明示する場合
があり、ユーザはその指示に従って QuickTimeを入手できます。
ただし、object要素をサポートしている Webブラウザが少ないので現実的と
は言えません。
■JavaScriptを使う
JavaScriptをトリガー（引き金）にして動画を再生する方法も多く取り上げ
られています。しかし、少なくないユーザでは、悪質なスクリプトによる攻撃
を避けるためにスクリプトを「オフ」にして利用しています。
その場合、動画を再生する機能を失い、永遠にそれを閲覧することができま
せん。
■結論
XHTML1.1による制約から逃れるためには、HTMLの過渡期仕様を利用するか、
素直にアンカーによる動画再生を利用するしか方法がありません。
私の個人的な調査では、動画を扱っている Webサイトでは、スクリプトの利
用とHTMLでは規格外とされているブラウザ独自仕様を用いて、動画コンテンツ
を配信しています。
将来的には、動画コンテンツをデータベースに変換し、それを利用するため
の XML（Extensible Markup Language）に置き換わるだろうと予想しています。
そのためには、多くの Webブラウザが１日も早く「object要素」をサポートす
ることが望まれています。
※当講座の Webサイトの「今週のおさらい」では、Real方式を除いた動画の再
生を扱っています。ただし、Realプレーヤーでも、MPEG方式は再生できます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 blockquote要素
長文の引用文章を表現するために利用します。
要素分類：ブロックレベル要素
DTD仕様 ：HTML4.01Strict
終了タグ：必須
属性 ：cite、datetime、汎用属性（id、class、title、lang）
属性値 ：cite="URI 引用咲きを示した文書の URI"
datetime="日時：掲載した日時（ISO-8601形式）"
子要素として持てる要素：address、blockquote、dl、div、fieldset、form、
h1〜h6、hr、p、pre、table、ul、ol、del、ins
script、noscript
HTML4.01Strictでは、直接インラインレベル要素を配置することができません
が、過渡期仕様であるHTML4.01Transitionalでは、ほとんどの要素を利用するこ
とができます。
一般的な視覚系ブラウザでは、左右がインデント（字下げ）されて表示します
が、インデントを目的として利用することは文法違反となります。
主に、長文の引用文を表現するために用います。その場合、引用の出所先を明
示する cite属性で、URLを示します。なお、短文の引用には、インラインレベル
要素である q要素を利用します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_054.html
次回は、6月13日に配信を予定しています。
次回のコンテンツ（予定）
■ JavaScript講座 第10回 --- オブジェクトのメソッド、プロパティ
■ Netscape Navigator の JSSS（JavaScript Style Sheets）とは？
■ （コラム）２大ブラウザ MSIE と Netscape の行方
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると
思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・るーむ＞
動画のサンプル作りは苦労しました。大変だったのは、素材があまりにも少な
かったことでした。
人の顔が見えてはいけない、特定の著作物を写せないなどの制約の中で、時間
切れとなり、結局、車の中で写した愛犬だけを利用しました。本当につまらない
素材で申し訳ありません。
次回にはきっと何かいいものをと考えています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com