タグ編集画面に「カスタムJavaScript」機能が追加されました!

リリース日:2024/09/26

LEEEP2024-10-30

任意のJavaScriptが動作するようになりました。

イベント処理により、タグの見た目や動作を自由にカスタマイズすることが可能です。

カスタムJavaScriptマニュアルについては、赤枠で囲まれた「マニュアルはこちら」をクリックすると、ポップアップで表示されます。

<カスタムJavaScriptの例>

「リスト」タグで1週間以内に作成されたコンテンツにnewクラスを追加する

Plaintext
// 現在の日付を取得
const now = new Date();

// 1週間(7日)をミリ秒に変換
const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

// onLeeepContentsRendered イベントをリッスン
document.addEventListener('onLeeepContentsRendered', function(event) {
    // コンテンツ情報がイベントから渡される
    const posts = event.detail.posts;

    // 各コンテンツに対して処理を行う
    posts.forEach((post) => {
        // post.id に対応する LeeepPost 要素を取得
        const postElement = document.querySelector(`.LeeepPost[data-id="${post.id}"]`);

        // LeeepPost が存在する場合
        if (postElement) {
            // 作成日時を Date オブジェクトに変換
            const createdAt = new Date(post.created_at);

            // 作成日時が1週間以内かどうかを判定
            if (createdAt >= oneWeekAgo) {
                // 作成日時が1週間以内の場合、LeeepListDateに new クラスを追加
                const listDateElement = postElement.querySelector('.LeeepListDate');
                if (listDateElement) {
                    listDateElement.classList.add('new');
                }
            }
        }
    });
});