XHTMLと新しいウェブ技術

XHTMLと新しいウェブ技術
1. 拡張の基盤XHTML
XMLの利点を持つXHTML
XHTMLの基本
最新技術を取り込むXHTML
2. ウェブの目指す方向と新技術
2.1 誰にでも利用できるウェブ
多様な環境とUA
環境の違いとウェブづくり
スタイルシートとメディア
プロファイルとネゴシエーション
プロファイルを生かす処理
XHTML Basic
SVG: Scarable Vector Graphics
高機能なフォームXForms
アクセシビリティ
アクセシビリティの指針
2.2 意味を表現するウェブ
自動処理とXHTML
検索システムと自動処理
エージェントとメタデータ
Resource Description Framework
セマンティック・ウェブ
2.3 信頼できるウェブ
プライバシーとP3P
P3Pで記述するポリシー
プライバシーポリシーとフィルタ

XHTMLと新しいウェブ技術

1.新技術を取り込む拡張基盤XHTML
2.ウェブの目指す方向と新技術
- Universal Access：誰にでも利用できるウェブ
- Semantic Web：意味を表現するウェブ
- Web of Trust：信頼できるウェブ

1. 拡張の基盤XHTML

XMLの利点を持つコンテンツ記述言語
XHTML記述方法の基本
最新技術を取り込むXHTML

XMLの利点を持つXHTML

XMLの利点
- 書法が厳密で機械処理・自動処理に適している
- 標準として普及し、汎用ツールが多数提供されている
XHTML1.0 - XML化されたHTML
- サーバー側、クライアント側でXMLツールを利用できる
- 名前空間を利用して他タグセットを組み込める
- HTMLの資産を継承できる
XHTMLのモジュール化
- モジュールで構成されるXHTML1.1、XHTML Basic
- モジュールを組み合わせて独自言語仕様を定義可能

XHTMLの基本

整形式XMLとしてのルール
- 開始タグと終了タグをバランスさせ、属性を厳密に
- 空要素タグは /> で閉じる
- タグの要素型名、属性名を小文字で統一
XHTMLであることの明示
- 名前空間の宣言
  （例） <html xmlns="http://www.w3.org/1999/xhtml">
- 文書型宣言（妥当な＝Valid XMLとして）
  （例）
```
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

2. ウェブの目指す方向と新技術

2.1 誰にでも利用できるウェブ
- デバイス（環境）に依存しないウェブ作り
- アクセシビリティ
2.2 意味を表現するウェブ
- 自動処理とユーザエージェント
- メタ情報による「意味」の提供
2.3 信頼できるウェブ
- プライバシーの尊重

2.1 誰にでも利用できるウェブ

デバイス（環境）に依存しないウェブ作り
- 環境の違いに強いウェブ、弱いウェブ
- スタイルシートとメディア
- UAのプロファイルとXHTML Basic
- SVG、Xformsなどの技術
アクセシビリティ
- アクセシビリティの指針
- パブリックな情報提供とアクセシビリティ

多様な環境とUA

異なる環境のユーザーとエージェント
- 携帯電話：ブラウザフォン
- PDA：ウェブクリッピング
- 視覚障碍者：音声ブラウザ、点字ブラウザ
- ふつうの消費者：テレビ、冷蔵庫、情報家電、Lモード？
- IT音痴のエグゼクティブ：印刷
自分の目の前のUAが全てという誤解
- 作者の環境と読者の環境は異なる
- たまたまそれらしく表示されていても、別のUAには理解不能な場合も

環境の違いとウェブづくり

環境の違いに弱い情報
- 特定のブラウザを念頭においた表現
- 特定の環境（画面サイズ、プラグイン、色）に依存した表現
環境の違いに強い情報
- 情報の論理・構造と表現を分離する
  - 表現方法は環境に依存するが、情報の論理・構造は変わらない
  - 本来のHTML/XHTMLは、情報の論理・構造を記述し、UAに解釈させるためのもの
- 意味に表現を与えるスタイルシート
  - プレゼンテーションはスタイルシートを使う
  - 環境に応じてスタイルを使い分ける

スタイルシートとメディア

スタイルシートのメディア属性
- screen, print, handheldなどメディアを指定し、それぞれの特徴を生かした異なるスタイルを設定
- CSS3ではmedia="screen and (color)"など、より詳細なメディア指定が可能に
  （例）
```
<link rel="stylesheet" media="screen" href="sc.css" type="text/css">
<link rel="stylesheet" media="print" href="pr.css" type="text/css">
```

プロファイルとネゴシエーション

HTTPヘッダの情報によるネゴシエーション
- Accept-Languageヘッダ
  - 希望言語のバージョンを選択可能
  - ApacheのMultiViewsなど
- User-Agentヘッダ
  - ブラウザを識別して適切なコンテンツ
CC/PP (Composite Capability / Preference Profiles)
- UAの機能や利用者の希望をより明確に示す
- 複雑なプロファイルはレポジトリ（外部DB）に登録

プロファイルを生かす処理

XHTMLを必要に応じてXSLTで変換
- XSLT＝XML文書を別の形式に変換するルール集
- ブラウザごとに別のファイルをあらかじめ用意しておくのではなく、変換ルールによる動的な生成

XHTML Basic

携帯端末を念頭に設計した小さなタグセット
携帯電話向け言語の混乱収拾に期待
- WAPフォーラムをはじめ携帯各社が採用の意向を表明
ワンソース・マルチデバイス
- XHTML BasicでもPC向けページ作成は十分可能
- XSLT、SVGなどのXMLベース技術が利用できる

SVG: Scarable Vector Graphics

画像をXMLでベクター情報として表現
- 伸縮自在で解像度に依存しない
テキストベースによる画像表現
- CGIプログラムなどでの自動生成が容易
- 画像内部の文字情報を検索可能
- データの再利用が可能
  - （例）株価グラフから株価データそのものを抽出する
SVGのサンプルとデモ
- （略）

高機能なフォームXForms

画面表示、データモデル、送信を分離
- デバイスごとに異なるUIを共通のモデルと組み合わせ
- データタイプの検証、中断入力の保存など高度な機能

アクセシビリティ

どんな利用者にも伝わる情報を
- すなわち、あらゆるUAがきちんと処理できる情報
Web Accessibility Initiative
- アクセシビリティの高いウェブコンテンツのための指針（WCAG）
アクセシビリティ基準とウェブ
- 米国リハビリテーション法修正508条
- IT戦略本部の指針

アクセシビリティの指針

利用者の必要や環境に応じて表示が可能
- 非テキスト内容に、同等のテキストを用意する
- 内容と構造を、表現から分離する
ユーザーに選択権を与える対話的操作
- コンテンツに到達するために複数のルートあるいは手段を提供する
- 利用者が主体的にコントロールできるようにする
理解しやすい表現
- 一貫した表現を用い、表現、配置、ラベルによって、構造を明確に示す
技術に関する配慮
- 互換性と相互運用性を考え、新技術に対応していなくても、内容がきちんと理解できるように配慮する
- ユーザー補助技術に則ったユーザーインターフェイスを設計する

2.2 意味を表現するウェブ

自動処理とユーザエージェント
- ロボットなどによるデータの自動収集と分析
- 全文検索システムと重要語句の重み付け
メタ情報による「意味」の提供
- 現在：人間が読んで意味を理解するウェブ
- 将来：エージェントが意味を理解し、自動的に収集・分析できるウェブ＝Semantic Web

自動処理とXHTML

目次、索引の自動生成などが可能
- HTMLを正しく使うメリット（従来のHTMLでも可能）
  - h1～h6要素やdfn要素を収集させれば目次、索引を自動生成できる
- XHTMLを使ってもマークアップが意味をなさなければ自動処理はできない
XHTMLならばXMLの汎用ツールが使える
- XSLTによる文書変換
- DOMやSAXを用いたデータ処理
- 商品告知のような一般向けページに記述しているスペックから製品一覧を自動生成するなど、多目的利用が可能

検索システムと自動処理

全文検索インデクスの自動作成
- サイト内検索システムの提供がユーザビリティに重要
- Namazuなどのシステムは、マーク付けに基づいて重要度を重み付けし、見出しを要約に利用
  - 正確なマークアップが使いやすい検索システムの鍵
インデクスだけでは意味の表現に至らない
- 複数キーワードの指定などで絞込み
- 「アクセス」という言葉で、利用頻度を調べたいのか、データベースソフトについて調べたいのかは判断できない

エージェントとメタデータ

メタデータ＝文書自身に関する情報

より正確な自動処理のためキーワード、作者などを記述

（例）

<meta name="keywords" content="HTML,XHTML,ウェブマスター,講座">
<meta name="description" content="ウェブマスターのための新技術解説">

普遍的な語彙によるメタデータの表現
- 語彙をユニークに定義し、XMLの名前空間で識別
  （例） xmlns:dc="http://purl.org/dc/elements/1.1/"
- 例：Dublin Coreによる書誌情報の定義など
  （例）
```
<dc:title>ユニバーサルHTML/XHTML</dc:title>
<dc:creator>神崎正英</dc:creator >
<dc:identifier>ISBN:4-8399-0454-5</dc:identifier>
```

Resource Description Framework

メタデータをXMLで表現するRDF
- 「グラフ」によるリソースの表現
- リソースRはプロパティPを持ち、その値はVである

プロパティを表現する語彙は仕組みと独立

Dublin Coreの語彙を借りてRDFで表現

（例）

<rdf:RDF xmlns:rdf="..." xmlns:dc="...">
 <rdf:Description rdf:about="http://www.kanzaki.com">
  <dc:creator>神崎正英</dc:creator >
 </rdf:Description>
</rdf:RDF>

セマンティック・ウェブ

事前の調整なしでも理解できる意味表現
- 基本的な記述ルールと推論により、未知のシステムでも意味の交換が可能に
セマンティック・ウェブ
- メタデータのつながりで、エージェントが自動的に任務を遂行
- まだ未来の話、しかしウェブの力を最大に生かすものとして期待は大きい

2.3 信頼できるウェブ

プライバシーポリシーの明記
P3Pによるプライバシーポリシーの自動処理
暗号化や電子署名による信頼あるトランザクション（本講演では取り上げません）

プライバシーとP3P

プライバシーポリシーの明記が常識に
- 利用者のプライバシーに対する関心の高まり
- ECやアンケートなど個人情報を記入する場合は、プライバシー情報の取り扱いに関する方針を明記したページを用意
P3Pによるプライバシーポリシーの記述
- プライバシーポリシーをXMLで記述
- 対応ブラウザがP3Pを確認して利用可否を判断
ポリシーエディタやウィザードを利用する作成例
- （略）

P3Pで記述するポリシー

運用主体に関する情報
- <ENTITY>で名称、住所、連絡先などを明記
取得した情報へのアクセス手段
- <ACCESS>で個人情報取得の有無と、その確認方法を明記
トラブルの窓口と解決方法
- <DISPUTE-GROUP>で担当や解決法
情報取得の内容と目的
- <STATEMENT>で情報取得の目的、取扱者、保存期間、取得内容を明記

プライバシーポリシーとフィルタ

UAの設定するプライバシーポリシーをサーバーのP3Pと比較してフィルタリング
- IE6は標準設定でP3Pをチェック
- カスタム設定で個人の希望を反映

XHTMLと新しいウェブ技術

XHTMLと新しいウェブ技術

1. 拡張の基盤XHTML

XMLの利点を持つXHTML

XHTMLの基本

最新技術を取り込むXHTML

2. ウェブの目指す方向と新技術

2.1 誰にでも利用できるウェブ

多様な環境とUA

環境の違いとウェブづくり

スタイルシートとメディア

プロファイルとネゴシエーション

プロファイルを生かす処理

XHTML Basic

SVG: Scarable Vector Graphics

高機能なフォームXForms

アクセシビリティ

アクセシビリティの指針

2.2 意味を表現するウェブ

自動処理とXHTML

検索システムと自動処理

エージェントとメタデータ

Resource Description Framework

セマンティック・ウェブ

2.3 信頼できるウェブ

プライバシーとP3P

P3Pで記述するポリシー

プライバシーポリシーとフィルタ