0 Comments
前回の「GoogleFeed API 代替を導入してみた結果(2)」の記事では設置方法について掲載しましたが、今回は、最新版(Ver1.0.2)がでていましたので折角だからこれをお借りして、チョコチョコと改良してみました。

■【改良の要点】
∮タイトル表示と年月表示のみであったが、記事の要点を120文字まで表示できるようにしました。あと、見えないところをチョコチョコとさわりました。

∮改良前のサンプル画像(Ver1.0.2)
p1-RSS改良前


∮改良後のサンプル画像(Ver1.0.2)
p2-RSS取得画面



■最新版をダウンロード
1.まずは、下記サイトからダウンロードして、適当なホルダーに保存して下さい。
∮LICENSEなどがありますので、一読しておいて下さい。
∮Ricky Miller(richardkazuomiller)ダウンロード 
ダウンロード、ZIPの展開、設置は前回の記事を参照願います。
前回説明した記事と同じですが、中身が「Ver1.0.2」と「Ver1.0.1」が含まれています。
最新Ver1.0.2
https://github.com/richardkazuomiller/feednami-client


∮展開したその中の「examples(index.html)」「css(style.css)」「js(examples.js)」と「releases(1.0.2.min.js)」のフォルダーに入っているプログラムを使います。「index.html」の記述の中身は最新版になっています。
p3-使用した中身





■チョコチョコと改良
1.html
∮<head>~</head>部分はご自分用に書き換えてください。
∮「examples(index.html)」は<boddy>のなかにある「id」と「class」を自分のサイトにあわせて入れ替えてください。
p4-タグhtml


∮参考に筆者の「html」を掲載しておきます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FeednamiClientExamples_RSS_test</title>

<script src="releases/1.0.2.min.js"></script>
<script src="js/examples.js"></script>
<link href="css/style.css" rel="stylesheet">

</head>
<body>
<div class="feeds">
<div class="feed blog@123">

<div id="Taiwan">
<div class="header">【FeednamiClientExamples_RSS_試験中-2017/02/28】</div>
<div class="loading">Loading...</div></div>
</div>

</div>
</body>
</html>





2.CSS
∮「a」タグの下線を非表示にしました。
∮タイトルの折り返し、はめ込み場所に応じて幅を設定 (width:XXXpx)
∮記事の折り返し、はめ込み場所に応じて幅を設定 (width:XXXpx)
基本的には120文字までの表示が可能ですが、設置する位置の幅が狭いと、下方に広がった表示になるため、(width:XXXpx)で適当な位置で文字数を止めています。
止めた位置から後ろの空白部分には「・・・」が表示されます。(タイトルも同じ機能です)
∮オーディオ設定 今のところ使用予定がないので、コメントアウトにしています。



∮参考に筆者の「CSS」を掲載しておきます。



body{background-color:#eee;font-family:'Poppins', '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';margin:0}

a{text-decoration:none;color:#aae;font-size:1.1em;}

/*下線非表示に設定*/
a:hover {text-decoration: underline;}

.feed-group-header{font-size:2em;margin:20px;color:#888}
.feeds1{margin:0px;display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;flex-wrap:wrap}
@media only screen and (max-width:729px){.feeds{justify-content:center;display:block}}
.feeds .feed{width:100%;margin:8px;background-color:#fff;padding:0px;box-shadow:0 1px 5px rgba(0,0,0,0.3)}
.feeds .feed.blog{min-height:360px}
.feeds .feed.podcast{min-height:365px}
@media only screen and (max-width:729px){.feeds .feed{width:auto}}
@media only screen and (max-width:339px){.feeds .feed{margin-left:0;margin-right:0}}
.feeds .feed .loading{text-align:center;font-size:20px;margin:10px}
.feeds .feed .header{font-size:1.0em;padding:10px;border-bottom:1px solid #eee}
.feeds .feed .entry{padding:5px;border-bottom:1px solid #eee}

/*タイトル折り返し、はめ込み場所に応じて設定 width:XXXpx; */
.feeds .feed .entry .title{width:600px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}

.feeds .feed .entry .date{margin-top:5px;margin-bottom:5px;font-size:.80em;line-height:1.0em}
.feeds .feed .entry p{margin:0;font-size:.95em;}

/*記事折り返し、はめ込み場所に応じて設定 width:XXXpx;
.feeds .feed .entry p{margin:0;font-size:.95em;width:800px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}*/

/*オーディオ設定 今のところ使用しないのでコメントアウト
.feeds .feed .entry .audio-container{text-align:center;padding:5px}
.feeds .feed .entry .audio-container audio{max-width:100%}*/



3.Java スクリプト
「js(examples.js)」をテキストエディターなどで開けます。
∮「feednami.load」 を「.loadGoogleFormat」 に変更することで120文字までの記事が表示されます。 // 著作者サイトのオプション説明を参考にした。

∮アメブロ等のテキスト広告を非表示にする・・・効果のほどは?不明です。
// 参考サイト:http://it-force.seesaa.net/article/215575350.html

∮記事スタイル表示は著作者サイトのオプション説明「Result Object」の下段にある記述を参考にしました。
説明(英文)にリンク:https://github.com/richardkazuomiller/feednami-client



∮参考に筆者の「js(examples.js)」を掲載しておきます。



function formatDate(date){
var year = date.getYear()
if(year < 1900){
year += 1900
}
var month = date.getMonth()+1
var day = date.getDate()
var hour = date.getHours()
var minutes = date.getMinutes()
if(minutes < 10){
minutes = '0' + minutes
}
return year + '/' + month + '/' + day + ' ' + hour + ':' +minutes
}

function loadEntries(url,id){
var blogDiv = document.getElementById(id)

// feednami.load を.loadGoogleFormat に変更することで120文字までの記事が表示される。
// 著作者サイトのオプション説明を参考にした。
// feednami.load(url,function(res){
feednami.loadGoogleFormat(url,function(res){

blogDiv.removeChild(blogDiv.querySelector('.loading'))
var entries = res.feed.entries
var added = 0;
for(var i = 0; i < entries.length && added < 3; i++){ /*rss配信数設定:現在3件 */
var entry = entries[i]

// アメブロ等のテキスト広告の非表示・・・効果のほどは?不明
// 参考サイト:http://it-force.seesaa.net/article/215575350.html
// if(entry.title.indexOf('PR:') == -1){
if(entry.title.match('/.*PR:.*/mi') == null){

added++
var div = document.createElement('div')
div.setAttribute('class','entry')

/*** 記事スタイル表示テスト ここから ***/
// 著作者サイトのオプション説明「Result Object」の下段にある記述を参考にしました
// https://github.com/richardkazuomiller/feednami-client
div.innerHTML =

// 記事表示エリア 羅列すると見にくいので、タイトルの頭に文字記号❖四葉をいれています。(筆者の趣味の領域)
'<p class="title">❖ <a href="'+entry.link+'" target="_blank">'+entry.title+'</a></p>'

// 本文の頭の120文字設定 記事要約が不要の場合は下記をコメントアウト(現在表示させています)
// 要約をCSSで120文字以内に設定すると・・・が自動で添付されます
// + '<p class="content">'+entry.contentSnippet+'</p>'
+ '<p class="content">'+entry.contentSnippet+'</p>'

+'<p class="date">'
 
// 取得RSSにより日付に(NaN/NaN/NaN NaN:NaN)が表示される(entry.pubdate_ms)⇒(entry.publishedDate)に変更して正常表示
// 120文字以内のタイトルをCSSで設定すると・・・が自動で添付されます
// + formatDate(new Date(entry.pubdate_ms))
+ formatDate(new Date(entry.publishedDate))
+'</p>'
/*** 記事内容表示テスト中 ここまで ***/

blogDiv.appendChild(div)
}
}
})
}

window.onload = function(){
loadEntries('http://foyukan.blog.fc2.com/?xml','Taiwan')
}




■最後にできあがりです。
当サイトのホームページの試験フォルダーでBlogのrssを表示させています。
【こちらからサンプルをご覧になれます。】


以上簡単に備忘録をかねて掲載しました。

<お願いしま~す>
私のHPではスクリプトコードを多数使用して設置していますが、まったくの素人(初心者)の設置ですので質問等はご遠慮下さい。 設置に当たっては自己責任で行ってください。
只今勉強中のため、上記のコードを使用して、こうなったよ~などは大歓迎です。
自己学習の励みになりますのでよろしくお願いします。




勉強をかねて「YahooYQLAPI」にも挑戦してみたいと思います。

最後までご覧いただき、ありがとうございます。
それでは次回をお楽しみに・・・

下にある拍手ボタンをプチと押していただければ筆者は幸せになれます。


関連記事
スポンサーサイト
台灣多桑
Posted by台灣多桑

Comments 0

There are no comments yet.

Leave a reply