LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お題は不問！Qiita Engineer Festa 2023で記事投稿！
@torus0818

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

Posted at

備忘録です。

第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の木構造
<html>
  |
  |-<head>
  |.  |
  |.  |-<title>
...

  • 要素

    • XMLは要素で文書の構造を表現する
      • 開始タグ<要素名>
      • 内容
      • 終了タグ<要素名>
    • 要素は内容を持たなくても良い（空要素）
      • 空要素は終了タグを省略できる

  • 属性

    • 属性は属性名と属性値の組で開始タグの中に記述する
    • 開始タグは属性を複数持てるが、同じ名前の属性は1つだけ
    • 属性は入れ子構造にはできない
    • 属性の順番には意味がない

  • 実体参照

    • 以下の文字は実体参照という機構で表現する
    文字 実体参照
    < &lt;
    > &gt;
    “ &quote;
    ‘ &apos;
    & &amp;

  • 文字参照

    • 実体参照の対象の文字以外をエスケープして表現する場合は、Unicode番号で（文字参照）指定する

  • コメント

    <!-- コメント内容 -->

  • XML宣言

    • XML文書の先頭にはXML宣言を書く
    <?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>

  • 名前空間

    • 要素の名前空間
      • 接頭辞によって名前の衝突を防ぐ
    <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>
    • 属性の名前空間
    <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の構成要素

<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 href="http://gihyo.jp">技術評論社のWebページ</a>を参照して下さい。
  • 要素 
    <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 src="http://example.jp/children.png" alt="子どもたちの写真"/>

  • 要素

    <object data="http://example.jp/children.mpeg">子どもたちの動画</object>

  • フォーム

    • GET

      • フォームを利用した結果はターゲットURI（formのaction属性）に送られる
      • メソッドはformのmethodで指定
      • メソッドがGETの場合、ターゲットURIとフォームへの入力結果からリンク先のURiを生成する 
      <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
      <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属性

    • リンク元のリソースとリンク先のリソースがどのような関係か表す
    <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上のリソースにメタデータを与えている
    • 問題点
      • 記述が複雑になりがち
      • 統一的な記述がしづらい
      • 対象データとは独立したメタデータが必要
    <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を意味すると定義づけられている
    <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
      <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の名前空間で解決する
    この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で表現するリソース
        • ブログ記事の本文
        • メタデータ（タイトル、日時、著者など）
      • エントリリソースは要素で表現する（この表現をエントリと呼ぶ）
    • メディアリソース
      • 画像や映像などテキストでは表現できないリソース
      • メディアリソースのメタデータはメディアリンクエントリという特別なエントリで表現
  • コレクションリソース
    • 複数のメンバリソースを含むリソース
    • 階層化はできない
    • コレクションリソースは要素で表現する（この表現をフィードと呼ぶ）
  • メディアタイプ
    • application/atom+xml
    • エントリやフィードを明示したい場合はtypeパラメータでentry, feedを指定する
  • 拡張子
    • .atom
  • 名前空間

12.3 エントリ Atomの最小単位

<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
      • エントリを一意に示すURI形式のID
      • httpスキームの他、tagスキームも用いられる
        • tag:example.jp,2010-08-24:entry:1234
        • tag:{DNS名またはメールアドレス},{日付}:{任意の文字列}
    • タイトル
      • エントリの題名
    • 概要
      • エントリの概要
      • type属性（text, html, xhtml）によって内容が変化する
    • 著者
    • 貢献者
    • 著者、貢献者エントリは、それぞれ3つの要素を持つ
      • 要素
        • 自然言語で記述した名前
      • 要素
        • 人に関連づけられたURI（任意）
      • 要素
        • 人のメールアドレス（任意）
    • 公開日時
    • 更新日時
    • カテゴリ
      • エントリの属するカテゴリを表現
      • 以下の属性を持つ
        • term属性
          • タグ
        • scheme属性（任意）
          • タグを識別するためのURI
        • label属性（任意）
          • アプリケーションが表示するためのラベルを指定
    • リンク

      • 以下の属性を持つ

        • href属性
          • リンク先のURI
        • rel属性（任意）
          • リンク関係を表現
        リンク関係 意味
        altemate このエントリ/フィードの別表現（例えばXHTML）へのリンク。リンク関係のデフォルト値
        self このエントリ/フィード自身のURI
        enclosure ポッドキャストなどで用いる添付ファイルへのリンク
        related 関連するリソースへのリンク
        via 情報元リソースへのリンク
        • hreflang属性（任意）
          • リンク先のリソースの言語タグ
  • エントリの内容に使えるフォーマット
    • 組み込み定義
      • プレーンテキスト
      • エスケープ済みHTML
      • XHTML
    • メディアタイプ
      • application/xml
      • text/xml
      • text/csv
  • メディアリンクエントリ
    • src属性で外部リソースを参照しているエントリリソース
    • 参照している画像リソースをメディアリソースという
    • 巨大なバイナリデータを要素に入れたい時など、XML文書が巨大化してしまう場合には、メディアリンクエントリで外部リソースを参照する

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

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

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

    • フィードやエントリのライセンス情報を表現する

    • ライセンスリンクとの違いについて

      • 前者はプログラムでのライセンス処理を目的とし、後者は人間が読んで理解することを目的としている
      <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つの文書に含んでいるフィード
      • ページ化フィード
        • エントリを複数の一時的な文書に分割しているフィード
        • , のように指定する
      • 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 要素

      • 検索クエリを示す
      <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 ブログサービスを例に

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

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という値の要素（編集リンク）を参照する

  • GET

    GET /entry/1234.atom HTTP/1.1
    • レスポンスでは、Content-Typeのtype=entryになっている点に注意（フィードではtype=feed）

  • PUT

    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

    DELETE /entry/1234.atom HTTP/1.1
Host: blog.example.jp
Authorization: Basic sXNlcjpwYXNz

  • POST

    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>

    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する
      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...

      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>

    • メディアリソースの更新

      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が提供するコレクションリソースのメタデータを複数まとめて記述できる
GET /atomsvc HTTP/1.1
Host: blog.example,jp

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
      • サービス文書を表現するメディアタイプ

  • 要素

    • サービス文書はをルートに持つXML文書

  • 要素

    • 要素は小要素に必ず1つ以上の要素を持つ
    • いくつかのコレクションリソースをまとめるためのもの
    • atom:title要素を使ってタイトルをつけられる

  • 要素

    • AtomPubのコレクションリソースのメタデータを表現する
    • メタデータの要素
      • コレクションリソースのタイトル（atom:title）
      • コレクションリソースのURI（要素のhref属性）
      • コレクションリソースが許容するメディアタイプ（要素）
      • コレクションリソースが許容するカテゴリ（要素）
    • collection要素にもatom:title要素で名前がつけられる（通常はフィードの要素と同じ名前）

  • 要素

    • コレクションリソースが受付可能なメディアタイプを示す

  • 要素

    • コレクションリソースで利用可能なカテゴリを示す
    • fixed属性を指定できる
      • yesの場合は、指定したカテゴリのみを指定可能
      • デフォルトはno

  • 要素

    <categories href="http://blog.example.jp/atomcat"/>

    GET /atomcat HTTP/1.1
Host: blog.example.jp

    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>
    • サービス文書の要素のhrefでカテゴリ文書のURIを指定する
      • href属性がある場合は、要素は小要素を持てない
      • カテゴリ文書のメディアタイプは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 データ型

  • オブジェクト

    • 名前と値（メンバ）の集合
    {
	"name": {
        "first": "Yohei",
        "last": "Yamamoto"
    },
    "blog": "http://yohei-y.blogspot.com",
    "age": 34,
    "interests": ["Web", "XML", "REST"]
}

  • 配列

    • 順序を持った値の集合
    ["foo", "bar", "baz"]

  • 文字列

    • 二重引用符”で囲む
    "\u30A2\u30A4\u30A6"

  • 数値

    • 整数（10進表記のみ）と浮動小数点
    10

  • ブーリアン

    true

  • null

    null

  • 日時

    • 組み込み型としての日時型がないため、開発者側で何らかの規定を用意する
      • UNIX時間を数値として表現する
      • JavaScriptのDateクラスのtoString関数を利用する（タイムゾーンを扱える）
      • ISO 8601フォーマットを利用する

  • リンク

    • URIは絶対URIが無難
    • メンバの名前はhrefやsrcといったHTMLやAtomで馴染みのあるものにするのが良い
    {
	"href": "http://example.jp/foo/bar"
}

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

  • JSON with Padding
  • クロスドメイン通信
    • 不特定多数のドメインに属するサーバにアクセスすること

      • クロスドメイン通信ができない例

        • AjaxのXMLHttpRequestではセキュリティ上の制限でJavaScriptファイルを取得したサーバとしか通信できない
        • <script>要素を使えばブラウザの制限を受けない
        <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をクライアントが指定したコールバック関数でラップしてドメインの異なるサーバからデータを取得する
        <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>

        # リクエスト
GET /1120002.json?callback=foo HTTP/1.1
Host: zip.ricollab.jp

        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をハイパーメディアフォーマットとして使用する際は、リンクを表現するメンバをしっかり入れて設計することが重要
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?