Search
  1. flickr〔写真・動画共有〕
  2. はてなフォトライフ〔写真・動画共有〕
  3. img.ly〔写真共有〕
  4. imgur〔写真共有〕
  5. instagr.am〔写真SNS〕
  6. mobypicture〔写真・動画共有〕
  7. 携帯百景〔写真共有〕
  8. Ow.ly〔URL短縮、画像・動画・ファイル共有〕
  9. フォト蔵〔写真共有〕
  10. picplz〔写真SNS〕
  11. ついっぷるフォト〔写真共有〕
  12. TwitPic〔写真・動画共有〕
  13. yfrog〔写真・動画共有〕
  14. Ustream〔動画ライブ配信〕
  15. Vimeo〔動画共有〕
  16. YouTube〔動画共有〕

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

APIFlickr API ※APIの取得はこちら
短縮URLhttp://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'/なし(フルサイズ)
thumbthumb
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からサムネールを取得する方法

ブログパーツ

→ Flickr badge作成ツール

設置サンプル

例)最近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>

関連: Web関連特集 » Webサービス連動 » flickr関連

はてなフォトライフ
写真・動画共有

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_m
_120_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

APIhttp://img.ly/api/docs
パーマリンクhttp://img.ly/[image-id]
サムネイルhttp://img.ly/show/[size]/[image-id]
size: 'mini'(75x75)|'thumb'(150x150)|'medium'|'large'|'full'
minimini
thumbthumb
埋め込み<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

APIhttp://api.imgur.com/
パーマリンクhttp://imgur.com/[image-id]
サムネイルhttp://i.imgur.com/[image-id][size].jpg
size: なし(フルサイズ)/'l'(640x640スケール)/'s(90x90)'
ss

設置サンプル

例)最近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

APIInstagram API
パーマリンクhttp://instagr.am/p/[image-id]
サムネイルhttp://instagr.am/p/[image-id]/media/?size=t
size: 't'(150x150)
tt

設置サンプル

例)最近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

APIMobypicture API
パーマリンクhttp://moby.to/[image-id]
サムネイルhttp://moby.to/[image-id]:[size]
size: 'full'/'view'/'medium'(500x500スケール)/'thumbnail' or 'thumb'(100x100スケール)/'square'(90x90)
squaresquare
thumbthumb

埋め込みコード

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スケール)
tt

ウィジェット

最新画像を表示するブログパーツ。
幅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'
thumbthumb

設置サンプル

例)最近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)
thumbthumb
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

APIpicplz API
短縮URLhttp://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

APIhttp://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

項目説明
APITwitPic API
パーマリンクhttp://twitpic.com/[image-id]
サムネイルhttp://twitpic.com/show/[size]/[image-id]
size: 'thumb'(150x150) / 'mini'(75x75)
thumbthumb
minimini
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

APIimageshackapi - 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
動画: 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

APIhttp://developer.ustream.tv/docs
html、json、xml、php形式で受け取れる。
例)再生回数が多い動画を検索
http://api.ustream.tv/[format]/stream/all/getMostViewers?key=[devkey]
format: html/json/php/xml, devkey:開発者キー
短縮URLhttp://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&amp;brand=embed&amp;cid=video-id&amp;locale=ja_JP&amp;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&amp;brand=embed&amp;cid=video-id&amp;locale=ja_JP&amp;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

APIhttp://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&amp;byline=0&amp;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&amp;byline=0&amp;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

▼当サイトでも一部のAPIを解説しています。
YouTube JavaScript Player API
短縮URLhttp://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)
defaultdefault
RSSフィード

YouTube Data API FeedTypes

▼当サイトでも一部の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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women