2013年11月29日

YouTubeで特定のチャンネルのリストを表示

YouTubeで特定のチャンネルのリストを表示。APIからJSONPのデータを取ってきて表示するだけ

$.getJSON('http://gdata.youtube.com/feeds/api/users/チャンネル名/uploads', {alt:'json' },function (json) {
var items = json.feed.entry;
$.each(items,function(i){
$("#youtube ul").append('<li><a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /><p>'+ items[i].title.$t + '</p></a></li>');
});
});


追記

IE9以下で動いてなかったので続・YouTubeで特定のチャンネルのリストを表示に続きます
タグ:JSONP YouTube
posted by ねこまんま at 21:40 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2012年06月06日

IEでYou Tubeを再生するとタイトルが文字化けする件

IEでYou Tubeを再生するとタイトルが文字化けするので困った件。

IEでYouTubeを再生するとlocation.hashの内容をタイトルの末尾に追加しようとする。そのためlocation.hashが2バイト文字だと文字化けしてしまいます。

めんどくさいけど次のようにしてタイトルの内容を復元すると文字化けが治ります。

var title = document.title;
swfobject.embedSWF("http://www.youtube.com/v/"+id+"?playerapiid=mytplayer&autoplay=1", "player", "740", "465", "8", null, null, params, atts);
document.title =title
タグ:IE You Tube
posted by ねこまんま at 16:46 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2012年03月18日

YOU TUBE APIで連続再生を実装する

YOU TUBE APIで連続再生を実装する基本的な方法はswfの読み込み時にloop=1を引数として設定する方法。

var params = { allowScriptAccess: "always" };
var atts = { id: "myplayer" ,'wmode':'opaque'};
swfobject.embedSWF("http://www.youtube.com/v/xxxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1&loop=1","player", "425", "356", "8", null, null, params, atts);


HTMLを再描画してループを実装することも可能。

var params = { allowScriptAccess: "always" };
var atts = { id: "myplayer" ,'wmode':'opaque'};
swfobject.embedSWF("http://www.youtube.com/v/xxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1","player", "425", "356", "8", null, null, params, atts);
var ytplayer;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(state){
if(state==0){
$("#playerWrap").html('
');
swfobject.embedSWF("http://www.youtube.com/v/xxx?enablejsapi=1&playerapiid=ytplayer&autoplay=1","player", "425", "356", "8", null, null, params, atts);
}
}
タグ:You Tube
posted by ねこまんま at 20:43 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2012年03月02日

TwitterのウィジェットがIEでエラーを出す際に対処法

文字コードがUTF8以外の際にTwitterのウィジェットがIE8とかIE7とかIE6でエラーを出すのでその際に対処法。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hogehoge" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


この読み込みコードを次のように変更。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hogehoge" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.charset="UTF-8";js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


読み込みスクリプトをUTF-8にするとよい。
タグ:twitter
posted by ねこまんま at 10:53 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2011年10月16日

Flickerのスライドショーをページに貼り付ける

Flickerのスライドショーをページに貼り付けるのは簡単。

スライドショーモード時に右上に「Share」というリンクが表示されるのでそれをクリックするとページに貼り付けるHTMLコードが発行される。Customize this htmlより貼り付ける際のサイズが変更できる。

ただ日本語のタグなどに対応していないので注意が必要。日本語タグのページに対応させたい場合はEdit Tagから半角スペースをつけてスライドショー用の英語タグを付けてそこから発行すればいい。
タグ:flicker
posted by ねこまんま at 16:25 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2011年09月19日

YouTubeプレーヤーをJavaScriptで制御する

YouTubeプレーヤーを使って色々ゴニョゴニョしているのですが、YouTubeAPIをJavaScriptで制御する方法です。

まず動画を読み込む際に次のようなパラメータを追加

http://www.youtube.com/v/yAqbKgP0zQM




http://www.youtube.com/v/yAqbKgP0zQM?enablejsapi=1&playerapiid=ytplayer


そうすると動画終了時に発火するイベント「onYouTubePlayerReady」が設定されますので、onYouTubePlayerReady時に動画オブジェクトを取得しておきましょう。

var ytplayer;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}


このようにしておくと動画再生中に「ytplayer.getCurrentTime()」というメソッドで動画再生時間が取得できるようになったりします。

参考:YouTube JavaScript Player API リファレンス
タグ:YouTube
posted by ねこまんま at 07:34 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2010年12月15日

Twitterの@Anywhereでツイート機能の実装

Twitterの@Anywhereを利用するとWebページに簡単にツイート機能を付けることが出来る。

@Anywhereに登録してAPIキーを発行すると次のような簡単な記述でツイートボックスの実装が可能だ。

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=API KEY&v=1" ></script>
<div id="placeholder"></div>
<script type="text/javascript">
twttr.anywhere("1", function (twitter) {
twitter("#placeholder").tweetBox({
height: 100,
width: 400,
defaultContent:"@hoge" ,
label: "Tweet about this article:"
});
});
</script>
タグ:twitter @Anywhere
posted by ねこまんま at 04:56 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

TwitterのUser Timeline APIをjQueryとJSONPでゴニョゴニョする方法

参考:http://dev.twitter.com/doc/get/statuses/user_timeline

・リクエストURL
http://api.twitter.com/version/statuses/user_timeline.format

フォーマットはjson, xml, rss, atomが選択可能。バージョンは1を指定。

ガチャピンのTwitterは次のように取得できる。

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=gachapinblog

以下のような古いフォーマットとも互換性がある。

http://api.twitter.com/1/version/statuses/user_timeline/gachapinblog.json

user_idかscreen_nameで取得するユーザーを指定できる。


jQueryでjsonpを取得して表示するには次のようにするよ。

<ul>/ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?callback=?&screen_name=gachapinblog" , function(data){
$.each(data,function(i){
$("ul").append("<li>"+this.text+" </li>");
});
});
</script>
posted by ねこまんま at 02:43 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

TwitterのSearch APIをjQueryとJSONPでゴニョゴニョする方法

参考:http://dev.twitter.com/doc/get/search

・リクエストURL
http://search.twitter.com/search.format

フォーマットはjsonとatomが選択可能。

http://search.twitter.com/search.json?q=hogehogeのようにqパラメーターにキーワードを付けてアクセすると検索結果が取得できる。

利用できるオプションパラメータは次の通り。

callback JSONPを利用する際のコールバック関数
lang 言語の名称企画を指定できる。デフォルトのISO 639-1でOK
locale jaを指定すると日本語の検索結果を取得できる
rpp 1ページに表示する件数を指定できる
page 表示するページを指定できる
since_id 指定したID移行のツイートを取得できる
until ツイートの期間を指定できる。フォーマットは YYYY-MM-DD
geocode ツイートされた地域を絞り込める。フォーマットはlatitude,longitude,radius。つまり37.781157,-122.398720,1miのような感じ。
show_user trueにするとツイートにユーザーを含める


<ul>/ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$.getJSON("http://search.twitter.com/search.json?callback=?&q=jQuery" , function(data){
$.each(data.results,function(i){
$("ul").append("<li>"+this.text+" </li>");
});
});
</script>
タグ:JSONP jquery twitter
posted by ねこまんま at 02:19 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2010年06月10日

Deliciousのブックマーク数を表示

Deliciousのブックマーク数を表示するスクリプトを作成しました。

DeliciousはJSONPのAPIを公開しているのでそれをjQueryでAjaxしてページに表示します。

DeliciousのAPIではURLをmd5ハッシュに変換したものをキーにします。

md5化はmd5.jsを使わせてもらいました。

$(function(){
var baseurl = location.href;
var md5hash = MD5_hexhash(baseurl);
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: 'http://feeds.delicious.com/v2/json/urlinfo/' + md5hash,
success: function(data){
if (data.length > 0){
var count = data[0].total_posts;
var link = '' + count + ' users'';
$('#delicious').html(link);
}
}
})
});


#deliciousな要素の中にブックマーク数のリンクを生成します。
posted by ねこまんま at 02:37 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする