JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。
(さらに…)
Ajax
-
-
Google Maps APIを使って航空写真を初期値にした地図を表示していたページが、いつからか地図が表示されていないといことに今朝気づいた。
左下のロゴと右下の利用規約だけが表示され、地図の部分はグレイのバックカラーが表示されているのみ。
表示させるには、スクリプト内の
map.setMapType(G_HYBRID_TYPE);
の行を削除すれば表示されるようになる。
当然、航空写真とのハイブリッドではなく地図になるが。最初、航空写真に問題があったのかと思ったが、切り替え表示で航空写真を選ぶと問題なく表示されるから
原因は別にあるようだ。原因と対策はトライ&調査中。
-
■星占いを表示するブログパーツを作る（ライブドア編）
レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト（他ドメイン）で公開されているRSSを、Javascriptのみを使って掲載する方法。
通常Javascriptでは別ドメインのファイル(RSS)を取得すること（クロスドメイン処理）は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。
Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/■例：ライブドア（http://fortune.livedoor.com/）の星占いを表示するブログパーツ
ライブドアの星占いでは、その日の全星座の運勢をRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。そのまま使えるサンプルコードはこれ
<script type=”text/javascript”>
google.load(“feeds”, “1”);
function initialize(){
var feed = new google.feeds.Feed(“http://fortune.livedoor.com/xml/astro12.rdf”);
feed.setNumEntries(12);
feed.load(function(result){
if(!result.error){
var container = document.getElementById(“feed”);
var useFeed = “”;
for(var i = 0; i < result.feed.entries.length; i++){
var entry = result.feed.entries[i];
useFeed += ‘<a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a><br>’;
useFeed += entry.contentSnippet + ‘<br>’;
}
container.innerHTML = ‘<div class=”horoscope”>’ + useFeed + ‘</div>’;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id=”feed”></div>
</body>
</html>上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
（各結果はその日によって変わる）牡羊座
人間関係は、万事順調となりそうです。あなたの人柄がものをいう日でしょう。友人の家に招待されたとき、親
牡牛座
周囲の注目を浴びそうな日ですので、言動がうまくいけば大きな幸運がもたらされる反面、失敗すれば大きなダ
双子座
小さな事件が、トラブルへと発展しそうな運気のようです。ただし、その原因は弱気なあなたにあるようです。
蟹座
トラブルのために、人間関係にひびが生じる予感があります。欲を表に出しすぎると、あなたのその欲張りさに
獅子座
このところしっくりいかなかった友人と仲直りをするチャンスです。素直な気持ちであなたのほうから声をかけ
乙女座
周囲からの期待が、あなたにとって重圧となることがありそうな日です。その重圧が大きな負担になり、途中で
天秤座
あなたの優しい思いやりの言動で、周囲の人たちとの関係が、さらに展開する幸運期を迎えています。心を穏や
蠍座
あなたに対する評価がよくなっていく幸運な日です。少々の無理難題でも、自分のことより相手の身になって対
射手座
周囲と対立してしまいそうな日です。無理矢理、自分の考えを押しつけたり、自己中心的な態度をとっていると
山羊座
人間関係が活発な日でしょう。周囲の人との交際から、有益な情報を得ることができたり、何か手助けをしても
水瓶座
調和が幸運のカギになる日です。単独で進んでいったり、あなた自身が前面に出てリーダーシップを取って物事
魚座
親しい友人との関係が、一時的にうまくいかなくなる予感があります。その友人とあなたの間に第三者が割りこあとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。
-
■星占いを表示するブログパーツを作る（ウーマンエキサイト編）
レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト（他ドメイン）で公開されているRSSを、Javascriptのみを使って掲載する方法。
通常Javascriptでは別ドメインのファイル(RSS)を取得すること（クロスドメイン処理）は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。
Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/■例：ウーマンエキサイト（http://woman.excite.co.jp/）の星占いを表示するブログパーツ
ウーマンエキサイトの星占いでは、その日の恋愛運、仕事運、金運を各星座ごとのRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。そのまま使えるサンプルコードはこれ
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title></title>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのAPI Key”>
</script>
<script type=”text/javascript”>
google.load(“feeds”, “1”);
function initialize() {
var container = document.getElementById(“excite”);
var ar = new Array(“cp”,”aq”,”pi”,”ar”,”ta”,”ge”,”ca”,”le”,”vi”,”li”,”sc”,”sa”);
for(var i=0; i<12; i++){
var url = “http://woman.excite.co.jp/fortune/xml/?f=horoscope&sign=” + ar[i];
var feed = new google.feeds.Feed(url);
feed.load(function(result){
if (!result.error){var entry = result.feed.entries[0];
var str=entry.title;
var result = str.split(“-“);
container.innerHTML += ‘<b>【<a href=”‘ + entry.link + ‘”>’ + result[0] + ‘</a>】</b>’ + result[2] + ‘ ‘ + result[3] + ‘ ‘ + result[4] + ‘<br>’;
}
});
}
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id=”excite”></div>
</body>
</html>上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
（各結果の数値はその日によって変わる）【山羊座】 恋愛運[5] 仕事運[5] 金運[5]
【水瓶座】 恋愛運[4] 仕事運[5] 金運[5]
【牡牛座】 恋愛運[3] 仕事運[2] 金運[2]
【牡羊座】 恋愛運[5] 仕事運[5] 金運[5]
【魚座】 恋愛運[1] 仕事運[3] 金運[3]
【双子座】 恋愛運[2] 仕事運[1] 金運[1]
【蟹座】 恋愛運[3] 仕事運[1] 金運[1]
【天秤座】 恋愛運[5] 仕事運[5] 金運[5]
【乙女座】 恋愛運[2] 仕事運[1] 金運[1]
【獅子座】 恋愛運[4] 仕事運[5] 金運[5]
【蠍座】 恋愛運[5] 仕事運[5] 金運[5]
【射手座】 恋愛運[2] 仕事運[3] 金運[3]あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。
-
Googleが提供している、別ドメインのRSSを取得することができる、Google AJAX Feed APIだが、
ページ全体の表示が遅くなることがある。
いくつかの原因はあるが、ひとつの方法として<script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのKey”></script>
タグをbody内の最後の方に書くと、ページ自体の表示を少し改善できる。
-
Google AJAX Feed APIを使ってブログパーツを作る（その4）
Javascriptだけを使って外部RSSを取得して掲載。■カスタマイズ（innerHTMLを使ったタグ使用）
Javascriptサンプル
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);
}
}
});
↓
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];
container.innerHTML += “<a href=’” + entry.link + “‘>” + entry.title + “</a>■” + entry.content + “<br />”;
}
}
});これで
タイトル■内容
タイトル■内容
タイトル■内容
〜
タイトル■内容となる。（タイトルにはリンク付）
-
Google AJAX Feed APIを使ってブログパーツを作る（その3）
Javascriptだけを使って外部RSSを取得して掲載。■カスタマイズ（本文の取得）
Google AJAX Feed APIで取得できるのはタイトルだけではありません。
以下の要素を取得・表示できます。日付「entry.publishedDate」
リンク「entry.link」
タイトル「entry.title」
内容（タグ有）「entry.content」
内容「entry.contentSnippet」 -
Javascriptだけを使って外部RSSを取得して掲載。
API keyを入手したらオリジナルのスクリプトの作成に入る。
元にのはサンプルコードの、この部分。<script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのKey”></script>
<script type=”text/javascript”>
google.load(“feeds”, “1”);
function initialize() {
var feed = new google.feeds.Feed(“取得したいRSSのURL”);
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></head>内に上記をペースト（KeyとURLは書き換え）
次に、表示したい場所に、<div id=”feed”></div>と記入。間違いが無ければ、該当するRSSのタイトルが4件表示されるはず。
■カスタマイズ（取得件数/表示件数の変更）
var feed = new google.feeds.Feed(“取得したいRSSのURL”);
feed.load(function(result) {
↓
var feed = new google.feeds.Feed(“取得したいRSSのURL”);
feed.setNumEntries(10);
feed.load(function(result) {これで「取得件数/表示件数」が10件になる。