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

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

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、は大抵のページで取得でき、 記事タイトル、記事本文、サムネを取得できます。 なので、 このプラグインを使うことで、自分好みのブログカードを作ることができると思います。

広告を非表示にする