読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

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

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

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

  • URL のみのリンク

  • タイトル付きリンク

  • 埋め込みリンク

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

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

サンプルページ

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

Get Embed Link

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で取得できます。

拡張機能

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

類似jQueryプラグイン

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

今回のプラグイン(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
});

まとめ

oEmbed APIに対応していないサービスでも、 hatnaBlogCard、は大抵のページで取得でき、 記事タイトル、記事本文、サムネを取得できます。 なので、 このプラグインを使うことで、自分好みのブログカードを作ることができると思います。