No.21

てがろぐログイン限定表示記事スクリプト


てがろぐβ版の4.5.x系で追加されたログインAPIを使用したテストコードを作りました。
#ログイン限定 とタグ付けした記事を限定表示にできます。
javascript+CSSでの制御なので、javascriptが動かない環境ではソースを見れば読めてしまいます。あくまで簡易的に隠すだけのものです。

以下説明

1.
使用するスキン内のcssに

div.comment {
    visibility: hidden;
}
div.comment.loaded {
    visibility: visible;
}

を追加。

2.
以下のコードを使用スキンのskin-coverに直接記述するか
コピペして「hidearticle.js」を作成し、
skin-cover内:<script src="hidearticle.js"><script>
を</body>タグの直前に追加。
//API取得 コードが動かない場合はまずここを
//const baseUrl ='http(s)://サイトURL/?mode=api&item=ISLOGGEDIN';
//に変更してください。
const baseUrl = window.location.origin + '/?mode=api&item=ISLOGGEDIN';

//エラー表示用 ↑を変更しても動かない場合はコンソールログで内容をご確認ください。
function handleError(error) {
console.error('エラー詳細:', {
名前: error.name,
メッセージ: error.message,
スタックトレース: error.stack
});
}

async function checkAndHideArticle() {
const articles = document.querySelectorAll('div.comment');
articles.forEach(article => {
article.style.opacity = '0';
});

try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

const response = await fetch(baseUrl, {
signal: controller.signal,
method: 'GET',
credentials: 'include',
headers: {
'Accept': 'text/plain',
}
});

clearTimeout(timeoutId);

if (!response.ok) {
throw new Error(`HTTPエラー: ${response.status}`);
}

const trimmedTextData = (await response.text()).trim();

articles.forEach(article => {
const tagLink = article.querySelector('a.taglink');

//適用タグや文言はお好みのものに変更してください
if (trimmedTextData === 'NO') {
if (tagLink && tagLink.textContent.includes('#ログイン限定')) {
const loginNoticeSpan = document.createElement('span');
loginNoticeSpan.innerHTML = 'ログイン限定記事 <br>ログインして記事を読む';

article.style.display = 'none';
article.innerHTML = '';
article.parentNode.insertBefore(loginNoticeSpan, article);
} else {
article.style.opacity = '1';
}
} else if (trimmedTextData === 'YES') {
if (tagLink && tagLink.textContent.includes('#ログイン限定')) {
const loginSpan = document.createElement('span');
loginSpan.innerHTML = 'ログイン限定表示中';
article.appendChild(loginSpan);
}
article.style.opacity = '1';
}
});
} catch (error) {
handleError(error);
articles.forEach(article => {
article.style.opacity = '1';
});
}
}

document.addEventListener('DOMContentLoaded', checkAndHideArticle);
畳む

配布 No.21 編集 単記事