著名な Web 2.0 サイトをリストに挙げるとき、そこに必ず含まれるのは del.icio.us です (「参考文献」でリンクを参照)。これは、歴史は比較的浅いながらも最も確立されたソーシャル・ブックマーキング・サイトで、ここではユーザーがリンクを載せたり、リンクにタグを追加することができます。このサイトは特殊な人気タグなどの自動集約されたタグを含め、リンク・コレクションの Web フィード、そして多数のユーザーによって投稿されたリンクの Web フィードを提供します。また、単純なオープン API を提供します。一方、del.icio.us は Web 2.0 という用語がどれほど曖昧であるかということを実証するものでもあります。Web 2.0 サイトというと、Web ボックスが魅惑的にウィンクする巧妙な Ajax 駆動型 Web ページを期待するかもしれませんが、かつての del.icio.us はまるでそのようなものではなく、極めて単純で機能的でした。フロント・ページは最近かなりドレスアップされてはいるものの、現在に至るまで del.icio.us のインターフェースはとても簡潔なものでした。

ブラウザーのブックマークを共有するという考えは、目新しいことではありません。ドット・コムの時代には、ユーザーがオンラインでブックマークをホストし、分類できる Backflip などのサービスが出現しています。Backflip は無料でしたが、del.icio.us などのサイトの飛躍的進歩は、それにも増して情報を自由に使えるという点にあります。情報は、ありとあらゆる方法で入手して使用でき、数え切れないパターンで共用できます。Web 2.0 での開発を一層エキサイティングにする土台となっているのは、オープン API、Web フィード (RSS および Atom でビルドされたものなど)、そして自動集約によるタグ付けですが、Ajax などのユーザー・インターフェース・トリックと一緒くたにされがちです。それは、これらの連携機能では一般的に制限された Web のインターフェースがネックとなることがあり、そのような場合には、いくつかの凝った手法を加えて、より多くの人が Web 2.0 に興味を持って関われるようにしているためです。つまり、Web 2.0 サイトの価値は多くの場合、関係者の数に比例するということです。

効果的な Web 2.0 サイトの本質、そして Web アーキテクトの (例えば Web 設計者とは対照的な) 関心事は、実際の開発者とユーザーがどれだけ素早くオープン・データ機能を活用できるかというところにあります。ユーザーがソーシャル・サイトで自分の領域をカスタマイズするためのウィジェットから、開発者が Web 2.0 を親とした子孫を作成するためのマッシュアップに至るまで、このようなサイトを成功に導く鍵、そしてその成功を自分の作品で再現する方法を理解してください。連載「真の Web 2.0」では、Web アーキテクトの視点から、見せ掛けを超えた実際のサイトの最も貴重な機能を掘り下げていきます。連載第 1 回ではまず、このジャンルの先祖の 1 つ、del.icio.us について取り上げます。

正面扉

この連載では、Web 2.0 のメイン・ページをファサード (正面) と呼ぶことにします。それは、メイン・ページは建物の正面のようにうわべだけでしかなく、実際の仕事はそれよりも見えにくい領域で行われるためです。私は毎日のようにdel.icio.us を使用していますが、そのファサードを気にすることはほとんどありません。興味のあるサイトを del.icio.us に掲載するには、Firefox プラグインを使っています。Web フィード・リーダー内では人気タグで項目を辿り、単純な Python スクリプトで毎日、自分の del.icio.us 投稿をウェブログに自動的に掲載しています。Web 2.0 での実際の仕事はほとんどファサードの裏で行われていると言っているのは、このためです。それでもやはり正面扉から入ることに変わりはないため、そこから説明を始めることにします。

del.icio.us のメイン・ページは、ユーザーによるタグ付けという主流をふるいにかけることを目的としています。メイン・ページには大勢が最近ブックマークを付けた話題の Web ページと、エディターが特に興味深いとみなしているタグがリストされます。また、サイト所有者による必須のウェブログがあり、最近のエントリーが、事業開始からわずか 3 年間でサイトの登録ユーザー数が 1 万を突破したことを謳っています。del.icio.us は、オープン・データの優れたアーキテクチャー機能がコントリビューター (ツール、プラグイン、マッシュアップなどの開発者) のコミュニティーを支え、それによってユーザー数が増え、それがさらにコントリビューターを増やすという好循環を明らかに実証しています。

上に戻る

楽しい我が家

登録ユーザーには、非常に単純な URL スキーマ、http://del.icio.us/<username> でアクセスできるホーム・ページが提供されます。このような実用本位の URL スキーマはこのサイトの持続力の 1 つであり、後で説明するように、ファサードの域を超えた価値をもたらします。ユーザーのホーム・ページには、そのユーザーが最近投稿したリンクとタグが記載されます。図 1 に、私の del.icio.us ページの一部を示します。

ほとんどの Web 2.0 ページと同様に、del.icio.us の基本的特徴はシンプルで分類されたキーワード (タグ) で、このサイトはタグ・クラウドという概念の先駆けでした。タグ・クラウドは、図 1 の右側にあります。これはタグ用語のリストで、そのうちのいくつかは使用頻度に応じて大きなフォント・サイズや太字で表示されます。ビジュアル・メタフォーとしてのタグ・クラウドの効果については、Web 2.0 業界で多くの討議が行われています。実際、del.icio.us では最近になってこの機能を重視することを止めました。

また、他の多数のユーザーがアクセスしたリンクを強調表示していることから、このサイトの集約機能の一端をうかがうことができます。ユーザー・ページからは、自分のリンクとソーシャル・ネットワーク (興味深いリンクの持ち主として指定したユーザーのリスト) を検索できます。また、エントリーの投稿や管理を行うために Web ユーザー・インターフェースにアクセスすることもできます。ただし前にも説明したように、多くのユーザーはこのような作業をメイン・ページではなく、ツールで行います。

上に戻る

自家製レシピ

ファサードにひとしきり見とれたら、Web 2.0 サイトではある時点で、サイトの作成者でさえ予測していなかった方法でサイトの機能を使用可能にするツールに目を向けみてください。del.icio.us にはこのようなツールが豊富にあります。このサイトの作成者は手始めに、他のサイトにあるネットワークの投稿をブラウザーのツールバーに表示できるバッジから数十の独自のツールを作成しました。また、100 を超えるサード・パーティーのツールが、del.icio.us で考えられる使用方法のすべてではないにしろ、そのほとんどに対応します。Web 2.0 サイトの重要性が、いざとなったらコンパイラーやインタープリターの殻を破って独自の機能を作成できる点にあるのは、これが理由です。

上に戻る

Web フィード: 安上がりな API

del.icio.us の公式 API は、SSL および認証による HTTP を使用します。一方、読み取りアクセスだけが必要な場合は、Web 2.0 の公式 API である Web フィードを全体で使用するオプションもあります。ユーザーの Web フィード (http://del.icio.us/rss/<username>)、タグの Web フィード (http://del.icio.us/rss/<tag>)、またはこの 2 つの組み合わせ (http://del.icio.us/rss/<username>/<tag>) にアクセスできます。アクセスした後は、Web フィードを構文解析して目的の情報を抽出するだけのことです。リスト 1 に、一例を示します。これは、前日の del.icio.us フィード・エントリーが含まれる E メールを送信する Python コードです。

                
import time
import smtplib
from email.MIMEText import MIMEText
from datetime import date, timedelta

import amara

#The base URI for all tags
TAGBASE = 'http://del.icio.us/tag/'

#Set FEEDS to customize which feeds you want to monitor
FEEDS = ['http://del.icio.us/rss/uche', 'http://del.icio.us/rss/popular']

FROM = 'del.icio.us@example.com'
TO = 'user@example.com'
SMTPHOST = 'localhost'

#Compute the date string for yesterday in ISO-8601 format
yesterday = (date(*time.gmtime()[:3]) - timedelta(1)).isoformat()

message_text = u''

#Using Amara. Easy to just grab the RSS feed
for feed in FEEDS:
    doc = amara.parse(feed)
    message_text += u'\n' + unicode(doc.RDF.channel.title) + u'\n\n'
    current_items = [ item for item in doc.RDF.item
                      if unicode(item.date).startswith(yesterday) ]
    for item in current_items:
        #Get the properties of the link, defaulting to empty string
        title = unicode(getattr(item, 'title', u''))
        href = unicode(getattr(item, 'link', u''))
        desc = unicode(getattr(item, 'description', u''))
        creator = unicode(getattr(item, 'creator', u''))
        message_text += u'<%s>--"%s" (from %s)\n'%(href, title, creator)
        message_text += desc + '\n'

#Be sure to handle Unicode by encoding to UTF-8
msg = MIMEText(message_text.encode('utf-8'))

#Set message metadata
msg['Subject'] = u'del.icio.us bookmarks for %s\n' % yesterday
msg['From'] = FROM
msg['To'] = TO

#Send the message via the specified SMTP server
s = smtplib.SMTP()
s.connect(SMTPHOST)
#s.login(SMTP_USERNAME, SMTP_PASSWORD) #If login is necessary
s.sendmail(FROM, [TO], msg.as_string())
s.close()

このコードでは Amara XML Toolkit (「参考文献」を参照) を使用して、Web フィードをダウンロードし、構文解析しています (del.icio.us は Web フィード・フォーマットとして RSS 1.0 を使用します)。上記の例の 2 つのフィードは、1 つは私自身のユーザー Web フィード、そしてもう 1 つは人気タグを対象とした Web フィードです。for ループがフィードを繰り返して目的の日のエントリーを検索し、いくつかのフィールドを抽出して message_text に累積したメッセージ・テキストを組み立てています。ループの本体に続く行は、実際の送信メッセージに関連しています。

公式 API

エントリーを編集したり、Web フィードにまだパッケージされていないデータに何らかの方法でアクセスするには、認証および暗号化された HTTP に基づく公式 API を使用する必要があります。この一層手の込んだ HTTP 機能の鍵を握るのは、Python の urllib2 モジュールです。公式 PIA を使用した完全な Python の例は Web で簡単に見つけられるためここでは記載しませんが、1 つの注意点として言っておくと、Web 2.0 サイトの API を使用するときは常に、何度もクエリーを作成しすぎないように注意しなければなりません。del.icio.us の API ページでは、以下のように述べています。

クエリーには 1 秒以上の間隔をあけてください。間隔が 1 秒未満だと自動的に停止するおそれがあります。ライブラリーを解放して API にアクセスする場合、これは必須です。

このページに記載されているその他の警告は、そのほとんどが無料のオープン Web API に適用されるため、優れた Web 開発者になるためのプラクティスには十分注意を払う価値があります。

上に戻る

del.icio.us を JavaScript に組み入れる

ECMAScript (JavaScript としても知られる) を使用して del.icio.us を使ったツールを作成している場合、読み取りアクセスには Web フィードに似たもう 1 つのオプションがあります。ほとんどの Web 開発者にすでにお馴染みの Ajax (Asynchronous JavaScript) です。XML は必要ありませんが、XML 部分がネットワーク間で情報を送受信する方法を示します (詳細は「参考文献」を参照)。人気のあるフォーマットとしては、JSON ( JavaScript Object Notation) もあります。JSON には、XML よりはるかに簡単に ECMAScript を使用して構文解析できるという利点があります。一部の del.icio.us の JSON フィードは、この記事の前半で使用した Web フィードと同様で、http://del.icio.us/feeds/json/<username>、http://del.icio.us/feeds/json/<tag> などの URL にアクセスすると、JSON 表記の最近のエントリーが表示されます。リスト 2 は、del.icio.us から JSON フィードをロードする ECMAScript が含まれた Web ページの例です。

                
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <title>Bookmarks from del.icio.us</title>
    <script type="text/javascript" 
            src="http://del.icio.us/feeds/json/uche?count=10">
      //Loads JSON from del.icio.us, which evaluates to an an array: Delicious.posts
    </script>

    <script type="text/javascript">
//Set up asynchronous display of images
function showImage(img){ return (function(){ img.style.display='inline'; }) };

function showBookmarks()
{
    var ul = document.createElement('ul');
    //Process each item in the del.icio.us JSON feed
    for (var i=0, post; post = Delicious.posts[i]; i++) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        var img = document.createElement('img');
        a.style.marginLeft = '20px';
        img.style.position = 'absolute';
         //Don't display image at first: will be asynchronously turned on
        img.style.display = 'none';
        img.height = img.width = 16;
        //Raw string processing to get the URL of the bookmark icon
        img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico';
        img.onload = showImage(img);
        a.setAttribute('href', post.u);
        a.appendChild(document.createTextNode(post.d));
        li.appendChild(img);
        li.appendChild(a);
        ul.appendChild(li);
    }
    //No bullet markings for list items
    ul.style.setProperty('list-style', 'none', 'important');
    //Replace a targeted portion of initial content with the constructed list
    var removeTarget = document.getElementById('removeTarget');
    var updateTarget = document.getElementById('updateTarget');
    updateTarget.removeChild(removeTarget);
    updateTarget.appendChild(ul);
}
    </script>
  </head>
  <body id='updateTarget'>
    <h2>Bookmarks from del.icio.us</h2>
    <p id='removeTarget'>
      <a href="javascript:showBookmarks()">Click here to load addresses</a>
    </p>
  </body>
</html>

上記の HTML には 2 つのスクリプトが組み込まれています。最初のスクリプトは、JSON を取得するための単なる del.icio.us リンクです。これによって取得されたオブジェクトが、ページ上の他のスクリプトで使用可能になります。2 つ目のスクリプトはメイン HTML ページ上のリンクによって起動されます。このスクリプトは JSON を読み取り、DOM 命令を使ってページに組み込むリストを作成します。図 2 は、Click here to load addresses リンクをクリックした結果作成された Web ページからの抜粋です。

上に戻る

まとめ

オープンで柔軟な Web API と、ユーザーがアップロードしてユーザー・ネットワークが管理するコンテンツの組み合わせこそが、真の Web 2.0 です。インターネットとそのユーザーは、パブリッシャーから読者への一方通行のトラフィックが厳しく管理される Web から、パブリッシャーとユーザーのコミュニティーとの協調により情報が管理される Web に移行しています。楽観的な人々は、このような開発を、ヨーロッパでのあの偉大なルネッサンス時代の原動力と根本的にはほとんど同じ変化として捉えています。これがばかげた誇張であろうとなかろうと、Web は確実に協調的な方向に進んでいるため、すべての Web アーキテクトは新しい手法とプラクティスを理解する必要があります。この連載では今後、Web 2.0 の前衛となっている特定の Web サイトのコンテキストのなかで、これらの手法とプラクティスを検討する予定です。

参考文献

学ぶために

• del.icio.us: まさに Web 2.0 の先駆けです。API に関する一般情報ページと JSON フィードの情報ページにアクセスしてください。
  
  
• ソーシャル・ブックマーク: ウィキペディアでこの現象の歴史について学んでください。
  
  
• ECMAScript: ウィキペディアには、ECMAScript および DOMについて豊富な情報が記載されています。ECMAScript に関する多数の著作や、ここに記載されているチュートリアルを読んで詳細を学んでください。
  
  
• 「Build apps using Asynchronous JavaScript with XML (Ajax)」(Naveen Balani、Rajeev Hathi 共著、developerWorks、2005年11月): このチュートリアルで、ページの最新表示が要らない、Ajax による動的な非同期 Web を体験してください。
  
  
• 「Ajax をマスターする、第 7 回: 要求および応答での XML の使用」(Brett McLaughlin 著、developerWorks、2006年10月): Ajax で XML が果す役割 (そして役立たない場合) について説明しています。
  
  
• 「Cache in with JSON」(Bakul L. Patel 著、developerWorks、2006年10月): JSON (JavaScript Object Notation) 技術について説明しています。
  
  
• developerWorks technical events and Webcasts で最新情報を入手してください。
  
  
• developerWorks Web architecture ゾーン: Web 技術を専門とした記事およびチュートリアルで、サイト開発の技術を磨いてください。
  
  

製品や技術を入手するために

• JSON.org: この非常に単純なデータ・フォーマットのチュートリアルおよび仕様としても役立つホーム・ページにアクセスしてください。
  
  
• del.icio.us のツールとアドオン: 開発者やエンド・ユーザーなどが利用できる広範なエコシステムを満載しています。
  
  
• Amara XML Toolkit: この記事のリスト 1 でも使用している、Python で XML を簡単に処理するためのツールキットです。
  
  
• XBELicious: この一連のスクリプトを使って、del.icio.us フィードをブラウザー・ブックマークに組み込めます。del.icio.us を XBEL フォーマットで統合するこの方法は、ブラウザー・ブックマークの保管方法として人気があります。
  
  

議論するために

• developerWorks blogs: developerWorks コミュニティーに参加してください。
  
  

著者について

Uche Ogbuji氏は、Fourthought, Inc. のコンサルタント兼共同設立者です。この会社は、企業のナレッジ・マネジメントのためのXMLソリューションを専門とするソフトウェア・ベンダー兼コンサルタント会社です。Fourthoughtでは、XML、RDF、およびナレッジ・マネジメント・アプリケーション用のオープン・ソース・プラットフォームである4Suiteを開発しています。Ogbuji氏は、ナイジェリア出身のコンピューター・エンジニア兼ライターで、現在は、米国コロラド州ボールダーに住み、そこで働いています。Ogbuji氏の連絡先はuche.ogbuji@fourthought.com です。

この記事を評価する

コメント

上に戻る

目次

• 正面扉
• 楽しい我が家
• 自家製レシピ
• Web フィード: 安上がりな API
• del.icio.us を JavaScript に組み入れる
• まとめ
• 参考文献
• 著者について
• コメント