oEmbed API の値を取ってくるjQuery プラグインを作ったよ

はてなブログを書くときに、URL をコピペすると、

URL のみのリンク
タイトル付きリンク
埋め込みリンク

が生成されると思います。

この機能が結構便利で、はてなブログ以外でも使いたいと思ったので、作ってみました。

サンプルページ

作りたかったのはこいつです。はてなブログのように、URL を入力すると。 URLリンク、タイトルリンク、埋め込みリンク、はてなブログカードの埋め込みんリンクを生成してくれます。

About oEmbed API

oEmbed APIは、簡単にまとめると、 oEmbed APIを提供しているサービス（例：はてなブログ）で、固定（パーマ）リンク（例：はてなブログ記事のURL）を投げると、その記事に関する情報（例：記事タイトルや埋め込みリンク）を返してくれます。
※ES6で書いているので、最新版chromeで動作。

W3C でも正式に決定している規格なので、今後も対応したWebサービスが増えると思います。

oEmbed の詳細は、

oEmbed

oEmbed APIについて解説されている記事もあります。

syncer.jp

oEmbed APIを使うには、以下のように、 Endpoint とPermalink を指定します。

        
          [Endpoint_Link]?url=[Permalink]

はてなブログ oEmbed APIサンプルです。ブラウザでアクセスすると、json形式の記事に関するデータが見れるはずです。
http://b.hatena.ne.jp/api/oembed?url=http://b.hatena.ne.jp/entry/370/comment/sample

はてなブログのoEmbed APIの詳細は、以下にあります。

はてなブックマークoEmbed API - Hatena Developer Center

類似サービス・ツール・プラグイン

類似サービス

今回作ったプラグインに似た機能のツールは、いくつかあります。

Embedly
素直に使うならこのサービスで問題ないと思います。日本向けのサービス（はてななど）は対応してないと思います。 APIキーが必要になります。
Noembed
Amazon やGist などoEmbed に対応していないサービスでも、JSONPで取得できます。

拡張機能

ブラウザの拡張機能でもあります。

CreateLink
Chromeの拡張機能です。
MakeLink
FireFoxの拡張機能です。

類似jQuery プラグイン

oEmbed API用のjQuery プラグインもあります。主に外国向けのサービスに対応しています。

APIキーの必要なかったころの Embedlyに対応していたjQuery プラグインです。
https://code.google.com/p/jquery-oembed/
こちらのプロジェクトは、上のプロジェクトをアップデートしてますが、すでに終わっています。 https://github.com/starfishmod/jquery-oembed-all

今回のプラグイン(jquery.oEmbed.js)

今回作ったプラグインの githubページです。

github.com

サポートしたプロパイダ

プロパイダはたくさんあるので、以下のプロパイダに対応させました。

Twitterは、認証などのAPIキーが必要だったので、今回のjQuery Pluginでは、断念。しかし、Vineは、APIキー無しでも使えるので、対応してみました。

codepen も対応したかったのですが、 CrossDmain解除で使っているYQLから得られる JSONデータを見ると、 iframe にくっついてくるスタイルシートのプロパティの:（コロン）がエスケープされていないようで、うまく取得できなかったので断念。
YQLでの仕様なのか、Codepenが提供しているJSONデータがValid JSONになっていないかは不明です（はてなブログで codepenのリンクを挿入すると、ちゃんと埋め込みリンクが取れるので、 jQuery 以外の言語を使えば正しく取得できる可能性も）。。

How to use

Cartman0/jquery.oEmbed · GitHub

にも書きました。

読み込み

jQuery とクロスドメイン解除のプラグイン jquery.xdomaninajx.js を使っているので、以下のように読み込みます。

HTML

<body>
  ~
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="jquery.xdomainajax.js"></script>
  <script src="jquery.oEmbed.js"></script>
</body>

JS

var url = 'http://example.com';
$.when (
  $.oEmbed(url, 'html')
)
.done(function(value){
  console.log(value);
});

$.oEmbed() は、 $.Deferred.promise() を返すので、$.when().done() を使って、非同期に値を取得できます。

例：youtube から埋め込みリンクを取得

youtubeの動画URLを第1引数に、埋め込みリンクはプロパティ(key)名が'html'なので第2引数に 'html' を入力することで、埋め込みリンクを取得できます。


var url = "https://www.youtube.com/watch?v=ekK7peRxKGc";
$.when(
  $.oEmbed(url, 'html')
)
.done(function(iframe_data){
  $('.hoge').html(iframe_data);
});

例：上記以外のProvider を追加

上記以外のProvider を使用する場合、オプションで、settings.customProviders から追加することができる。


var settings = {
  customProviders: [
    {
      name: 'provider_name',
      endpoint: 'endpoint_URL',
      schemelink: ['regexp_string1', ...],
      apiDataFormat: "xml" or 'json',
      queries: /*option*/{format: 'xml',... etc}
    },...
  ]
};

var url = 'http://example.com/article';
$.when(
  $.oEmbed(url, 'html', settings)
)
.done(function(iframe){
  $('.hoge').html(iframe);
});

例：hatenaBlogCardの取得

oEmbed API に対応してないページでも、 hatenablog-parts なら、hatenaBlogCard(iframe) を取得できます。その場合の埋め込みリンク(iframe) は、 <iframe src="http://hatenablog-parts.com/embed?url=[Permalink] width="100%"> になります。

以下のように、oEmbed に対応していないURL ならhatenablog-parts のiframe を取得できます (key の値は関係なし)。


var url = "http://Not_oEmbed_API_URL";
$.when(
  $.oEmbed(url, 'key 関係なし')
)
.done(function(hatenaBlogCard){
  $('.hoge').html(hatenaBlogCard);
  // <iframe src="http://hatenablog-parts.com/embed?url=[Permalink] width="100%">
});

また、oEmbed APIに対応しているリンクでも、 hatenaBlogCard の埋め込みリンク(iframe) を取得できます。

その場合は、以下のようにkey を hatenablogcard に設定。


var url = "http://example.com/article";
$.when(
  $.oEmbed(url, 'hatenablogcard')
)
.done(function(hatenaBlogCard){
  $('.hoge').html(hatenaBlogCard);
  // <iframe src="http://hatenablog-parts.com/embed?url=http://example.com/article" width="100%">
});

例：hatenaBlogCard における情報の取得

hatenaBlogCard は、記事タイトル、記事本文（一部）、サムネなどの情報を持ってます。オプションで指定することで、それらの情報を取得できます。

以下のような構造を持っています。


<div class="embed-wrapper">

  <div class="embed-wrapper-inner">

    <div class="embed-content with-thumb">

      <div class="thumb-wrapper">
        <a href="https://www.">
        <img src="http://.jpg" class="thumb">
        </a>
      </div>

      <div class="entry-body">
        <h2 class="entry-title">
          <a href="https://">entry-title</a>
        </h2>

        <div class="entry-content">
          entry-content
        </div>
      </div>

    </div>

    <div class="embed-footer">
      <a href="https://www">
        <img src="https://.ico" class="favicon">
      </a>

      <img src="http://" alt="" class="star-count">

      <a href="http://">
        <img src="http://" class="bookmark-count">
      </a>
    </div>

  </div>

</div>

key（第2引数）に、ほしい情報のclass名を設定します settings.hatenaBlogCard を設定します。 settings.hatenaBlogCard: 'text' で、innerHTMLを、 'html'で、outerHTMLを取得できます。

以下は、記事タイトル（文字列）を取得できます。


var url = 'http://wwww.example.com';
$.when(
  $.oEmbed(url, '.entry-title', {hatenaBlogCard: 'text'}) // innerHTML
)
.done(function(entry_title){
  $('.hoge').text(entry-title); // entry-title
});