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

しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

Windows Store oEmbed API と jquery-oembed を組み合わせて使う方法

Windows Store oEmbed API は名前の通り oEmbed API を実装しているので、わざわざ iframe を使って貼り付けなくても使えるようになっています。

しかし、当然ながら wsoembed.com が提供する oEmbed API の情報が登録されていないので、そのままでは使えないですが、今回は JavaScript から使える jquery-oembed を使って埋め込んでみます。

jquery-oembed のダウンロードは以下のページから。

jquery-oembed - OEmbed plugin for jQuery - Google Project Hosting

今回は 1.1 を使いました。RC と書いてますが、更新が止まっているみたいなので気にせずに使います(

さて、それでは jquery-oembed に wsoembed.com の情報を追加するのですが、とりあえずソースコードを一通り眺めると最後の方に以下のような記述がありました。

/* Native & common providers */

$.fn.oembed.providers = [
	new $.fn.oembed.OEmbedProvider("youtube", "video", ["youtube\\.com/watch.+v=[\\w-]+&?"]), // "http://www.youtube.com/oembed"    (no jsonp)
	new $.fn.oembed.OEmbedProvider("flickr", "photo", ["flickr\\.com/photos/[-.\\w@]+/\\d+/?"], "http://flickr.com/services/oembed", "jsoncallback"),
	new $.fn.oembed.OEmbedProvider("viddler", "video", ["viddler\.com"]), // "http://lab.viddler.com/services/oembed/" (no jsonp)
	new $.fn.oembed.OEmbedProvider("blip", "video", ["blip\\.tv/.+"], "http://blip.tv/oembed/"),
	new $.fn.oembed.OEmbedProvider("hulu", "video", ["hulu\\.com/watch/.*"], "http://www.hulu.com/api/oembed.json"),
	new $.fn.oembed.OEmbedProvider("vimeo", "video", ["http:\/\/www\.vimeo\.com\/groups\/.*\/videos\/.*", "http:\/\/www\.vimeo\.com\/.*", "http:\/\/vimeo\.com\/groups\/.*\/videos\/.*", "http:\/\/vimeo\.com\/.*"], "http://vimeo.com/api/oembed.json"),
	new $.fn.oembed.OEmbedProvider("dailymotion", "video", ["dailymotion\\.com/.+"]), // "http://www.dailymotion.com/api/oembed/" (callback parameter does not return jsonp)
	new $.fn.oembed.OEmbedProvider("scribd", "rich", ["scribd\\.com/.+"]), // ", "http://www.scribd.com/services/oembed"" (no jsonp)
	new $.fn.oembed.OEmbedProvider("slideshare", "rich", ["slideshare\.net"], "http://www.slideshare.net/api/oembed/1"),
	new $.fn.oembed.OEmbedProvider("photobucket", "photo", ["photobucket\\.com/(albums|groups)/.*"], "http://photobucket.com/oembed/")
	// new $.fn.oembed.OEmbedProvider("vids.myspace.com", "video", ["vids\.myspace\.com"]), // "http://vids.myspace.com/index.cfm?fuseaction=oembed" (not working)
	// new $.fn.oembed.OEmbedProvider("screenr", "rich", ["screenr\.com"], "http://screenr.com/api/oembed.json") (error)
	// new $.fn.oembed.OEmbedProvider("qik", "video", ["qik\\.com/\\w+"], "http://qik.com/api/oembed.json"),
	// new $.fn.oembed.OEmbedProvider("revision3", "video", ["revision3\.com"], "http://revision3.com/api/oembed/")
];

どうやら $.fn.oembed.providers に $.fn.oembed.OEmbedProvider のインスタンスを追加すれば使えるようになりそうです。

という訳で早速 wsoembed.com の情報を追加して試してみます。

$.fn.oembed.providers.push(
    new $.fn.oembed.OEmbedProvider("wsoembed", "rich", ["apps\\.microsoft\\.com/windows/.*/app/.+"], "http://wsoembed.com/oembed")
);

これで上手くいくはず!と思ったのですがダメでした。動かなかった理由は実に簡単で、jQuery から別ドメインのデータは JSONP や CORS に対応しておかないと取れないことでした。

ということなので、wsoembed.com 側で JSONP に対応させてもう一度チャレンジします。

<script>
    $(function () {
        $.fn.oembed.providers.push(
            new $.fn.oembed.OEmbedProvider("wsoembed", "rich", ["apps\\.microsoft\\.com/windows/.*/app/.+"], "http://wsoembed.com/oembed")
        );

        $("#container").oembed("http://apps.microsoft.com/windows/ja-jp/app/twitter/8289549f-9bae-4d44-9a5c-63d9c3a79f35");
    });
</script>

<div id="container"></div>

これで確認してみたところ、ちゃんと埋め込まれて表示されました!

f:id:shiba-yan:20130717235158p:plain

jquery-oembed は名前の通り jQuery のプラグインなので、セレクタを使って a タグで指定されているリンクに対しても埋め込みとか出来るようになっています。

以下のように書くと、oembed クラスが指定されている a タグにたいして、自動的に oEmbed を使って埋め込みを行ってくれます。

<script>
    $(function () {
        $.fn.oembed.providers.push(
            new $.fn.oembed.OEmbedProvider("wsoembed", "rich", ["apps\\.microsoft\\.com/windows/.*/app/.+"], "http://wsoembed.com/oembed")
        );

        $(".oembed").oembed();
    });
</script>

<div>
    <a href="http://apps.microsoft.com/windows/ja-jp/app/8289549f-9bae-4d44-9a5c-63d9c3a79f35" class="oembed">Twitter</a>
    <a href="http://apps.microsoft.com/windows/en-us/app/700659b6-f843-4878-ae6e-5e9f72d4eb58" class="oembed">Network Speed Test</a>
</div>

想像つくと思いますが、実行結果は以下の通りです。

f:id:shiba-yan:20130718000503p:plain

CMS などを使っている場合には、jquery-oembed を使えば簡単に導入出来てよさそうですね。