当ブログは、Mac用のホーページビルダーRapidWeaver７で作成しています。 ホームページには、既にRSS表示用ブログパーツの「FeedWind」を使わせて頂いて「記事一覧」を配置しています。 一方、ブログページには、未だ「記事リスト」を配置していませんでしたので、YahooのYQL API と jQueryを使った「最新記事リスト」をブログページにも配置してみようと試みました。 ネット情報を参考にしてRapidWeaver７で作成するブログページに、どの様に「最新記事」リストを配置したかをRapidWeaverの取扱い方を含めブログします。 なお、RapidWeaverのテーマは「Voyager」を使っています。
「最新記事」リストの配置 完成画面
以下の様に、「最新記事」リストとして、ブログの最下段（フッター部分）に配置しました。
RSSフィード（xml）について
RapidWeaver７は、ブログ記事作成毎に、RSSフィード（xml）が自動的に更新されて行きます。 ファイルの場所は、ブログfilesフォルダーの中にある、feed.xmlです。 このfeed.xmlのデータは、タイトル、更新日、画像ファイル、サマリーのテキストデータが収められています。 これは、以下のRapidWeaver７のブログ作成時のSummsryの入力データと同じものです。
要は、feed.xmlのデータは、タイトル、更新日、画像ファイル、サマリーのテキストデータを夫々要素毎に取り出せば良いのですが、一番手っ取り早く、要素データを取り出す方法として、ネット情報によりますと、YahooのYQL API で、一旦feed.xmlをJSON形式にコールバックさせて、JSON形式のフォーマットを取得するQueryの＄getJSON（）を使えば、feed.xmlのデータ要素を取得することができるというものです。 ココらへんの詳しい説明は、「a href="https://blog2.k05.biz/2017/01/rss-javascript.html" rel="external noopener" target="_blank" sl-processed="1">【YQL API利用】JavascriptでRSSを読み込んで表示する方法」をご参照ください。 尚、JSONについては、ウィキペディアを参照してください。
RapidWeaver７への実装
1. jQueryを使用するための準備
|
1 2 3 |
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> |
jQueryが使用出来るように、上のコードをRapidWeaverの全体に掛かるように 「Code」 をクリックして、下の様にHead タブにペーストしておきます。
２. JavaScriptの配置
基本は、「YQL API と jQuery による RSS 表示：各ブログ対応版」を参考にさせて頂きました。 javaScriptは殆ど変えていませんが、当ブログに合うように一部修正しました。
変更点としては、
- New！を赤字にして表示させ、更新日を５日→７日に変更
- サムネイルのサイズや位置など調整
- リンクを開く時、ブラウザが同じタブで開くように target="_self " に変更
- リスト行間の調整
|
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 |
$(function() { $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", { // rss(取得件数)：但し1件の場合は for と json.query.results.item[i] の [i] を消す q: "select * from rss(5) where url in (`http://********/blog/files/feed.xml`)", format: "json" }, function (json) { for(var i in json.query.results.item){ var entry = json.query.results.item[i]; var link = entry.link; var title = entry.title; if(entry.pubDate) { var date = new Date(entry.pubDate); } else { var date = new Date(entry.date); } var yyyy = date.getFullYear(); var mm = (`0` + (date.getMonth() + 1)).slice(-2); var dd = (`0` + date.getDate()).slice(-2); var dispDate = yyyy + `/` + mm + `/` + dd; // newDate：NEW 扱いにする日数 var newDate = 7; var dateNow = new Date(); var checkDate =(dateNow - date) / (1000 * 24 * 3600); var dispNew = ``; if(checkDate <= newDate) { dispNew = `<strong><font color="red">NEW!!</font></strong>`; } // ameba の絵文字除外、Yahoo! の画像 URL への対応など var reg = `src="((?!https://stat100.ameba).)(.*?)(.jpg|.jpeg|.gif|.png|/img_)(.*?)"`; if(entry.encoded) { var imgsrc = entry.encoded.match(reg); } else { var imgsrc = entry.description.match(reg); } var dispImg = ``; if(imgsrc) { var dispImg = `<img ` + imgsrc + ` alt="" width="60" height="50" style="float:left;margin:0px 15px 0px -35px;">`; } var dispElm = `<li Style="margin-bottom: 0em; list-style: none; padding: 0px;"> <a href="` + link + `" target="_self">` + dispImg + title + `</a><br>（` + dispDate + `）` + dispNew + `</li><br clear="left">`; $("#feed ul").append(dispElm); } }); }); |
以上のコードを、Page InspectorのJavaScriptタブにペーストします。
３．HTMLコードをフッターへ配置
|
1 2 3 4 5 6 |
<div class="panel" style="text-align: left;background-color:#f0f8ff;"> <h3><b>最新記事（Title）</b></h3><br> <div id="feed"> <ul></ul></div> </div> |
以上のコードを下図のPage InspectorのGeneral Settings画面のFooterにペーストします。
尚、class指定の「panel」は、Page InspectorのCSSタブに以下のコードを配置しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.panel { display: block; padding: 10.5px; margin: 0 0 11px; font-size: 15px; line-height: 1.42857143; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 4px; } |
以上で、RapidWeaver７で作成したブログページのフッターに「最新記事」リストが配置されました。
（追記）2018/8/21
「最新記事」リストの配置を、フッターから個別ページ（body）下段に変更しました。
（注記）2018/8/27
ブログを更新して、サイトにUPした時に、更新ブログが「最新記事」リストに直ぐに反映されない場合があります。 この原因は、YQL APIの標準時の違いで、YQLから見て、更新ブログの時刻が、将来時刻であるとリジェクトされ、例えば、YQLの標準時と更新ブログの時刻の差が９時間ですと、９時間後に更新ブログが「最新記事」リストに反映される様です。