はてブやTwitterへのコメントを
ブログに表示させてみるとこうなる

Twitterと連携

□ twitterfeedでブログの更新情報をTwitterに投稿

　 twitterfeedは、その名のとおり「フィード経由でブログなどの更新情報をTwitterに投稿する」サービスです。

　自分のTwitterアカウントがあって、お友達などあなたをフォローしている人がすでにいるのなら、その人たちに気軽にブログの更新情報を送信できます。

Webサイトの更新情報をTwitterに更新できる

　簡単に設定方法を説明します。

　まずは、Twitterのアカウントを用意しましょう。これがないと始まりません。まだない方は Twitterのサイト（http://twitter.com/）でアカウントを作成してください。今回の場合は、アカウントだけではなくてフォローしてくれる友人も必要です。

　次に、OpenIDアカウントを用意しましょう。twitterfeedはアカウント情報としてOpenIDを使用します。OpenIDを知らなくても、mixi・livedoor・はてな等にアカウントをお持ちの場合、そのアカウントをOpenIDアカウントとして利用できます。

　twitterfeedにログインしましょう。ログインページ（http://twitterfeed.com/auth/login）で、自分のOpenIDのURLを入力します。

OpenIDのURLでもログインできる

• mixiの場合「mixi.jp」
• livedoorの場合「livedoor.com」
• はてなの場合「http://www.hatena.ne.jp/はてなのユーザー名/」

　「Login」を押すと、それぞれのサービスのログイン画面に移動します。サービスに登録済みのアカウント名とパスワードを入力してログインを完了してください。

　ログインが完了したら「go to my twitter feeds（or create a new one）」をクリックしてフィードの管理画面に移動します。

さっそくフィードしてみよう

　管理画面で「Create new twitter feed」をクリックして、自分のブログのフィードのURLを登録してください。更新の間隔やポストする記事の最大数などを設定することができます。

Twitter Feedsの一覧

　登録が完了してしばらくたつと、自分のTwitterの投稿の一部としてブログ記事の更新情報がポストされ始めます。これ以降、ブログを更新するとタイトルやURL、概要（設定による）が自動的にポストされ始めます。

• twitterfeed（http://twitterfeed.com/）

□ Tweet Me!

同一記事へのコメントを表示させるTweet Me!でTwitterへのコメントが表示されている様子

　masuidriveさんのHatena Bookmark Anywhereのコードを見ていたら、同様のやり方でTwitter版を作れそうなことに気が付きました。最近、Twitterが検索機能を提供し始めたのですが、検索結果をAtomフィードやJSONフィードで出力することができて、JSONに関してはJSONPにも対応しています。

　そこで、Hatena Bookmark Anywhereを基に「Tweet Me!」を開発しました。スクリプトが設置されたページのURLをキーワードとしてTwitterを検索して、その記事に対するコメントを取得して一覧表示します。

　名前には、ささやくようにコメントしてね！という気持ちを込めました。きっと、優しいコメントがいっぱい付くのではないでしょうか。

　スクリプトはGoogle Codeのホスティングサービス上に置きました。設置方法はサイトにも書いてありますが、基本的にはHatena Bookmark Anywhereと同じです。ぜひお試しください。

Tweet Me!（http://code.google.com/p/tweetme/）

どうしてブクマやTwitter経由でコメントしてもらうの？

　「ナタリー（http://natalie.mu/）」は、それぞれのニュースにコメントができるようになっていますが、このコメントをはてなブックマークやTwitter経由で追加できます。

　そもそもこの機能を開発したのは、ユーザーの方が記事にまったくコメントしてくれず、代わりにはてなブックマークにコメントを残していることに気付いたことに始まります。

　ナタリーは当初コメントをするためにユーザー登録が必要だったこと以外にも理由があります。

　ユーザー心理としてナタリーにコメントを「残す」より自分のブックマークにリンクを「持ち帰って」からコメントする方が気楽だったり、自分のブックマークを購読している人に届きやすいという心理が働いたりしたのではないかと思います。

　とにかく、コメントをナタリーの記事から読めるようにするにはどのような方法があるかと考えてみました。

□ 慣れたツールでならコメントしやすくなる

　当初は、アイコンをクリックするとはてブコメントが一覧表示される形式のUIを考えていましたが、ふと「ナタリーのコメントシステムに外部のコメントをインポートしたらどうだろう」と考えたのです。

　この形式なら、ニュースについた他のコメントと一緒に読むことができるうえ、ニュースタイトルの一覧画面でコメント数が表示されるなど、コメントが付いた記事のチェックもしやすくなります。

　また、ナタリーのコメントと同じように時系列に並べられるので、はてブコメントにナタリーからコメントすることもできます。

　いままでコメントされてもこちらからコメントを返すことのできなかったはてブユーザーを「こちらの陣地」に連れてこられるという、ちょっと意地悪な期待もありました。

　しかし、 いまとなっては受け入れられているこの機能も当時は例がなく、はてなブックマークのユーザーさんの反発もあるのではないかと心配していました。結果として、ちょっと変わった機能名もあってか反応は上々だったようで、はてなブックマークを経由したコメントは月を追うごとに増え続けています。

　ちなみに、この機能を発表したときのはてブユーザーの反応はこちら（http://b.hatena.ne.jp/entry/http://natalie.mu/sitenews/show/id/26）。

□ ソーシャルツールに同時ポストすることで広がりが生まれる

　ナタリーのコメント機能は、その後Twitterやlivedoorクリップなどコメントをする手段を拡張し続けています。そして、これは後から気付いたことなのですが、実はこうしたソーシャルツールを経由してコメントしてもらうことには大きな意味があります。

　それは、サイトにコメントを残してもらうと同時に、ユーザーさんの持っている友人のネットワークに記事の存在が周知されるということです。ニュース自体に付くコメントは、先にも書いたようにほかのユーザーのコメントを誘う力があり、サイト全体のコミュニケーションを活発化させることができますが、あくまでサイト内でのみ閲覧されるという点では「閉じた」存在だといえます。

　その点、ソーシャルツールに投稿されたコメントは、友人のネットワークを通じてどこまでも伝播していく可能性があります。また、はてなブックマークなどでブックマークが付くことによって、記事がランキングの上位に入りやすいというおまけもあります。

□ ユーザーの向こうにあるネットワークを活用する

　ブログやわれわれのようなニュースサイトなど読者を意識する側としては、「サイト対個別の読者」という構図から、いかにユーザーを多く獲得するかが大事と考えてきました。しかし、ソーシャルツールの流行とともに、必ずしもサイトを訪問しなくても読者の友達が何らかの形で記事を目にすることが増えてきています。

　ソーシャルツールを使って、ネットワークの向こう側に情報を「放流」してみるという発想の転換をしてみるのも面白いのではないでしょうか？

立薗理彦(たちぞの まさひこ) 1972年東京生まれ。1996年、慶應大学 環境情報学部卒。シャープで組み込み系のソフトウェアエンジニアとして働いた後、携帯電話メーカーのノキアで日本向け端末のリリースに携わる。 この頃、週末プロジェクトとしてiTunesでの再生履歴をネットで公開するサービス「音ログ」を開発。これをきっかけに、ウェブ業界への転身を決意してフリーに。 その後、音楽ニュースサイト「ナタリー」の立ち上げに関わり、2007年10月から技術担当取締役としてナターシャに参加。現在に至る。 最近の興味は、iPhoneでのアプリケーション開発。 趣味は、TVドラマ「Lost」を繰り返し見ること。全シーズンをすでに3回以上見ていて、ハワイでのロケ地ツアーにも2回参加。 著者つぶやき http://mshk.tumblr.com/ http://twitter.com/mshk http://friendfeed.com/rooms/sweet-tweet

■ ＠IT関連記事

Adobe AIRでiTunes×Twitterクライアントを作った これ、俺ならこう使う（2）　iTunesで再生されている楽曲のタイトルを、Twitterアカウントに「いま聴いている曲」として投稿するAIRアプリケーション「音ログAIR」を作ってみました 「リッチクライアント ＆ 帳票」フ ォーラム 2008/8/11

Twitterやクラウドへも分岐するAjax／Web APIの道 Ajax うきうき Watch（29）　芸能人も参加中のGoogleマイマップEXPO、日本語化するTwitter、クラウドコンピューティング、もうすぐ始まるIE 7への自動更新など全8トピック 「リッチクライアント ＆ 帳票」フ ォーラム 2008/1/23

jQueryを使ってTwitterをおいしくマッシュアップ パターンとライブラリで作るAjaxおいしいレシピ（1）　jQueryを使ってTwitterのコメントをかんたんに表示するサンプルを見ながら、AjaxデザインパターンやMVCについて解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/29

過熱するTwitterブームとMicrosoftのマッシュアップ Ajax うきうき Watch（21）　すさまじい勢いで増え続けるTwitterを使ったツールやマッシュアップを使ったまったく新しいサイト。さらに、無料Webオフィスほか5トピックを紹介！ 「リッチクライアント ＆ 帳票」フ ォーラム 2007/5/25

過熱するTwitterブームとMicrosoftのマッシュアップ Ajax うきうき Watch（21）　すさまじい勢いで増え続けるTwitterを使ったツールやマッシュアップを使ったまったく新しいサイト。さらに、無料Webオフィスほか5トピックを紹介！ 「リッチクライアント ＆ 帳票」フ ォーラム 2007/5/25

Google App Engineは20％プロジェクトから生まれた Google Developer Day 2008特集（2）　プロダクトマネージャーに聞く、App Engineの成り立ちと現状、ビジネス、Amazon EC2との違い、そして日本人への期待 「リッチクライアント ＆ 帳票」フ ォーラム 2008/6/24

1-2

INDEX
これ、俺ならこう使う（3） ソーシャルブックマークやTwitterと連携して、ブログをパワーアップ
	Page1 はてブやTwitterを活用して自分のサイトをアピールする ソーシャルブックマーク連携 ブックマークコメントを自分のサイトに表示する ・ masuidriveさんの、はてブコメント表示JavaScript│ ・ livedoorクリップのJavaScript│ ・ はてなブックマークで付けられたコメントをblosxomにインクルード＠hail2u.netさん
	Page2 Twitterと連携 ・ twitterfeedでブログの更新情報をTwitterに投稿 ・ Tweet Me! どうしてブクマやTwitter経由でコメントしてもらうの？ ・ 慣れたツールでならコメントしやすくなる ・ ソーシャルツールに同時ポストすることで広がりが生まれる ・ ユーザーの向こうにあるネットワークを活用する

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ