Retoucher.jp » Google http://retoucher.jp 主にPC関連の備忘録と映画の感想を書いています。 Fri, 04 Nov 2011 07:34:34 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 YouTubeのRSS http://retoucher.jp/archives/54 http://retoucher.jp/archives/54#comments Tue, 04 Dec 2007 06:06:06 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/54 YouTubeのRSSを使った表示を別のサイトで使用しているのですが、ついつい忘れてしまうので、記載しておきます。

http://www.youtube.com/rss/tag/（任意のキーワード）.rss

試しに今流行の「ウサビッチ」で出た結果が・・・

<?xml version=”1.0″ encoding=”utf-8″ ?>
- <rss version=”2.0″ xmlns:media=”http://search.yahoo.com/mrss/”>
- <channel>
<title>YouTube :: Tag // ウサビッチ</title>
<link>http://youtube.com/rss/tag/+%E3%82%A6%E3%82%B5%E3%83%93%E3%83%83%E3%83%81.rss</link>
- <image>
<url>http://youtube.com/img/pic_youtubelogo_123x63.gif</url>
<link>http://youtube.com</link>
<title>YouTube</title>
<height>63</height>
<width>123</width>
</image>
<description>Videos tagged with ウサビッチ</description>
- <item>
<author>rss@youtube.com (HeceZTV)</author>
<title>「ウサビッチ」</title>
<link>http://youtube.com/?v=XNld83ra-fY</link>
- <description>
- <![CDATA[
<img src="http://img.youtube.com/vi/XNld83ra-fY/default.jpg" align="right" border="0" width="120" height="90" vspace="4" hspace="4" />
<p>
今人気のウサビッチを見てみました。
</p>
<p>
Author: <a href="http://youtube.com/profile?user=HeceZTV">HeceZTV</a><br/>
Keywords: <a href="/results?search_query=%E3%82%A6%E3%82%B5%E3%83%93%E3%83%83%E3%83%81">ウサビッチ</a> <a href="/results?search_query=%E4%BA%BA%E6%B0%97">人気</a> <a href="/results?search_query=%E8%A9%B1%E9%A1%8C">話題</a> <a href="/results?search_query=%E3%81%8A%E3%82%82%E3%81%97%E3%82%8D">おもしろ</a> <a href="/results?search_query=%E5%A5%B3%E3%81%AE%E5%AD%90">女の子</a> <a href="/results?search_query=%E5%A5%B3%E5%AD%90%E5%A4%A7%E7%94%9F">女子大生</a> <a href="/results?search_query=%E3%83%AA%E3%82%B3%E3%83%83%E3%82%BF">リコッタ</a><br/>
Added: November 30, 2007<br/>
</p>
]]>
</description>
<guid isPermaLink=”true”>http://youtube.com/?v=XNld83ra-fY</guid>
<pubDate>Fri, 30 Nov 2007 02:43:18 -0800</pubDate>
<media:player url=”http://youtube.com/?v=XNld83ra-fY” />
<media:thumbnail url=”http://img.youtube.com/vi/XNld83ra-fY/default.jpg” width=”120″ height=”90″ />
<media:title>「ウサビッチ」</media:title>
<media:category label=”Tags”>ウサビッチ 人気 話題 おもしろ 女の子 女子大生 リコッタ</media:category>
<media:credit>HeceZTV</media:credit>
<enclosure url=”http://youtube.com/v/XNld83ra-fY.swf” duration=”217″ type=”application/x-shockwave-flash” />
</item>
以下省略
</channel>
</rss>

AJAXでもなんでも後は加工するだけですが、仕方は様々なので省略します。
あと、私のような初心者が汚いソースをここに書いても恥ずかしいからです＾＾；

静止画ですが、出来上がったサンプル
youtubexml.JPG

「Video Bar」を使ったGoogle AJAX Search APIの方がラクだし、最小限の手間でそこそこの形になるからいいのですが、個人的にはXMLを使った方がhtmlのソースがキレイになるから好きです。

同じように、任意の投稿者のRSSを取得するには、

http://www.youtube.com/rss/user/（任意の投稿者名）/videos.rss

といった感じです。

]]> http://retoucher.jp/archives/54/feed 0 Google AJAX Search API（Video Bar編） http://retoucher.jp/archives/41 http://retoucher.jp/archives/41#comments Wed, 13 Jun 2007 06:17:07 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/41 Google AJAX Search APIを使って「YouTube」の動画の検索結果を組み込む事が出来るらしい。
デフォルトでも、Wizard使ってもいいのですが、念のため、備忘録・・・


いつものようにAPIキーをこちらから取得。

以下、&ltHead>部分

<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=「Search APIのキー」”
type=”text/javascript”></script>
<link href=”http://www.google.com/uds/css.gsearch.css.css”
rel=”stylesheet” type=”text/css”/>
<script src=”http://www.google.com/uds/solutions/videobar/gsvideobar.js”
type=”text/javascript”></script>
<link href=”http://www.google.com/uds/solutions/videobar/gsvideobar.css”
rel=”stylesheet” type=”text/css”/>

ここからが問題部分。
同じく&ltHead>には入るのですが、

<script type=”text/javascript”>
window._uds_vbw_donotrepair = true;
</script>
<script src=”http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new”
type=”text/javascript”></script>

<style type=”text/css”>
#videoBar-player .playerInnerBox_gsvb .player_gsvb {
width : 480px;
height : 380px;
}
</style>

サムネールをクリックした時に表示される動画のサイズのCSSを変更。
公式のガイドによると・・・・

・180px x 135px – small player
・260px x 95px – medium player
・320px x 260px – large player
・480px x 380px – extra large player
らしい。

ここからがイロイロな設定。

<script type=”text/javascript”>
function LoadVideoBar() {

var videoBar;
var options = {
string_allDone : “動画のウィンドウを閉じます”,
largeResultSet : !true,
horizontal : false,
autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_SHORT,
cycleMode : GSvideoBar.CYCLE_MODE_RAMDOM,
executeList : [ "任意のキーワード", "任意のキーワード２" ]
}
}

videoBar = new GSvideoBar(document.getElementById(“videoBar-bar”),
document.getElementById(“videoBar-player”),
options);
}
GSearch.setOnLoadCallback(LoadVideoBar);
</script>

string_allDone : デフォルトでは無いが、プレーヤーを閉じる部分のセリフを替えられる。
horizontal : trueなら横型。falseなら縦型。
CYCLE_TIME_SHORT : 「Auto Execute List」ってもんらしい。サムネールの切り替え時間。

後は、自分が組み込みたいところに

<div id=”videoBar”>Loading…</div>
<div id=”videoPlayer”>Loading…</div>

を追加。

CSSは細かいところをイジらなくても、とりあえずは動作しますね。

]]> http://retoucher.jp/archives/41/feed 0 Google AJAX Feed API（SlideShow） http://retoucher.jp/archives/38 http://retoucher.jp/archives/38#comments Mon, 04 Jun 2007 02:52:31 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/38 忘れる前にFeed APIを使ったスライドショーの手順を記載しておきます。


<head>部

<script src=”http://www.google.com/jsapi/?key=取得したAPIキー”
type=”text/javascript”></script>
<script src=”http://www.google.com/uds/solutions/slideshow/gfslideshow.js”
type=”text/javascript”></script>

スタイルシート（面倒なのでHEAD部に書き込む）

<style type=”text/css”>
.gss a img {border : none;}
gss {
color: #dddddd;
background-color: #000000;
padding: 0px;
}
#slideshow{
width:160px;
height:120px;
padding:10px;
}
</style>

こちらもHEADに書き込む

<script type=”text/javascript”>
function load() {
var samples = “任意のRSS。Picasaで試すのが一番簡単に結果が出る。”;
var options = {
displayTime: 1500,
transistionTime: 600,
scaleImages : true,
　　numResults : 10,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, “slideshow”, options);
}
google.load(“feeds”, “1″);
google.setOnLoadCallback(load);
</script>

書いておきたい事として、上のオプション部分。
・displayTime: 1500,：（表示時間）
・transistionTime: 600,：切り替え時間
・scaleImages : true,：イメージのリサイズ
　※↑の部分を追加しないと、CSSの部分でサイズを決めても実際のサイズで表示されてしまう。（フィットさせるには必要）
・numResults : 10,：読みこむイメージ最大数
　↑上は10になっているので、読み込むRSSの数が100であっても、10枚でループします。
　記載しなければ、全ての枚数。
・linkTarget : google.feeds.LINK_TARGET_BLANK：（リンクターゲット）

オプション部分でpauseOnHover : false(デフォルトはtrue)もあるが、スライドショーを止めずに流しっぱなしと言うのもいかがなものなので、ここでは省略

以下<body>部分の任意の場所に

<div id=”slideShow”>Loading…</div>

PicasaのRSSを読み込むテストをしてみたが、結構いい感じでスライドショーしてくれる。
順番どおりしか再生してくれないので、ランダムに再生してくれたら、結構自分の中では実用的だと思う。

]]> http://retoucher.jp/archives/38/feed 0 Google AJAX Feed APIを導入 http://retoucher.jp/archives/36 http://retoucher.jp/archives/36#comments Fri, 11 May 2007 07:15:41 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/36 WEB言語初心者の自分としてはAJAX自体チンプンカンプンで、相当苦労しています。
AJAXとRSSリーダーのコトを調べているうちに「Google AJAX Feed API」を導入する事にしてみました。

Google AJAX Feed APIサイト

使用するにはAPIキーが必要となりますが、上記サイトから簡単に取得する事ができます。


サンプルでは・・・・

<html>
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR_KEY_HERE”></script>
<script type=”text/javascript”>

google.load(“feeds”, “1″);

function initialize() {
var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement(“div”);
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<div id=”feed”></div>
</body>
</html>

となっています。

ですが、私は複数のRSSを読み込みたかったので、調べているうちに『The FeedControl』を見つけました。
そのサンプルが下記です。

<html>
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=”YOUR-KEY”></script>
<script type=”text/javascript”>

google.load(“feeds”, “1″);

function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed(“http://www.digg.com/rss/index.xml”, “Digg”);
feedControl.addFeed(“http://feeds.feedburner.com/Techcrunch”, “TechCrunch”);
feedControl.draw(document.getElementById(“feedControl”));
}
google.setOnLoadCallback(initialize);

</script>
</head>

<body>
<div id=”feedControl”>Loading</div>
</body>
</html>

備忘録で記載しているだけなので、細かくは書きませんが、
「addFeed(“RSS”,”タイトル”)」を複数書く事で追加するコトができ、id=”feedControl”にその結果が表示されると言うもの。
この状態だと、サイトが二つ縦に並ぶだけなのですが・・・・

feedControl.draw(document.getElementById(“feedControl”));
}
google.setOnLoadCallback(initialize);
</script>
</head>

この部分を

feedControl.draw(document.getElementById(“feedControl”),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED //タブモード
});
}
google.setOnLoadCallback(initialize);
</script>
</head>

こうする事でタブモードに切り替わり、かなり見栄えが変わります。
※デフォルトはDRAW_MODE_LINEAR

勿論、RSSの件数もリンクのターゲットも変えることができます。

feedControl.draw(document.getElementById(“feedControl”);
feedControl.setNumEntries(5); //エントリーの総数
feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);　//リンクのターゲット

CSSでイロイロ制御が出来るみたいなのですが、それは次回。

]]> http://retoucher.jp/archives/36/feed 0