NSFWコンテンツのぼかし解決策

bartv · 2019 年 8 月 1 日午前 7:38

Blender Artists フォーラムでは、かなり自由なコンテンツポリシーを採用しており、露出や暴力（ある程度まで）を許可しています。メンバーの多くはこの種のコンテンツに問題ありませんが、もちろん、学校や子供たちといった視聴者や状況では不適切な場合もあります。また、Topic List Preview プラグインを活用してタイル状のギャラリーを多用しているため、このようなコンテンツをデフォルトでは非表示にし、ユーザーの希望に応じて表示できるようにする仕組みが必要でした。

実装は予想よりも簡単で、他の誰かにも役立つかもしれないと思い、ここで共有することにしました。注意：ここでは NSFW（成人向け）コンテンツへのリンクをいくつか掲載します。進めましょう！

関連する投稿にはすでに #nsfw タグの付与を義務付けており、過去数ヶ月間これを厳格に適用してきました。また、Google とトラブルになるのを防ぐため、AdSense プラグインはこれらのページで広告を表示しないように設定されています（この機能を追加してくれた @neil に感謝します！）。

CSS を使用して、そのようなトピック内のすべてのメディアにぼかしとオーバーレイテキストを追加しました。マウスをホバーするとぼかしは解除されます。

/* #nsfw トピック内のすべてのメディアに NSFW のぼかしとオーバーレイテキストを表示 */
.tag-nsfw { 
	.topic-body .cooked img, 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container, 
	.topic-thumbnail img {
        filter: blur(10px);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body:hover .cooked img, 
	.topic-body:hover .cooked iframe,
	.topic-body:hover .cooked .lazyYT-container, 			
	.topic-thumbnail:hover img {
        filter: blur(0);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
        padding: 5px;
        font-size:1em;
        position:absolute;

        color:#fff;
        content: '⚠️ 成人向けコンテンツ - ホバーして表示';
        background: #e86800;

	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before {
        top: 15px;
        left: 10px;
	}

	.topic-thumbnail a:before {
        top: 65px;
        left: 20px;
	}
	
	.topic-body .cooked a.lightbox:hover:before, 
	.topic-body .cooked iframe:hover:before,
	.topic-thumbnail a:hover:before {		
	    display:none;
	}
}

トピック内の画像や動画は現在、次のように表示されます。

また、TLP タイルギャラリー内では次のようになります。

次に、ユーザーが自分のアカウントでぼかしを無効にするための設定を追加しました。これはカスタムフィールドを使用することで、私が考えていたよりも簡単に実装できました。

まず、チェックボックス形式のカスタムフィールドを作成しました。

その後、既存のコードを流用して、これらのユーザーに対して body クラスに ‘nsfw-always-show’ タグを追加しました。

<!-- 現在のユーザーの NSFW 設定を body タグに追加 -->
<script type="text/discourse-plugin" version="0.8">

// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
if (window.jQuery) {
    window.jQuery(function ($) {
        var u = Discourse.User.current();

        // NSFW を常に表示
        if (u.custom_fields.user_field_2) {
            console.log('show nsfw for user');
            $('body').addClass('nsfw-always-show' );
        }

    });
};

</script>

最後の CSS によって、これらのユーザーに対してぼかしが解除されます。

/* サインアップフォームからカスタムフィールドを非表示 */

.login-form .user-fields {display:none;}

/* 設定で指定したユーザーの NSFW ぼかしを無効化 */

.nsfw-always-show .tag-nsfw {
	.topic-body .cooked img, 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container, 
	.topic-thumbnail img {
        filter: blur(0px);	
	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    display:none;
	    content: none;
	}
}

このアプローチの既知の問題点として、:hover がサポートされていないため、モバイル端末ではまだうまく機能しないことがあります。

実際に動作を確認したい場合は、#nsfw タグページを訪れてみてください。ただし、そこでは NSFW コンテンツが表示される可能性がありますのでご注意ください

この情報が誰かの役に立てば幸いです！

Canapin · 2019 年 11 月 29 日午後 4:01

Also, on desktop, if an image take some space on the screen, you can easily hover it by mistake.
Instead of hovering to unblur, what about dynamically add a button “show the nsfw image” on top or under each nsfw image ?

raghukamath · 2019 年 12 月 25 日午前 7:41

At krita-artists.org We have slightly modified this to be on click and not on hover. However the setting used in the profile doesn’t work. Even if the user has set to show nsfw content he gets the blurred content. Is there a fix for it?

bartv · 2019 年 12 月 25 日午前 8:16

I can’t edit my OP anymore, but here’s the updated code. Mind sharing your ‘on click’ solution too?

<!-- add current user's nsfw preferences to body tag -->
<script type="text/discourse-plugin" version="0.8.7">

// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2
if (window.jQuery) {
    window.jQuery(function ($) {

        let currentUser = api.getCurrentUser();
        
        if (currentUser) {
            api.container.lookup('store:main').find('user', currentUser.username).then((user) => {

                if (user.user_fields[2]) {
                    $('body').addClass('nsfw-always-show' );
                }
            });
        }
    });
};
</script>

raghukamath · 2019 年 12 月 25 日午前 8:42

Our onlick solution is hacky and I think may not be ideal, we just removed blur from hover and added blur by default. The message was also changed to say user has click to go the post. Now the user has to click to go to post and click again to reveal the nsfw image in lightbox. Which is cumbersome but it prevents inadvertent hover and reveal. It might be good to use js to remove blur on click.

/* display nsfw blur and overlay text on any media in #nswf topics */
.tag-nsfw { 
.topic-thumbnail {
    overflow:hidden;
}

	.topic-body .cooked .lightbox img, 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container, 
	.topic-thumbnail img {
    filter: blur(30px);	
    -webkit-transition: .3s ease-in-out;
    transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
    padding: 5px;
    font-size:1em;
    position:absolute;

    color:#fff;
    content: '⚠️ Mature content - Click to see the picture';
    background: #000;

	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before {
    top: 50%;
    left: 10px;
    right: 10px;
    text-align:center;
	}

	.topic-thumbnail a:before {
    top: 65px;
    left: 20px;
	}
	
}

/* hide custom fields from signup form */
.login-form .user-fields {display:none;}

/* disable nsfw blurring for users who set this in their preferences */
.nsfw-always-show .tag-nsfw {
	.topic-body .cooked img, 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container, 
	.topic-thumbnail img {
    filter: blur(0px);	
	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    display:none;
	    content: none;
	}
}

fzngagan · 2020 年 10 月 5 日午前 11:25

@bartv @Terrapop

もし誰かがこれを引き受けるなら、Discourse Image Filter を使って「自動 NSFW ブラー」プラグインを構築することが可能です。

anon89147131 · 2020 年 11 月 9 日午前 7:36

こんにちは。ぼかしを除去し、代わりにテキストを外部の寄付ページへリンクさせるには、どのような手順を踏めばよろしいでしょうか？

bartv · 2020 年 11 月 9 日午前 7:37

残念ながら、CSSだけではそのことはできません。そのためには、ご自身でコードを追加する必要があります。

bartv · 2020 年 11 月 9 日午前 7:42

CSSから filter: blur(10px); の行を削除してください。

codinghorror · 2020 年 11 月 14 日午後 10:56

@bartv 最初の投稿をウィキ化しました。必要に応じて自由に更新してください！

トピック		返信	表示
NSFW image blurring in chat Support chat , ai	5	587	2024 年 9 月 26 日
Paid - Seeking Discourse Developer for NSFW Category Feature Marketplace delivered	5	264	2025 年 5 月 7 日
Safe for Work Mode - No Images Feature	15	2034	2016 年 9 月 17 日
Spoiler on images doesn't effectively protect NSFW images Feature	11	4346	2022 年 5 月 24 日
Discourse Spoiler-Alert Plugin official , spoiler-alert , included-in-core	11	36072	2025 年 3 月 8 日

NSFWコンテンツのぼかし解決策

関連トピック