アンパンマンDBと日記
アンパンマンDB(記事更新)
来週の放送情報。
おじさんが…赤ちゃん！？
日記
管理側の機能ですが、JavaScriptを使って日記の情報をTwitter用にコピーする機能があって、それに記載する画像情報をもっといい感じにする修正を行いました。
1日に複数の作業を行った場合、全然違うジャンルの画像が出てきて、それをTwitterに貼り付けるわけですが、ALTに小見出しも自動で付けるようにして、ジャンルをわかりやすくしました。
まあ、そんな今日に限って画像一枚もないんですがね！
(せっかくなので、該当部分のソースコードでも)
function copyArticleInfo(id) {
var article = document.getElementById('diary-' + id);
if (!article) return;
var titleElem = article.querySelector('.diary-title');
var title = titleElem ? titleElem.textContent : '';
// perma-linkクラスのaタグからURL取得
var permaLinkElem = article.querySelector('a.perma-link');
var url = permaLinkElem ? permaLinkElem.href : '';
// 日付取得と「○○日の日記」生成
var timeElem = article.querySelector('time.diary-date');
var diaryLabel = '';
if (timeElem && timeElem.dateTime) {
var date = new Date(timeElem.dateTime);
var month = date.getMonth() + 1;
var day = date.getDate();
diaryLabel = month + '月' + day + '日の日記。';
}
// 直前の見出しを画像titleに前置（details内は除外）
var headingText = '';
var images = [];
Array.from(article.querySelectorAll('h3, img')).forEach(function (el) {
if (el.closest('details')) {
return;
}
if (el.matches('h3')) {
headingText = el.textContent.replace(/\(.*$/, '').trim();
return;
}
if (el.tagName !== 'IMG') {
return;
}
var imgTitle = el.title || '';
images.push({
src: el.src, // 絶対URL
title: headingText ? ('【' + headingText + '】' + imgTitle).trim() : imgTitle
});
});
var data = {
content: url + "\n" + diaryLabel + title,
images: images
};
var json = JSON.stringify(data, null, 2);
navigator.clipboard.writeText(json);
}結構地道にforEachで回してます。
クエリセレクタでやろうとすると思ったよりややこしいパズルになってしまったんで。