hail2u.net

JSONフィードとか何とか #2

Posted at 2006-10-20T00:07:00+09:00 in Coding

TypePadがJSONフィードの出力に対応したそうで。JSONフィードってーのはdel.icio.usのJSON Feedsとかで見られる、JSONを利用したRSSやAtomっぽい配信フォーマットで、Pure JavaScriptで扱えるのが最大の特徴。特に仕様なんかは無い(と思う)。かなり昔にこのサイトで妄想として取り上げていたのが現実になった感じ。

というわけでblosxomでindex.jsonというTypePadのJSONフィードに似せた感じの出力を確保する仕組みの実装する方法書いてみる。TypePadのテンプレートに準拠したいところだけどTypePadとかいうprefixがちょっとアレなアレでアレ。

flavourだけでJSONフィードを出力するのはちょっと難しい。W3CDTFで日付を出力とかでつまづいちゃうので、interpolate_fancyプラグインとテキトウな作りのrssプラグインが必要な感じ。でもまぁとりあえずは以下のような感じで比較的手軽に実装可能。ただこのままだとjsonFeeds.entriesの最後の要素の後ろにもカンマが付いちゃうのでInternet Explorerでエラーが起きる。このことへの対処や日本語をUnicodeのhexでエスケープするとかも含め、実際に利用する場合はjsonfeedなどといった専用プラグインを作った方が良さそう。

content_type.json

text/javascript

head.json

// This JSON Feed automatically generated by blosxom 2.0
// http://creativecommons.org/licenses/by-nc/2.1/jp/

if (typeof(jsonFeeds) == "undefined") jsonFeeds = new Array();

jsonFeeds["$url/index.json"] = {
  "title": "hail2u.net - $blog_title",
  "link": "$url/",
  "id": "tag:hail2u.net,2002:/blog/",
  "author": "$rss::name ($rss::email)",
  "updated": "$rss::last_build_date_w3cdtf",
  "subtitle": "$blog_description",
  "generator": "http://www.blosxom.com/?v=2.0",
  "entry": [

date.json

空のファイルを用意。

story.json

    {
      "title": "$title",
      "link": "$url$path/$fn.$default_flavour",
      "id": "tag:hail2u.net,$yr<?$yr>:</?>$path/$fn",
      "summary": "$rss::excerpt",
      "author": "$rss::name ($rss::email)",
      "category": "$categories::name",
      "published": "$yr-$mo_num-$da<?$yr>T</?>$ti<?$yr>:</?>00+09:00"
    },

foot.json

  ]
};

次はJSONFP(JSON Feed with Padding)だな。

del.icio.usのnetworkをツリー状に展開しまくる

Posted at 2006-10-08T01:42:00+09:00 in Coding

エントリのネタに事欠いたので少し前に作ったdel.icio.usのnetworkをツリー状に展開しまくるモノについて書いてみる。タイトルの通りの代物で、基点となるユーザー名のnetworkをリストにして表示し、それぞれのリスト項目のユーザー名の後ろについている矢印画像をクリックすると、更にそのユーザー名のnetworkをリストにして表示し・・・と、延々とツリー状に展開しまくるもの。

ただnetworkを辿るだけでは寂しいので、右にbookmarkやfanを表示してみたりとかもしてある。自分のお気に入りのユーザーは誰をお気に入りにしてるのかとかを見て、「お、この人はこんなブックマークの人なのか。面白そう。networkに登録しよう！」みたいな使い方を想定しているのだけど、イマイチ(どころではない)。

ツリーを作るためにそれぞれのli要素のid属性にツリー構造を反映したnetwork-11-3-7といった規則的な値を振っていった事以外には特に考えることもなく作ったもの(な記憶)。そのため並行に処理とかさせていないので、全体的に「トロい」という感じ。

こういうものよりも、自分の直近30件のブックマークを調べて、似た傾向のユーザーを探すとかの方が実用性は高そう。JavaScriptでやるとなるとdel.icio.usへのアクセスにウェイトかけたりとか大変そうだ。そういう機能を含めたライブラリを作りたいところだけどなかなかどうして。そもそもあるURLのブックマーク情報はJavaScriptだけでは得ることができないけど。

Yahoo! Search Web ServicesのJSON(P)を利用したサイト内検索

Posted at 2006-09-28T16:47:00+09:00 in Coding

Yahoo! Search Web ServicesのJSON(P)を利用すれば、JavaScriptのみでサイト内検索が実現できる上、Ajax的にページ遷移無しで検索が実行できる。Google AJAX Searchが内部で利用しているJSONPらしきアレを利用するケースと違い、こちらは公式にアナウンスされているのでおおっぴらに利用できる。というわけで、ほとんど同じタイトルでほとんど同じネタを連続で書いてみる。

実装は、ひとつ前のエントリでもリンクを張っておいたサンプル・ページで利用しているyahoo-sitesearch.jsのような形になる。

Yahoo! Search Web ServicesのWeb Search APIへのリクエストは、

http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid={アプリケーションID}&query={検索語}&site={ドメイン名}&output=json&callback=handleWebSearch

という形で、outputパラメータでjsonを指定するとXMLの代わりにJSONで結果を得ることができ、callbackパラメータでコールバック関数名を指定すると指定したコールバック関数でpaddingしてくれる(JSONPにしてくれる)。あとはコールバック関数でデータを加工してやれば良い。サンプルではprototype.jsや自作ライブラリを使ってたりするが、多重リクエストのことなどは考えなくて良いと思われるので、単純にscript要素を作成して追加するというコードをベタに書いても問題ないと思う。

Yahoo! Search Web Servicesはドキュメントがしっかりしており、速度や安定性も申し分ない。日本語もきちんと扱われているので、「とりあえずJSONP使ってみよう」とか「JSONPってどんなことができるんだろう？」みたいな人の練習台にちょうど良いと思う。del.icio.usは超重かったりするし。

上記サンプルはこのサイトに特化した形になっていてわかりにくいと思うので、既存のライブラリを使わずベタにJavaScriptを書いたサンプルも用意した。100行に満たないコードで実装することができている。script要素を削除してないのはデバッグしやすいようにとか、JSONPで返ってくるデータの構造を良く知らない人のためにとか。こういう類の実際に利用されまくるものではちゃんと削除したほうが良いっぽい。

とりあえずWeblogの各ページにある検索フォームは差し替えてみた。キャッシュの都合で切り替わってないように見える(Powered by Googleとなってたら切り替わってない)時にはスーパー・リロード(Ctrl+F5)で。やはり検索結果がちょっとアレな気がする。どういうのが良いのか具体的にイメージできてないので、挙動的にはこんなもんかなーとかいう感じ。検索結果の表示の工夫よりも、検索語拾ってアサマシ広告を挿入すると良さそうとかそんなことばかり考えてる。

このように検索結果をページ遷移無しで表示することができると、訪問者が検索することイコール訪問者がページに留まることになる。サイト内に訪問者が留まる時間で考えるのなら、ページ遷移ありのごく普通なサイト内検索スクリプトでも変わらないのだけど、ページに留まるというのがミソ。ページに留まる時間が増えるということは、つまりそのページに挿入した広告が表示される時間が増えるということなので、広告収入を得る可能性の増加に直結する。

とかもっともらしいことを書いてみる。ウソ・・・とも言い切れないだろうけど、広告の表示される時間からイメージされる効果には程遠いと思う。検索語を拾ってアサマシの方が効果が高そう。

JSONPに同期リクエスト

Posted at 2006-09-25T13:46:00+09:00 in Coding

コールバック関数を指定する形のJSONPへforループなどで複数回リクエストする場合、コールバック関数の実行される順はforループで回した順と一致するとは限らない(Opera除く)。そのため何番目にリクエストした結果に実行されたコールバック関数なのかといった処理状況をコールバック関数内で知ることが面倒だったりする(不可能というわけではない、多分)。それをあえて同期リクエストにすることでどうにかしてみようとかいう話。

同期リクエストするためには、forループなどでJSONPへのリクエストを一気に処理するのではなく、リクエストをひとつに留めてコールバック関数内で次に進むといった形で実装するが良さそう・・・とアイディアをバソキヤ求めて三千里の人に貰った。

つまり、

var urls = [
  'http://del.icio.us/feeds/json/cho45',
  'http://del.icio.us/feeds/json/drawnboy',
  'http://del.icio.us/feeds/json/gorou',
  'http://del.icio.us/feeds/json/hail2u',
  'http://del.icio.us/feeds/json/miyagawa',
  'http://del.icio.us/feeds/json/nagayama',
  'http://del.icio.us/feeds/json/typester',
  'http://del.icio.us/feeds/json/yoko'
];

というdel.icio.usで提供されているJSONフィードのURLのリストへ順番にリクエストし、その順番通りにコールバック関数を実行させるには、

addScript(urls[0] + '?callback=diplayPosts');

function addScript(url) {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', url);
  script.setAttribute('charset', 'UTF-8');
  document.getElementsByTagName('head').item(0).appendChild(script);
}

function diplayPosts(posts) {
  // JSONフィードに含まれるブックマークのJSONデータに対する処理色々

  loadNext();
}

function loadNext() {
  if (urls.length <= 1) return;
  urls.shift();
  addScript(urls[0] + '?callback=diplayPosts');
}

という感じに、コールバック関数(displayPosts())内で次に進む関数(loadNext())を呼び出すように実装するということになる。こうするとコールバック関数内でurls[0]を参照すれば、どのURLへのリクエストした結果として呼び出されたコールバック関数なのかすぐにわかる。単純にforループで回した場合は、ブックマークのデータを処理するコールバック関数が呼び出される順番が狂う場合がある(ネットワーク状態に依存)し、コールバック関数内からは誰のブックマークのJSONデータを処理しているのかを知る手段がなくなってしまう。

あえて同期リクエストすることにより、非同期であることからスムースに処理できる(ことが多い)というJSONPの長所を失う上に、処理に時間がかかってしまうという欠点もある。それでもあえて非同期でリクエストしないことによって、得られるものがいくつかあるわけで、場合によってはあえて並行リクエストをしないという選択はアリなのかもしれない。

少し前に作った指定したdel.icio.usのユーザーのnetworkに登録しているユーザーのブックマークを並べるモノは誰のブックマークやらわからない状態でずらっとブックマークが並べられていたが、同期リクエストに変更することによってユーザー名付きでブックマークを並べられるようになった。

はてなブックマークエントリー情報取得APIははてなスクリーンショットAPI(でもある)

Posted at 2006-09-22T14:45:00+09:00 in Coding

はてなブックマークのエントリー情報取得APIは任意のURLに対するブックマークを返してくれるAPIなだけでなく、事実上はてなスクリーンショットのAPIとしても機能している。正確には、はてなスクリーンショットによるスクリーンショット画像のURLも返してくれるというだけ話なのだけど。

例としてlabs.hail2u.net/hatena/screenshot/を作成してみた。ここでは、

var sites = [
  'http://hail2u.net/blog/',
  'http://la.ma.la/blog/',
  'http://lowreal.net/blog/',
  'http://tokyoenvious.xrea.jp/b/'
];

というURLの配列から、

<p><img
  src="http://screenshot.hatena.ne.jp/images/120x90/0/1/6/3/8/3c63fbe3a76655390497a260a44ec509d2f.jpg"
  height="90"
  width="120" /></p>
<p><img
  src="http://screenshot.hatena.ne.jp/images/120x90/7/4/2/d/6/b497e3edc6d9badd41bac03419b4822e758.jpg"
  height="90"
  width="120" /></p>
<p><img
  src="http://screenshot.hatena.ne.jp/images/120x90/notfound.jpg"
  height="90"
  width="120" /></p>
<p><img
  src="http://screenshot.hatena.ne.jp/images/120x90/9/d/d/0/0/0992b943b07310949f8428ce82472381659.jpg"
  height="90"
  width="120" /></p>

というHTMLを生成することができている。

APIへのリクエストは動的にスクリプト要素を生成してやる例のアレをベースにしたもので、まららんやはてのくんが書いたりしてたのを参考にまたちょっと手が入っている(ソースを参照)。APIのリクエストを除いたスクリーンショットのURLを拾うコードは正味一行。

var ss = (bookmarkData == null) ? 'http://screenshot.hatena.ne.jp/images/120x90/notfound.jpg' : bookmarkData.screenshot;

はてなブックマークエントリー情報取得APIが迅速にレスポンスを返してくれるので、想像していたよりも軽快にHTMLが生成できた。もちろんスクリーンショットが欲しいURLがブックマークされている数が多ければそれだけレスポンスが遅くなるので、HTMLの生成も重くなるのだろうだけど。

ブックマークされていないとスクリーンショットのURLを取得することが絶対にできないことなどいわゆるサムネイル取得APIと比較して劣るところはあるけれども、スクリーンショット取得APIとしてそこそこ使えるのではないかと思う。

また、Perlではてなブックマークエントリー情報取得APIを利用したスクリーンショット画像へのリダイレクタとかも作った。これはスクリーンショットがあった場合はそのURLにリダイレクトという仕組みになっているので、

<img src="http://example.com/hatena_screenshot_redirector.cgi?url=http%3A%2F%2Fexample.org%2F" />

みたいに使うことができる。とりあえずリダイレクトさせることだけを目標に作った短いものなので、キャッシュ作らないで常にはてなにGETかけるとかヒドイCGI。使う人はちゃんと作り直してください。愛するはてなのために！