てきとー実験場

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

//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);

<link rel="stylesheet" href="reaction.css">

<script src="reaction/config.php?format=js"></script>
<script src="reactions.js"></script>

reaction-id="任意のID"

<div class="reaction-counts"></div> <!-- reaction_count,reaction_repeaterの場合はこれを追加。reaction_buttonでは要りません。 --!>
<div class="reaction-buttons"></div>

例:
<div reaction-id="任意のID" >
コンテンツ
<div class="reaction-buttons"></div>
</div>

設定項目

// リアクションの設定
const REACTION_CONFIG = [
    'reactions' => [
//'CSVに記録される名前' => '表示される絵文字'
        'like' => '👍',
        'bad' => '👎',
        'heart' => '❤️',
        'laugh' => 'laugh.png', // .png,.gif,.jpg,.svgが使えます
        'sad' => '😢',
        'love' => '😍',
        'cold' => '🥶',
        '100ten' => '💯',
        'thanks' => '🙏',
    ],
    // リアクション制限の設定
    'limits' => [
        'daily' => true,     // true: 1日で制限リセット, false: 無期限
        'perIP' => 1,       // IP毎の制限回数（daily = falseの場合のみ使用）
        'dailyLimit' => 10,  // 1日あたりの制限回数（daily = trueの場合のみ使用）
        'disableOnLimit' => true  // 制限回数に達した場合ボタンを無効化(true or false)
    ],
    // リアクションの表示初期展開数
    'display' => [
        'initialButtons' => 5  // 初期表示するボタンの数
    ],
    // 拒否するIPアドレスのリスト
    'blockedIPs' => [
        // '192.168.1.100',  // コメントを外して IP を追加すると制限が有効になります
    ]
];

サンプル画像

てがろぐへの導入方法

 <link rel="stylesheet" href="../reaction.css">

<script src="reaction/config.php?format=js"></script>
<script src="reactions.js"></script>

    <div class="comment" reaction-id="[[POSTID]]">
        [[COMMENT]]
    <div class="reaction-counts"></div> <!-- reaction_count,reaction_repeaterの場合はこれを追加。reaction_buttonでは要りません。 --!>
    <div class="reaction-buttons"></div>
    </div>

'custom_emoji' => 'emoji/カスタム絵文字の画像パス',

reaction/reactions.php

/reaction/reactions.php

<script src="upload.js"></script>

設定する項目について

<input type="text" id="customText" value="無断転載禁止/DO NOT REPOST">

<option value="watermark.png">watermark.png</option>

$uploadDir = 'images/'; // 画像アップロードディレクトリ
$miniDir = 'images/mini/';//サムネイルディレクトリ
$thumbnailWidth = 250;//サムネイルのサイズ
$fontFile = 'Mplus1-Regular.ttf'; //使用するフォントファイル
$resizeOption = '1'; // 画像サイズ制限オプション（1 = 有効, 0 = 無効）
$maxDimension = 1000; // 最大サイズ
$defaultWatermark = 'watermark.png'; //デフォルトの透かし画像
$watermarkScale = 0.2;//透かし画像の倍率(対横幅)
$convertToWebpOption = '0'; // WebP変換オプション（1 = 有効, 0 = 無効）

$text = mb_convert_encoding($text, 'UTF-8', 'auto');

TIPS：新規投稿/編集画面で使う方法

<script src="upload.js"></script>