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

[bartv (Bart)]

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 (Coin-coin le Canapin)]

@bartv

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

また、デスクトップでは、画像が画面の一部を占有している場合、誤ってホバーしてしまうことがあります。
ホバーしてぼかしを解除する代わりに、各 NSFW 画像の上または下に「NSFW 画像を表示」ボタンを動的に追加するのはどうでしょうか？

[raghukamath (Raghavendra Kamath)]

krita-artists.org では、ホバーではなくクリックで表示されるように少し変更しました。しかし、プロファイルで使用されている設定が機能しません。ユーザーが NSFW コンテンツの表示を設定していても、コンテンツがぼかされたまま表示されてしまいます。これを修正する方法はありますか？

[bartv (Bart)]

OPの編集はもうできませんが、更新されたコードを共有します。あなたの「クリック時」の解決策も教えていただけますか？

<!-- 現在のユーザーのNSFW設定をbodyタグに追加 -->
<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 (Raghavendra Kamath)]

現在の onlick ソリューションはハック的で、理想的ではないかもしれません。ホバー時のブラーを削除し、デフォルトでブラーを追加するだけです。メッセージも「ユーザーは投稿へ移動するにはクリックする必要がある」という内容に変更されました。現在、ユーザーは投稿へ移動するためにクリックし、さらにライトボックス内の NSFW 画像を表示するために再度クリックする必要があります。これは面倒ですが、誤ってホバーして表示されてしまうのを防げます。クリック時に JS を使用してブラーを削除するのが良いかもしれません。

/* #nswf トピック内のメディアに NSFW ブラーとオーバーレイテキストを表示 */
.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: '⚠️ 成人向けコンテンツ - 画像を表示するにはクリック';
    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;
	}
	
}

/* サインアップフォームからカスタムフィールドを非表示 */
.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;
	}
}

[fzngagan (Faizaan Gagan)]

@bartv @Terrapop

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

[anon89147131]

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

[bartv (Bart)]

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

[bartv (Bart)]

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

[codinghorror (Jeff Atwood)]

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