Jimdo小ネタ 公式 RSS モジュールの代替品
Jimdoの公式 RSS Feed モジュールの日付形式が記事によってばらつく(バグかな?もとのRSS では統一的な表記になっているのに,Jimdoのモジュールで一覧表記させると1つ目だけ,サイトの日付表示形式で表示される)のが気になって,作ってみました。スタイルをインラインで書き込んであったり,エラー処理が不十分だったり,3件未満の記事しかない場合の処理が明示的でなかったりといろいろ不備がありますが,休みの日にはじめてさわった言語で,実質作業時間5時間くらいですので,そこらあたりはご勘弁を。
以下,感想。
1つ目。オブジェクト指向・手続きの表記と関数式の混在,気持ち悪い。特に,obj.method()とか。methodの引数がobjなので()いらないじゃんと思うのですが,構文解析上,必要なんですかね。obj 以外の引数が存在する場合としない場合とで,見た目が偉く違うのに違和感。
2つめ。型の助けを借りずにプログラミングするのめっちゃ大変。フロントエンド周りの場合,環境を整えて動かしてみて,コンソールに出力するデバッグ方法を借りないと,どこでどんなエラーが出ているかがわからないことがしばしば。静的型で事前にエラーをはじき出せることがどんなに楽かを改めて感じます。Pascal や Haskell はその点,めちゃめちゃ楽でした。
<!-- RSS feed module . copyright(C) 2024 by K.Uono -->
<div class="rssFeed ">
<h2><a href="https://www.xxxx.com/blog">日誌</a></h2>
<div id="rssFeed" style="line-height: 1.5; font-size: 22px;"></div>
</div>
<div></div>
<script>
/* <![CDATA[ */
let rssUrl = "https://www.xxxx.com/rss"; let target = document.getElementById ("rssFeed"); let parser = new DOMParser();
let formatDate = function formatDate(dateString) {
const date = new Date(dateString);
if (isNaN(date)) {
throw new Error ('Invalid date format');
} else {
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
return (`${year}.${month}.${day} ${hours}:${minutes}`);
}
};
result = fetch(rssUrl)
.then (res => { if (res.ok) {
return res.text(); } else {
throw new Error ('指定のリソースが無効です'); }})
// .then (txt => {console.log("blog.rss\n" + txt) ; return txt ;})
// .then (doc => {let dom = parser.parseFromString(doc,'text/xml'); return dom;})
.then (doc => parser.parseFromString(doc,'text/xml'))
.then (dom => {
let titles = dom.getElementsByTagName('title');
let dates = dom.getElementsByTagName('pubDate');
let links = dom.getElementsByTagName('link');
//
for (let i = 0; i < 3; i++) {
let title = titles[i+1].textContent;
let date = formatDate(dates[i+1].childNodes[0].nodeValue);
let link = links[i+1].childNodes[0].textContent;
let item =
`</p>
<p>
</p>
<hr>
<p>
</p>
<p><span class="rssFedTitle" style="font-size:22!important;font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight: 400;margin: 0;color: #112631;"><a href="${link}" target="_blank">${title}<\/a><\/span>
<br /><span style="font-size:12pt!important;line-height:2.0;"> (${date})</span>
</p>
<p>
</p>
<p>
<a href="${link}" style="font-size:19pt!important;background-color: #ee8a0c;border-color: #ee8a0c;border-style: solid;color: #fff;margin: 20px 0;padding: 10px 20px;text-align: center;">> 続きを読む<\/a>
<br />`
target.insertAdjacentHTML('beforeend',item);
}
return dom;}
)
.catch (e => console.log(`Error:${e.message}`));
/*]]>*/
</script>