皆さんこんにちは。フリーの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タグのドキュメントをご参照ください。

こんな場面でも役立ちます

ブログを書いていてYouTubeの動画を記事に貼り付ける場合、通常はYouTubeのサイトから埋め込みコードを取得して、ページに貼り付けるという作業を行うでしょう。

また、それとは別にSlideShareのプレゼンテーションを貼り付けたい場合は、今度はSlideShareのページから埋め込みコードを探し出し、またそれを貼り付けるという作業が必要になります。

この一連の作業は、目的の埋め込みコードが探しにくい場所にあったり、コンテンツの横幅をサイトにあわせて指定し直す必要があったりして、少々面倒です。

Embedlyを使うと、このような作業が不要となります。埋め込みコードを探し出す手間を省けるほか、先に紹介したembedly_maxWidth オプションを使うことでコンテンツがサイトからはみ出す心配もありません。

ブログのコメントに記載されるリンクも自動的に変換できます。コメント欄で投稿者に埋め込みコードの入力を許していることは少ないと思いますが、そのような場合にEmbedlyはとても有用です。

対応サービスが海外のものだけとなっていますが、主要なサービスにはほぼ対応しているので十分実用的だと思われます。WordPress用のプラグインも提供されていますので、WordPressへの導入も簡単にできます。興味のある方はぜひ一度お試しください。

著者紹介

F.Ko-Ji

ブログやネットサービスを運営するブロガー兼Webエンジニア。大手IT系企業、ベンチャー系Web開発企業を経てフリーに。『F.Ko-Jiの「一秒後は未来」』というブログや、「Meity」「DailyFeed」「梅酒.in」といったサービスを運営しています。