No.22, No.21, No.20, No.19, No.18, No.17, No.167件]

てがろぐログインAPIを利用したテストスクリプトについて、あまり実用的ではないのでPHP版も作ろうかと思ったのですが、もしかすると本家がログイン・ユーザー限定記事機能を作るかもしれないので様子見をすることにします。
バックエンドで処理するプラグインにすると、サーバーに負担が少なからずかかってしまうためです。サーバに置くファイルが増えてしまうのもあります。

つぶやき No.22 編集 単記事

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


てがろぐβ版の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 編集 単記事

ログイン限定表示テスト
スクリプト配布ページがデフォルトのタグによって見えなくなってしまわないよう、このサイトでは#限定表示 タグを使用しています。
また、このスクリプトはスキンに依存するため、他のスキンでは丸見えになっています。

デモ表示 No.20 編集 単記事

2025/3/22 WAVEBOXへの返信の旨をこちらで報告するのを忘れていました。
以降返信についてはnoteのつぶやきとこの記事にて報告いたします。

>>2025/3/17 15:00
https://wavebox.me/msg/77kkcwhk8uzskow7/...
スクリプトのご利用ありがとうございます。
こちらでは特に再現できなかったので、詳しい内容(実際の操作手順、使用しているテンプレート名や、可能であればコンソールログの内容など)を報告していただけると助かります。

>>2025/3/16 0:44
https://wavebox.me/msg/77kkcwhk8uzskow7/...
ご使用いただきありがとうございます。
リアクションボタンスクリプトはflexboxを使っているので、
.reaction-buttonsにjustify-content: flex-end;
を指定すると右寄せになると思います。他のCSSによってうまく動かない場合もあるので、ブラウザの開発者ツールで確認しながら適用してみてください。

>>2025/3/7 2:52
https://wavebox.me/msg/77kkcwhk8uzskow7/...
当サイトのスクリプトはWeb上で動くものですので、ローカルに置くだけでは安全だと思います。挙動も自分が試した範囲では特に変な動きはしないので、問題ないかと思います。
ただ、config.phpの絵文字設定では任意の文字列を設定できるため、使用方法によっては脆弱性を起こす可能性があります(javascriptを組み込むなど)。
また、開発の大部分にLLMを使用しているため、人為的な検証もしてはいますが未知の脆弱性の可能性もありますので、気になる場合はご使用をお控えください。

>>2025/2/22 13:14
https://wavebox.me/msg/77kkcwhk8uzskow7/...
導入検討ありがとうございます。

説明がわかりづらくてすみません。

<div reaction-id="[[POSTID]]">
この中にreaction-hogehogeを含むタグがあれば動作
</div>

という形になっているので、該当スキンならばskin-onelog.html内に

<div class="onelogbox [[POSTSTATUS]]" id="pos[[LOOPCOUNT]]" reaction-id="[[POSTID]]">
<div class="comment">
[[COMMENT]]<!-- 本文 -->
</div>
<p class="oneloginfo">
~省略~
</p>
<div class="reaction-buttons"></div>
</div>

のように記述していただければ動くかと思います。

>>2025/2/7 21:36
https://wavebox.me/msg/77kkcwhk8uzskow7/...
こちらこそ使っていただいてありがとうございます。
もし不具合など、お気づきの点や要望がありましたらお気軽にご連絡ください。

>>2025/1/30 23:47
https://wavebox.me/msg/77kkcwhk8uzskow7/...
無事使えたようでよかったです。また問題等ありましたらお気軽にご連絡ください。

以降はhttps://wavebox.me/wave/77kkcwhk8uzskow7...の「さらに見る」からご確認ください。畳む

つぶやき No.19 編集 単記事

てがろぐスキン「Xmodoki2」配布 -10press
当スクリプトを組み込んだスキンを配布されているようです。
ありがとうございます。
リアクションボタン部分の工夫が面白いですね。

つぶやき No.18 編集 単記事

いくつか不具合の問い合わせと2つ以上の投稿フォームを持つスキンが思ったより多いようだったので、とりいそぎ修正できる部分だけ更新しました。
htrkwn様、WitchServer様、修正個所をご教示いただきありがとうございます。

メモ:エリア内の文言を
『エリアをクリック、D&D、Ctrl+Vで画像選択
「投稿する」で画像アップロード
加工はアップロード前に選択してください。』
に変更

つぶやき No.17 編集 単記事

2025/1/30
てがろぐでD&Dまたはコピペで画像投稿するやつV2
を更新。
https://note.com/htrkwn/n/n5c1738429c4d を参考にしました。検証ありがとうございます。

更新履歴 No.16 編集 単記事