2012年09月11日
写真を簡単に修整する
%日は写真をキレイに修整する方法についてお話したいと思います。
ネットで「肌荒れ 画像」で検索したら川澄奈穂美さんの写真が出てきました
この写真をベースに修整をしていきたいと思います。
今回はソフトは使いません。
ホームページの修正サービスを利用していきます。
まずはPicTreatさん。
右上にIDやパスワードを入れるところがありますが、使いません。
というより、ユーザー登録しようとしてもエラーで登録失敗するので使えません。
MySpaceのアカウントでも入れるようなことが書いてありますが、
こちらもPicTreat側の設定ミスで失敗するので入れません。
ではどうやって入るのか?
画面中央に黒い吹き出しがありますね。これをクリックすれば入れます。
最初に表示されるのがこの写真送信画面です。
参照ボタンをクリックするとあなたのPCのどの写真を送るのか選べます。
選んだらUploadをクリックしてください。
確認窓が出てきます。
赤目(目が赤くなってしまっている)なら上の□にチェックしてください。
それ以外は下の□にチェックされている初期状態で大丈夫です。
OKをクリック。
はい、修正完了です。
右側のSave Your Computerをクリックすれば保存できます。
左が修正後の写真、右が修整前の写真です。
そばかすが多少減って肌の感じが少しきれいになりました。
今回はプロの写真がベースなので劇的な変化はありませんでしたが、
携帯で自分撮りした写真でやるとびっくりするほど変わることもあります。
ぜひ自分の写真で試してみてくださいw
次は写真加工.comさんです。
左側のアップロードというところにさっきと同じ要領で写真をアップロードします。
あとは上のメニューでいろんな効果を乗せて行けます。
いくつか試したところ「美肌」を適用したものが一番きれいになりました。
左が修正後の写真、右が修整前の写真です。
これくらい変わると「この化粧品で肌がこんなにキレイになりました!」なんて
広告写真としても使えますねww
他にもネット上にはこういった自動修正サービスがたくさんあります。
履歴書用の写真とか、従業員紹介ページの写真とかを
手軽にキレイにしたいときは利用してみてください。
ネットで「肌荒れ 画像」で検索したら川澄奈穂美さんの写真が出てきました
この写真をベースに修整をしていきたいと思います。
今回はソフトは使いません。
ホームページの修正サービスを利用していきます。
まずはPicTreatさん。
右上にIDやパスワードを入れるところがありますが、使いません。
というより、ユーザー登録しようとしてもエラーで登録失敗するので使えません。
MySpaceのアカウントでも入れるようなことが書いてありますが、
こちらもPicTreat側の設定ミスで失敗するので入れません。
ではどうやって入るのか?
画面中央に黒い吹き出しがありますね。これをクリックすれば入れます。
最初に表示されるのがこの写真送信画面です。
参照ボタンをクリックするとあなたのPCのどの写真を送るのか選べます。
選んだらUploadをクリックしてください。
確認窓が出てきます。
赤目(目が赤くなってしまっている)なら上の□にチェックしてください。
それ以外は下の□にチェックされている初期状態で大丈夫です。
OKをクリック。
はい、修正完了です。
右側のSave Your Computerをクリックすれば保存できます。
左が修正後の写真、右が修整前の写真です。
そばかすが多少減って肌の感じが少しきれいになりました。
今回はプロの写真がベースなので劇的な変化はありませんでしたが、
携帯で自分撮りした写真でやるとびっくりするほど変わることもあります。
ぜひ自分の写真で試してみてくださいw
次は写真加工.comさんです。
左側のアップロードというところにさっきと同じ要領で写真をアップロードします。
あとは上のメニューでいろんな効果を乗せて行けます。
いくつか試したところ「美肌」を適用したものが一番きれいになりました。
左が修正後の写真、右が修整前の写真です。
これくらい変わると「この化粧品で肌がこんなにキレイになりました!」なんて
広告写真としても使えますねww
他にもネット上にはこういった自動修正サービスがたくさんあります。
履歴書用の写真とか、従業員紹介ページの写真とかを
手軽にキレイにしたいときは利用してみてください。
2012年09月10日
オマケ)本記事へリンクしやすくする改造
ホームページへのブログの読み込みは完成したので、
今度はこれを少し改造してみようと思います。
今は↓画像のうち、ブログタイトルをクリックした時だけ元のブログ記事に飛べます。
これをもうちょっとクリックしやすくします。
<CSSファイル変更>
yomikomi.css を開いてください。
.rss_entry の{}の中身に以下の1行を追加します。
display :block;
これでエントリーのボックスがブロック要素になります。
1回分のエントリ全部が1つの要素として扱えるようになります。
<JavaScriptファイル変更>
次に yomikomi.js を開いてください。
青字部分が追加や変更箇所になります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<a href="' + entry.link + '">';
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3>' + entry.title + '</h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div></a>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
これでタイトルから日付まで、空白部分を含めて
エントリのどこをクリックしても該当ブログのページに飛べるようになりました。
今度はこれを少し改造してみようと思います。
今は↓画像のうち、ブログタイトルをクリックした時だけ元のブログ記事に飛べます。
これをもうちょっとクリックしやすくします。
<CSSファイル変更>
yomikomi.css を開いてください。
.rss_entry の{}の中身に以下の1行を追加します。
display :block;
これでエントリーのボックスがブロック要素になります。
1回分のエントリ全部が1つの要素として扱えるようになります。
<JavaScriptファイル変更>
次に yomikomi.js を開いてください。
青字部分が追加や変更箇所になります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<a href="' + entry.link + '">';
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3>' + entry.title + '</h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div></a>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
これでタイトルから日付まで、空白部分を含めて
エントリのどこをクリックしても該当ブログのページに飛べるようになりました。
2012年09月09日
JavaScriptソース解説(自分用)
簡単にソースの意味を書いておきます。
数日で慌てて覚えたのであちこち怪しいですw
<●scriptファイル(yomikomi.js)●>
google.load("feeds", "1");
Googleでブログ読み込みAPIをロードしなさい
function initialize() {
initializeという関数を定義する
var feedurl = "ブログのRSSから広告除去したURL";
変数:feedurlにブログRSSのURLをセット
var feed = new google.feeds.Feed(feedurl);
変数:feedを新規で作成し、feedurlのデータをセットしなさい
feed.setNumEntries(5);
書き込み5回分を読み込む
feed.load(dispfeed);
変数:feedからfispfeedを読み込みなさい?
function dispfeed(result){
関数:dispfeedを変数:resultで定義する?
if (!result.error){
もし変数:resultにエラーがなければ(!=なければ)
var container = document.getElementById("feed");
変数:containerにfeedの中身をID別にセットしなさい
var htmlstr = "";
変数:htmlstrを定義する
for (var i = 0; i < result.feed.entries.length; i++) {
iの初期値を0として、ここから}までの命令を繰り返すこと
ここを通過するたびにiを+だけカウントアップしなさい
iがエントリの最大数以上になったらループを終わって}の先に進みなさい
var entry = result.feed.entries[i];
変数:entryに変数:result.feedの[i番目]の中身をセットしなさい
htmlstr +='<div class="rss_entry">';
変数:htmlstrに<div class="rss_entry">を追加しなさい
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
変数:htmlstrに<div class="rss_title"><h3><a href="'entry.link'">entry.title'</a></h3></div>を追加しなさい
htmlstr +='<div class="rss_main">';
変数:htmlstrに<div class="rss_main">を追加しなさい
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
変数:imgCheckに「src="」で始まり「.jpg"」「.gif"」「.png"」のどれかで終わる、
連続した文字列のうち最初に見つけたものをセットしなさい
if(imgCheck){
もしimgCheckの中身があるなら
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
変数:htmlstrに<div class="rss_img"><img imgCheck[0] width=120></div>を追加しなさい。
なければなにもしません。
htmlstr +='<div class="rss_content">';
変数:htmlstrに<div class="rss_content">を追加しなさい
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
変数:htmlstrに<p>エントリ概要150文字</p>を追加しなさい
var strdate = createDateString(entry.publishedDate);
変数:strdateにentry.publishedDateを関数:createDateStringで加工したデータをセットしなさい
htmlstr += '<p>' + strdate + '</p></div>';
変数:htmlstrに<p>strdate</p>を追加しなさい
htmlstr +='<div class="clear"><hr></div>';
変数:htmlstrに<div class="clear"><hr></div>を追加しなさい
htmlstr +='</div></div>';
変数:htmlstrに</div></div>を追加しなさい
}
ループ折り返し場所なのでforに戻りなさい
container.innerHTML = htmlstr;
containner.innerHTMLにhtmlstrの中身をセットしなさい
}else{
もし変数:resultにエラーがあるなら
alert(result.error.code + ":" + result.error.message);
エラー表示窓でエラーコード:エラーメッセージを表示しなさい
}
};
}
function createDateString(publishedDate){
関数:createDateStringにpublishedDateをセットしなさい
var pdate = new Date(publishedDate);
変数:pdateを作成し、publishedDateの日付をセットしなさい
var pday = pdate.getDate();
変数:pdayを作成し、pdateから抜き出した日をセットしなさい
var pmonth = pdate.getMonth()+1;
変数:pmonthを作成し、pdateから抜き出した月に1を足したものをセットしなさい
(publishedDateの仕様で1年は0月から始まるため)
var pyear = pdate.getYear();
変数:pyearを作成し、pdateから抜き出した年をセットしなさい
if(pyear < 2000){pyear = pyear+1900} ;
もしpyearが2000未満なら、pyearに1900を追加しなさい
2000を超えているならなにもしません
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
変数:strdateに「pyear年pmonth月pday日」をセットしなさい
return strdate;
strdateを再構成しなさい
}
関数:createDateStringを終了します
google.setOnLoadCallback(initialize);
関数:initializeを読み込んで実行しなさい
またCSSを書き換えてみました。
今回はrss_contentの回り込み設定を外して、画像に回り込むようにしてみました。
画像なしの日は文字が画像の部分に回りこむのでこの方がいいかもしれませんね。
数日で慌てて覚えたのであちこち怪しいですw
<●scriptファイル(yomikomi.js)●>
google.load("feeds", "1");
Googleでブログ読み込みAPIをロードしなさい
function initialize() {
initializeという関数を定義する
var feedurl = "ブログのRSSから広告除去したURL";
変数:feedurlにブログRSSのURLをセット
var feed = new google.feeds.Feed(feedurl);
変数:feedを新規で作成し、feedurlのデータをセットしなさい
feed.setNumEntries(5);
書き込み5回分を読み込む
feed.load(dispfeed);
変数:feedからfispfeedを読み込みなさい?
function dispfeed(result){
関数:dispfeedを変数:resultで定義する?
if (!result.error){
もし変数:resultにエラーがなければ(!=なければ)
var container = document.getElementById("feed");
変数:containerにfeedの中身をID別にセットしなさい
var htmlstr = "";
変数:htmlstrを定義する
for (var i = 0; i < result.feed.entries.length; i++) {
iの初期値を0として、ここから}までの命令を繰り返すこと
ここを通過するたびにiを+だけカウントアップしなさい
iがエントリの最大数以上になったらループを終わって}の先に進みなさい
var entry = result.feed.entries[i];
変数:entryに変数:result.feedの[i番目]の中身をセットしなさい
htmlstr +='<div class="rss_entry">';
変数:htmlstrに<div class="rss_entry">を追加しなさい
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
変数:htmlstrに<div class="rss_title"><h3><a href="'entry.link'">entry.title'</a></h3></div>を追加しなさい
htmlstr +='<div class="rss_main">';
変数:htmlstrに<div class="rss_main">を追加しなさい
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
変数:imgCheckに「src="」で始まり「.jpg"」「.gif"」「.png"」のどれかで終わる、
連続した文字列のうち最初に見つけたものをセットしなさい
if(imgCheck){
もしimgCheckの中身があるなら
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
変数:htmlstrに<div class="rss_img"><img imgCheck[0] width=120></div>を追加しなさい。
なければなにもしません。
htmlstr +='<div class="rss_content">';
変数:htmlstrに<div class="rss_content">を追加しなさい
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
変数:htmlstrに<p>エントリ概要150文字</p>を追加しなさい
var strdate = createDateString(entry.publishedDate);
変数:strdateにentry.publishedDateを関数:createDateStringで加工したデータをセットしなさい
htmlstr += '<p>' + strdate + '</p></div>';
変数:htmlstrに<p>strdate</p>を追加しなさい
htmlstr +='<div class="clear"><hr></div>';
変数:htmlstrに<div class="clear"><hr></div>を追加しなさい
htmlstr +='</div></div>';
変数:htmlstrに</div></div>を追加しなさい
}
ループ折り返し場所なのでforに戻りなさい
container.innerHTML = htmlstr;
containner.innerHTMLにhtmlstrの中身をセットしなさい
}else{
もし変数:resultにエラーがあるなら
alert(result.error.code + ":" + result.error.message);
エラー表示窓でエラーコード:エラーメッセージを表示しなさい
}
};
}
function createDateString(publishedDate){
関数:createDateStringにpublishedDateをセットしなさい
var pdate = new Date(publishedDate);
変数:pdateを作成し、publishedDateの日付をセットしなさい
var pday = pdate.getDate();
変数:pdayを作成し、pdateから抜き出した日をセットしなさい
var pmonth = pdate.getMonth()+1;
変数:pmonthを作成し、pdateから抜き出した月に1を足したものをセットしなさい
(publishedDateの仕様で1年は0月から始まるため)
var pyear = pdate.getYear();
変数:pyearを作成し、pdateから抜き出した年をセットしなさい
if(pyear < 2000){pyear = pyear+1900} ;
もしpyearが2000未満なら、pyearに1900を追加しなさい
2000を超えているならなにもしません
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
変数:strdateに「pyear年pmonth月pday日」をセットしなさい
return strdate;
strdateを再構成しなさい
}
関数:createDateStringを終了します
google.setOnLoadCallback(initialize);
関数:initializeを読み込んで実行しなさい
またCSSを書き換えてみました。
今回はrss_contentの回り込み設定を外して、画像に回り込むようにしてみました。
画像なしの日は文字が画像の部分に回りこむのでこの方がいいかもしれませんね。
2012年09月09日
基本形完成
基本ソースが出来上がったので、
ボックスの色分けをやめてノーマルな感じにしてみました。
こういった見た目の設定変更はCSSファイルをいじるだけですぐにできます。
一応完成した↑の設定のソースをまとめておきます。
<●HTMLファイル●>
<head>と</head>の間に以下の2行。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/yomikomi.js"></script>
<body>と</body>の間で、ブログを表示させたいところに以下の1行。
<div class="feed"></div>
<●scriptファイル(yomikomi.js)●>
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
<●CSSファイル(yomikomi.css)●>
.feed{
border :1px solid #000;
}
.rss_entry{
width :450px;
margin :10px;
}
.rss_title{
width :99%;
background-color :#33f;
padding :2px 0 0 2px;
margin :0 0 5px 0;
}
.rss_title a{
color :#ff0;
font-size :14px;
}
.rss_main{
width :100%;
}
.rss_img{
margin :4px 0 0 0;
float :left;
display :table-cell;
vertical-align :middle;
overflow :visible;
}
.rss_content{
width :310px;
margin :0 0 0 10px;
float :right;
}
JavaScriptの各ソースの働きを次のエントリで残しておきます(自分用)
ボックスの色分けをやめてノーマルな感じにしてみました。
こういった見た目の設定変更はCSSファイルをいじるだけですぐにできます。
一応完成した↑の設定のソースをまとめておきます。
<●HTMLファイル●>
<head>と</head>の間に以下の2行。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/yomikomi.js"></script>
<body>と</body>の間で、ブログを表示させたいところに以下の1行。
<div class="feed"></div>
<●scriptファイル(yomikomi.js)●>
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
<●CSSファイル(yomikomi.css)●>
.feed{
border :1px solid #000;
}
.rss_entry{
width :450px;
margin :10px;
}
.rss_title{
width :99%;
background-color :#33f;
padding :2px 0 0 2px;
margin :0 0 5px 0;
}
.rss_title a{
color :#ff0;
font-size :14px;
}
.rss_main{
width :100%;
}
.rss_img{
margin :4px 0 0 0;
float :left;
display :table-cell;
vertical-align :middle;
overflow :visible;
}
.rss_content{
width :310px;
margin :0 0 0 10px;
float :right;
}
JavaScriptの各ソースの働きを次のエントリで残しておきます(自分用)
2012年09月08日
CSSで整形する(JavaScriptに組み込み)
昨日の続きです。
現在完成しているソースに昨日のHTMLを組み込んでいきます。
まずはHTMLで書かれている部分を抽出してみましょう。
htmlstrで始まる行がHTMLソースをあらわしています。
<JavaScriptソース抜粋>
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr +='<p>' + strdate + '</p>';
}
意外にHTML部分は少ないのが判ります。
抜き出してみましょう。
<h3><a href="entry.linkの中身">entry.titleの中身</a></h3>
<img src="http:抜き出した画像のURL" width=120>
<p>entry.contentSnippet.substring(0,150)</p>
<p>strdate</p>
ここに昨日のソースを追加します。
<div class="rss_entry">
<div class="rss_title"><h3><a href="entry.linkの中身">entry.titleの中身</a></h3></div>
<div class="rss_main">
<div class="rss_img"><img src="http:抜き出した画像のURL" width=120></div>
<div class="rss_content"><p>entry.contentSnippet.substring(0,150)</p>
<p>strdate</p></div>
<div class="clear"><hr></div>
</div> <!-- rss_main -->
</div> <!-- rss_entry -->
CSSでホームページを作っておられる方なら難しくはないですね^^
これを元のソースに戻します。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
画像があってもなくても同じように表示されるようになりました。
現在完成しているソースに昨日のHTMLを組み込んでいきます。
まずはHTMLで書かれている部分を抽出してみましょう。
htmlstrで始まる行がHTMLソースをあらわしています。
<JavaScriptソース抜粋>
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr +='<p>' + strdate + '</p>';
}
意外にHTML部分は少ないのが判ります。
抜き出してみましょう。
<h3><a href="entry.linkの中身">entry.titleの中身</a></h3>
<img src="http:抜き出した画像のURL" width=120>
<p>entry.contentSnippet.substring(0,150)</p>
<p>strdate</p>
ここに昨日のソースを追加します。
<div class="rss_entry">
<div class="rss_title"><h3><a href="entry.linkの中身">entry.titleの中身</a></h3></div>
<div class="rss_main">
<div class="rss_img"><img src="http:抜き出した画像のURL" width=120></div>
<div class="rss_content"><p>entry.contentSnippet.substring(0,150)</p>
<p>strdate</p></div>
<div class="clear"><hr></div>
</div> <!-- rss_main -->
</div> <!-- rss_entry -->
CSSでホームページを作っておられる方なら難しくはないですね^^
これを元のソースに戻します。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
画像があってもなくても同じように表示されるようになりました。
2012年09月07日
CSSで整形する(準備段階)
ここまでで一通り形になってきたので、CSSを取り込んでみようと思います。
設定状態が目で確認しやすいように
各エントリを下記画像のように色分けしながらレイアウトしていくことにします。
黄色部分に記事タイトル(rss_title)、下の2つを入れるボックス(rss_main)を作り、
水色部分に画像(rss_img)、白色部分(rss_content)に本文抜粋と日付が入ります。
記事1つごとに黒いボックス(rss_entry)として表示されるイメージです。
まずはJavaScriptなしでソースだけ作っていきます。
<HTML用ソース作成>
とりあえず、まだどこにも入れません。
<div class="rss_entry"> ←黒い箱を作る
<div class="rss_title"></div> ←黄色い箱
<div class="rss_main"> ←水色と白色の箱の入れ物(赤色)を作る
<div class="rss_img"></div> ←水色の箱
<div class="rss_content"></div> ←白色の箱
<div class="clear"><hr></div> ←回り込み解除
</div> <!-- rss_main --> ←水色と白色の箱の入れ物を閉じる
</div> <!-- rss_entry --> ←黒い箱を閉じる
<CSSファイル作成>
yomikomi.css というテキストファイルを作成します。
.feed{
width :470px;
border :1px solid #000;
}
.rss_entry{
width :450px;
background-color :#000;
margin :10px;
padding :5px;
}
.rss_title{
width :100%;
background-color :#0ff;
}
.rss_main{
width :100%;
background-color :#f00;
margin :5px 0 0 0;
}
.rss_img{
width :130px;
height :130px;
background-color :#55f;
float :left;
overflow :visible;
}
.rss_content{
width :300px;
background-color :#fff;
margin :0 0 0 10px;
float :right;
}
これを保存してHTMLファイルと同じフォルダに入れます。
CSSには最低限要りそうなものを入れてみました。
足りないものは作りながら追加していきましょう。
これでブログ表示にCSSを組み込む準備ができました。
今日はソースを変更してないのでソース表示はありません。
設定状態が目で確認しやすいように
各エントリを下記画像のように色分けしながらレイアウトしていくことにします。
黄色部分に記事タイトル(rss_title)、下の2つを入れるボックス(rss_main)を作り、
水色部分に画像(rss_img)、白色部分(rss_content)に本文抜粋と日付が入ります。
記事1つごとに黒いボックス(rss_entry)として表示されるイメージです。
まずはJavaScriptなしでソースだけ作っていきます。
<HTML用ソース作成>
とりあえず、まだどこにも入れません。
<div class="rss_entry"> ←黒い箱を作る
<div class="rss_title"></div> ←黄色い箱
<div class="rss_main"> ←水色と白色の箱の入れ物(赤色)を作る
<div class="rss_img"></div> ←水色の箱
<div class="rss_content"></div> ←白色の箱
<div class="clear"><hr></div> ←回り込み解除
</div> <!-- rss_main --> ←水色と白色の箱の入れ物を閉じる
</div> <!-- rss_entry --> ←黒い箱を閉じる
<CSSファイル作成>
yomikomi.css というテキストファイルを作成します。
.feed{
width :470px;
border :1px solid #000;
}
.rss_entry{
width :450px;
background-color :#000;
margin :10px;
padding :5px;
}
.rss_title{
width :100%;
background-color :#0ff;
}
.rss_main{
width :100%;
background-color :#f00;
margin :5px 0 0 0;
}
.rss_img{
width :130px;
height :130px;
background-color :#55f;
float :left;
overflow :visible;
}
.rss_content{
width :300px;
background-color :#fff;
margin :0 0 0 10px;
float :right;
}
これを保存してHTMLファイルと同じフォルダに入れます。
CSSには最低限要りそうなものを入れてみました。
足りないものは作りながら追加していきましょう。
これでブログ表示にCSSを組み込む準備ができました。
今日はソースを変更してないのでソース表示はありません。
2012年09月06日
記事内の画像を読み込む
ブログの表示がだんだんそれらしくなってきました。
今日はここにブログ内の画像をサムネイルで表示してみたいと思います。
今回はshiromaru しろまるさんの
Google AJAX Feed APIでブログの概要と画像を表示
を参考にさせていただいています。
ここでは他にブログ概略で表示する文字数を変更する方法も紹介されてますね^^
ずっと見てると日毎にコードが増えていますw
yomikomi.js を開きます。
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
という部分の後ろに以下のソースを追加します。
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
今回は画像の幅を120pxに指定しています。サイズはお好みで調整してください。
また探す画像の種類がオリジナルではJPEGのみになっていたのを
JPEG、GIF、PNGのどれかを探すように書き換えてあります。
上書き保存したらサーバーにアップしてみましょう。
これで画像が表示されるようになりました。
ちなみにeしずおかブログのRSS2.0のデータには画像が入っていないようです。
RSS1.0のデータ(index.rdf)を指定してやると画像が出ます。
Amebaブログの方は最初は画像が出てたんですが、なぜかしばらく経つと消えました。
画像サイズは取得できるようなので、入っているのは確かなようなのですが・・・困ったもんです。
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
今日はここにブログ内の画像をサムネイルで表示してみたいと思います。
今回はshiromaru しろまるさんの
Google AJAX Feed APIでブログの概要と画像を表示
を参考にさせていただいています。
ここでは他にブログ概略で表示する文字数を変更する方法も紹介されてますね^^
ずっと見てると日毎にコードが増えていますw
yomikomi.js を開きます。
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
という部分の後ろに以下のソースを追加します。
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
今回は画像の幅を120pxに指定しています。サイズはお好みで調整してください。
また探す画像の種類がオリジナルではJPEGのみになっていたのを
JPEG、GIF、PNGのどれかを探すように書き換えてあります。
上書き保存したらサーバーにアップしてみましょう。
これで画像が表示されるようになりました。
ちなみにeしずおかブログのRSS2.0のデータには画像が入っていないようです。
RSS1.0のデータ(index.rdf)を指定してやると画像が出ます。
Amebaブログの方は最初は画像が出てたんですが、なぜかしばらく経つと消えました。
画像サイズは取得できるようなので、入っているのは確かなようなのですが・・・困ったもんです。
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<img ' + imgCheck[0] + ' width=120>';
}
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);
2012年09月05日
西暦112年?!
昨日の日付の書式設定をした方の中には
表示日付がおかしくなってしまった方がいるはずです。
実は昨日のソースをInternetExplorerで見ると2012年なのですが、
それ以外のブラウザで表示すると112年と表示されてしまいます。
これはブラウザによって日付データの扱いが違うために起こるバグのようなものです。
ブラウザ作成のルールとしては112年と表示されるのが正しいのですが、
InternetExplorerだけが独自ルールでブラウザを作ったために起こっています。
これを直すために年に1900を足すようにすると、
今度はInternetExplorerで見たときに3912年になってしまいます。
それも困りますね。
ということで、年の数値が2000より少ない時にだけ
1900追加する設定にしてしまいましょう。
今回はIT勉強するコタツネコさんのサイトを参考にさせていただきました。
リンク先では、年の修正以外にも曜日を漢字で出す方法も解説されてます。
方法は簡単。
yomikomi.js を開いて、年月日の設定をしている前の部分に
if(pyear < 2000){pyear = pyear+1900} ;
を書き足すだけです。
これでどのブラウザで見ても2012年の表示になりました。
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL ";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
if(strdate){
htmlstr += '<p>' + strdate + '</p>';
}else{
htmlstr += '<p>' + entry.publishedDate + '</p>';
}
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
表示日付がおかしくなってしまった方がいるはずです。
実は昨日のソースをInternetExplorerで見ると2012年なのですが、
それ以外のブラウザで表示すると112年と表示されてしまいます。
これはブラウザによって日付データの扱いが違うために起こるバグのようなものです。
ブラウザ作成のルールとしては112年と表示されるのが正しいのですが、
InternetExplorerだけが独自ルールでブラウザを作ったために起こっています。
これを直すために年に1900を足すようにすると、
今度はInternetExplorerで見たときに3912年になってしまいます。
それも困りますね。
ということで、年の数値が2000より少ない時にだけ
1900追加する設定にしてしまいましょう。
今回はIT勉強するコタツネコさんのサイトを参考にさせていただきました。
リンク先では、年の修正以外にも曜日を漢字で出す方法も解説されてます。
方法は簡単。
yomikomi.js を開いて、年月日の設定をしている前の部分に
if(pyear < 2000){pyear = pyear+1900} ;
を書き足すだけです。
これでどのブラウザで見ても2012年の表示になりました。
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL ";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
if(strdate){
htmlstr += '<p>' + strdate + '</p>';
}else{
htmlstr += '<p>' + entry.publishedDate + '</p>';
}
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
2012年09月04日
日付の表示書式を変える
さて、今日は日付の表示方法を変更したいと思います。
今の初期状態では Wed,29 Aug 2012 23:35:40 -0700のような書式で
日時が表示されています。
確かに間違いではないのですが、日本語ではないので見づらいですし
素のブログと違って投稿時刻や標準時との時差表示は必要なさそうです。
これをシンプルに見やすくしてしまいましょう。
今回はれんこんと大根さんの
Google AJAX Feed API を使ってブログの抜粋と画像を読み込んでみた
の一番下の部分を参考にさせていただいています。
yomikomi.js を開きます。
htmlstr += '<p>日付 :' + entry.publishedDate + '</p>'; という行を探してください。
↓
//htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
先頭に//を付けてコメントアウト(読み飛ばし)します。
その後ろに以下のソースを追加してください。
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
if(strdate){
htmlstr += '<p>' + strdate + '</p>';
}else{
htmlstr += '<p>' + entry.publishedDate + '</p>';
}
上書き保存したらサーバーにアップしてみましょう。
2012年8月30日 のような表示に変わっているはずです^^
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL ";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
//htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;}
htmlstr += '<p>' + strdate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
今の初期状態では Wed,29 Aug 2012 23:35:40 -0700のような書式で
日時が表示されています。
確かに間違いではないのですが、日本語ではないので見づらいですし
素のブログと違って投稿時刻や標準時との時差表示は必要なさそうです。
これをシンプルに見やすくしてしまいましょう。
今回はれんこんと大根さんの
Google AJAX Feed API を使ってブログの抜粋と画像を読み込んでみた
の一番下の部分を参考にさせていただいています。
yomikomi.js を開きます。
htmlstr += '<p>日付 :' + entry.publishedDate + '</p>'; という行を探してください。
↓
//htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
先頭に//を付けてコメントアウト(読み飛ばし)します。
その後ろに以下のソースを追加してください。
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
if(strdate){
htmlstr += '<p>' + strdate + '</p>';
}else{
htmlstr += '<p>' + entry.publishedDate + '</p>';
}
上書き保存したらサーバーにアップしてみましょう。
2012年8月30日 のような表示に変わっているはずです^^
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL ";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
//htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
var strdate = createDateString(entry.publishedDate);
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;}
htmlstr += '<p>' + strdate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
2012年09月03日
RSSのデータから広告を削る
昨日の方法でamebaなどのブログをホームページに取り込むと
記事に混じって広告が書き出されてくることがあります。
これを削除してくれるありがたいサービスが RSS広告削除社 さんです。
「除去するフィールドのURL」という欄にRSSのURLを入れて「GO」をクリックします。
その後表示されるURLを昨日のソースで設定すれば
ホームページで読み出されるブログから広告が消えます。
↓上記のような広告が消えてすっきりします
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "http://ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);
記事に混じって広告が書き出されてくることがあります。
これを削除してくれるありがたいサービスが RSS広告削除社 さんです。
「除去するフィールドのURL」という欄にRSSのURLを入れて「GO」をクリックします。
その後表示されるURLを昨日のソースで設定すれば
ホームページで読み出されるブログから広告が消えます。
↓上記のような広告が消えてすっきりします
現在の yomikomi.js のソースはこのようになります。
google.load("feeds", "1");
function initialize() {
var feedurl = "http://ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
htmlstr += '<p>' + entry.contentSnippet + '</p>';
htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}
google.setOnLoadCallback(initialize);