Web システムの設計

  • "ウェブ戦略としての「ユーザーエクスペリエンス」"より
    • ユーザインターフェースとしての Web
    • ハイパーメディアシステムとしての Web
  • Web はもともとハイパーテキストシステムだった
  • 近年は UI としての Web の技術革新が集中的

ハイパーメディアシステムの設計

変わりにくい URI の設計のヒント

  • 実装に依存しない
    • *.pl とか
  • リソースは名詞
    • URI に action (get/set など)は入れない
  • セッションIDも入れない
  • なるべくイマドキのフレームワークを使う
  • Web アプリとWeb API で URI を分けない
    • /xmlrpc とかはよくない

REST 的には

Web アプリと Web サービスを分けて考えない

件数取得API リクエスト 

POST /xmlrpc HTTP/1.1
Host: b.hatena.ne.jp
Content-Type: text/xml

<methodCall>
 <methodName>bookmark.getCount</methodName>
 <params>
  <param>
   <value><string>http://d.hatena.ne.jp/</string></value>
  </param>
  <param>
   <value><string>http://b.hatena.ne.jp/</string></value>
  </param>
  <param>
   <value><string>http://www.hatena.ne.jp/</string></value>
  </param>
 </params>
</methodCall>

件数取得API レスポンス 

HTTP/1.1 200 OK
Content-Type: text/xml
Content-Encoding: gzip

<?xml version="1.0" encoding="us-ascii"?>
<methodResponse>
  <params>
    <param>
      <value>
        <struct>
          <member>
            <name>http://www.hatena.ne.jp/</name>
            <value><int>157</int></value>
          </member>
          <member>
            <name>http://b.hatena.ne.jp/</name>
            <value><int>198</int></value>
	  </member>
	  <member>
            <name>http://d.hatena.ne.jp/</name>
            <value><int>35</int></value>
          </member>
        </struct>
      </value>
    </param>
  </params>
</methodResponse>

改善後リクエスト 

POST /atom/exist HTTP/1.1
Host: b.hatena.ne.jp
Content-Type: application/xml

<uri-list>
  <uri>http://d.hatena.ne.jp/naoya/20051212</uri>
  <uri>http://yohei-y.blogspot.com</uri>
</uri-list>
POST /atom/exist HTTP/1.1
Host: b.hatena.ne.jp
Content-Type: application/x-www-form-urlencoded

uri0=http://d.hatena.ne.jp/naoya/20051212&uri1=http://yohei-y.blogspot.com

改善後レスポンス 

HTTP/1.1 201 Created
Content-Type: application/atom+xml
Location: http://b.hatena.ne.jp/atom/exist/1234567890abcdefg

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>はてなブックマーク検索結果</title> 
  <link rel="self" type="application/atom+xml"
    href="http://b.hatena.ne.jp/atom/exist/1234567890abcdefg"/>
  <updated>2003-12-13T18:30:02Z</updated>
  <author><name>Hatena</name></author> 
  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

  <entry>
    <title>なおやのはてなダイアリー</title>
    <link href="http://d.hatena.ne.jp/naoya/20051212"/>
    <link rel="alternate" href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/naoya/20051212"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2005-12-13T18:30:02Z</updated>
    <summary>5</summary>
    <content type="xhtml">
      <!-- リンク、キーワード、タグなんかをそのまま入れる -->
    </content>
  </entry>

  <entry>
    <title>yohei-y:weblog</title>
    <link href="http://yohei-y.blogspot.com"/>
    <link rel="alternate" href="http://b.hatena.ne.jp/entry/http://yohei-y.blogspot.com"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2005-12-10T10:34:02Z</updated>
    <summary>4</summary>
    <content type="xhtml">
      <!-- リンク、キーワード、タグなんかをそのまま入れる -->
    </content>
  </entry>

</feed>

なにが良い?

  • キャッシュを有効利用
  • レスポンスコードを正しく利用
  • HTML から img/@src でリンク可能!
    • Web アプリと Web サービスを分けて考えていない
  • 細かいツッコミ
    • 302 は Found じゃないの? (RFC2616)
      • Moved Temporarily は RFC 2068
    • Expires を指定した方がいいかも

Web API 設計のヒント(2)

  • とりあえず XML-RPC はもうやめよう
  • 無理して XML を使うのはやめる