Retoucher.jp » Google http://retoucher.jp 主にPC関連の備忘録と映画の感想を書いています。 Wed, 07 Mar 2012 07:01:37 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 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