API | memo-memo Skip to content

memo-memo

web制作に便利そうな情報をメモるブログ

Archive

Tag: API

Google AJAX Feed APIを使って、複数のRSSから、指定した文字が含まれている物のみを表示する。

8月 10
WEB制作

依然書いた、「Google AJAX Feed APIを使ってみた」の、応用版です。

複数のRSSを読み込んで、指定した文字が含まれている記事のみ表示します。

サンプルは、トヨタ、日産、ホンダの三社のRSSを取得して、「ハイブリッド」という文字が、記事のタイトルか内容に含まれている場合のみ、表示しています。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RSSリーダーサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAARRyJD439CKrHDwanT8Fq0RROytLWb0IPRySwZrSZnSrYgPFbDRS8wX6SHXCMp5HCtXxVIHdRlc5bxQ"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>RSSリーダーのサンプル</h1>

<div id="feed_area"></div>
</body>
</html>

 

js

// JavaScript Document

var rss_arr = new Array();
var delay = 500;
var keyword = "ハイブリッド";
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
		   "http://www.nissan.co.jp/NEWS/rss.xml",
		   "http://www.honda.co.jp/hotnews/rss/auto.rdf"];

google.setOnLoadCallback(function(){
	$("#feed_area").html("読み込み中...");
	for(var k = 0; k<rss_list.length; k++){
		var feed = new google.feeds.Feed(rss_list[k]);
		feed.setNumEntries(50);
		feed.load(function(result){
			if(!result.error){
				for(var i = 0; i<result.feed.entries.length; i++){
					if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
						var rss_obj = new Object();
						rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
						rss_arr.push(rss_obj);
					}
				}
			}
		});
	}
	setTimeout(arr_sort,delay);
});

function arr_sort(){
	rss_arr.sort(
		function(a,b){
			var a_date = a["date"];
			var b_date = b["date"];
			if(a_date > b_date) return -1;
			if(a_date < b_date) return 1;
			return 0;
		}
	);
	setTimeout(html_write, delay);
}

function html_write(){
	var html = "";
	for(var j = 0; j<rss_arr.length; j++){

		html += "<dl>";
		html += "<dt>";
		html += "<a href='";
		html += rss_arr[j]["url"];
		html += "' target='_blank'>";
		html += rss_arr[j]["title"];
		html += "</a>---";
		html += date_change(rss_arr[j]["date"]);
		html += "</dt>";
		html += "<dd>";
		html += rss_arr[j]["cont"];
		html += "</dd>"
		html += "</dl>";
	}

	$("#feed_area").html(html);
}

function date_change(n){
	var renewal_day = "";
	var date = new Date(n);
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDay();
	renuwal_day = year + "年" + month + "月" + day + "日";
	return renuwal_day;
}

最終的に、htmlの、

<div id=”feed_area”></div>

に、取得して精査した記事を入力します。

var rss_arr = new Array();
var delay = 500;
var keyword = "ハイブリッド";
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];

最初に、グローバル変数を宣言しています。
var rss_arrは、最終的に表示する記事を、各々連想配列として入力するための配列です。
var delayは、for文の処理を待つための時間です。
var keywordは、チェックする文字列です。
var rss_listは、取得するRSSのURLが格納された配列です。今回は、トヨタ、日産、ホンダのRSS。

google.setOnLoadCallback(function(){
	$("#feed_area").html("読み込み中...");
	for(var k = 0; k<rss_list.length; k++){
		var feed = new google.feeds.Feed(rss_list[k]);
		feed.setNumEntries(50);
		feed.load(function(result){
			if(!result.error){
				for(var i = 0; i<result.feed.entries.length; i++){
					if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
						var rss_obj = new Object();
						rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
						rss_arr.push(rss_obj);
					}
				}
			}
		});
	}
	setTimeout(arr_sort,delay);
});

この処理で、rssを読み込んで、精査して、連想配列を作って、出来た連想配列を配列に格納しています。

青文字のfor文は、変数rss_listの数だけ、（今回は3回）繰り返します。

緑文字で、google apiに、RSSを指定して、取得する記事数を指定しています。

if(!result.error){

以降が、読み込んだRSSに対する処理です。

黄色文字は、取得した記事分の繰り返し処理です。

赤文字のif文の条件が、記事のタイトルか記事の本文に、「ハイブリッド」という言葉があるかないかです。

もしあったら、そのつど新しいオブジェクトを作成して、連想配列を作って、記事のタイトルとURLと、記事の本文と、更新日を格納しています。更新日は、その後の処理でソートさせたいので、getTime()で、数値に変換しています。ひょっとしたら、変換しなくてもソート出来るかも？出来た連想配列を、配列rss_arrに格納します。

黒文字のsetTimeout(arr_sort,delay)で、for文の処理をちょっと待ってから、関数arr_sortを実行しています。

function arr_sort(){
	rss_arr.sort(
		function(a,b){
			var a_date = a["date"];
			var b_date = b["date"];
			if(a_date > b_date) return -1;
			if(a_date < b_date) return 1;
			return 0;
		}
	);
	setTimeout(html_write, delay);
}

function html_write(){
	var html = "";
	for(var j = 0; j<rss_arr.length; j++){
		html += "<dl>";
		html += "<dt>";
		html += "<a href='";
		html += rss_arr[j]["url"];
		html += "' target='_blank'>";
		html += rss_arr[j]["title"];
		html += "</a>---";
		html += date_change(rss_arr[j]["date"]);
		html += "</dt>";
		html += "<dd>";
		html += rss_arr[j]["cont"];
		html += "</dd>"
		html += "</dl>";
	}

	$("#feed_area").html(html);
}

function date_change(n){
	var renewal_day = "";
	var date = new Date(n);
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDay();
	renuwal_day = year + "年" + month + "月" + day + "日";
	return renuwal_day;
}

関数arr_sortは、配列の中身を、連想配列のdateでソートしています。

ソートに関しては、この記事がとっても参考になりました。

さらにsetTimeoutで処理を待って、htmlに書き出す関数html_writeを実行しています。

html += date_change(rss_arr[j]["date"])

は、そのまま出力すると数値なので、関数date_changeで、日付のフォーマットを作ってます。

ｒｓｓリーダーサンプル

// JavaScript Document

var rss_arr = new Array();
var delay = 500;
var keyword = “ハイブリッド”;
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];

google.setOnLoadCallback(function(){
$(“#feed_area”).html(“読み込み中…”);
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});

function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}

function html_write(){
var html = “”;
for(var j = 0; j<rss_arr.length; j++){

html += “<dl>”;
html += “<dt>”;
html += “<a href=’”;
html += rss_arr[j]["url"];
html += “‘ target=’_blank’>”;
html += rss_arr[j]["title"];
html += “</a>—”;
html += date_change(rss_arr[j]["date"]);
html += “</dt>”;
html += “<dd>”;
html += rss_arr[j]["cont"];
html += “</dd>”
html += “</dl>”;
}

$(“#feed_area”).html(html);
}

function date_change(n){
var renewal_day = “”;
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + “年” + month + “月” + day + “日”;
return renuwal_day;
}

Leave a Comment , , Read more

Google AJAX Feed APIを使ってみた

4月 9
WEB制作

本当なら、phpとかでxmlを取得すればいいんだけど、phpが使えない時にはちょっと有効かもしれないGoogle AJAX Feedの使い方のメモ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCD"></script>
<script type="text/javascript">
	google.load("feeds","1");
</script>
<script type="text/javascript" src="jquery.js"></script>

まずはヘッダーに、上記の様にgoogleapiとjQueryを読み込む。
で、次は外部ファイル化したjsファイルの中に処理を記述する。
例えば

google.setOnLoadCallback(function(){
var feed = new google.feeds.Feed("フィードのURL");
feed.setNumEntries(4);
//フィードの取得&取得フィードの処理(loadの引数"function"で行う)
feed.load(function(result){
//読み込みが成功したときの処理
if(!result.error){ //エラーじゃない場合
//タイトルの表示
var html="";
for(var i=0; i<result.feed.entries.length; i++){
var blogdate = new Date(result.feed.entries[i].publishedDate);
var blogYear = blogdate.getFullYear();
var blogMonth = blogdate.getMonth()+1;
var blogDay = blogdate.getDate();
html += "<dl>";
html += "<dt>"+ blogYear +"年"+ blogMonth +"月"+ blogDay +"日</dt>";
html +="<dd><a target='_blank' href='"+ result.feed.entries[i].link +"'>"+ result.feed.entries[i].title +"</a></dd>"
html +="</dl>";
}
$("#news_container").html(html);
}
});
});

こんな感じ。
リファレンスの、「JSON 形式の結果」の所に、「result.feed.xxxx」が何を出力するか書いてある。
例えば、result.feed.titleはフィードタイトルを取得するらしい。

1 Comment , Read more

サイトのサムネイルを、自動で作ってくれるapi

8月 19
ブックマーク

今までSimpleAPIしか使った事が無かったけど、探してみると色々あるようです。

とりあえず、HeartRails Captureを使ってみたら、なかなか良かったのでメモ。

http://capture.heartrails.com/

画像の大きさや、シャドウなんかのパラメータも付加出来ます。

Leave a Comment Read more

phpで、パラメータを作って、外部APIへ通信する方法

7月 20
WEB制作
<?php

//まずは、GETで渡すパラメータを作る。

$params = array(
'city'    =>"40",
'day'    => "today"
);

//変数paramsに、連想配列で、添え字と値を格納。この場合、添え字cityは、40、添え字dayは、today。

//その次に…

$encoded_params = array();

foreach ($params as $k => $v){

$encoded_params[] = urlencode($k).'='.urlencode($v);
}

//foreachで、配列paramをエンコードしつつ、=（イコール）で繋ぐ。

//この場合、作られるのは、「city=40」と「day=today」。

//次に、外部APIに通信するurlを作る。

//今回は、LWWS(Livedoor Weather Web Service)

$url = "http://weather.livedoor.com/forecast/webservice/rest/v1?".implode('&', $encoded_params);

//implode('&',$encoded_params)で、$encoded_paramsに入っている配列を、&で繋いで一つにしている。（GETのパラメータ完成）

$rsp = file_get_contents($url);

//file_get_contents($url)で、外部APIに通信し、その結果を変数rspに格納。

//取得したデータ(XML)を表示(print)

//header("Content-type:text/xml;")は、決まり文句
header("Content-type:text/xml;");
print($rsp);

?>
Leave a Comment , Read more
memo-memo
Copyright © 2012 memo-memo Design by SRS Solutions top