No.23, No.22, No.21, No.20, No.［4件］
てがろぐログインAPIを利用したテストスクリプトについて、あまり実用的ではないのでPHP版も作ろうかと思ったのですが、もしかすると本家がログイン・ユーザー限定記事機能を作るかもしれないので様子見をすることにします。
バックエンドで処理するプラグインにすると、サーバーに負担が少なからずかかってしまうためです。サーバに置くファイルが増えてしまうのもあります。
バックエンドで処理するプラグインにすると、サーバーに負担が少なからずかかってしまうためです。サーバに置くファイルが増えてしまうのもあります。
てがろぐログイン限定表示記事スクリプト
てがろぐβ版の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);
ログイン限定表示テスト
スクリプト配布ページがデフォルトのタグによって見えなくなってしまわないよう、このサイトでは#限定表示 タグを使用しています。
また、このスクリプトはスキンに依存するため、他のスキンでは丸見えになっています。
スクリプト配布ページがデフォルトのタグによって見えなくなってしまわないよう、このサイトでは#限定表示 タグを使用しています。
また、このスクリプトはスキンに依存するため、他のスキンでは丸見えになっています。
また他の方がこのスクリプトを改変しようとしてくださっているようなので、そちらの機能にも期待したいところです。
別件でまたやや忙しくあり、既知の不具合の修正はしばらく先になりそうです。
メモ：既知の不具合
WEBP変換オプション時、加工が反映されない・コピペ時２枚目以降が正しく投稿されない