”めがねを磨く”是、冥々之志なり

HOME > ブログTOP>IT関係

外部のRSSから画像を取得して表示する

今日はマニアックネタ。自分の記録用に書かせて頂きます。

お店のHPには、このブログのメガネに関係することだけを取り出して、新着順に表示していました。これは、ひとつのブログのRSSから記事を抽出してタイトルと日付とリンクを表示していたものです。
これは、プログラム言語PHPを使ってRSSを取得して解析できる「MagpieRSS」を使っています。テキストだけの表示は簡単にできていたのですが、その記事に含まれる画像もサムネイルとして抽出したいと、ずっと考えていて、いろいろ試行錯誤していました。何回も断念していましたが、久しぶりにもう一度やってみたら、ついに出来ました!!こんな感じ。

外部のRSSから画像を取得して表示する

「preg_match」という関数を使います。RSSから取得した文字列を検索する関数です。まず、RSSの中の画像のコードを取り出したいので、img部分を取り出すには、このようにします。

1
2
3
4
5
<?php
    $encoded = $item[content][encoded];
    preg_match("/<img[\w\d\W\s]+?\s\/>/i",$encoded, $matches);
    print ($matches[0]);
?>

このままでは、画像そのままのサイズのものが貼り付けられてしまうので、画像リンクの部分だけを抽出して自分でサイズを指定してあげるために、少しアレンジします。

1
2
3
4
5
<?php
    $encoded = $item[content][encoded];
    preg_match("/src=\"(.*?)\"/i",$encoded, $matches);
?>
<img <?php echo $matches[0]; ?> height="60px" />

たったこれをしたいがために、随分時間を要してしまいました。
最近Facebookでも、リンクを貼ると自動で画像を取得して表示されるのが普通になっていますし、どうしてもこれをやりたかったのです。これが出来ると幅がかなり広がるんです。今は、記事の一つ目の写真だけを取り出す設定ですが、アレンジすればなんとでもなりそうです。

今日は久しぶりにモヤっとしていた部分が晴れた日になりました。

興味ある方は、前に書いた外部からRSSを複数取得して表示するも合わせてご覧ください。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

スマートフォンの文字

スマートフォン持っている人、どんどん増えてきましたね。
それに伴って、画面の文字が見えないといって相談される方も増えています。元々、携帯電話の時からそういうお客様はいらっしゃったのですが、スマートフォンは文字が大きくできるといって買ったが、出来るものと出来ないものがあって・・・とおっしゃる方が多いです。
本日お越しになられたお客様は、70歳超の方。スマートフォンを使いこなしている姿に感銘。近視のメガネを外しても見えにくいので、薄いカード型の簡単なルーペはないかとのこと。
スマートフォンの文字を拡大
ZEISS(ツアイス)の製品で2,415円。周辺部まで歪みが少なくスッキリ見える設計のカードタイプです。

ところで、老眼鏡とルーペの違い分かりますか?ルーペは日本語にすると拡大鏡で、字の通り文字などを拡大するものです。それに対して、老眼鏡は、水晶体の老化によって網膜上にピントの合った像がずれてきたものを、レンズの屈折で網膜上にピントが合うようにするものです。ルーペは、ピントが合っているのではなく、拡大することによってボケを感じないだけなのです。本当は、ルーペも老眼鏡などで矯正したうえで使用するともっと見やすいはずです。

老眼を感じない頃は、もちろん小さいものも見えていたはずで、老眼症状が出始めても、足りなくなった調節力を老眼鏡で補ってあげれば、若い頃と同じく見えるはずです。足りなくなった調節力を、気合と気力で我慢していると、疲れるばかりか、小さい文字は読まないようになっていくのです。

キーワードは、「足りなくなった目の調節力を補う」。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

Googleの+1ボタン

グーグルのプラスワンボタン(GoogleのPlusOneボタン)が設置できるようになったようです。

google-plusone

早速設置してみました。

やり方は、googleの+1ボタン設置のページからコードを作製し必要な場所に配置するだけ。簡単!!

それぞれのページに設置する場合は、

1
<g:plusone href="URLを記入"></g:plusone>

とします。CMSなど使っている場合は、URLを吐き出すコードを記入して下さい。Wordpressの場合は、以下のように。

1
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

整形はCSSの方で調整して下さい。

+1ボタンに関する情報

グーグルによると
「+1 は、既知の信頼できるユーザーの関連コンテンツ(ウェブサイト、Google 検索結果、広告)を見つけてもらいやすくする機能です。ページに +1 ボタンを追加すると、ユーザーはそのコンテンツを友だちにすすめられるようになります。友だちと連絡先には、検索結果内で最も関連性が高いと判断された場合におすすめが表示されます。 」
とのことで、今後どのような展開になっていくのかは楽しみですね。

追記:Googleのプラスワンボタンは携帯ページ、スマートフォン専用ページには追加していません。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

チャレンジ!「金沢片町検定」

金沢片町検定

本日より「金沢片町検定」がスタートしました。

http://www.e-katamachi.com/kentei/

金沢片町を幅広く知って頂き、より愛着を持って皆様に親しんでもらえるよう、片町のグルメ情報や現在の片町情報、片町の歴史などをクイズ形式で出題しています。
片町にいながらも意外と知らなかった問題などもあります。私が考えた問題も入っています。
ぜひ、これをネタに楽しんで頂きたいと思います。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

外部からRSSを複数取得して新着順に並べる

完全にマニアックネタですみません。私のための記録用に記事にさせて頂きます。

外部からRSSを複数取得して新着順に並べるには、「Google AJAX Feed API」を使います。GoogleからAPIキーを取得してキーを一番上に入力します。そして取得したいRSSフィードのURLを入力します。
基本的にはこれだけです。それにしてもなんと多くのサンプルがあることか。しかも人が作っているので記述方法はさまざま。理解するのに大変でした。といっても完全に理解できていない。。。

私がアレンジしたのは、後で記事ごとに対応する画像を表示させるために、0から順番に番号も付けておくこと。投稿1日以内の記事には、新着記事と表示するようにしたことです。
この画像を表示させるために取得する関数などコードを書くために、4時間も試行錯誤しました。

後は、整形するためにCSSを書くだけです(ここまだやってません)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したもの入力"></script>
<script type="text/javascript">
<!--
//順番に0から記入
var blogerlist = {
	'http://www.kinkodo.jp/blog/atom.xml':0,
	'http://rss.exblog.jp/rss/exblog/moroeya/atom.xml':1,
	'http://blog.hotta-megane.co.jp/feed':2,
	'http://rss.exblog.jp/rss/exblog/eightbl/atom.xml':3,
	'http://rss.exblog.jp/rss/exblog/nurimono/atom.xml':4,
	'http://rss.exblog.jp/rss/exblog/carlo/atom.xml':5,
};
var RSSurl = new Array();
for( var i in blogerlist){
	RSSurl.push({url:i,val:blogerlist[i]});
}
var len = RSSurl.length;
 
function rssFeeds(){
	this.rssArray = new Array();
}
 
function strFeeds(fe,date,_v){
	this.feedStructure = fe;
	this.mDate = date;
	this.infoVal = _v;
}
var RssData = new rssFeeds();
 
google.load("feeds", "1");
 
function sortFeed(arr,key){
	arr.sort( function(b1, b2){ return b1[key] < b2[key] ? 1 : -1; } );
}
 
function dateToString(date){
	//var wArray = new Array("日","月","火","水","木","金","土");
	//var week = wArray[date.getDay()];
	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
	var hour = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();
 
	if(month < 10){month = "0" + month;}
	if(day < 10){day = "0" + day;}
	if(hour < 10){hour = "0" + hour;}
	if(minutes < 10){minutes = "0" + minutes;}
	if(seconds < 10){seconds = "0" + seconds;}
 
	var dateStr = "【" + year + "/" + month + "/" + day + " " + hour + ":" + minutes + "】";
 
	return dateStr;
}
 
function displayFeed(rFeed,n){
 
	var structure = 0;
	var val = 0;
	var title ="";
	var link = "";
	var description ="";
	var author ="";
	var classArray = new Array("kinkodo.jpg","moroe.gif","hotta.jpg","hatta.jpg","ishida.jpg","campagne.jpg");
	var htmlstr = "";
 
if(rFeed.rssArray[n]){
	if(rFeed.rssArray[n].feedStructure){
		structure = rFeed.rssArray[n].feedStructure;
	}
	if(rFeed.rssArray[n].infoVal){
		val = rFeed.rssArray[n].infoVal;
	}else if(rFeed.rssArray[n].infoVal == 0){
		val = 0;
	}
}
 
if(structure.feed){
	title = structure.feed.title;
	link = structure.feed.link;
	description = structure.feed.description;
	author = structure.feed.author;
 
	htmlstr += '<ul><img src="画像を格納しているフォルダ指定' + classArray[val] + '">';
 
	for (var k = 0, strLength = structure.feed.entries.length; k < strLength; k++) {
		htmlstr += '<li>';
		htmlstr += '<p><a href="' + link + '" target="_blank">' + title + '</a></p>';
		htmlstr += '<p>' + description + '</p>';
 
		var entry = structure.feed.entries[k];
		var entryTitle = entry.title;
		var entryLink = entry.link;
		//	var entryDesc = entry.content;
		var entrySnippet = entry.contentSnippet;
		//	var entryCategory = entry.categories;
		var publishedDate = entry.publishedDate;
		var pDate = new Date(publishedDate);
 
		var limit = 1; //1日以内の記事ならNEWマーク
		var entdate = new Date(entry.publishedDate).getTime();
		var newmark = '';
		var now = (new Date()).getTime();
		if (now >= entdate && limit >= ((now - entdate)/86400000)) {
		newmark = '<span style="color:red;">新着記事!<\/span>'; //「NEWマーク」のタグ
		}
 
		htmlstr += dateToString(pDate) + newmark + '<dl><dt><a href="' + entry.link + '" target="_blank">' + entryTitle + '</a></dt><dd>' + entrySnippet + '…</dd></dl>';
		htmlstr += '</li>';
	}
	htmlstr += '</ul>';
}
return htmlstr;
}
 
function setRSS(num, iVal){
	var sortDate;
	var container = document.getElementById("feed");
	var outstr = "";
 
	return function(result){
		if (!result.error) {
			sortDate = (new Date(result.feed.entries[0].publishedDate)).getTime();
			RssData.rssArray.push( new strFeeds(result,sortDate,iVal));	
			}else{
			alert(result.error.code + ":" + result.error.message);
			}
			if(num == len - 1){	//最後のフィード追加が終ったら出力する
				sortFeed(RssData.rssArray,'mDate');	
				for(var j=0; j < len ; j++){
					outstr += displayFeed(RssData,j);
				}
				container.innerHTML = outstr;
			}
	}
}
 
function initialize() {
	for(var i=0; i < len; i++){
		var feed = new google.feeds.Feed(RSSurl[i].url);
		feed.setNumEntries(1); //サイトから取得する記事数
		feed.load(setRSS(i,RSSurl[i].val));
	}
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="width:600px; overflow:auto;" id="feed">Loading...</div>

どのように表示されるかは、まだテスト中のサイトで作っている段階なので、お見せできませんが、できたらサンプルを載せたいと思います。
http://www.e-katamachi.com/blog.shtmlこのページの内容が新着順に上から並ぶような感じです。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

エディタのフォント変更

いつも使っているテキストエディタのフォントを代えてみた。
ネットで見やすくておすすめと書き込まれてたやつ。
ダウンロードして、フォントファイルに入れて、フォントを選ぶだけ。

見やすい!これで作業効率があがるかな?

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

疲労によってピント合わせが・・・

最近急激に頭使ってます。パソコンの画面を見っぱなし。頭が疲れているのか、目が疲れているのか、姿勢で疲れているのか、朝の寝起きも急激に悪くなりました。

私は36歳。まだ老眼を感じる程の年齢ではありませんが、薄暗いところで小さい文字を見たり、パソコンばかりしていると、ピントを合わせる力の衰えというものを感じることがあります。
人の目の調節力の老化は、生まれてから視る機能が成熟してから、後は、少しずつ目の調節力は落ちていく一方です。これ本当!

目の調節力の衰え

視力によりますが、基本的に矯正して遠くが良く見える状態である人は、生活して目を開いてモノを見ている限り、一日中、この目の調節力を使い続けています。40歳前後から、夕方モノを見るときにピントが合うのに時間がかかると言う方がいるのは、まさにこれです。遠近両用をかける程でもない、これくらいの年代の方は、とてもたくさんいます。そしてほとんどの方が、我慢しています。大体の人はこれを50歳くらい前まで、このままいって、さすがに近くが見えなくなったと言って、相談に来られる方がほとんどです。

そこで、目の調節力をサポートするものがあるのです。電動アシスト自転車のようなものです。メガネのレンズの下の方の度数が若干弱くなっているレンズです。ほんと気持ち程度なのでほとんど違和感ありません。しかしこの気持ち程度が、この年代の方には大きい!特に近視のメガネをかけている方は、ほぼ同じような感じでかけられると思います。

relaxsee

実は私も仕事用のメガネはこのレンズです。従来の近視のみのメガネでも見えるのですが、これがずいぶん違うんですねー。一番効果の分かる場面は、夜飲みに行った時に薄暗いところで携帯の画面を見るときです(笑)
なんとなく目の調節力が、昔と違うなぁと感じている方は、とても効果を感じていただけるでしょう。本当は、普段目の良い人にでもいいのでしょうけど、目の良い人は、我慢強い方が多く、またメガネ自体に慣れない方も多いので、なかなか。。。近眼の方は、普段用としてすぐに慣れる方がほとんどですが。

http://www.nikon-lenswear.jp/products/far/relaxsee.php

押し売りするのは嫌いなので、無理にすすめることはしませんが、他にもいろんな方法があります。とにかく相談ください。こんな方法もあればあんな方法も。生活スタイル、性格などなどを加味して提案します。

パソコンの画面ばかり見ているあなた。普段、遠くをはっきり見る必要ありますか?どれくらいの大きさの文字が見えればいいですか?そのパソコンの画面はどれくらい離れていますか?テーブルの大きさはどれくらいですか?室内の壁のカレンダーを見ますか?などなど。
できることなら、そのメガネを使う場所に行って検証したいくらいです。

無限のメガネができるのがやりがいのあるところですね。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

最近知った便利ツール「ピクセル定規」

便利ツールの紹介。
この写真の幅っていくつだろう?と思って、わざわざプロパティーを開いてサイズを確認したりするのって非常に面倒です。サイト作るとき、幅をいくつにしたっけと思って、CSSを開いて設定を見たり。

そこでこの便利ツール「ピクセル定規」を使えば、なんと簡単に測れるんですねー。
縦も横も、ディスプレイの解像度に合わせて測れます。

ピクセル定規

ピクセル定規

こんな簡単なものがあるなら早く知りたかった。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

メモ書き用のサイト

Webサイトを今までにいくつか作ってきましたが、毎回そのたびに、前どうやったっけ?となるところ。特に設定部分は、最初しかやらないので毎回無駄な時間を費やすのです。

そこで、メモ書き代わりに残せたらいいなとずっと思いながらいたんですが、ちょっと作成の案件がいくつかあるので、同時に書いていこうかなと思いました。といってもここに書いていくのも何なので、別にサイト作りました。何もいじっていないデフォルト状態です。自分のブログは、デザイン自分で作ったので、いつの間にかシステムがバージョンアップしていくうちに、新しい機能を盛り込むのに躊躇していました。デフォルトからなら、テストしながらいけるので。

http://horisky.net/

WordPressというCMSを使っているんですが、5年前に比べてずいぶん進化しました。これあれば何でもできそうな感じです。ただし、スキルがついていかない。。PHPをもっと勉強せねば。。。これからいくつかの案件があるので、同時進行でやっていこうと思います。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

金沢も桜が開花しました。満開までにはまだ一週間くらいかかりそうですね。
開花する数日前までは、まだ桜のつぼみもほとんど見られなかったのですが、あっという間でしたね。
昨年の夏は猛暑で、今年の冬は激寒で、この影響で今年の桜は綺麗に咲くでしょうか?楽しみです。

最近自分のサイトの中をいじってます。あまりにも間が空き過ぎて、どこをどう変えたのだったのか忘れてしまってます。少し乱れている時があるかもしれませんが、お許しください。全面的にリニューアルするのは、大変な作業になりそうなので、いじれるところから少しずつやっていこうと思います。バージョンアップについていかないと、取り残されてしまうのが悩み。

4月もあっという間に三分の一が過ぎてしまいました。頑張ろうっと。

にほんブログ村 地域生活(都道府県)ブログ 石川情報へ←最後にクリック応援お願いします!
人気ブログランキングへ←最後にクリック応援お願いします!

2012年2月
« 1月    
 1234
567891011
12131415161718
19202122232425
26272829  

購読する

  • RSS フィード