Webサービス連動写真/動画共有サイトに投稿した情報やツイートに含まれるURLからサムネイルを取得
flickr
写真・動画共有
2011/5/6
Flickrは、写真や動画を共有できるサービス。
- Facebook, Yahoo, GoogleあるいはFlickrのユーザー登録（無料）が必要。
- Twitter, Facebook, Tumblr, Blogger, LiveJournal, Wordpress連携可。
- 公開/非公開設定可能。
- アップロード可能な画像形式は、JPEG, GIF(アニメーションなし), PNG。
※TIFFなどもアップできるが自動的にJPEGに変換される。
※15MBまで。 - アップロード可能な動画形式は、AVI, WMV, MOV, MPEG, 3gp, M2TS, OGG, OGV。
※2動画（1動画につき150MBまで）/月。 - 投稿用専用メールアドレスあり（件名にツイート内容。Flickr投稿用、ブログアップ用、Flickr経由でTwitter投稿用など）。
RSS/サムネイル取得API
| API | Flickr API ※APIの取得はこちら |
| 短縮URL | http://flic.kr/p/[image-idをBase58エンコードした文字列]/ |
| パーマリンク | http://www.flickr.com/photos/[user-id]/[image-id]/ |
| サムネイル | http://[fram-id].static.flickr.com/[server-id]/[image-id]_[size].jpg size: 's'(75x75)/'t'(100x100スケール)/'m'(240x240スケール)/'z'/なし(フルサイズ)  thumb |
| RSSフィード | 【ALL】http://photozou.jp/feed/photo_list/[user-id]/all.xml 【アルバム】http://photozou.jp/feed/photo_list/[user-id]/[album-id].xml |
Flickrサムネイル取得APIはこちらを参考にさせていただきました。とてもわかりやすいです。
» JavaScriptでFlickrのURLからサムネールを取得する方法
ブログパーツ
設置サンプル
例）最近Twitterに投稿されたFlickrの写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「flickr.kr/p/」を含むツイートをTwitter検索
var url="http://search.twitter.com/search.json?q=flickr.kr%2Fp%2F&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=flickr+from%3Apjroomer&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s="";
var formatStr="";
var j=0;
$.each(json.results, function(i, item){
if(j>5) return;
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
s+="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
j++;
}
});
$("#tw ul").append(s);
$.each($("#tw strong"),function(){
var obj=$(this);
var short_id=obj.text();
var photo_id=decodeBase58(short_id);
var apiURL="http://www.flickr.com/services/rest?method=flickr.photos.getInfo&format=json&api_key=ea84505f66f813e77ad384d68d1e4938&photo_id="+photo_id+"&jsoncallback=?";
$.getJSON(apiURL, function(json) {
var p=json.photo;
if(!p) return;
var s="<a href='http://flic.kr/p/"+short_id+"'><img src='http://farm"+p.farm+".static.flickr.com/"+p.server+"/"+p.id+"_"+p.secret+"_s.jpg' /></a>";
obj.html(s);
});
});
});
});
function jsonFlickrApi(json){
var p=json.photo;
if(!p) return;
return "<img src='http://farm"+p.farm+".static.flickr.com/"+p.server+"/"+p.id+"_"+p.secret+"_s.jpg' />";
}
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/(http:\/\/flic\.kr\/p\/)([\w\-]+)/gm,'$1$2<strong class="thumb">$2</strong>');
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
//参照：http://d.hatena.ne.jp/NeoCat/20091228/1262015896
function decodeBase58(snipcode) {
var base58_letters = '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
var ret = 0;
for (var i = snipcode.length, m = 1; i; i--, m *= 58)
ret += base58_letters.indexOf(snipcode.substr(i-1,1)) * m;
return ret;
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
line-height:1.2;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#tw ul {
list-style:none;
overflow:hidden;
clear:both;
margin:0; padding:5px 5px 0 5px;
width:100%;
}
#tw li {
margin:5px 5px 0 5px; padding:0;
position:relative;
display:block;
width:48%;
float:left;
height:89px;
overflow:hidden;
}
#tw li .box {
margin:0; padding:0 0 0 89px;
height:79px;
overflow:hidden;
word-break:break-all;
}
#tw p {
margin:0; padding:0;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw .thumb {
position:absolute;
width:79px; height:79px;
overflow:hidden;
top:0; left:0;
}
#tw .thumb img {
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>例）最近Flicker経由でTwitterに投稿された写真を表示。</p>
<p>Twitter検索で「flickr.kr/p/」を含む最新のツイートを取得し、サムネイル付きで表示します。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
はてなフォトライフ
写真・動画共有
2011/5/6
はてなフォトライフは、はてなが提供する写真や動画を共有できるウェブアルバムサービス。
- はてなのユーザー登録（無料）が必要。
- 総容量無制限。毎月30MBまで保存可能。
- フォルダ単位で公開/非公開設定可能（合言葉で認証）。
- アップロード可能な画像形式は、JPG, JPEG, GIF, Animation GIF, PNG, BMP。
※1枚あたり長辺10000px、10MBまで。 - アップロード可能な動画形式は、MOV, MPG, WMV, AVI, FLV, 3GP, 3G2。
※最大60MB、最長10分まで。
RSS/サムネイル取得API
| API | はてなフォトライフAtomAPI |
| パーマリンク | http://f.hatena.ne.jp/[user-id]/YYYYMMDD[image-id] |
| サムネイル | http://img.f.hatena.ne.jp/images/fotolife/[user-idの先頭1文字]/[user-id]/YYYYMMDD/YYYYMMDD[image-id][size].jpg size: なし(フルサイズ)/'_120'(120x120スケール)/'_m'(60x60スケール)  _m _120 |
| RSSフィード | http://f.hatena.ne.jp/[user-id]/rss |
設置サンプル
例）はてなフォトライフのRSSから投稿写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
$.getFeed({
// はてなフォトライフのRSSフィードを取得
url: "/content/lib/jquery/jfeed/proxy.php?url=http://f.hatena.ne.jp/prada/rss",
success:function(xml){
$("h2#title").html("<a href='"+xml.link+"'>"+xml.title+"</a>");
var s="";
$.each(xml.items, function(i, item){
s+="<li>"+formatTwitterString(item.description)+""+item.title+"</li>";
});
$("#tw ul").append(s);
}
});
});
// 120x120内のスケール画像を取得
function formatTwitterString(str){
str = str.replace(/(http:\/\/cdn-ak\.f\.st-hatena\.com\/images\/fotolife\/)(\w{1})(\/)(\w+)(\/)(\w{8})(\/)(\w{14})(_m\.jpg)/gm,'$1$2/$4/$6/$8.jpg');
return str;
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
}
#tw ul {
list-style:none;
margin:0; padding:0;
width:310px;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
font-size:10px;
overflow:hidden;
}
#tw li {
list-style:none;
float:left;
display:block;
margin:5px; padding:0;
width:30%;
}
#tw img {
display:block;
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>はてなフォトライフのRSSから投稿写真を一覧表示。</p>
<!-- CODE -->
<h2 id="title"></h2>
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
img.ly
写真共有
2011/5/6
img.lyは、Twitterで写真が共有できるサービス。
- Twitter認証でログイン。
- ツイート内に挿入する画像リンクの位置は左右選択可。
- Twitterに投稿したくない場合は、投稿画面で「Post it to Twitter」のチェックを外す。
- アップロード可能な画像形式は、JPG, PNG, GIF。
- 投稿用専用メールアドレスあり（件名にツイート内容）。
RSS/サムネイル取得API
| API | http://img.ly/api/docs |
| パーマリンク | http://img.ly/[image-id] |
| サムネイル | http://img.ly/show/[size]/[image-id] size: 'mini'(75x75)|'thumb'(150x150)|'medium'|'large'|'full'  mini thumb |
| 埋め込み | <script type='text/javascript' src='http://img.ly/images/[システムアップロード]/embed/?width=[size]'></script> size: 100/200/300/400/500/550 |
| RSSフィード | http://img.ly/images/[user-id].rss |
設置サンプル
例）最近Twitterに投稿されたimg.lyの写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「img.ly」をTwitter検索
var url="http://search.twitter.com/search.json?q=img.ly&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=img.ly+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/img\.ly\/)(\w*)(<\/a>)/gm,' class="thumb"><img src="http://img.ly/show/mini/$2" /></a><a href="$1$2">$1$2</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
#tw li {
margin:5px; padding:0 0 5px 0;
float:left;
width:48%;
position:relative;
height:75px;
}
#tw li .box {
margin:0; padding:0 0 0 85px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:75px; height:75px;
overflow:hidden;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「img.ly」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
例）img.lyのRSSフィードを取得して投稿した写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed_twitpic.js"></script>
<script type="text/javascript">
$(function(){
$.getFeed({
/* img.lyのRSSフィードを取得 */
url: "/content/lib/jquery/jfeed/proxy.php?url=http://img.ly/images/pjroomer.rss",
success:function(xml){
/* RSSフィードのタイトル */
$("#gallery h2").html("<a href='"+xml.link+"'>"+xml.title+"</a>");
if(xml.items.length<1){
/* 1件もない場合 */
$("#gallery ol").html("<li>情報がありません。</li>");
}else{
/* 写真一覧HTML生成 */
$(xml.items).each(function(i, item){
var _link=item.link;
$("#gallery ol").append("<li>"+formatString(_link)+"</li>");
});
}
}
});
});
/* リンクのフォーマット */
function formatString(str){
/* サムネイル画像リンク生成 */
str=str.replace(/(http:\/\/img\.ly\/)(\w*)/gm,'<a href="'+str+'" target="_blank"><img src="http://img.ly/show/thumb/$2" /></a>');
return str;
}
</script>
<style type="text/css">
#gallery {
margin:0; padding:0;
width:304px;
border:1px solid #ccc;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
background:#eee;
}
#gallery h2 {
margin:5px 0; padding:0 5px 0 5px;
text-align:center;
}
#gallery ol {
list-style:none;
margin:5px; padding:0;
}
#gallery li {
display:block;
list-style:none;
overflow:hidden;
float:left;
margin:5px; padding:0;
border:1px solid #ccc;
background:#fff;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
width:85px; height:85px;
}
#gallery li a {
display:block;
position:relative;
margin:5px; padding:0;
overflow:hidden;
width:75px; height:75px;
}
#gallery li a img {
position:absolute;
-webkit-transition: .3s ease-in-out;
display:block;
width:75px; height:75px;
overflow:hidden;
top:0; left:0;
}
#gallery li a:hover img {
width:120px; height:120px;
top:-25px; left:-25px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>img.lyのRSSフィードを取得して投稿した写真を一覧表示。サムネイルにマウスオーバーでズームインし、クリックするとimg.lyの写真ページに遷移します。</p>
<!-- CODE -->
<div id="gallery">
<h2></h2>
<ol class="cf"></ol>
</div>
<!-- CODE / -->
</div>
</body>
</html>
imgur
写真共有
2011/5/6
imgurは、ソーシャルサービスやオンライン上で簡単に写真の共有ができるサービス。
- Twitter/Facebook/Google/Yahooアカウントあるいはメールアドレスでユーザー登録。
- アルバムが作れる（レイアウト選択、公開/非公開設定可）。
- アニメーションなしの画像ファイルは最大10MBまで。
アニメーションありのGIFやPNGファイルは2MBまで。 - アップロード可能な画像形式は、JPEG, GIF, PNG, APNG, TIFF, BMP, PDF, XCF(GIMP)。
※ただし、TIFF, BMP, PDF, XCFの場合はアップロード時にPNGに変換される。
RSS/サムネイル取得API
| API | http://api.imgur.com/ |
| パーマリンク | http://imgur.com/[image-id] |
| サムネイル | http://i.imgur.com/[image-id][size].jpg size: なし(フルサイズ)/'l'(640x640スケール)/'s(90x90)'  s |
設置サンプル
例）最近Twitterに投稿されたimg.urの写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「i.imgur.com」をTwitter検索
var url="http://search.twitter.com/search.json?q=i.imgur.com&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=i.imgur.com+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/i\.imgur\.com\/)([\w\-]+?)(\.jpg)(<\/a>)/gm,' class="thumb"><img src="http://i.imgur.com/$2s.jpg" /></a><a href="$1$2$3">$1$2$3</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
overflow:hidden;
}
#tw p {
margin:0; padding:0;
/*text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;*/
}
#tw li {
margin:5px; padding:0;
float:left;
width:48%;
position:relative;
height:92px;
overflow:hidden;
}
#tw li .box {
margin:0; padding:0 0 0 100px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:92px; height:92px;
top:0; left:0;
overflow:hidden;
}
#tw a.thumb img {
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「i.imgur.com」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。</p>
<!-- CODE -->
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
instagr.am
写真SNS
2011/5/6
instagr.amは、iPhoneで撮影した写真に様々なフィルタをかけて、ソーシャルサービス上に投稿し、友達と共有できる写真SNS。
- 無料のiPhoneアプリ。
- ユーザー登録あり（メールアドレス）。
- FacebookやTwitter、Flickrに同時投稿可。
- ふつうの写真が一気にプロっぽくみえるフィルタの種類豊富。
RSS/サムネイル取得API
| API | Instagram API |
| パーマリンク | http://instagr.am/p/[image-id] |
| サムネイル | http://instagr.am/p/[image-id]/media/?size=t size: 't'(150x150)  t |
設置サンプル
例）最近Twitterに投稿されたinstagr.amの写真URLを含むツイートを検索し、サムネイル付きで表示。
※タイミングによってがサムネイルが302になることあり。最初の6件くらいしか表示されない。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「instagr.am/p/」かつ「おいしい」を含むツイートをTwitter検索
var url="http://search.twitter.com/search.json?q=instagr.am%2Fp%2F+%E3%81%8A%E3%81%84%E3%81%97%E3%81%84&page=1&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=instagr.am%2Fp%2F+cocoism&page=1&callback={callback}";
$.getJSONP(url, function(json){
var s="";
var formatStr="";
var j=0;
$.each(json.results, function(i, item){
if(j>5) return;
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
s+="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
j++;
}
});
$("#tw ul").append(s);
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/instagr\.am\/p\/[\w\-]+\/)(<\/a>)/gm,' class="thumb"><img src="$1media/?size=t" /></a>');
//str = str.replace(/(http:\/\/instagr\.am\/p\/[\w\-]+\/)/gm,'<img src="$1media/?size=t" />');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#tw ul {
list-style:none;
overflow:hidden;
clear:both;
margin:0; padding:5px;
width:100%;
}
#tw li {
margin:5px; padding:0;
position:relative;
display:block;
width:48%;
float:left;
}
#tw li .box {
margin:0; padding:0 0 0 160px;
min-height:150px;
height:auto!important;
height:150px;
min-width:150px;
width:auto!important;
width:150px;
overflow:hidden;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:150px; height:150px;
overflow:hidden;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「instagr.am/p/」かつ「おいしい」を含むツイートの検索結果を取得し、最新6件を表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
mobypicture
写真・動画共有
2011/5/6
mobypictureは、ブログやソーシャルサービスに写真や動画を投稿して、友達と共有できるサービス。
- Twitter, tmf id, autojnuk, nufotoアカウントで認証またはユーザー登録。
- Twitter, Thumblr, Facebook, Hyves, Wordpress, Livejornal, Flickr, Youtube, Vidmeoに簡単に投稿できる。
- スマートフォン対応（iPhone/Anrdoid/BlackBelly/NOKIA/Seesmic）
- 投稿用専用メールアドレスあり。
※件名にツイート内容、本文に説明文。
RSS/サムネイル取得API
| API | Mobypicture API |
| パーマリンク | http://moby.to/[image-id] |
| サムネイル | http://moby.to/[image-id]:[size] size: 'full'/'view'/'medium'(500x500スケール)/'thumbnail' or 'thumb'(100x100スケール)/'square'(90x90)  square thumb |
埋め込みコード
object/embedサンプルを見る
<object width="620" height="369">
<param name="allowScriptAccess" value="always" />
<param name="allownetworking" value="all" />
<param name="allowfullscreen" value="true" />
<param name="movie" value="http://www.mobypicture.com/static/flash/player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="file=http://vid.mobypicture.com/e3da657f25e0e741455d9d3231512d11.mp4&image=http://vid.mobypicture.com/e3da657f25e0e741455d9d3231512d11_movie.jpg" />
<embed type="application/x-shockwave-flash"
src="http://www.mobypicture.com/static/flash/player.swf"
quality="high"
bgcolor="#ffffff"
width="620" height="369"
allowScriptAccess="always"
allownetworking="all"
allowfullscreen="true"
flashvars="file=http://vid.mobypicture.com/e3da657f25e0e741455d9d3231512d11.mp4&image=http://vid.mobypicture.com/e3da657f25e0e741455d9d3231512d11_movie.jpg" />
</object>
ウィジェット
※貼付用コードのflashvarsパラメータに指定する値に「username=」が抜けており、他ユーザーの写真が表示されているため、下記のように修正する必要があります。
× <param name='flashvars' value='cocoism'>
○ <param name='flashvars' value='username=cocoism'>
設置サンプル
例）最近Twitterに投稿されたmobypictureの写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「moby.to」をTwitter検索
var url="http://search.twitter.com/search.json?geocode=35.678451%2C139.682282%2C100.0km&q=moby.to+near%3ATokyo+within%3A100km&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
var url="http://search.twitter.com/search.json?q=moby.to+from%3Apjroomer&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/moby\.to\/[\w\-]+?)(<\/a>)/gm,' class="thumb"><img src="$1:square" />$1</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
overflow:hidden;
}
#tw p {
margin:0; padding:0;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
#tw li {
margin:5px; padding:0;
float:left;
width:48%;
position:relative;
height:90px;
}
#tw li .box {
margin:0; padding:0 0 0 100px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:90px; height:90px;
overflow:hidden;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで東京エリアの「moby.to」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。</p>
<!-- CODE -->
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
携帯百景
写真共有
2011/5/6
携帯百景は、撮影した写真にかわいい手描き風フォントでメッセージを入れて、メール投稿できる写真共有サービス。
- ユーザー登録（無料）あり。
- メール投稿のみ。投稿用専用メールアドレスあり。
- メールで画像を投稿する際、件名に文字入れのためのコマンド、本文に写真に挿入するメッセージを指定。
- 投稿可能なファイル容量は2MBまで。
- スマートフォン対応（iPhone）
RSS/サムネイル取得API
| API | なし |
| コマンド | メールで画像を投稿する際に件名と本文にルールあり。 |
| パーマリンク | http://movapic.com/[user-id]/pic/[page-id] |
| サムネイル | http://image.movapic.com/pic/[size]_[image-id].jpeg size: 't'(80x80スケール)/'s'(320x320スケール)/'m'(640x640スケール)  t |
ウィジェット
最新画像を表示するブログパーツ。
幅200px、幅150pxの2パターンあり。
設置サンプル
例）最近Twitterに投稿された携帯百景の写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「movapic.com/pic/」をTwitter検索
var url="http://search.twitter.com/search.json?q=movapic.com%2Fpic%2F&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=movapic.com%2Fpic%2F+from%3Acocoism&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
if(j>5) return;
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/movapic\.com\/pic\/)(\w*)(<\/a>)/gm,' class="thumb"><img src="http://image.movapic.com/pic/s_$2.jpeg" /></a><a href="$1$2">$1$2</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#tw ul {
list-style:none;
overflow:hidden;
clear:both;
margin:0; padding:5px;
width:100%;
}
#tw li {
margin:5px; padding:0;
position:relative;
display:block;
width:48%;
float:left;
}
#tw li .box {
margin:0; padding:0 0 0 210px;
height:150px;
overflow:hidden;
word-break:break-all;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:200px; height:150px;
overflow:hidden;
border:1px solid #000;
top:0; left:0;
}
#tw a.thumb img {
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「movapic.com/pic/」を含むつぶやきの検索結果を取得し、最新6件を表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
Ow.ly
URL短縮、画像・動画・ファイル共有
2011/5/6
Ow.lyは、HootSuite連携のURL短縮、写真など様々なファイルを共有できるサービス。
- Twitter認証でログイン。
- アップロード可能な画像形式は、JPG
※最大4MBまで。 - アップロード可能なファイル形式は、DOC(DOCX), ELS(XLSX), PDF, PPT(PPTX), ODT, ODS, ODP, TXT, RTF, CSV, PSD, PSB, AI, EPS, FLA, MP3。
※最大10MBまで。 - 動画ファイルは、現在アップロード未対応。
RSS/サムネイル取得API
| API | 申請あり |
| パーマリンク | 【写真】http://ow.ly/i/[image-id] 【ファイル】http://ow.ly/d/[file-id] |
| パーマリンク（オリジナル画像） | http://ow.ly/i/[image-id]/original |
| サムネイル | http://static.ow.ly/photos/[size]/[image-id].jpg size: 'thumb'(100x100)/'normal'/'original'  thumb |
設置サンプル
例）最近Twitterに投稿されたow.lyの写真・ファイルのURLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「ow.ly/i」または「ow.ly/d」をTwitter検索
var url="http://search.twitter.com/search.json?q=ow.ly%2Fi+OR+ow.ly%2Fd&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=ow.ly%2Fi+OR+ow.ly%2Fd+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/<a href=\"http:\/\/ow\.ly\/d\/([-_\w\.]+)(" target=\"_blank\">)(http:\/\/ow\.ly\/d\/[-_\w\.]+)<\/a>/gm,'<div class="thumb"><img src="/content/img/doc.jpg" /></div>');
str = str.replace(/>(http:\/\/ow\.ly\/i\/)(\w*)(<\/a>)/gm,' class="thumb"><img src="http://static.ow.ly/photos/thumb/$2.jpg" /></a><a href="$1$2">$1$2</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
#tw li {
margin:5px; padding:0 0 5px 0;
float:left;
width:48%;
position:relative;
height:100px;
}
#tw li .box {
margin:0; padding:0 0 0 110px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw .thumb {
position:absolute;
width:100px; height:100px;
overflow:hidden;
display:block;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「ow.ly/i」または「ow.ly/d」を含むつぶやきの検索結果を取得し、写真の場合は画像付きで最新6件のツイートを表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
フォト蔵
写真共有
2011/5/6
フォト蔵は、写真や動画を共有できるフォトアルバムサービス。
- フォト蔵ユーザー登録（無料）が必要。
- Twitter, Facebook連携。
- アルバムの公開/非公開設定可能。
- 月間アップロード容量1GBまで。
- アップロード可能な画像形式は、JPEG, GIF, PNG。
※10MBまで。 - アップロード可能な動画形式は、WAV, AVI, MPEG, MOV, FLV, MP4, 各携帯キャリアの動画フォーマット。
※100MB・20分まで。
ウィジェット
ブログに貼れるブログパーツが5種類用意されています。
・縦アニメーションタイプ
・サムネイルタイプ
・スタンドタイプ
・横アニメーションタイプ
・スライドショータイプ
RSS/サムネイル取得API
| API | フォト蔵API |
| パーマリンク | http://photozou.jp/photo/show/[user-id]/[image-id] |
| サムネイル | http://photozou.jp/p/[size]/[image-id] size: 'img'(450x450スケール)/'thumb'(120x120) thumb |
| RSSフィード | 【ALL】http://photozou.jp/feed/photo_list/[user-id]/all.xml 【アルバム】http://photozou.jp/feed/photo_list/[user-id]/[album-id].xml |
設置サンプル
例）最近Twitterに投稿されたフォト蔵の写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「photozou.jp」を含むツイートをTwitter検索
var url="http://search.twitter.com/search.json?q=photozou.jp&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=photozou.jp+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s="";
var formatStr="";
var j=0;
$.each(json.results, function(i, item){
if(j>5) return;
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
s+="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
j++;
}
});
$("#tw ul").append(s);
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/photozou\.jp\/photo\/show\/)([\w\-]+\/)([\w\-]+)(<\/a>)/gm,' class="thumb"><img src="http://photozou.jp/p/thumb/$3" /></a><br><a href="$1$2$3">$1$2$3</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#tw ul {
list-style:none;
overflow:hidden;
clear:both;
margin:0; padding:5px;
width:100%;
}
#tw li {
margin:5px; padding:0;
position:relative;
display:block;
width:48%;
float:left;
height:122px;
}
#tw li .box {
margin:0; padding:0 0 0 130px;
height:122px;
overflow:hidden;
word-break:break-all;
}
#tw p {
margin:0 0 5px 0; padding:0;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:122px; height:122px;
overflow:hidden;
top:0; left:0;
}
#tw a.thumb img {
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「photozou.jp」を含むツイートの検索結果を取得し、最新6件を表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
例）フォト蔵の特定のアルバムのRSSフィードから最近投稿した写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed.js"></script>
<script type="text/javascript">
$(function(){
$.getFeed({
/* photozou.jpの特定のアルバムのRSSフィードを取得 */
url: "/content/lib/jquery/jfeed/proxy.php?url=http://photozou.jp/feed/photo_list/1662848/4254991.xml",
success:function(xml){
/* RSSフィードのタイトル */
$("#gallery h2").html("<a href='"+xml.image.link+"' class='prof'><img src='"+xml.image.url+"' /></a><a href='"+xml.link+"' class='title'>"+xml.title+"</a>");
if(xml.items.length<1){
/* 1件もない場合 */
$("#gallery ol").html("<li>情報がありません。</li>");
}else{
/* 写真一覧HTML生成 */
$(xml.items).each(function(i, item){
$("#gallery ol").append("<li><div class='thumb'>"+item.description+"</div>");
});
}
}
});
});
</script>
<style type="text/css">
#gallery {
margin:0; padding:0;
width:400px;
border:1px solid #ccc;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
background:#eee;
}
#gallery h2 {
margin:10px; padding:0;
letter-spacing:-2px;
}
#gallery h2 .prof {
}
#gallery h2 .prof img {
margin-right:10px;
padding:2px;
border:1px solid #ccc;
background:#fff;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
vertical-align:middle;
}
#gallery ol {
list-style:none;
margin:5px; padding:0;
}
#gallery li {
display:block;
list-style:none;
overflow:hidden;
float:left;
margin:5px; padding:0;
border:1px solid #ccc;
background:#fff;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
width:85px; height:85px;
}
#gallery li a {
display:block;
position:relative;
margin:5px; padding:0;
overflow:hidden;
width:75px; height:75px;
}
#gallery li a img {
position:absolute;
-webkit-transition: .3s ease-in-out;
display:block;
width:75px; height:75px;
overflow:hidden;
top:0; left:0;
}
#gallery li a:hover img {
width:120px; height:120px;
top:-25px; left:-25px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>photozou.jpの特定のアルバムのRSSフィードを取得して投稿した写真を一覧表示。サムネイルにマウスオーバーでズームインし、クリックするとphotozou.jpの写真ページに遷移します。</p>
<!-- CODE -->
<div id="gallery">
<h2></h2>
<ol class="cf"></ol>
</div>
<!-- CODE / -->
</div>
</body>
</html>
picplz
写真SNS
2011/5/6
picplzは、iPhoneやAndroid上で写真を共有するためのサービス。Instagr.amに似ています。
- Twitter、Facebook認証でログイン。
- 写真にエフェクトを付けて投稿できる。
- PCからも使えます。
RSS/サムネイル取得API
| API | picplz API |
| 短縮URL | http://picplz.com/*** |
| パーマリンク | http://picplz.com/user/[user-id]/pic/***/ |
| サムネイル | 100sh(200x200)/320rh(320x320スケール)/640r(640x640スケール) |
| RSSフィード | http://picplz.com/user/[user-id]/picfeed.rss |
設置サンプル
例）picplzのRSSフィードから最近投稿した写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
$.getFeed({
// picplzのRSSフィードを取得
url: "/content/lib/jquery/jfeed/proxy.php?url=http://picplz.com/user/cocoism/picfeed.rss",
success:function(xml){
$("h2#title").html("<a href='"+xml.link+"'>"+xml.title+"</a>");
var s="";
$.each(xml.items, function(i, item){
s+="<li>";
s+="<p class='thumb'>"+item.description+"</p>";
s+="<a href='"+item.link+"'>"+item.link+"</a>"
if(item.title){
s+="<p>"+formatString(item.title)+"</p>";
}
s+=relativeTime(item.updated);
s+="</li>";
//s+="<li>"+formatTwitterString(item.description)+""+item.title+"</li>";
});
$("#tw ul").append(s);
}
});
});
// 120x120内のスケール画像を取得
function formatString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
// str = str.replace(/(http:\/\/cdn-ak\.f\.st-hatena\.com\/images\/fotolife\/)(\w{1})(\/)(\w+)(\/)(\w{8})(\/)(\w{14})(_m\.jpg)/gm,'$1$2/$4/$6/$8.jpg');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
}
#tw ul {
list-style:none;
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
font-size:10px;
overflow:hidden;
}
#tw li {
list-style:none;
float:left;
display:block;
margin:5px; padding:0;
max-width:150px;
width:auto!important;
width:150px;
word-break:break-all;
}
#tw img {
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>picplzのRSSから投稿写真を一覧表示。</p>
<!-- CODE -->
<h2 id="title"></h2>
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
例）picplz APIの使用例：最近投稿した写真情報を取得。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
// picplzのRSSフィードを取得
var url="https://api.picplz.com/api/v2/user.json?include_pics=1&username=cocoism&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=p.twipple.jp+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s=ss="";
var formatStr="";
var _users=json.value.users[0];
ss+="<a href='http://picplz.com/user/"+_users.username+"/' class='prof'><img src='"+_users.icon.url+"' /></a>";
ss+="<p>";
ss+="<strong><a href='http://picplz.com/"+_users.username+"'>"+_users.display_name+"</a></strong>";
ss+="</p>";
ss+="<p>";
ss+="フォロー数:"+_users.following_count+" ";
ss+="フォロワー数:"+_users.follower_count+" ";
ss+="投稿写真数:"+_users.pic_count;
ss+="</p>";
$.each(_users.pics, function(i, item){
formatStr=formatTwitterString(item.caption);
s="<li><div class='box'>";
s+="<p>";
s+="id:"+item.id+"<br>";
s+="date:"+item.date+"<br>";
s+="view_count:"+item.view_count+"<br>";
// s+="url:"+item.url+"<br>";
s+="like_count:"+item.like_count+"<br>";
s+="description:"+formatStr;
s+="</p>";
$.each(item.pic_files, function(j, item2){
if(j=="100sh"){// 320rh, 640r
s+="<div class='thumb'><a href='"+item.url+"'><img src='"+item2.img_url+"' /></a></div>";
}
});
s+="</div></li>";
$("#tw ul").append(s);
});
$("#tw").before("<div id='myprof'>"+ss+"</div>");
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
clear:both;
}
#tw ul {
list-style:none;
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
font-size:10px;
overflow:hidden;
}
#tw li {
list-style:none;
display:block;
margin:10px 10px 10px 10px; padding:0 0 0 105px;
height:200px;
position:relative;
}
#tw p {
margin:0 0 0 105px; padding:0;
}
#tw div.thumb {
display:block;
width:202px; height:202px;
position:absolute;
top:0; left:0;
}
#tw div.thumb img {
border:1px solid #000;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#myprof {
clear:both;
margin:10px 0; padding:0;
overflow:hidden;
height:75px;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
#myprof p {
margin:10px 0 0 0; padding:0;
}
#myprof strong {
font-size:15px;
}
#myprof a.prof {
width:75px; height:75px;
float:left;
margin:0 10px 0 0; padding:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>picplz APIからフィードを取得し、投稿写真を一覧表示。</p>
<p>参照：<a href='http://sites.google.com/site/picplzapi/home'>picplz API</a></p>
<!-- CODE -->
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
ついっぷるフォト
写真共有
2011/5/6
ついっぷるフォトは、Twitterで写真や動画を共有できるサービス。
- Twitter認証でログイン。Twitter投稿可。
- 独自のナイス！機能、コメント機能あり。
- ついっぷるアプリと連携。
- アップロード可能な画像形式は、GIF, JPG, PNG。
※最大4MBまで。
RSS/サムネイル取得API
| API | http://p.twipple.jp/wiki/Main_Page/ja |
| パーマリンク | http://p.twipple.jp/[image-id].jpg |
| サムネイル | http://p.twipple.jp/show/[size]/[image-id] size: 'thumb'(160px以下)/'large'(640px以下)/'orig'(フルサイズ) |
| RSSフィード | http://p.twipple.jp/user/[user-id]/rss |
設置サンプル
例）最近Twitterに投稿されたついっぷるフォトの写真URLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「p.twipple.jp」をTwitter検索
var url="http://search.twitter.com/search.json?q=p.twipple.jp&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=p.twipple.jp+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
// if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
// }
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/p.twipple.jp\/)([\w\-]+?)(<\/a>)/gm,' class="thumb"><img src="http://p.twipple.jp/show/thumb/$2" /></a><a href="$1$2">$1$2</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
overflow:hidden;
}
#tw p {
margin:0; padding:0;
}
#tw li {
margin:5px; padding:0;
float:left;
width:48%;
position:relative;
height:122px;
overflow:hidden;
}
#tw li .box {
margin:0; padding:0 0 0 130px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:120px; height:120px;
top:0; left:0;
overflow:hidden;
border:1px solid #000;
text-align:center;
background:#000;
}
#tw a.thumb img {
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「p.twipple.jp」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。</p>
<!-- CODE -->
<div id="tw">
<ul></ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
例）p.twipple.jpのRSSフィードを取得して投稿した写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed_twitpic.js"></script>
<script type="text/javascript">
$(function(){
$.getFeed({
/* http://p.twipple.jpのRSSフィードを取得 */
url: "/content/lib/jquery/jfeed/proxy.php?url=http://p.twipple.jp/user/cocoism/rss",
success:function(xml){
/* RSSフィードのタイトル */
$("#gallery h2").html("<a href='"+xml.link+"'>"+xml.title+"</a>");
if(xml.items.length<1){
/* 1件もない場合 */
$("#gallery ol").html("<li>情報がありません。</li>");
}else{
/* 写真一覧HTML生成 */
$(xml.items).each(function(i, item){
var _link=item.link;
$("#gallery ol").append("<li>"+formatString(_link)+"</li>");
});
}
}
});
});
/* リンクのフォーマット */
function formatString(str){
/* サムネイル画像リンク生成 */
str=str.replace(/(http:\/\/p\.twipple\.jp\/)(\w*)/gm,'<a href="'+str+'" target="_blank"><img src="http://p.twipple.jp/show/thumb/$2" /></a>');
return str;
}
</script>
<style type="text/css">
#gallery {
margin:0; padding:0;
width:304px;
border:1px solid #ccc;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
background:#eee;
}
#gallery h2 {
margin:5px 0; padding:0 5px 0 5px;
text-align:center;
}
#gallery ol {
list-style:none;
margin:5px; padding:0;
}
#gallery li {
display:block;
list-style:none;
overflow:hidden;
float:left;
margin:5px; padding:0;
border:1px solid #ccc;
background:#fff;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
width:85px; height:85px;
}
#gallery li a {
display:block;
position:relative;
margin:5px; padding:0;
overflow:hidden;
width:75px; height:75px;
}
#gallery li a img {
position:absolute;
-webkit-transition: .3s ease-in-out;
display:block;
width:75px; height:75px;
overflow:hidden;
top:0; left:0;
}
#gallery li a:hover img {
width:120px; height:120px;
top:-25px; left:-25px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>p.twipple.jpのRSSフィードを取得して投稿した写真から最新6件を一覧表示。<br>サムネイルにマウスオーバーでズームインし、クリックするとp.twipple.jpの写真ページに遷移します。</p>
<!-- CODE -->
<div id="gallery">
<h2></h2>
<ol class="cf"></ol>
</div>
<!-- CODE / -->
</div>
</body>
</html>
TwitPic
写真・動画共有
2011/5/6
TwitPicは、Twitterに写真や動画を投稿して共有できるWebサービス。
- Twitter認証でログイン。Twitter投稿可。
- 投稿用専用メールアドレスあり。
※件名にツイート内容、本文は無視される。 - スマートフォンアプリ（iPhone/Android/Blackberry）
RSS/サムネイル取得API
| 項目 | 説明 |
|---|---|
| API | TwitPic API |
| パーマリンク | http://twitpic.com/[image-id] |
| サムネイル | http://twitpic.com/show/[size]/[image-id] size: 'thumb'(150x150) / 'mini'(75x75)  thumb mini |
| RSSフィード | http://twitpic.com/photos/[user-id]/feed.rss ※ログイン後に表示されるユーザーページの右上にリンクあり。 |
ウィジェット
Photo Widgetは下記の2パターン提供されています。 ウィジェットの背景・枠線・リンク色、ツイートの背景・文字色、ウィジェットの幅、最大表示画像数がカスタマイズできます。 いずれも生成されたタグをWebページに貼るだけで、簡単に設置きます。
設置サンプル
例）img.lyのRSSフィードを取得して投稿した写真を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jfeed/jquery.jfeed_twitpic.js"></script>
<script type="text/javascript">
$(function(){
$.getFeed({
/* TwitPicのRSSフィードを取得 */
url: "/content/lib/jquery/jfeed/proxy.php?url=http://twitpic.com/photos/cocoism/feed.rss",
success:function(xml){
/* RSSフィードのタイトル */
$("#gallery h2").html("<a href='"+xml.link+"'>"+xml.title+"</a>");
if(xml.items.length<1){
/* 1件もない場合 */
$("#gallery ol").html("<li>情報がありません。</li>");
}else{
/* 写真一覧HTML生成 */
$(xml.items).each(function(i, item){
if(i>=9) return;
var _link=item.link;
$("#gallery ol").append("<li><a href='"+_link+"'>"+formatString(_link)+"</a></li>");
});
}
}
});
});
/* リンクのフォーマット */
function formatString(str){
/* サムネイル画像リンク生成 */
str=str.replace(/(http:\/\/twitpic\.com\/)(\w*)/gm,'<a href="'+str+'" target="_blank"><img src="http://twitpic.com/show/thumb/$2" /></a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#gallery {
margin:0 auto; padding:0;
}
#gallery ol {
list-style:none;
margin:0; padding:0;
}
#gallery li {
display:block;
list-style:none;
float:left;
margin:5px; padding:0;
position:relative;
width:85px; height:85px;
}
#gallery li a {
position:relative;
}
#gallery li a img {
position:absolute;
-webkit-transition: .3s ease-in-out;
width:75px; height:75px;
overflow:hidden;
background:#fff;
border:1px solid #ccc;
margin:0; padding:5px;
-webkit-border-radius:5px;-moz-border-radius:5px;
z-index:100;
}
#gallery li a:hover img {
width:120px; height:120px;
top:-25px; left:-25px;
z-index:200;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>TwitpicのRSSフィードを取得して投稿した写真を一覧表示（最新9件のみ取得）。<br>サムネイルにマウスオーバーするとズームアップし、クリックするとTwitPicの写真ページに遷移します。</p>
<!-- CODE -->
<div id="gallery">
<h2></h2>
<ol class="cf"></ol>
</div>
<!-- CODE / -->
</div>
</body>
</html>
yfrog
写真・動画共有
2011/5/6
yfrogは、写真や動画をソーシャルサービスに投稿して共有できるサービス。
- Twitter認証でログイン。Twitter投稿可。
- アップロード可能な画像形式は、JPG, JPEG, BMP, GIF, PNG。
- アップロード可能な動画形式は、MP4, MOV, 3GPP, MKV, WMV, AVI。
- 投稿用専用メールアドレスあり。
※件名にツイート内容（日本語OK）
※本文もツイート内容に入るがこちらは日本語だと文字化けするみたい。
RSS/サムネイル取得API
| API | imageshackapi - Imageshack.us/Yfrog.com API libraries and samples |
| パーマリンク | 【写真】http://yfrog.com/[image-id] 【動画】http://yfrog.us/[video-id] |
| サムネイル | 【写真】http://yfrog.com/[image-id]:[size] 【動画】http://yfrog.us/[video-id]:[size] size: 'small'(125x90)/'iphone(480x480に合わせてスケーリング)  写真: small 動画: small |
設置サンプル
例）最近Twitterに投稿されたfrogの写真・動画のURLを含むツイートを検索し、サムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「yfrog.com」または「yfrog.us」で、なおかつ「video」が含まれるツイートをTwitter検索
var url="http://search.twitter.com/search.json?q=yfrog.com+OR+yfrog.us+video&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=yfrog.com+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/yfrog\.(com|us)\/[\w\-]+?)(<\/a>)/gm,' class="thumb"><img src="$1:small" />$1</a>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
overflow:hidden;
}
#tw p {
margin:0; padding:0;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
#tw li {
margin:5px; padding:0;
float:left;
width:48%;
position:relative;
height:90px;
}
#tw li .box {
margin:0; padding:0 0 0 135px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:125px; height:90px;
overflow:hidden;
top:0; left:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「yfrog.com」または「yfrog.us」で、なおかつ「video」を含むつぶやきの検索結果を取得し、写真または動画のサムネイル付きのツイート最新6件を表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
Ustream
動画ライブ配信
unknown
Ustreamは、動画の生放送（リアルタイム配信）ができる動画共有サービスです。
- Facebook, Google, Yahoo, OpenID、あるいはUstreamのユーザー登録でログイン。
- 埋め込みタグをWebページに設置した場合は途中まで見れますが、それ以降はUstream上で見るように促されます。
RSS/サムネイル取得API
| API | http://developer.ustream.tv/docs html、json、xml、php形式で受け取れる。 例）再生回数が多い動画を検索 http://api.ustream.tv/[format]/stream/all/getMostViewers?key=[devkey] format: html/json/php/xml, devkey:開発者キー |
| 短縮URL | http://ustre.am/[video-id] |
| パーマリンク | http://www.ustream.tv/channel/[video-id] |
埋め込みコード
object/embed
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="480" height="296" id="utv">
<param name="flashvars" value="autoplay=false&brand=embed&cid=video-id&locale=ja_JP&v3=1"/>
<param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/>
<param name="movie" value="http://www.ustream.tv/flash/viewer.swf"/>
<embed
flashvars="autoplay=false&brand=embed&cid=video-id&locale=ja_JP&v3=1"
width="480" height="296"
allowfullscreen="true"
allowscriptaccess="always"
id="utv" name="utv"
src="http://www.ustream.tv/flash/viewer.swf"
type="application/x-shockwave-flash" />
</object>
iframe
<iframe
width="468" height="586"
scrolling="no"
frameborder="0"
style="border: 0px none transparent;" src="http://www.ustream.tv/user-id/video-id"
></iframe>
設置サンプル
例）Ustreamで「CNNNews」を含むユーザー名のチャンネルを検索し、最新10件の動画情報を一覧表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
// 「CNNNews」を含むユーザー名のチャンネルを検索
var url="http://api.ustream.tv/json/channel/recent/search/username:like:CNNNews?limit=10&key=B504D5B2AF2915F78643E1F1F7E612ED&callback={callback}";
$.getJSONP(url, function(json){
var s="";
var formatStr="";
var j=0;
$.each(json, function(i, item){
if(!item.isProtected){
s+="<li>";
s+="<div class='video'>"+item.embedTag+"</div>";
s+="<div class='videoinfo'><a href='"+item.url+"'><img src='"+item.imageUrl.small+"' class='thumb' /></a>";
s+="<strong>タイトル："+item.title+"</strong><br>";
//s+="user:"+item.user.id;
s+="ユーザー：<a href='"+item.user.url+"'>"+item.user.userName+"</a><br>";
s+="説明："+item.description+"<br>";
s+="作成日："+item.createdAt+"<br>";
s+="最終配信日："+item.lastStreamedAt+"<br>";
s+="評価："+item.rating+"<br>";
s+="ステータス："+item.status+"<br>";
s+="現在、"+item.viewersNow+"人が視聴中";
//s+="urlTitleName："+item.urlTitleName+"<br>";
s+="</div>";
s+="</li>";
}
});
$("#tw").append("<ul>"+s+"</ul>");
});
});
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
}
#tw li {
margin:5px; padding:0 0 10px 0;
position:relative;
display:block;
clear:both;
overflow:hidden;
}
#tw li .video {
float:right;
position:relative;
margin:0; padding:0;
width:320px; height:260px;
overflow:hidden;
}
#tw li .videoinfo {
margin:0; padding:0 0 0 130px;
}
#tw .thumb {
position:absolute;
width:120px; height:90px;
top:0; left:0;
display:block;
}
#tw .thumb img {
display:block;
webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;
overflow:hidden;
}
</style>
</head>
<body>
<h1>設置サンプル</h1>
<p>Ustreamで「CNNNews」を含むユーザー名のチャンネルを検索し、最新10件の動画情報を一覧表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
Vimeo
動画共有
unknown
Vimeoは、動画共有サイトです。
- Facebookアカウント認証あるいはユーザー登録（メールアドレス）してログイン。
- HD動画対応。
- 埋め込みタグのカスタマイズ可能。
RSS/サムネイル取得API
| API | http://vimeo.com/api |
| パーマリンク | http://vimeo.com/[video-id] |
埋め込みコード
title: 動画上に動画タイトルを表示する場合は1。
byline: 動画上にユーザー名を表示する場合は1。
portrait: 動画上にプロフィールアイコンを表示する場合は1。
loop: ループ再生の場合は1。
autoplay: 自動再生する場合は1。
iframe
<iframe
src="https://player.vimeo.com/video/[video_id]?title=0&byline=0&portrait=0"
width="400" height="225"
frameborder="0"
></iframe>
設置サンプル
例）Twitterで「すごい」かつ「vimeo.com」が含まれるツイートを検索し、最大100件のツイートを動画を埋め込み表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「vimeo.com」かつ「すごい」が含まれるツイートをTwitter検索
//http://search.twitter.com/search?q=vimeo.com+%E3%81%99%E3%81%94%E3%81%84
var url="http://search.twitter.com/search.json?q=vimeo.com+%E3%81%99%E3%81%94%E3%81%84&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=youtube.com%2Fwatch+OR+youtube+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
// if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
// j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
// str = str.replace(/(http:\/\/vimeo.com\/)([-_\w\.]+)/gm,'<strong>$2</strong>');
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([-\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/<a href=\"http:\/\/vimeo.com\/([-_\w\.]+)(" target=\"_blank\">)(http:\/\/vimeo.com\/[-_\w\.]+)<\/a>/gm,'<a href="$3">$3</a><iframe class="thumb" src="https://player.vimeo.com/video/$1?title=0&byline=0&portrait=0" width="100" height="56" frameborder="0"></iframe>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
}
#tw li {
margin:5px; padding:0 0 5px 0;
float:left;
width:48%;
position:relative;
height:120px;
}
#tw li .box {
margin:0; padding:0 0 0 150px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw .thumb {
position:absolute;
width:120px; height:90px;
top:0; left:0;
display:block;
}
#tw .thumb img {
display:block;
webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「すごい」かつ「vimeo.com」が含まれるツイートを検索し、最大100件のツイートを動画を埋め込み表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>
YouTube
動画共有
unknown
YouTubeは、動画共有サイトです。
- Googleアカウントで認証。
- HD動画対応。
- 自分のチャンネルを持てる。
- PCやモバイルから動画をアップしたり共有できる。
- 埋め込みタグのカスタマイズ可能。
RSS/サムネイル取得API
| API | ▼当サイトでも一部のAPIを解説しています。 YouTube JavaScript Player API |
| 短縮URL | http://youtu.be/[video-id] |
| パーマリンク | http://www.youtube.com/watch?v=[video-id] |
| サムネイル | http://i.ytimg.com/vi/[video-id]/[size].jpg size: 'default'(120x90)/'hqdefault'(480x360)  default |
| RSSフィード | ▼当サイトでも一部のAPIを解説しています。 YouTube Data APIで取得可能なフィード |
埋め込みコード
object/embed
<iframe
width="560" height="349"
src="https://www.youtube.com/embed/video-id"
frameborder="0"
allowfullscreen
></iframe>
設置サンプル
例）Twitterで「すごい」かつ「youtube.com/watch」または「youtu.be」が含まれるツイートを検索し、最大100件のツイートを動画のサムネイル付きで表示。
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
//「youtube.com」または「youtu.be」で、なおかつ「すごい」が含まれるツイートをTwitter検索
var url="http://search.twitter.com/search.json?q=youtube.com%2Fwatch+OR+youtube+%22%E3%81%99%E3%81%94%E3%81%84%22&rpp=100&callback={callback}";
//（特定のユーザーが投稿した写真のみ検索する場合）
//var url="http://search.twitter.com/search.json?q=youtube.com%2Fwatch+OR+youtube+from%3Acocoism&rpp=100&callback={callback}";
$.getJSONP(url, function(json){
var s,formatStr;
var j=0;
$.each(json.results, function(i, item){
formatStr=formatTwitterString(item.text);
if(formatStr.indexOf(' class="thumb"')>0){
// if(j>5) return;
s="<li><div class='box'>";
s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>";
s+="<p>"+formatStr+"</p>";
s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>";
s+="</div></li>";
$("#tw ul").append(s);
// j++;
}
});
});
});
// リンク内につぶやきを含むURLに変更
function formatTwitterString(str){
str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([-\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');
str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>');
str = str.replace(/>(http:\/\/www.youtube.com\/watch\?v=)([-_\w\.]+)(<\/a>)/gm,' class="thumb"><img src="http://i.ytimg.com/vi/$2/default.jpg" /></a><p><a href="http://youtube.be/$2">http://youtube.be/$2</a></p>');
str = str.replace(/>(http:\/\/www.youtube.com\/watch\?v=)([-_\w\.]+)?(&\S+)(<\/a>)/gm,' class="thumb"><img src="http://i.ytimg.com/vi/$2/default.jpg" /></a><p><a href="http://youtube.be/$2">http://youtube.be/$2</a></p>');
str = str.replace(/>(http:\/\/youtu.be\/)([-_\w\.]+)(<\/a>)/gm,' class="thumb"><img src="http://i.ytimg.com/vi/$2/default.jpg" /></a><p><a href="http://youtube.be/$2">http://youtube.be/$2</a></p>');
str = str.replace(/>(http:\/\/youtu.be\/)([-_\w\.]+)?(\?\S+)(<\/a>)/gm,' class="thumb"><img src="http://i.ytimg.com/vi/$2/default.jpg" /></a><p><a href="http://youtube.be/$2">http://youtube.be/$2</a></p>');
return str;
}
function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();
var difference = parseInt((currentStamp - origStamp)/1000);
if(difference < 0) return false;
if(difference <= 5) return "いまさっき";
if(difference <= 20) return "数秒前";
if(difference <= 60) return "1分以内";
if(difference < 3600) return parseInt(difference/60)+" 分前";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前";
if(difference < 1.5*24*3600) return "1日前";
var dateArr = pastTime.split(' ');
return (parseInt(difference / 86400)).toString() + '日前';
}
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:11px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
}
#tw li {
margin:5px; padding:0 0 5px 0;
float:left;
width:48%;
position:relative;
height:120px;
}
#tw li .box {
margin:0; padding:0 0 0 150px;
}
#tw a.prof img {
width:24px; height:24px;
vertical-align:middle;
webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;
}
#tw a.thumb {
position:absolute;
width:120px; height:90px;
top:0; left:0;
display:block;
}
#tw a.thumb img {
display:block;
webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>Twitterで「すごい」かつ「youtube.com/watch」または「youtu.be」が含まれるツイートを検索し、最大100件のツイートを動画のサムネイル付きで表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>