皆さんこんにちは。フリヌの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」ずいったサヌビスを運営しおいたす。