webデザイナーのメモブログ | memo-memo Skip to content

memo-memo

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

私は、igoogleに色々なサイトのフィードを登録して、ブラウザのホームページに設定しています。

こうしておくと、ブラウザを開くだけで、読みたいブログ等の更新状況が一目で分かるし、

タグの機能がついているので、管理もしやすいです。

igoogleにフィードを登録する方法をメモ。

 

 

 

1.igoogleのページに飛んで、右にある、「ガジェットを追加」をクリック。

 

2.登録したいブログのフィードの絶対パスをコピーする。フィードが見つからない場合、サイトのURLでもOKな場合があります。

 

3.igoogleのガジェットを追加するページの左側にある、「フィードやガジェットを追加」をクリック。

 

4.テキスト入力エリアが表示されるので、2でコピーしたフィード(もしくはサイトURL)をペーストし、「追加」をクリック。

 

5.下図の様に「次が追加されました」と表示されれば完成です。

 

6.igoogleのページに戻ると、フィードが登録されています。

覚え書きでした。

こんな感じの三角形の書き方。

単純に、多角形ツールで三角形を書いて、「効果」→「スタイライズ」→「角を丸くする」だと、

下の様に、角のみが丸い三角形になってしまいます。

そこで考えた方法が下記の方法です。

1.多角形ツールで、三角形を書く。

2.グリッドを表示する。

3.グリッドにぴったり合う様に、三角形の頂点を配置する。

4.アンカーポイント切り替えツールで、グリッドにぴったり合う様に方向線を延ばす。

5.三角形を、120度回転させて、別の頂点も手順3,4を繰り返して、同じ長さに方向線を延ばせば完成。

他に方法が無いか、もう少し考えてみよう。

 

 

依然書いた、「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で、日付のフォーマットを作ってます。

rssリーダーサンプル

// 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;
}

めちゃめちゃ久々の更新です。

しかも内容は若干しょぼい。。。。

 

今まで、何かオブジェクトをドラッグさせる様な場合、

ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
stage.addEventListener(MouseEvent.MOUSE_UP, ballUp);

function ballDown(e:MouseEvent):void{
 ball.addEventListener(Event.ENTER_FRAME, ballEnter);
}

function ballUp(e:MouseEvent):void{
 ball.removeEventListener(Event.ENTER_FRAME, ballEnter);
}

function ballEnter(e:Event):void{
 ball.x += stage.mouseX - ball.x;
 ball.y += stage.mouseY - ball.y;
}

こんな感じの書き方をしてました。赤文字のballは、ドラッグして動かしたいオブジェクトのインスタンス名です。

 

 

これでも動くけど、もっと簡単に書ける方法を、いまさら知ったので、メモしときます。

ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
ball.addEventListener(MouseEvent.MOUSE_UP, ballUp);

function ballDown(e:MouseEvent):void{
 ball.startDrag();
}

function ballUp(e:MouseEvent):void{
 ball.stopDrag();
}

 

startDrag()、stopDrag()….

こんなメソッドがあったのね。。。。。

リファレンスはこちら。

This movie requires Flash Player 9