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の回り込み設定を外して、画像に回り込むようにしてみました。
画像なしの日は文字が画像の部分に回りこむのでこの方がいいかもしれませんね。
Posted by石上 昌子at15:42
ブログの読み込み