oEmbed



ブログを書くにしろ、他のものにしろ、おおよそインターネットで表示するドキュメントであれば、htmlと縁が切れません。



htmlでは、画像やテキストを表示する場合に、これは、イメージなので、どんなサイズで、もし画像が表示できないブラウザへの簡単な説明文などを添えて表示するなどといった、決まりごとがあります。




これは、人間から言わせると、[ウザイ」作業です。



どんな風に書かなきゃいけないか学習したり、正確に記述するためには訓練が必要だからです。



インターネットが普及してから10年以上がたち、さまざまな便利な仕組みが考案されてきました



oEmbedという仕組みを試してみましたので、メモに残します。


htmlのエッセンスは何か?
それはハイパーリンクです。



ハイパーリンクのおかげで、インターネット文書も、画像も表示できます。


どんなインターネット文書にも、リンクがあります。


ハイパーリンクが、ユーチューブだったら、動画なんだから、youtubeに聞いて、自動的に書いちゃってよ、というのが、oEmbedです


安全なの?というと、諸説ありますが、既に、私たちの知る多くのサービスで、oEmbedを使うためのAPIは提供されています。





ワードプレスというブログでは、既に、一部のインターネットサービスについて、URLを記述するだけで変換する機能があります。


アドレスをこぴぺするだけで動画などが表示できます。



oEmbedの仕組み



  1. うちのhtmlは、oEmbedに対応しているよ。という事を明示する。

    <link rel="alternate" type="application/json+oembed"
      href="http://flickr.com/services/oembed?url=http%3A//flickr.com/photos/bees/236222586"
      title="Bacon Lollys oEmbed Profile" />
    <link rel="alternate" type="text/xml+oembed"
      href="http://flickr.com/services/oembed?url=http%3A//flickr.com/photos/bees/236222586"
      title="Bacon Lollys oEmbed Profile" />




  2. そこにやってきたお客さんは、「ほー、oEmbed」に対応しているとナ

    それなら、どんな風に書けばいいか、ガイドしてくれんだな

    じゃ、リクエストしてみるよ



  3. 毎度ご利用いただきありがとう、かっこよく書くための情報差し上げるわよ
    例えば、json

    {
    	"version": "1.0",
    	"type": "video",
    	"provider_name": "YouTube",
    	"provider_url": "http://youtube.com/",
    	"width": 425,
    	"height": 344,
    	"title": "Amazing Nintendo Facts",
    	"author_name": "ZackScott",
    	"author_url": "http://www.youtube.com/user/ZackScott",
    	"html":
    		"<object width=\"425\" height=\"344\">
    			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
    			<param name=\"allowFullScreen\" value=\"true\"></param>
    			<param name=\"allowscriptaccess\" value=\"always\"></param>
    			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
    				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
    				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
    		</object>",
    }




  4. 情報をもらったら、おい、そこの、PHP、あいゃ、jQuery.
    とっとと、仕事しろ、htmlのエレメント作ってハイパーリンクの後ろに、張り付けといて〜


  5. end






エントリを読んだりする分には、あまり気になりませんが、発信する人からは、objectタグなんて書かないでプログラムにやらせられれば、いいという人もいると思う。



自分も、TryOut text2htmlのような形で、だいぶ以前から似たようなことをやっている。ただ、通信先が、自分の管理下の何がしになるわけですが、、、



WordPressの最新版では、(多分2.9ぐらいから)oEmbedに対応している。



アドレスをそのままこぴぺするだけで、Youtubeなどが表示できて、使ってみるとやっぱり便利です

ただ、問い合わせて、受け取ったデータをそのまま、htmlタグを構築するところや、外部リンクという点は、管理下にない物に使っていいのか、という印象は拭えない。

外部にある画像やスクリプトをぺたぺた貼り付けるのは、もはや日常的な行為になっている。使いどころが見つかれば、いろいろなサービスが対応しているので、ぱっと普及してしまう気がする。



jQueryで、サンプルを作ったのでリンクします。




*1:IE8でボーダーが表示されていた件等、直しました。

*2:IE8でボーダーが表示されていた件等、直しました。