Webを支える技術　第4部　ハイパーメディアフォーマット

備忘録です。

## 第10章 HTML

### 10.1 HTMLとは何か

- Hypertext Markup Language
    - マークアップ言語とはタグで文書の構造を表現するコンピュータ言語のこと
    - マークアップ言語でマークアップした構造を持った文書を構造化文書という

### 10.2 メディアタイプ

- text/html
    - SGMLベースのHTML
- application/xhtml+xml
    - XMLベースのXHTML
        - SGMLの仕様をシンプルにしたものがXML

### 10.3 拡張子

- .html
- .htm

### 10.4 XMLの基礎知識

- XMLの木構造

```python
<html>
  |
  |-<head>
  |.  |
  |.  |-<title>
...
```

- 要素
    - XMLは要素で文書の構造を表現する
        - 開始タグ<要素名>
        - 内容
        - 終了タグ<要素名>
    - 要素は内容を持たなくても良い（空要素）
        - 空要素は終了タグを省略できる
- 属性
    - 属性は属性名と属性値の組で開始タグの中に記述する
    - 開始タグは属性を複数持てるが、同じ名前の属性は1つだけ
    - 属性は入れ子構造にはできない
    - 属性の順番には意味がない
- 実体参照
    - 以下の文字は実体参照という機構で表現する
    
    | 文字 | 実体参照 |
    | --- | --- |
    | < | \&lt; |
    | > | \&gt; |
    | “ | \&quote; |
    | ‘ | \&apos; |
    | & | \&amp; |
- 文字参照
    - 実体参照の対象の文字以外をエスケープして表現する場合は、Unicode番号で（文字参照）指定する
- コメント
    
    ```python
    <!-- コメント内容 -->
    ```
    
- XML宣言
    - XML文書の先頭にはXML宣言を書く
    
    ```python
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    ...
    </html>
    ```
    
- 名前空間
    - 要素の名前空間
        - 接頭辞によって名前の衝突を防ぐ
    
    ```python
    <html xmlns="http://www.w3.org/1999/xhtml"
    			xmlns:atom="http://www.w3.org/2005/Atom">
    	<head>
    		<link rel="stylesheet" href="base.css"/>
    		<atom:link rel="enclosure" href="attachment.mp3"/>
    	</head>
    ...
    </html>
    ```
    
    - 属性の名前空間
    
    ```python
    <entry xmlns="http://www.w3.org/2005/Atom"
    			 xmlns:thr="http://purl.org/syndication/thread/1.0">
    	<link href="blog.example.jp/entries/1/commentsfeed"
    				thr:count="10">
    </entry>
    ```
    

### 10.5 HTMLの構成要素

```python
<span href="foo/bar/baz.html">sample link</span>
|----------------------要素---------------------------|
|-----------開始タグ------------|--要素内容--|--終了タグ--|
|-要素名-|-------属性-------|
```

- ヘッダ
    - 文書のメタデータを入れる

| 要素 | 意味 |
| --- | --- |
| title | 文書のタイトル |
| link | ほかのリソースへのリンク |
| script | JavaScriptなどのクライアントサイドプログラム |
| meta | そのほかのメタデータ |
- ボディ
    - 文書の内容
        - ブロックレベル要素
            - 文書の段落や見出しなど、ある程度大きな塊を表現する
        
        | 要素 | 意味 |
        | --- | --- |
        | h1, h2, h3, h4, h5, h6 | 見出し |
        | dl, ul, ol | リスト |
        | div | ブロックレベル要素のグループ化 |
        | p | 段落 |
        | address | アドレス情報 |
        | pre | 整形済みテキスト |
        | table | 表 |
        | form | フォーム |
        | blockquote | 引用 |
        - インライン要素
            - 強調や改行、画像埋め込みなどを表現する
        
        | 要素 | 意味 |
        | --- | --- |
        | em | 強調 |
        | strong | 強い強調 |
        | dfn | 定義後 |
        | code | ソースコード |
        | samp | 例 |
        | kbd | キーボード入力文字 |
        | var | 変数 |
        | cite | 引用またはほかのリソースへの参照 |
        | abbr | WWW, HTTPなどの省略語 |
        | a | アンカー |
        | q | インラインの引用 |
        | sup | 上付き文字 |
        | sub | 下付き文字 |
        | br | 改行 |
        | ins | 挿入した文字列 |
        | del | 削除した文字列 |
        | img | 画像 |
        | object | オブジェクト |
- 共通の要素
    - HTMLの全ての要素はid属性とclass属性を持つ
        - id属性
            - 文書内で一意なID
            - URIフラグメントで利用したり、CSSでスタイルを指定したりする時に利用する
        - class属性
            - その要素が属するクラス
            - その要素がどのような意味を持つのか指定するメタデータとしての役割があり、CSSでのスタイル指定や、microformatsなどでメタデータを表現する時に利用する

### 10.6 リンク

- <a>要素
    
    ```python
    詳細な情報は<a href="http://gihyo.jp">技術評論社のWebページ</a>を参照して下さい。
    ```
    
- <link>要素
    
    ```python
    <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>
    ```
    
- <img>要素
    
    ```python
    <img src="http://example.jp/children.png" alt="子どもたちの写真"/>
    ```
    
- <object>要素
    
    ```python
    <object data="http://example.jp/children.mpeg">子どもたちの動画</object>
    ```
    
- フォーム
    - GET
        - フォームを利用した結果はターゲットURI（formのaction属性）に送られる
        - メソッドはformのmethodで指定
        - メソッドがGETの場合、ターゲットURIとフォームへの入力結果からリンク先のURiを生成する
            - http://example.jp/search?q=test
        
        ```python
        <html xmls="http://www.w3.org/1999/xhtml">
            <head><title>form test</title></head>
            <body>
                <form method="GET" action="http://example.jp/search">
                    <p>キーワード:
                        <input type="text" id="q" name="q" />
                        <input type="submit" id="submit" name="submit" value="検索"/>
                    </p>
                </form>
            </body>
        </html>
        ```
        
    - POST
        - ターゲットURIに対してPOSTを発行する
            - title=test-title&author=test-author
        
        ```python
        <html xmls="http://www.w3.org/1999/xhtml">
            <head><title>form test</title></head>
            <body>
                <form method="POST" action="http://example.jp/article">
                    <p>題名:<input type="text" id="title" name="title" /><br/>
                    　　著者:<input type="text" id="author" name="author" /><br/>
                       <input type="submit" id="submit" name="submit" value="検索"/>
                    </p>
                </form>
            </body>
        </html>
        ```
        

### 10.7 リンク関係　リンクの意味を指定する

- WebAPIのようにプログラムがクライアントの場合、アンカーテキストを読んで意味を理解したりできないため、プログラムがリンクの意味を理解できるようにする必要がある
- rel属性
    - リンク元のリソースとリンク先のリソースがどのような関係か表す
    
    ```python
    <head>
    	<link rel="stylesheet" href="http://example.jp/base.css"/>
    </head>
    ```
    
    | リンク関係 | 意味 |
    | --- | --- |
    | alternate | 翻訳などの代替文書へのリンク |
    | stylesheet | 外部スタイルシートへのリンク |
    | start | 文書群の最初の文書へのリンク |
    | next | 文書群の次の文書へのリンク |
    | prev | 文書群の前の文書へのリンク |
    | contents | 目次へのリンク |
    | index | 牽引へのリンク |
    | glossary | 用語集へのリンク |
    | copyright | 著作権表示へのリンク |
    | chapter | 章へのリンク |
    | section | 節へのリンク |
    | subsection | 小節へのリンク |
    | appendix | 付属書へのリンク |
    | help | ヘルプへのリンク |
    | bookmark | 文書中のブックマークへのリンク |
- microformats
    - 様々なリンク関係を表現するためにHTMLのリンク関係の拡張がmicroformatsなどで行われている

### 10.8 ハイパーメディアフォーマットとしてのHTML

- HTMLとURI、ハイパーメディアによるリンクを組み合わせてWebが成り立つ
- HTMLでリンクを設計する際は”リンクを辿ることでアプリケーションの状態が遷移する”ことを強く意識すること

## 第11章 microformats

### 11.1 シンプルなセマンティックWeb

- microformatsは、従来のセマンティックWebをより軽量にした技術

### 11.2 セマンティックス（意味論）とは

- 言語が持つ意味を扱うのが、言語学における意味論
    - 花には種子植物の生殖器官という意味が備わっている
- プログラミング言語が持つ意味を確定させる理論がプログラム意味論
    - コンパイラがプログラムをコンパイルするためにもプログラミング言語の仕様を形式的に記述する必要がある
- リソースが持つ意味を確定させるための理論がWebにおける意味論
    - Webページの意味をプログラムからも処理できるように形式的に意味を記述するための技術がセマンティックWeb

### 11.3 RDFとmicroformats

- RDF
    - Triple（主語、述語、目的語）を使って、Web上のリソースにメタデータを与えている
        - 主語：http://example.jp/test.html
        - 述語：Creative Commons
        - 目的語：by-sa
    - 問題点
        - 記述が複雑になりがち
        - 統一的な記述がしづらい
        - 対象データとは独立したメタデータが必要
    
    ```python
    <rdf:RDF xmls:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
        <rdf:Description rdf:about="http://example.jp/test.html">
            <cc:license xmlns:cc="html://web.resource.org/cc/" rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/>
        </rdf:Description>
    </rdf:RDF>
    ```
    
- microformats
    - RDFの問題点を解消したもの
    - 以下はrel-licenseと呼ばれるmicroformatsで、仕様によりCreative Commonsのby-saを意味すると定義づけられている
    
    ```python
    <html xmlns="http://www.w3.org/1999/xhtml">
    ...
        <body>
        ...
            <p>このWebページの権利は<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.8/">Creative Commons by-sa 3.0</a>に従います。</p>
        </body>
    </html>
    ```
    

### 11.4 microformatsの標準化

- 標準化済み

| 名前 | 概要 |
| --- | --- |
| hCalendar | イベント情報、ベースはRFC2445（iCalendar） |
| hCard | プロフィール情報、ベースはRFC2426（vCard） |
| rel-license | ライセンス情報 |
| rel-nofollow | スパムリンク防止 |
| rel-tag | ソーシャルタグ |
| Vote Links | リンク先への賛否 |
| XFN（XHTML Friends Network） | 友人関係 |
| XMDP（XHTML Meta Data Profiles） | microformats自体のスキーマ |
| XOXO（Extensible Open XHTML Outlines） | アウトラインフォーマット |
- ドラフト状態のmicroformats

| 名前 | 概要 |
| --- | --- |
| adr | 住所 |
| geo | 緯度と経度 |
| hAtom | 更新情報 |
| hAudio | 楽曲情報 |
| hListing | 検索連動型広告（リスティング広告） |
| hMedia | 画像、映像、音声などのメディア情報 |
| hNews | ニュース記事 |
| hProduct | 商品情報 |
| hRecipe | 料理のレシピ |
| hResume | 履歴書 |
| hReview | 本やレストランのレビュー情報 |
| rel-directory | ディレクトリページへのリンク |
| rel-enclosure | 添付ファイルへのリンク |
| rel-home | Webサイトのホームページへのリンク |
| rel-payment | PayPalなど課金サービスへのリンク |
| robots exclusion | 検索ロボット除け情報 |
| xFolk | ソーシャルブックマークのメタデータ |

### 11.5 microformatsの分類

- elemental microformats
    - リンク関係を使ってメタデータを表現するフォーマット
    - rel-license
        - ライセンス情報
    - rel-nofollow
        - スパムリンク防止
- compound microformats
    - クラス属性を使って階層構造のあるメタデータを表現するフォーマット
    - hCalendar
        - イベント情報
    - hAtom
        - Atomが持つメタデータをHTMLに埋め込むmicroformats
        
        ```python
        <div class="hfeed">
            <div class="hentry">
                <h2 class="entry-title">
                    <a href="http://blog.example.jp/20100903/test" rel="bookmark">
                        hAtomのテスト
                    </a>
                </h2>
                <div class="entry-content">
                    <p>hAtomを試用してみました。</p>
                </div>
                <p><abbr class="updated" title="2010-09-03T09:23:22+09:00">2010年9月3日9:23</abbr></p>
            </div>
            ...
        </div>
        ```
        
        | 名前 | 対応するAtom要素 | 概要 |
        | --- | --- | --- |
        | hfeed | feed | フィード全体 |
        | hentry* | entry | 個々のエントリ |
        | entry-title* | entry/title | エントリのタイトル |
        | entry-content | entry/content | エントリの内容 |
        | entry-summary | entry/summary | エントリの概要 |
        | updated* | entry/updated | エントリの更新日時 |
        | published | entry/published | エントリの公開日時 |
        | author | entry/author | エントリの著者 |
        | bookmark | entry/link | エントリへのリンク |
        
        ※は必須
        

### 11.6 microformatsとRDFa

- 問題点
    - 同じ値のclass属性やrel属性があるとプログラムがご判定を起こす可能性がある
    - 同じ属性値を持った別のmicroformatsが作れなくなる
- RDFa
    - 名前の衝突問題をXMLの名前空間で解決する
    
    ```python
    このWebページの権利は<a xmls:cc="http://creativecommons.org/ns#" rel="cc:licence" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons by-sa 3.0</a>に従います。
    ```
    
    - シンプルな仕様が複雑化してしまっているという欠点もある

### 11.7 microformatsの可能性

- 当初microformatsを使った普段使いのできるアプリケーションは皆無だった
- LDRizeとAutoPagerizeなどのmicroformatsが提供するメタデータを使ったアプリケーションが登場したことで、今後の進展が期待される

### 11.8 リソースの表現としてのmicroformats

- 人用と別にプログラム用にWebAPIを提供することのデメリット
    - WebサービスとWebAPIで提供する機能が異なってしまいがち
    - 開発規模の増大に伴うメンテナンス性の低下
    - Web APIに必要な技術の習得コスト
- microformatsは上記のデメリットを補ってくれるリソース表現

## 第12章 Atom

### 12.1 Atomとは何か

- Atom Syndication Format
- RFC4287が規定するXMLフォーマットで、ブログなどの更新情報を配信するためのフィードとして知られているが、幅広い分野での応用も可能な汎用XMLフォーマット

### 12.2 Atomのリソースモデル

- メンバリソース
    - 最小のリソース単位
        - 記事や画像
    - エントリリソース
        - テキストやXMLで表現するリソース
            - ブログ記事の本文
            - メタデータ（タイトル、日時、著者など）
        - エントリリソースは<entry>要素で表現する（この表現をエントリと呼ぶ）
    - メディアリソース
        - 画像や映像などテキストでは表現できないリソース
        - メディアリソースのメタデータはメディアリンクエントリという特別なエントリで表現
- コレクションリソース
    - 複数のメンバリソースを含むリソース
    - 階層化はできない
    - コレクションリソースは<feed>要素で表現する（この表現をフィードと呼ぶ）
- メディアタイプ
    - application/atom+xml
    - エントリやフィードを明示したい場合はtypeパラメータでentry, feedを指定する
- 拡張子
    - .atom
- 名前空間
    - http://www.w3.org/2005/Atom

### 12.3 エントリ Atomの最小単位

```python
<entry xmls="http://www.w3.org/2005/Atom">
    <id>tag:example.jp, 2010-08-24:entry:1234</id>
    <title>テスト日記</title>
    <updated>2010-08-24T13:11:54Z</updated>
    <link href="http://example.jp/1234"/>
    <content>テストです。</content>
</entry>
```

- メタデータ
    - ID <id>
        - エントリを一意に示すURI形式のID
        - httpスキームの他、tagスキームも用いられる
            - <id>tag:example.jp,2010-08-24:entry:1234</id>
            - tag:{DNS名またはメールアドレス},{日付}:{任意の文字列}
    - タイトル <title>
        - エントリの題名
    - 概要 <summary>
        - エントリの概要
        - type属性（text, html, xhtml）によって内容が変化する
    - 著者 <author>
    - 貢献者 <contributor>
    - 著者、貢献者エントリは、それぞれ3つの要素を持つ
        - <name>要素
            - 自然言語で記述した名前
        - <uri>要素
            - 人に関連づけられたURI（任意）
        - <email>要素
            - 人のメールアドレス（任意）
    - 公開日時 <updated>
    - 更新日時 <published>
    - カテゴリ <category>
        - エントリの属するカテゴリを表現
        - 以下の属性を持つ
            - term属性
                - タグ
            - scheme属性（任意）
                - タグを識別するためのURI
            - label属性（任意）
                - アプリケーションが表示するためのラベルを指定
    - リンク <link>
        - 以下の属性を持つ
            - href属性
                - リンク先のURI
            - rel属性（任意）
                - リンク関係を表現
            
            | リンク関係 | 意味 |
            | --- | --- |
            | altemate | このエントリ/フィードの別表現（例えばXHTML）へのリンク。リンク関係のデフォルト値 |
            | self | このエントリ/フィード自身のURI |
            | enclosure | ポッドキャストなどで用いる添付ファイルへのリンク |
            | related | 関連するリソースへのリンク |
            | via | 情報元リソースへのリンク |
            - hreflang属性（任意）
                - リンク先のリソースの言語タグ
- エントリの内容に使えるフォーマット
    - 組み込み定義
        - プレーンテキスト
        - エスケープ済みHTML
        - XHTML
    - メディアタイプ
        - application/xml
        - text/xml
        - text/csv
- メディアリンクエントリ
    - src属性で外部リソースを参照しているエントリリソース
    - 参照している画像リソースをメディアリソースという
    - 巨大なバイナリデータを<content>要素に入れたい時など、XML文書が巨大化してしまう場合には、メディアリンクエントリで外部リソースを参照する

### 12.4 フィード エントリの場合

- フィード
    - メンバリソースを複数持つコレクションリソース表現
    - 以下のメタデータを持てる
        - エントリと共通
            - ID（id）, タイトル（title）, 著者（author）, 更新日時（updated）
        - フィード独自
            - サブタイトル <subtitle>
                - タイトルで説明しきれない説明を記述する
            - 生成プログラム <generator>
                - フィードを生成したプログラムの情報
            - アイコン <icon>
                - faviconを指定
            - ロゴ <logo>
                - フィードを象徴する画像

### 12.5 Atomの拡張

- Atom Threading Extensions
    - スレッドを表現する
    - 名前空間は、http://purl.org/syndication/thread/1.0
        - thrがこの名前空間に結びついている（とする）
    - <thr:in-replay-to>要素
        - 子エントリから親エントリを参照する時に使う
        - ref属性
            - <thr:in-replay-to>要素があるエントリが参照しているエントリ（親エントリ）のID
        - href属性
            - このエントリの表現を取得するためのURI（任意）
        - type属性
            - href属性で参照するリソースのメディアタイプ（任意）
        - soure属性
            - ref属性で参照するエントリを含むフィードのURI（任意）
    - repliesリンク関係
        - 親エントリから子エントリを参照する時に使う
        - rel属性
            - repliesという値
        - href属性
            - このエントリへの返信があるリソースのURI
        - type属性（任意）
            - hrefで参照するリソースのメディアタイプ
            - デフォルトは、application/atom+xml
        - thr:count属性（任意）
            - hrefで参照するリソースの返答総数
            - thr:total要素はエントリへの返答総数を意味する
        - thr:updated属性（任意）
            - このエントリへの返答が最後に更新された時刻
- Atom License Extensions
    - フィードやエントリのライセンス情報を表現する
    - ライセンスリンクと<rights>の違いについて
        - 前者はプログラムでのライセンス処理を目的とし、後者は人間が読んで理解することを目的としている
        
        ```python
        <link rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/"/>
        <rights>
        	Copyright (c) 2010. Some rights reserved.
        	このエントリのライセンスはCreative Commonsのby-ncになります。
        </rights>
        ```
        
- Feed Paging and Archining
    - 検索結果やブログといった1つのコレクションが、複数のフィードに分かれていることを表現する
    - 名前空間は、http://purl.org/syndication/history/1.0
        - fhがこの名前空間に結びついている（とする）
    - フィードの種類
        - <fh:complete> 完全フィード
            - 全てのエントリを1つの文書に含んでいるフィード
        - ページ化フィード
            - エントリを複数の一時的な文書に分割しているフィード
            - <link rel=”first”>, <link rel=”current”>のように指定する
        - <fh:archive> アーカイブ済みフィード
            - エントリを複数の恒久的な文書に分割しているフィード
- OpenSearch
    - 検索エンジンのWebAPIのベースとなる仕様
    - 以下の4つのパートからなる
        - Description Document
            - 検索エンジンが提供する検索機能をプログラムから理解可能な形式で記述するXML形式
        - URL Template Syntax
            - 検索結果リソースを表現するURLの検索クエリ部分をパラメータ化する仕様
        - Query Element
            - URL Template Syntaxで使用する検索パラメータを記述するXML要素
            - Description Documentと検索結果の両方で利用する
        - Response Element
            - 検索結果をAtomやRSS2.0などのフィード形式で表現するための拡張要素
    - Description Documentで記述した検索パラメータの仕様に基づいて検索URIを組み立て、検索エンジンから検索結果リソースを取得、Response Elementで拡張されたフィード形式になる
    - 名前空間は、http://a9.com/-/spec/opensearch/1.1/
        - osがこの名前空間に結びついている（とする）
    - <os:totalResults> 要素
        - 検索結果総数を表現する正の整数
    - <os:startIndex> 要素
        - フィードに入っている検索結果の最初のエントリのインデックス
    - <os:itemsPerPage> 要素
        - 1フィードに入る最大の検索結果エントリ数
    - <os:Query> 要素
        - 検索クエリを示す
        
        ```python
        <os:Query role="request" searchTerms="rest xml"/>
        ```
        
    - リンク関係
        - リンク関係を利用して検索結果をページ化できる

### 12.6 Atomを活用する

- Atomはメタデータを備えたリソース表現のためのフォーマット
- 多様なアプリケーション用の拡張が用意されたフォーマットでもあり、XMLの名前空間の仕組みを使ってAtomに独自の要素を追加できる

## 第13章 Atom Publishing Protocol

### 13.1 Atom Publishing Protocolとは何か

- Atomが規定したフィードやエントリで表現するリソースの編集、いわゆるCRUD操作を実現するためのプロトコル
    - Atom
        - データフォーマットの規定（フィード、エントリ）
    - AtomPub
        - Atomを利用したリソース編集プロトコルの規定
- RESTスタイルに基づいたプロトコル仕様

### 13.2 Atom Pubのリソースモデル

- AtomPubではコレクションのメタデータを表現するサービス文書とエントリのカテゴリに指定できる値を列挙するカテゴリ文書を追加する

### 13.3 ブログサービスを例に

- サンプルとしてhttp://blog.example.jpというブログサイトを考える

```python
GET /feed HTTP/1.1
Host: blog.example.co.jp
```

```python
HTTP/1.1 200 OK
Content Type: application/atom+xml; type=feed

<feed xmlns="http://www.w3.org/2005/Atom">
	<id>tag:blog.example.jp,2010:feed</id>
	<title>サンプルブログ</title>
	<link ref="http://blog.example.jp" rel="alternate"/>
	<link ref="http://blog.example.jp/feed" rel="self"/>
	<author><name>yohei</name></author>
	<updated>2010-08-24T13:11:54Z</updated>
	<entry>
		<id><tag:blog.example.jp,2010-08-24:entry:1234/id>
		<title>テスト日記</title>
		<updated>2010-08-24T13:11:54Z</updated>
		<link href="http://blog.example.jp/entry/1234" rel="alternate"/>
		<link href="http://blog.example.jp/entry/1234.atom" rel="edit"/>
		<content>テストです。</content>
	</entry>
	<entry>...</entry>
	<entry>...</entry>
	<entry>...</entry>
</feed>
```

### 13.4 メンバリソースの操作

- フィードに含まれている各エントリのURIに対してHTTPメソッドを適用してCRUD操作を実現する
- 編集用URIは、rel属性がeditという値の<link>要素（編集リンク）を参照する
- GET
    
    ```python
    GET /entry/1234.atom HTTP/1.1
    ```
    
    - レスポンスでは、Content-Typeのtype=entryになっている点に注意（フィードではtype=feed）
- PUT
    
    ```python
    PUT /entry/1234.atom HTTP 1.1
    Host: blog.example.jp
    Authorization: Basic dXNlcjpwYXNz
    Content-Type: application/atom+xml; type=entry
    
    <entry xmls="http://www.w3.org/2005/Atom">
    	<id><tag:blog.example.jp,2010-08-24:entry:1234/id>
    	<title>テスト日記</title>
    	<updated>2010-08-24T13:11:54Z</updated>
    	<link href="http://blog.example.jp/entry/1234" rel="alternate"/>
    	<link href="http://blog.example.jp/entry/1234.atom" rel="edit"/>
    	<content>修正しました。</content>
    </entry>
    ```
    
- DELETE
    
    ```python
    DELETE /entry/1234.atom HTTP/1.1
    Host: blog.example.jp
    Authorization: Basic sXNlcjpwYXNz
    ```
    
- POST
    
    ```python
    POST /feed HTTP/1.1
    Host: blog.example.jp
    Authorization: Basic dXNlcjpwYXNz
    Content-Type: application/atom+xml; type=entry
    
    <entry xmls="http://www.w3.org/2005/Atom">
    	<id><urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    	<title>テスト日記</title>
    	<updated>2010-08-24T16:11:54Z</updated>
    	<content>新しいエントリです。</content>
    </entry>
    ```
    
    ```python
    HTTP/1.1 201 Created
    Location: http://blog.example.jp/entry/1235.atom
    Content-Type: application/atom+xml; type=entry
    
    <entry xmls="http://www.w3.org/2005/Atom">
    	<id><tag:blog.example.jp,2010-08-24:entry:1235/id>
    	<title>テスト日記</title>
    	<updated>2010-08-24T13:11:55Z</updated>
    	<link href="http://blog.example.jp/entry/1235" rel="alternate"/>
    	<link href="http://blog.example.jp/entry/1235.atom" rel="edit"/>
    	<content>新しいエントリです。</content>
    </entry>
    ```
    
- メディアリソースの操作
    - メディアリソースの作成
        - メディアリソースの画像本体をPOSTする
        
        ```python
        POST /media HTTP/1.1
        Host: blog.example.jp
        Content-Type: image/jpeg
        Authorization: Basic dXNlcjpwYXNz
        Slug: %E3%83%90%E3%83%A9
        
        binary data...
        ```
        
        ```python
        HTTP/1.1 201 Created
        Content-Type: application/atom+xml
        Location: http://blog.example.jp/media/%E3%83%90%E3%83%A9.atom
        
        <entry xmlns="http://www.w3.org/2005/Atom">
        	<id><tag:blog.example.jp,2010-10-04:blog:media:%E3%83%90%E3%83%A9</id>
        	<title>バラ</title>
        	<author><name>test</name></author>
        	<content type="image/jpeg" src="http://blog.example.jp/media/%E3%83%90%E3%83%A9.jpg"/>
        	<link rel="edit-media" href="http://blog.example.jp/media/%E3%83%90%E3%83%A9.jpg"/>
        	<link rel="edit" href="http://blog.example.jp/media/%E3%83%90%E3%83%A9.atom"/>
        </entry>
        ```
        
    - メディアリソースの更新
        
        ```python
        PUT /media/%E3%83%90%E3%83%A9.jpg HTTP/1.1
        Host: blog.example.jp
        Authorization: Basic dGVdDpwYXNz
        Content-Type: image/jpeg
        
        binary data...
        ```
        

### 13.5 サービス文書

- WebAPIが提供するコレクションリソースのメタデータを複数まとめて記述できる

```python
GET /atomsvc HTTP/1.1
Host: blog.example,jp
```

```python
HTTP/1.1 300 OK
Content-Type: application/atomsvc+xml

<service xmlns="http://www.w3.org/2007/app" xmls:atom="http://www.w3.org/2005/Atom">
	<workspace>
		<atom:title>マイブログ</atom:title>
		<collection href="http://blog.example.jp/feed">
			<atom:title>サンプルブログ</atom:title>
			<categories fixed="no">
				<atom:category term="日常"/>
				<atom:category term="技術"/>
				<atom:category term="ネタ"/>
			</categories>
		</collection>
		<collection href="http://blog.example.jp/media">
			<atom:title>画像</atom:title>
			<accept>image/png</accept>
			<accept>image/jpeg</accept>
			<accept>image/gif</accept>
		</collection>
	</workspace>
</service>
```

- メディアタイプ
    - application/atomsvc+xml
        - サービス文書を表現するメディアタイプ
- <service> 要素
    - サービス文書は<service>をルートに持つXML文書
- <workspace> 要素
    - <service>要素は小要素に必ず1つ以上の<workspace>要素を持つ
    - いくつかのコレクションリソースをまとめるためのもの
    - <atom:title>要素を使ってタイトルをつけられる
- <collection> 要素
    - AtomPubのコレクションリソースのメタデータを表現する
    - メタデータの要素
        - コレクションリソースのタイトル（<atom:title>）
        - コレクションリソースのURI（<collection>要素のhref属性）
        - コレクションリソースが許容するメディアタイプ（<accept>要素）
        - コレクションリソースが許容するカテゴリ（<category>要素）
    - collection要素にも<atom:title>要素で名前がつけられる（通常はフィードの<title>要素と同じ名前）
- <accept> 要素
    - コレクションリソースが受付可能なメディアタイプを示す
- <category> 要素
    - コレクションリソースで利用可能なカテゴリを示す
    - fixed属性を指定できる
        - yesの場合は、指定したカテゴリのみを指定可能
        - デフォルトはno
- <categories> 要素
    
    ```python
    <categories href="http://blog.example.jp/atomcat"/>
    ```
    
    ```python
    GET /atomcat HTTP/1.1
    Host: blog.example.jp
    ```
    
    ```python
    HTTP/1.1 200 OK
    Content-Type: application/atomcat+xml
    
    <categories fixed="no" xmlns="http://www.w3.org/2007/app" xmlns:atom="http://www.w3.org/2005/Atom">
    	<atom:category term="日常">
    	<atom:category term="技術">
    	<atom:category term="ネタ">
    </categories>
    ```
    
    - サービス文書の<categories>要素のhrefでカテゴリ文書のURIを指定する
        - href属性がある場合は、<categories>要素は小要素を持てない
        - カテゴリ文書のメディアタイプはapplication/atomcat+xml
    - fixed属性は参照先のカテゴリ文書で指定
    - カテゴリ情報編集の標準APIはないので、必要であれば独自に実装が必要

### 13.6 AtomPubに向いているWeb API

- 向いている
    - ブログサービスのAPI
    - 検索機能を持つデータベースのAPI
    - マルチメディアファイルのリポジトリのAPI
    - タグを使ったソーシャルサービスのAPI
- 向いていない
    - Comerを利用するような、リアルタイム性が重要なAPI
    - 映像のストリーム配信など、HTTP以外のプロトコルを必要とするAPI
    - データの階層構造が重要なAPI
    - 「タイトル」「作者」「更新日時」など。Atomフォーマットが用意するメタデータが不要なAPI

## 第14章 JSON

### 14.1 JSONとは何か

- データ記述言語（JavaScript Object Notation）
- Webサービスでは、ブラウザがJavaScriptを実行でき相性が良く、XMLに比べてデータ表現の冗長性が低い

### 14.2 メディアタイプ

- application/json
- XMLやHTML同様、特別な理由がない限りはUTF-8を使うのが無難

### 14.3 拡張子

- .json推奨
- 明示的にJSON表現を取得したい場合は、URIに.jsonをつけるようにリソース設計する

### 14.4 データ型

- オブジェクト
    - 名前と値（メンバ）の集合
    
    ```python
    {
    	"name": {
            "first": "Yohei",
            "last": "Yamamoto"
        },
        "blog": "http://yohei-y.blogspot.com",
        "age": 34,
        "interests": ["Web", "XML", "REST"]
    }
    ```
    
- 配列
    - 順序を持った値の集合
    
    ```python
    ["foo", "bar", "baz"]
    ```
    
- 文字列
    - 二重引用符”で囲む
    
    ```python
    "\u30A2\u30A4\u30A6"
    ```
    
- 数値
    - 整数（10進表記のみ）と浮動小数点
    
    ```python
    10
    ```
    
- ブーリアン
    
    ```python
    true
    ```
    
- null
    
    ```python
    null
    ```
    
- 日時
    - 組み込み型としての日時型がないため、開発者側で何らかの規定を用意する
        - UNIX時間を数値として表現する
        - JavaScriptのDateクラスのtoString関数を利用する（タイムゾーンを扱える）
        - ISO 8601フォーマットを利用する
- リンク
    - URIは絶対URIが無難
    - メンバの名前はhrefやsrcといったHTMLやAtomで馴染みのあるものにするのが良い
    
    ```python
    {
    	"href": "http://example.jp/foo/bar"
    }
    ```
    

### 14.5 JSONPによるクロスドメイン通信

- JSON with Padding
- クロスドメイン通信
    - 不特定多数のドメインに属するサーバにアクセスすること
        - クロスドメイン通信ができない例
            - AjaxのXMLHttpRequestではセキュリティ上の制限でJavaScriptファイルを取得したサーバとしか通信できない
            - \<script>要素を使えばブラウザの制限を受けない
            
            ```python
            <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <script src="http://example.jp/map.js"></script>
                    <script src="http://example.com/zip.js"></script>
                ...
                </head>
                ...
            </html>
            ```
            
            - JSONPは、この性質を使ってクロスドメイン通信を実現する手法
            - オリジナルのJSONをクライアントが指定したコールバック関数でラップしてドメインの異なるサーバからデータを取得する
            
            ```python
            <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <title>クロスドメイン通信の例</title>
                </head>
                <body>
                    <script type="text/javascript">
                        function foo(zip) {
                            alert(zip["zipcode"]);
                        }
                    </script>
                    <script src="http://zip.ricollab.jp/1120002.json?callback=foo"></script>
                </body>
            </html>
            ```
            
            ```python
            # リクエスト
            GET /1120002.json?callback=foo HTTP/1.1
            Host: zip.ricollab.jp
            ```
            
            ```python
            HTTP/1.1 200 OK
            Content-Type: application/javascript
            
            foo({
                "zipcode": "1120002",
                "address": {
                    "prefecture": "東京都",
                    "city": "文京区",
                    "town": "小石川"
                },
                "yomi": {
                    "prefecture": "トウキョウト",
                    "city": "ブンキョウク",
                    "town": "コイシカワ"
                }
            })
            ```
            

### 14.6 ハイパーメディアフォーマットとしてのJSON

- JSONはJavaScriptをベースにしたシンプルなデータフォーマット
- JSONをハイパーメディアフォーマットとして使用する際は、リンクを表現するメンバをしっかり入れて設計することが重要