『Webを支える技術』読書記録　第４部

#はじめに
今回『Webを支える技術』という本を読みましたので、自分なりにアウトプットしていく目的でまとめます。
リンク：[『Webを支える技術――HTTP、URI、HTML、そしてREST』](https://gihyo.jp/magazine/wdpress/plus/978-4-7741-4204-3)


#第４部 ハイパーメディアフォーマット

##第１０章 HTML

###HTMLの基礎知識
　HTMLのメディアタイプには「text/html」と「application/xhtml+xml」の２種類あり、どちらもcharsetパラメータをつけて文字エンコーディング(UTF-8)を指定する。

　XMLの文書構造を記述するための特別な文字として、「<」「>」「”」「’」「&」があるが、これらは実態参照という機構を用いて「&It;」「&gt;」「&quote;」「&apos;」「&amp;」などと表す。他に、文字参照という記法もある。

　また、要素や属性の名前の衝突を防ぐため、名前空間を利用する。
例：\<html xmlns=”http\://...”
　　　　xmlns:atom=”http\://...”>

　href属性のように接頭辞のつかない属性のことを「ローカル属性」といい、接頭辞のある属性のことを「グローバル属性」という。

###HTMLの構成要素

　HTMLの基本的な構成要素はヘッダ(title、script、link、meta等)とボディである。

　ボディは、ブロックレベル要素(h1,h2..、dl,ul,ol、div等)とインライン要素(strong、br、a等)に分かれる。

　HTMLのすべての要素はid属性とclass属性を持つことができる。それを使用しCSSを指定する。
例：\<h1 id=”title”>初めてのHTML</h1>
例：h1#title{ font-size: 120%;}

　id属性はURIフラグメントとしても利用でき、要素自体を示すURIを表記できる。
例：http\://example.jp/test.html#title

　HTMLでは、他のWebページにリンクするためのタグに「\<a>」、ブロック要素内で別のページにリンクするためのタグに「<link>」を用いる。rel属性にはリンク元のリソースと、リンク先のリソースの相関関係(styleseet等)を記述する。
例：\<a href=”http//...”>
例：\<link rel=”index” href=”http\://example.../index.html”/>

　また、画像の埋め込みには「\<img>」、その他のオブジェクトの埋め込みには「\<object>」を使用する。
例：\<img src=”http\://example.../...png”/>

　HTMLのフォームではリンク先のURIに対してGETとPOSTが発行できる。

```example.html
<form method=”GET” action=”http://example.jp/search”>
	<p>キーワード：
		<input type=”text” id=”q” name=”q”/>...
```

　上記の例の場合、「test」を入力すると、「http\://example.jp/search?q=test」というURIをが作成される。


##第１１章 microformats

###macroformatsの標準化

　HTMLの中で更に意味のあるデータを表現するための技術がmicroformatsである。これ以前にも、プログラムで処理可能な情報の意味を記述するための技術としてRDFがあったが、記述が複雑かつ統一的でない、また対象データとは別にメタデータを必要とする等の問題があった。これらを解消したのがmicroformatsである。

microformatsはHTML文書そのものにメタデータを埋め込む技術である。microformatsは大きく２つに分けられる。

- elemental microformats
　リンク関係を使ってメタデータを表現する。
	例：rel-license→Webページのライセンスを記述する。
	例：rel-nofollow→スパムリンクの防止を行う。

- compound microformats
　class属性を使って階層構造のあるメタデータを表現する。
	例：hCalendar→イベント情報を記述する。
	例：hAtom→更新情報

###macroformatsの問題点

　microformatsの問題点として、class属性やrel属性の値だけでメタデータを特定するため、重複が起こりやすく、プログラムの誤判定の恐れや、同名のmicroformatが作れない等がある。XMLの名前空間を利用し、接頭辞で名前空間の定義、値の定義を行う等のRDFsという手段があるが複雑化、XHTMLでの使用に限定などの問題もまたある。

###mocroformatsの可能性

　microformatsが提供するアプリケーションとしてはLDRizeやAutoPagerize等がある。これらはmicroformatsが提供するメタデータを使用している。また、microformatsを用いると、既存のWebページをそのままWebAPIをとして提供できる。プログラム用に別のWebAPIを提供することが主流だが、以下のような問題点がある。

- WebサービスとWebAPIで提供する機能が異なることが多い
- 開発規模の増大によるメンテナンス性の低下
- WebAPIに必要な技術の習得コスト

　このように、WebサービスとWebAPIを分けないという考え方は、WebサービスとWebAPIの設計においてとても重要である。


##第１２章 Atom

###Atomの構成要素

　Atomは幅広い分野での応用が可能な汎用XMLフォーマットである。Atomは様々なWebサービスのWebAPIとして利用できる。
Atomの構成要素の図が以下である。

![無題808-20200422232657.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624406/e272a63e-937f-7405-866a-ca6e3ebf0696.png)

　Atomにおける、最小のリソース単位がメンバリソースである。メンバリソースは、XMLで表現できるエントリリソースとそれ以外のメディアリソースに分かれる。
また、コレクションリソースは複数のメンバリソースを含むリソースで、階層化されない。コレクションリソースは<feed>要素で表現し、この表現のことを「フィード」と呼ぶ。

　Atomのメディアタイプは「application/atom+xml」である。また、拡張子は「.atom」を用いることが推奨されている。

###Atomが定義するメタデータ

　エントリのルート要素は\<entry>要素で、この中にメタデータがフラットに並ぶ。Atomが定義しているメタデータは以下である。

- ID(\<id>)
　エントリを一意に示すURI形式のID。

- タイトル(\<title>)と概要(\<summary>)
　titleは必須である。
- 著者(\<author>)と貢献者(\<contributor>)
　authorは必須である。
- 公開日時(\<published>)と更新日時(\<update>)
　updateは必須である。
- カテゴリ(\<category>)
　エントリの属するカテゴリを示す。
- リンク(\<link>)
　いくつかの属性を持ち、href属性にはリンク先のURIが入り、rel属性ではリンク関係を表現し、hreflang属性にはリンク先のリソースの言語タグが入る。

###エントリの内容

　また、エントリの内容には多くのフォーマットが含まれる。以下は、その例である。

- 組み込みで定義されるもの
    - プレーンテキスト(text)
    - エスケープ済みHTML(html)
    - XHTML(xhtml)

```example.html
<entry xmls=”http://www.w3.org/2005/Atom”>
・・・
	<content type=”text”>単純なテキスト</content>
</entry>
```

```example.html
<entry xmls=”http://www.w3.org/2005/Atom”>
・・・
	<content type=”html”>
	&lt;p>エスケープしたHTML &lt;br>が入ります。&lt;/p>
    </content>
</entry>
```

この<content>のtype要素にはその他のメディアタイプも下記のように指定することができる。

- XMLの内容
    - サブタイプがxmlであるもの(application/xml、text/xml)
    - サブタイプが+xmlであるもの(image/svg+xml等)

```example.html
<entry xmls=”http://www.w3.org/2005/Atom”>
・・・
	<content type=”image/svg+xml”>
		<svg xmlns=”http://www.w3.org/2000/svg”
             xml:space=”preserve” width=”5.5in” height=”.5in”>
             <text style="fill:red;" y=”15”>This is SVG.</text>
        </svg>
</content>
</entry>
```

- テキストの内容(text/csv等)

```example.html
<entry xmlns=”http://www.w3.org/2005/Atom”>
・・・
	<content type=”text\csv”>商品名,価格,個数
りんご,150,1
みかん,300,5</content>
</entry>
```

- テキスト以外の内容(image/jpeg等)

　画像などのバイナリデータはBase64でエンコードするが、巨大なデータの場合は処理の負荷や文書の巨大化を防ぐため、src属性を用いて外部リソースを参照する。このように、src属性で外部リソースを参照しているエントリリソースのことを「メディアリンクエントリ」という。

```example.html
<entry xmlns=”http://www.w3.org/2005/Atom”>
・・・
	<content type=”image/jpeg” src=”http://example…(Base64エンコードJPEGの外部リソース)”>
</content>
</entry>
```

　メンバリソースを複数持つコレクションリソースの表現がフィードである。

```example.html
<feed xmlns=””http\://www.w3.org/2005/Atom”>...
```

　\<feed>要素はエントリと同じメタデータを持つことが出来る。必須要素もエントリと同様、ID(\<id>)、タイトル(\<title>)、著者(\<author>)、更新日時(\<update>)である。\<feed>要素直下の\<author>要素と\<conrtibutor>要素は、そのフィード中のエントリで要素を省略したときのデフォルト値となる。

　また、フィードはエントリと共通のメタデータ以外に、以下の４つのメタデータを持つ。

- サブタイトル(\<subtitle>)
　タイトルでは説明しきれない説明を記述する。
\<titile>要素、\<summary>要素、\<content>要素と同様、「text」「html」「xhtml」という値を持つ。

- 生成プログラム(\<generator>)
　フィードを生成したプログラムの情報を表現する。
- アイコン(\<icon>)
　favicon(WebサイトやWebページに関連付けられたアイコン)
- ロゴ(\<logo>)
　フィードを象徴する画像(URI)を指定する。

###Atomの拡張

　また、Atomは拡張性が高く、ブログ以外のシステムでも応用されている。例としては以下である。

- Atom Threading Extensions
　スレッド機能の実装。

- Atom License Extention
　ライセンス情報を表現する。
- Feed Paging and Archixing
　フィードを分割する。
- OpenSearch
　検索結果を表現する。

##第１３章 Atom Publishing Protocol

###AtomとAtomPub

AtomとAtom Pubの関係は以下である。

- Atom
　データフォーマットの規定(フィード、エントリ)

- AtomPub
　Atomを利用したリソース編集プロトコルの規定
AtomPubは、Atomが規定したフィードやエントリで規定する、リソースの編集、いわゆるCRUD操作を実現するためのプロトコルである。

　AtomPubはRESTに基づいたプロトコル仕様であり、基本的なリソースモデルとリンク機構を提供するため、独自に設計する必要のある部分が大幅に削減されるという利点がある。

###AtomPubのリソースモデル
　AtomPubではAtomが規定しているリソースモデルをベースに、エントリを操作する。AtomPubでは、コレクションのメタデータを表現するサービス文書とエントリのカテゴリに指定できる値を列挙するカテゴリ文書を追加している。

###メンバリソースの操作
　フィードに含まれる各エントリは固有のURIを持つ。AtomPubではAtomの\<link>要素で編集用URIにリンクを張る。

###サービス文書
　AtomPubのサービス文書では、そのWebAPIが提供するコレクションリソースのメタデータを複数にまとめて記述できる。サービス文書はコレクションリソースのリストを集めたホームページのようなものである。
　以下はサービス文書が持つ要素である。

- \<service>要素
　サービス文書は\<service>要素をルートに持つXML文書である。サービス文書に登場するAtomの名前空間に所属する要素は「atom:」という接頭辞を付けて表現する。

- \<workspace>要素
　上記の\<service>要素は子要素に必ず一以上の\<workspace>要素を持つ。\<workspace>要素はいくつかのコレクションリソースをまとめるためのものである。\<workspace>要素にはタイトルが付けられ、\<atom:title>要素を子要素として持つ。

- \<collection>要素
　\<workspace>要素は０個以上の\<collection>要素を持つ。\<collection>要素はAtomPubのコレクションリソースのメタデータを表す。このメタデータの例は以下である。

 - コレクションリソースのタイトル(\<atom:title>要素)
 - コレクションリソースのURI(\<collection>要素のhref属性)
 - コレクションリソースが許容するメディアタイプ(\<accept>要素)
 - コレクションリソースが許容するカテゴリ(\<categories>要素)

　\<collection>要素にも、\<atom:title>要素で名前をつけることが出来る。

- \<accept>要素
　<accept>要素はこのコレクションリソースが受付可能なメディアタイプを示す。

- カテゴリ
　\<categories>要素は、このコレクションリソースで利用可能なカテゴリを示す。また、カテゴリは、サービス文書ではなくカテゴリ文書で表現することも出来る。カテゴリ文書のURIはサービス文書の\<categories>要素のhref属性で指定する。カテゴリを追加する方法に関してはAtomPubの仕様には明記されていない。(必要に応じて独自に用意する必要がある)

##第１４章JSON

###JSONとは
　JSONはJavaScript Object Notationの略で、RFC4627が規定するデータ記述言語である。Webサービスでは、ブラウザがJavaScriptを実行できるので、相性がよく、またXMLと比べデータ表現の冗長性が低いなどの利点から、Ajax通信におけるデータフォーマットとして活用されている。拡張子は「.json」を用いることが推奨されている。

###メディアタイプ
　JSONのメディアタイプは「application/json」である。XMLやHTMLと同様、UTF-8を利用することが推奨される。

###データ型
　JSONに組み込みで用意されているデータ型には次の６つがある。

- オブジェクト
　オブジェクトは名前と値の集合のことである。JSONではメンバの名前は常に文字列である。

```example.json
{
 "name":{
   "first":"Yohei",
   "last":"Yamamoto",
},
"blog": "http://Yohei-y.blogspot.com",
"age": 29,
"interests": ["Web", "XML", "REST"]
}
```


- 配列
 　配列は順序を持った値の集合のことである。ゼロ個以上の値を持つことが出来る。

 - 文字数の配列
```
["foo", "bar", "baz"]
```
 - オブジェクトの配列 
```
[{"foo": "bar"}, {"hoge": "piyo"}]
```
 - 配列の配列
```
[[10,10],[40,50]]
```
 - 空配列
```
[]
```
 - 複雑な配列
```
[{"foo": "bar", "baz"}, 100, true, null]
```

- 文字列
　JSONの文字列は必ず二重引用符で囲む。どのような文字も「\uXXXX」という形式(「\u」に続けて４桁の16進数で表現したUnicode番号)でエスケープ出来る。また、バックスラッシュ(\)や改行といったコントロール文字は、特殊なエスケープ表記を持っている。
 - 単純な文字列
```
"あいう"
```
 - エスケープ表記した「あいう」という文字列
```
"\u30A2\u30A4\u30A6"
```
 - バックスラッシュ(\\)と改行(\n)を含む文字列
```
"foo\\bar\n"
```

- 数値
　JSONの数値には整数と浮動小数点数の両方が含まれ、数値の表記は10進表記に限る。

- ブーリアン
　値に真か偽かをとるブーリアン型はリテラルで用意されている。「true」と「false」のように必ずすべてを小文字で書く必要がある。

- null
　null値もリテラルで用意されている。必ず「null」と小文字で書く必要がある。

組み込み型でないデータ型としては、日時がある。日時を表現する際は開発者側で何らかの規定を用意する必要がある。最も単純なのはUNIX時間を数値として表現する方法である。

また、JSONでリンクを表現するには、単純にURIを文字列値として持つのが簡単である。

```example.json
{
"href": "http://example.jp/foo/bar"
}
```
###JSONPによるクロスドメイン通信
　JSONPとは、scriptタグを使用してクロスドメイン通信(不特定多数のドメインに属するサーバにアクセスすること)を行う仕組みのことである。これを導入する背景として、XMLHttpRequestというJavaScriptモジュールはセキュリティの観点から複数のドメインのサーバと通信を行うことができないという制限がある。

　この問題に対する代替手段としてHTMLの\<script>要素を用いて、複数のサイトからJavaScriptファイルを読み込むという方法がある。

```example.html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://example.jp/map.js"></script>
    ...
  </head>
  ...
</html>
```

　また、コールバック関数を活用するという手段もある。JSONPはブラウザのこの性質を利用してクロスドメイン通信を実現する手法である。JSONPではオリジナルのJSONをクライアントが指定したコールバック関数名でラップして、ドメインの異なるサーバからデータを取得する。

```example.html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>クロスドメイン通信の例</title>
  </head>
  <body>
    <script type="text/javascript">
function too(zip) {
  alert(zip["zipcode"]);
}
    </script>
    <script
      src="http://zip.ricollab.jp/1120002.json?callback=foo"
      ></script>
  </body>
</html>
```

###ハイパーメディアフォーマットとしてのJSON
　JSONはJavaScriptをベースにしたシンプルなデータフォーマットであるというだけでなく、ハイパーメディアフォーマットとしての側面もある。JSONをハイパーメディアフォーマットとして使うためには、リンクを表現するメンバをきちんと入れる必要がある。他のリソースとン関係を考慮し、リンクをしっかりといれた設計をすることが重要となる。







##参考書籍詳細
WEB＋DB PRESS plusシリーズ『Webを支える技術――HTTP、URI、HTML、そしてREST』
山本陽平著　技術評論社　2010年5月1日　p.154~240