めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

oEmbedを試してみました

jQuery

「jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する - Goodpic」というのを読んで、oEmbedというのを知りました。これは便利な仕組みですね。自作のCMSとか（そんなの作った事無いけれど）あれば、Flickrの写真も、YouTubeの動画もうまく利用できそうです。他にも、WYSIWYGエディタなんかに活かせそう

実際の画面

結果


春の京都の写真

ソース

「jQuery の oEmbed プラグインで、FlickrやYouTubeなどのコンテンツを取得する - Goodpic」のまんまです...。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" charset="UTF-8" src="../../lib/jquery-1.3.2.js"></script>
<script type="text/javascript" charset="UTF-8" src="./jquery.oembed.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  // oembed ライブラリの設定。コンテンツの最大表示サイズや、
  // コンテンツをDomエレメントに追加する方法を選ぶ。
  $.fn.oembed.defaults = {
        maxWidth: 500, maxHeight: 400,
        embedMethod: "append" // "replace", "auto", "append", "fill"
  };

  // 指定したHTMLエレメントにoEmbedで取得したHTMLコンテンツをappendする
  $("form#oembed_form").submit( function () {
  
    $("#oembed_contents").oembed($("#oembed_url").attr("value"));
    return false;
  });
}); 

</script>
</head>
<link rel="stylesheet" href="default.css" type="text/css">
<title>jQuery TEST</title>
<body>

<form action="" id="oembed_form">
  <label>oEmbed対応URL</label>
  <input id="oembed_url" type="text" value="" style="width: 300px;" />
  <input id="oembed_load" type="submit" value="コンテンツ取得" />
</form> 

<p id="oembed_contents"></p>
</body>
</html>