2010年2月 7日

jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する

今日は MT Hackathon だったので、oEmbed を試しに使ってみた。oEmbedは、Flickr、YouTubeなどの対応サービスのURLから、コンテンツの内容をXMLやJSON形式で取得するためのAPI仕様です。ブログなどに貼付けるためのHTMLを、共通のAPIコールで取得できるのがメリットですね。

oEmbedを利用するためのライブラリも、Perl, Ruby, php などそろっていますが、手軽なjquery-oembed プラグインを使ってみた。動作サンプルがこちら。

jquery-oembed 動作サンプル

使うのは非常に簡単。こんなフォームに対して、

<form action="" id="oembed_form">
  <label>oEmbed対応URL</label>
  <input id="oembed_url" type="text" value="" style="width: 300px;" />
  <input id="oembed_load" type="submit" value="コンテンツ取得" />
</form>

以下のようなjavascriptで、oEmbedライブラリを利用する。

$(document).ready(function(){

  // oembed ライブラリの設定。コンテンツの最大表示サイズや、
  // コンテンツをDomエレメントに追加する方法を選ぶ。
  $.fn.oembed.defaults = {
        maxWidth: 500, maxHeight: 400,
        embedMethod: "append" // "replace", "auto", "append", "fill"
  };

  // 指定したHTMLエレメントにoEmbedで取得したHTMLコンテンツをappendする
  $("form#oembed_form").submit( function () {
  
    $("#oembed_contents").oembed($("#oembed_url").attr("value"));
    return false;
  });
});

プラグインのファンクションは、oembed(url, options, callback) の三つの引数を指定できます。url は oEmbed 対応ウェブサイトのURL。オプションは前述の maxWidth, maxHeight, embedMethod の三つ。callback を指定して、oEmbed API から取得したデータを自由に整形、表示できます。ブックマークレットなどにも応用できそうですね。