# Webを支える技術　第4部　ハイパーメディアフォーマット① ## 第10章　HTML ### 10.1 HTMLとは何か **HTML(Hyper Text Markup Language)** は、タグで文章を表現する構造化文書である。 タグでの文章表現はXML形式がベースの**XHTML**となっている。 ### 10.2 メディアタイプ * application/xhtml+xml XMLベースの**XHTML形式**のメディアタイプ。 * text/html XHTML以前に用いられていたSGMLをベースとしたHTMLのメディアタイプ。 なお、文字エンコーディングはUTF-8を指定するのが無難である。 ### 10.3 拡張子 基本は.htmlである。古いOSの制限による3文字拡張子表現の場合は.htmとなる。 ### 10.4 XMLの基礎知識 一部のみ記載 #### 10.4.1 特殊文字の実体参照と文字参照 * **実体参照**：不等号やクォーテーション等の記号の意味を利用する際に用いる。XMLでは&に続けて意味を表す単語の省略形が入る。最後はセミコロンで終わりを表す。以下に実例を表す。 * 小なり(<)：&lt; * 大なり(>)：&gt; * ダブルクォーテーション(")：&quote; * アポストロフィー及びシングルクオーテーション(')：&apos; * ＆記号：&amp; * **文字参照**：コピーライト記号等、文字エスケープ処理が必要な場合に用いる。UTF-8の場合#Unicode番号で表される。番号はx以下16進数で表すこともできる。以下に実例を示す。 * コピーライト記号(©)：#169;又はxA9 #### 10.4.2 名前空間の定義 名前空間とは、複数のXMLフォーマットを組み合わせる際に、名前の衝突を防ぐために用いられるものである。 * 要素の名前空間 ```xml= <html xmlns="http://example.jp/index/xhtml" xmlns:atom="http://example.jp/name/Atom"> <head> <link rel="styleseet" href="base.css"/> <atom:link rel="enclosure" href="attachment.mp3"/> </head> </html> ``` 名前空間の指定を**名前空間宣言**という。 要素の場合、**xmlns:接頭辞="名前空間名"** となる。接頭辞が無い場合はデフォルト名前空間となる。名前空間にはURIが入る。 名前空間宣言により、**名前空間名と接頭辞を結びつける役割を持つ。** 名前空間宣言により、後の要素では**接頭辞の有無で異なる指定が可能となる。** 上記の例の場合、link要素がデフォルトとatomの場合に分割されていることがわかる。 * 属性の名前空間宣言 ```xml= <entry xmlns="http://example.jp/name/Atom" xmlns:thr="http://purl.org/syndication/thread/1.0"> <link href="blog.example.jp/entires/1/commentsfeed" thr:count="10" /> </entry> ``` 属性ごとに別の参照先を指定したい場合も同様に、属性がある要素でxmlnsによる名前空間宣言を行う。 ここではlink要素内にhrefとthr:countの2属性が存在する。hrefのように、**名前空間宣言のないものは、要素内のみで有効なローカル属性**となる。一方で、thr:countのように、**親要素が持つ名前空間宣言が存在する場合、その属性はグローバル属性**となる。グローバル属性は親要素内の他の子要素でも指定できる。 ### 10.5 HTMLの構成要素 こちらも一部のみ記載。 #### 10.5.1 ヘッダ * title：ページタイトル * link：他リソースのリンク表示 * script：JavaScript等のプログラム * meta：その他メタデータ #### 10.5.2 ボディ * ブロックレベル要素 * h1~h6：見出し * div：グループ化 * p：段落 * ol, ul, dl：リスト * ol：番号付きリスト * ul：記号付きリスト * dl：説明付きリスト * table：表 * tr：表の行内容 * th：表の列名 * td：表のデータ * form：htmlフォーム * address：アドレス情報 * pre：整形済みテキスト * blockquote：引用 * インライン要素 * em：強調 * strong：強い強調 * br：改行 * a：アンカー（ハイパーテキストリンク） * code：ソースコード * img：画像 #### 10.5.3 共通の属性 * id属性　文書内で一意（ユニーク）なid。 * class属性　その要素が属するクラス。CSSのクラス指定等。 ### 10.6 リンク #### 10.6.1 アンカーとハイパーテキストリンク a要素を用いてリンク（ハイパーテキストリンク）の記載が行える。 href要素にURI、aと/aに挟まれた部分に画面に表示する名称を記述する。 （例：画面にlink1と書かれたリンクを設置したい場合） ```xml= <a href="http://www.example.jp/link1">link1</a> ``` #### 10.6.2 link要素 link要素は、ヘッダでWebページ同士の関係を表す際に用いる。 （例：indexページ、戻るボタンのリンク先、進むボタンのリンク先を定義したい場合） ```xml= <head> <link rel="index" href="http://example.jp/index.html"/> <link rel="prev" href="http://example.jp/1.html"/> <link rel="next" href="http://example.jp/3.html"/> </head> ``` #### 10.6.3 オブジェクトの埋め込み テキスト以外にも、画像や音声も埋め込み可能となる。 画像はimg要素、その他オブジェクトの埋め込みにはobject要素が用いられる。 ```xml= <img src="http://example.jp/children.png" alt="子供たちの写真"/> <object data="http://example.jp/children.mpeg">子供たちの動画</object> ``` #### 10.6.4 フォーム form要素で、ユーザからの入力等のリクエストを送信できる。 form要素とフォームコントロール要素に分かれる。 form要素では、method属性とaction属性を指定する。 method属性ではGET又はPOSTでHTTPメソッドを指定する。 両者の違いは、GETはURIを入力内容を基に生成し、a要素やlink要素でのリンクも発行できる。 一方POSTはHTMLフォームの送信のみしか行えないが、特徴の一つである秘匿性が必要な送信や大きなデータ送信に向いている。 action属性では、リクエストパラメータの送信先となるURIを記述する。 #### 10.6.5 フォームコントロール要素 input要素内に記載する。属性指定により表現方法が異なる。 * テキストボックス・パスワードボックス： type="text"（パスワードボックスはtype="password"）**name属性で値を取得する。** value属性はあらかじめ入力する文字を表す。 * ボタン：type="button"（送信ボタンはtype="submit"、リセットボタンはtype="reset"）**name属性で値を取得する。** value属性はボタン表示を表す。 * チェックボックス：type="checkbox" **基本はname属性で値を取得する。** value属性は画面表示を表す。 * ラジオボタン：type="radio" **value属性で値を取得する。** name属性は、比較対象となる一連のグループを結びつける役割となる。 以下はselect要素内に記述する。 * ドロップダウン：select要素のname属性で一連のグループを結びつける。option要素で挟んだ内容が表示される。**option要素のvalue属性で値を取得する。** * リストボックス：select要素のname属性では配列を表す[]付きの名前で一連のグループを結びつける。multiple属性を指定すると複数選択可能となる。その他はドロップダウンと同様。 ### 10.7 リンク関係 WebAPIのようにプログラムがクライアントの場合は、**各リンクがどのような意味かを解釈できるように機械的に判断する仕組み**が必要がある。 そのためにHTMLやAtomには、以下の機構が用意されている。 #### 10.7.1 rel属性　 a要素、link要素に指定可能。**リンク元とリンク先の関係がどのようなものかを記述する。** 先ほどの10.6.2 link要素の例を見ると、index, prev, nextの3つのrel属性が定義されていた。 この3つの属性はそれぞれ、索引へのリンク、文書群の前の文書に戻るリンク、文書群の次の文書に進むリンクという意味を持つ。 この他にもCSSのリンクを記述する際に、外部スタイルシートへのリンクを表すrel="stylesheet"を記述する場合が多い。 以下主なリンク関係を表す。(index, prev, next, stylesheet以外) * start：文書群の最初の文書へのリンク * contents：目次へのリンク * chapter：章へのリンク * section：節へのリンク * subsection：小節へのリンク * help：ヘルプページへのリンク * altimate：翻訳などの代替手段へのリンク * bookmark：文書中のブックマークへのリンク #### 10.7.2 microformats htmlのリンク関係では足りず拡張する場合は、**microformats（11章を参照）** 等を利用して拡張することができる。 ### 10.8 ハイパーメディアフォーマットとしてのHTML **HTTP、URI、ハイパーメディアによるリンクを組み合わせて、初めてWebが成り立つ。** **リンクをたどることでアプリケーション状態が推移することを意識する。** ## 第11章　microformats ### 11.1 シンプルなセマンティックWeb **microformats**は、HTMLの中で、**さらに意味のあるデータを表現する**ための技術である。 旧来のセマンティックWebを改良し、よりシンプル化させたものである。 **microformatsはシンプルかつ軽量に、リンクの詳細な意味づけやイベント情報を表現できる。** ### 11.2 セマンティックス（意味論）とは セマンティックス（意味論）は、もともと言語学用語であり、言語が持つ意味を扱うことが意味論とされている。 プログラミングの世界では、プログラムの言語の持つ意味を確定させることをプログラム意味論という。 Webにおける意味論は、リソースが持つ意味を確定させることを指す。HTML等で表現したテキストがどのような意味を持つのかを定義し、プログラム上で解釈できるようにする目的がある。 セマンティックWebとは、プログラムが処理可能なように形式的に意味を記述するための技術を指す。 ### 11.3 RDFとmicroformats #### 11.3.1 RDF セマンティックWebの先駆けとして、1990年代後半に登場したのが**RDF(Resource Description Framework)** である。 トリプルという名の主語、述語、目的語の3つの組を用いて、Web上のリソースにメタデータを与え、プログラムが意味を処理できるようにするものである。 リソースの意味が厳格に記述でき汎用的なフレームワークとして利用できるメリットがある。 その反面、記述が冗長になりがちで、他にも主語述語の選択やメタデータの表現方法によりXML構造が異なる、独立したメタデータが必要等のデメリットがある。 結局デメリットが災いし、普及には至らなかった。 #### 11.3.2 microformatsの登場 RDFの問題点を解消した技術が**microformats**である。 HTMLのa要素に述語を表すrel属性、目的語を表すhref属性を追加するだけの非常に簡潔な表現方法となっている。 HTMLへの記述方法は画一的で、htmlに埋め込まれたものをメタデータとして扱うため独立して持つ必要もない。 RDFの難点を見事に解決したフレームワークとなっている。 ### 11.4 microformatsの標準化 より簡単に記述できるよう、Technoratiのエンジニアを中心としたボランティアが、様々なメタデータの記述の仕様を策定している。 ### 11.5 microformatsの分類 microformatsは大きく分けて2種類に分類可能である。 #### 11.5.1 elemental-microformats microformatsのうち、a要素やlink要素に直接埋め込むタイプのものである。 比較的単純なためelementalという名前が付けられている。 主なelemental-microformats * rel-license：ライセンス情報 * rel-nofollow：スパムリンクの防止（google検索の重みづけに利用しない） #### 11.5.2 compound-microformats microformatsのうち、主にclass属性を用いて階層構造のあるメタデータを表現するタイプのものである。 複合的な処理のためcompoundという名前が付けられている。 class属性では、詳細な項目を指定可能であり、各々の要素に指定することで、定義されている階層構造のもとに情報を表現できる。 また、一部のmicroformatsでは、必須のclass表現が設定されているものもある。 * hCalender：カレンダー、イベント情報 * hAtom：更新情報 ### 11.6 microformatsとRDFa microformatsの問題点は、class属性やrel属性の値だけで処理がなされる点である。 同一の値を持ったWebページがあった場合、誤判定や同一属性値の指定ができなくなる問題が生じる可能性がある。 こうした問題の解決に向け、W3Cによる標準化が進んでいるのがRDFaである。 rel属性にcc:という接頭辞をつけた名前空間を設定することで重複を回避できる。 但し、処理が複雑化してしまったり、名前空間を利用するためXHTMLでしか利用できない問題点がある。 ### 11.7 microformatsの可能性 2007年のTimBray氏の講演では、セマンティックWebを全く評価していなかった。 なぜなら、これらを利用した普段使いのできるアプリケーションが無かったためである。 その後、LDRizeやAutoPagerize等が登場し、microformatsを有効活用するアプリケーションが現れ始めた。 microformatsを使う事で、実装時点では想定していなかったデータの利用方法が見つかる可能性がある。 ### 11.8 リソース表現としてのmicroformats WebAPIは、Webサービスとの機能が異なったり、メンテナンス性の低下、技術の取得コストがかかる等の弱点があった。 microformatsはこれらの弱点を補っていくれるリソース表現であり、**必要最低限のコストでWebサービスをWebAPI化できる特長がある。** ###### tags: `読書`