Useful Web Applications(1) Embedly - 写真や動画のリンクを自動的に埋め込みコンテンツ化

皆さんこんにちは。フリーのWebエンジニアのF.Ko-Jiです。新たにスタートするこの連載では、主にWebサイト運営者やユーザーの方々にとって有用だと思われるネットサービス、Webアプリを順次紹介していきたいと考えています。気長にお付き合いいただけるとうれしいです。

ネットサービスごとにAPIや埋め込みコードに対応するのは面倒……

最近になってTwitterが新しいインタフェースを公開し、Twitterのサイト上で写真や動画を直接プレビュー表示できるようになりました。また、以前からTwitterクライアントの多くはアプリ内で独自に写真を表示する機能を有しています。

このような写真や動画のプレビュー機能はとても便利です。なぜなら、わざわざリンクをクリックしてコンテンツを見に行く手間が省けるからです。自分が運営するブログやサイトに同様の機能を導入したいと考えている人もいるのではないでしょうか。

この手の機能は、コンテンツ共有サイトが独自に提供するAPIや、埋め込み(エンベッド)形式のコードを利用することで実現されています。そのため実装しようと思えば誰でもできるのですが、APIを使うには技術的な知識が必要です。

また、ユーザーは様々な写真共有サイトや動画共有サイトを利用しています。そのようなコンテンツ共有サイトは世界中にたくさん存在し、それらすべてのAPIや埋め込みコードに対応していくのは非常に手間のかかる作業です。

そこで今回、そのような面倒な作業を一手に引き受けてくれる「Embedly」という海外のサービスを紹介します。

リンクを自動的に埋め込み形式のコードに変換してくれる

Embedlyのトップページには対応サービスのfaviconが並んでいる

Embedlyは、YouTubeやFlickrなどで公開されているコンテンツへのリンクを、その場でプレビュー表示できるように自動的に埋め込み形式のコードに変換してくれるサービスです。

変換機能は基本的にAPIで提供されていますが、JavaScriptのツールとしても提供されているため誰でも簡単にサイトに設置することができます。

まずは使ってみよう

Embedlyを最も簡単に使う方法は、サイトに以下のスクリプトを貼り付けることです。

<script type="text/javascript" src="http://scripts.embed.ly/embedly.js" ></script>

このスクリプトによって、Webページ上に存在するYouTubeやFlickrのリンクが自動的に埋め込み形式のコードに変換され、その場でコンテンツを閲覧することができるようになります。

YouTubeの動画が埋め込まれているように見えるが、実際のHTMLソースには埋め込みコードは書いておらずURLをリンクしているだけ

対応するサービスは何と100以上

埋め込み形式のコードに変換されるリンクは、Embedlyが対応する動画や画像、その他リッチメディアへのリンクとなりますが、その数は本記事執筆時点で112サービス。かなり豊富です。ここでは代表的なサービスを以下に挙げておきましょう。

写真関連

Flickr
TwitPic
Yfrog
TweetPhoto
Picasa

動画関連

YouTube
USTREAM
Daily Motion
Hulu

その他

Twitter
Amazon
SlideShare
Tumblr
Posterous

柔軟なカスタマイズオプション

先に紹介したJavaScriptにはオプションを指定することができます。オプションを指定することで、埋め込まれるコンテンツの横幅を制限したり、特定のaタグのみを自動変換対象にしたり(もしくはしなかったり)、埋め込まれるコンテンツを特定のタグで囲んだりすることができます。

<script type="text/javascript">
  // 横幅の最大値を指定したい場合
  var embedly_maxWidth = 480;

  // 高さの最大値を指定したい場合
  var embedly_maxHeight = 240;

  // コンテンツをdivタグで囲みたい場合
  var embedly_wrapElement = 'div';

  // class="embed"のあるリンクのみ対象にしたい場合
  var embedly_cssSelector = 'a.embed';
</script>

この他にも便利なオプションがいくつか用意されていますので、詳しくはJavaScriptタグのドキュメントをご参照ください。