2010/07/31 Google AJAX Feed API

今回はホームページに他のサイトのブログを読み込む作業をしました
これがなかなか難しい
なぜならフィードを取りに行くとはじかれてしまいます

それでGoogle AJAX Feed API を使うことにしました

まず
gajaxjsを作成します
内容は


// JavaScript Document
var blog = {
feedurl: "RSSアドレス○○.xml",
// feedurl: "http://www.makun.jp/pplog2/rss2.xml"や
// feedurl: "http://blog.makun.org/feed", です
numOfPost: 10, // 1 ページに表示する投稿数
url: "ホームページアドレス"
}

// エントリーのタイトルをリンク付きにして div 要素に入れて返す。
function createTitleWithLink(entry, idx){
var div = document.createElement("div");
var anchor = document.createElement("a");
anchor.href = entry.link;
anchor.setAttribute("name", idx);
anchor.appendChild(document.
createTextNode(entry.title));
div.className = "title";
div.appendChild(anchor);
return div;
}
// エントリーの内容を div 要素に入れて返す。
function createContent(entry){
var div = document.createElement("div");
div.innerHTML = entry.content;
div.className = "content";
return div;
}
// エントリーのタイトルへのアンカーを作成し、div 要素に入れて返す。
function createFeedTitle(entry, idx){
var anchor = document.createElement("a");
var div = document.createElement("div");
anchor.setAttribute("href",
location.protocol + "//" +
location.hostname + location.pathname + "#" + idx);
anchor.appendChild(document.
createTextNode(entry.title));
div.appendChild(anchor);
return div;
}
// 「前の投稿」を生成
// createURL 関数は blog.js で定義。
function createNextLink(entry){
var anchor = document.createElement("a");
anchor.href = createURL(blog.url, blog.numOfPost,
new Date(entry.publishedDate));
anchor.appendChild(document.createTextNode("前の投稿"));
return anchor;
}
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed(blog.feedurl);
feed.setNumEntries(blog.numOfPost)
feed.load(function(result) {
if (!result.error) {
var divFeedTitle = document.getElementById("feedTitle");
var divFeed = document.getElementById("feed");
var divNextLink = document.getElementById("nextLink");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
// フィードのタイトル一覧を生成
divFeedTitle.appendChild(createFeedTitle(entry, i));
// フィードのタイトルを生成
divFeed.appendChild(createTitleWithLink(entry, i));
// フィードの内容を生成
divFeed.appendChild(createContent(entry));
}
// 前の投稿へのリンクを生成
divNextLink.appendChild(createNextLink
(result.feed.entries[blog.numOfPost-1]));
}
});
}
google.setOnLoadCallback(initialize);

載せたいページに

<script type="text/javascript" 
src="http://www.google.com/jsapi"></script>
<script type="text/javascript"
src="js/gajax_shii.js"></script>
//<pre></head>より上に書く
 
//<body>より下に書く
<div id="feedTitle"></div>

<div id="main_blog">
<!-- フィードの内容 -->
<div id="feed"></div>
</div>
//</body>より上に書く

後はCSSでデザインを変更します
clssは
#feedTitleとcontentです

参考サイト
ブログI’m.
ブログmacco
ブログ$HII

よかったら見てください

参考サイト
Google AJAX Search API

2009/06/27 ロールオーバーの仕方

[ロールオーバー] ブログ村キーワード
rollover.jsを使ったロールオーバー
特に設置が難しくなくソースもきれいです
まずrollover.jsをダウンロードしてきてサイトのjsフォルダーに保存します
ロールオーバーしたいページの

<head></head>

の間に

<script type="text/javascript" src="js/rollover.js"></script>

を足します
ロールオーバーしたい画像(123.gif)のクラスをimgoverにして下さい

<img src="123.gif" alt="" width="137" height="44" class="imgover" />

ロールオーバーですのでリンク先を設定しなくてはなりません
他にページがない場合は#を指定します
#(ヌルリンク)はジャンプはしないけどページの先頭に飛びます
リンク先に#を使うのはjavascriptを試す時に良く使われます
今回は

<a href="#"><img src="123.gif" alt="" width="137" 
height="44" class="imgover" /></a>

です
クラスが複数ある場合は半角スペースを入れます
後はロールオーバー後の画像名を123_o.gif”
(_oはアンダーバー小文字のオーです
ゼロではないので気をつけてください)
にするとマウスを画像に持っていくとロールオーバーします
備考
ヌルとは(コンピュータ)(null) 、 (架空の生物) です
hrefとはHyper REFerenceの略です
「Hypertextとは他のページなどにジャンプできるテキスト
REFerenceとは参照(すること), 照合, 参考

さらに付けたし
mailtoで題名や本文を最初に入れておきた場合の記述

<a href="mailto:メールアドレス?
subject=件名&body=本文">メールアドレス表示用</a>

ちなみにモバイルサイトで

<a href="電話番号(ハイフンなしです">電話番号表示用</a>

はクリックすると電話をかけることができます