【配布】ネタバレ防止機能のまとめサイト・ブログサイト等への導入方法

追記

*2020/12/05 スクリプトの修正を行いました。スクリプトの概要を理解したいという方はそのままお読み下さい。導入にだけ興味のある方は、アップデートのお知らせ記事へどうぞ。

ネタバレ防止機能とは

おーぷん２ちゃんねるには、「ネタバレ防止機能」という一風変わった機能があります。
||このように||、２つの縦線「||」で囲んだ範囲の文字列やimgurを利用してスレッドに埋め込まれた画像を真っ黒に表示します。

と、こんな風に注意喚起を併記すれば、読みたい人だけがそこを読めるという、なかなか面白い機能です。

おーぷんの住人の皆さんも、それぞれに面白い工夫を凝らしているものがあります。例えば、

　　∧ ∧　　みんなお疲れ様　ちょっとだけ早弁のおにぎりどうぞ
　( ´・ω・)　　海苔を剥がすと中身がわかるよ！
　（　∪ ∪ 　,.-、 　　,.-、 　　,.-、　　　,.-、　　　,.-、　
　と＿_）__） (,,||鮭||)　　(,,||塩||)　　(,,||毒||)　　(,,||ﾂﾅ||)　　(,,||梅||)

こんなふうに、おにぎりの海苔を剥がすと中の具がわかるという遊びがあります。

恐らくこの遊びからでしょう、住人の間ではこの「ネタバレ防止機能」は「海苔」の愛称で親しまれて（？）います。

私も、ゲームのまとめ記事を扱うに際して、おーぷん住人の遊び心をまとめサイト上でも表現したい、また、スレのエグいエログロネタを読みたくない層に配慮して「情報は欲しいけど、開花絵なんかのネタバレは見たくない」というようなニーズにも応えることができると判断し、サイト立ち上げ前から海苔を導入しようと思っていました。

検索しても出てこない

ところが、この機能、「海苔」はもちろん、「ネタバレ防止機能」でググっても、まとめサイトに機能を導入、追加、実装するための情報がどこにも出てきません。私の検索の仕方が悪いようでしたらすみません。

車輪の再発明は嫌いなのですが、無いものは作るしかないので、諦めて作りました。

ネタ系のまとめサイトを作っている方なら、この機能が欲しいって人は少なくなさそうなのになぁ……。

お断り

本題へ入る前にひとつだけ。

私はWeb関係で飯を食っている人間ではないので、CSSのクラス名やJavaScriptの変数における命名規則、書き方の作法がなってないというのはご容赦願います。一応、個人的に可読性を損ねない範囲で動作が軽くなるような工夫はしていますが、「while文のほうがfor文より早い」といわれても、while文のとっちらかった感じが苦手なので採用していません。

また、このCSS及びJavaScriptを利用して生ずるいかなる結果に対しても、私は責任を負いませんので悪しからず。

あれ？2つじゃｎ……

海苔の導入方法

STEP.1 CSSの導入

やることは単純です。JavaScriptだけで賄うこともできるのですが、処理を軽くするために、CSSを利用しています。次のCSSを、お使いのブログに反映されるCSSのできるだけ末尾に貼り付けて下さい。

/*初めのbackgroundの色が海苔を剥がした際の背景色となるので、適宜書き換えてください*/
.ink-removed{
	background : #f5f5f5;
	display : inline
}
.inked{
	background : #000;
	filter : brightness(0%);
	display : inline;
	cursor : pointer
}
.inked *{
	filter : brightness(0%);
	pointer-events : none
}

.ink-removedは海苔を剥がした後の状態です。背景色を表すbackgroundの後の数値を変更して、ご自分のブログ記事の背景色に合わせて下さい。

やっていることは単純で、

1. 文中に現れる海苔がずれないようにdiv要素のdisplay:inlineを指定
2. クリック可能なことがわかるようにcursor:pointerを指定
3. 要素を真っ黒にするためにfilter:brightness(0%)を指定
4. 海苔を剥がす際にリンクや画像の拡大が行われないよう、子要素のpointer-events:noneを指定

というだけです。この説明、要る？

一応補足しておくと、ボンヤリとした知識しか持っていなかった私はこの機能を作成するにあたって、「一つ大きな親要素の背景を塗りつぶして、子要素にopacity:0を指定れば簡単だな」と作業を始めました。しかし、海苔部分のズレを防ぐためのdisplay:inlineによって、子要素の透明な背景があるはずの部分を子要素の背景が貫通してしまう（inlineの入れ子では、親が子にどかされてしまうの？）ことがわかり、filter:brightnessを用いることになりました。後で調べたらおーぷんも同じ方策で海苔を実装しているようです。

STEP.2 JavaScriptの導入

やることはやっぱり単純です。お使いのブログでJavaScriptの記述が可能な箇所を探し、以下のスクリプトを貼り付けて下さい。必要なら全体を<script></script>で囲むのを忘れないようにして下さい。

document.addEventListener('DOMContentLoaded', function(){
//初めに、まとめるスレの「本文」を表すクラスの名前を指定して下さい。 
//ここで指定している't_b'は、おーぷんのスレの上部にリンクの有る「まとめくす」で使用されているクラス名です。
  var targetClass ='t_b';
//海苔範囲を正規表現で探して<div class="inked"></div>で覆う
  var postBody = document.getElementsByClassName(targetClass);
  var regExp = /\|\|([\s\S]*?)\|\|/g;
  for (var i = 0; i < postBody.length; i=(i+1)|0) {
    var txt = postBody[i].innerHTML.replace(regExp, '<div class="inked">$1</div>');
    postBody[i].innerHTML = txt; }
//出来上がった海苔範囲に、クリックで剥がれるイベントリスナを追加
//具体的には <div> のクラスを inked -> ink-removed に変更
    var inkedDiv = document.getElementsByClassName('inked');
    for (i = 0; i < inkedDiv.length; i=(i+1)|0) {
      inkedDiv[i].addEventListener('click', function() {
      this.setAttribute('class','ink-removed');
    }, false);
  }
});

コピーが終わったら、コードの上部にある通り、お使いのまとめツールに合わせてレスの本文を表すクラス名を指定して下さい。必要な作業は以上です。

後は海苔の貼られたスレをまとめるでも、既存の記事の一部を一時的に「||と||」で囲むでも良し。JavaScriptが有効ならばちゃんと海苔が現れ、クリックで剥がれ、剥がれた後は画像の拡大やリンク先へのジャンプも可能になっているはずです。

ここから後ろは無駄な説明ですので、海苔が動けば良いという方はここでさようならとなります。もしよろしければ、海苔を導入したサイトのアドレスをコメントに残していってくだされば、こっそり後で見に行きます。

では、蛇足ながら説明を始めましょう。

長々と読み難いかもしれませんが、最近敬遠されているらしい「じぇーくえりー（検索で引っかかるのを防ぐための表記）」は使用していません。ユーザがJavaScriptをオンにしてさえれば特にライブラリの導入もいらず、動作も多少は早いようです。複雑な操作をしているわけではないのでpureで十分です。

内容はというと、

1. ||と||で囲まれた範囲を見つけて<div>で括る
2. 括った要素を取り出して、クリックのイベントリスナを追加
3. イベントでは要素のクラスを、海苔の貼られた状態を表すものから剥がし終わったものへ変更

と至極単純です。

気になる点が有るとすれば、正規表現でタグを追加したところです。これによって、たとえば

<p>hoge||fuga</p>
<img src="./foo"/>
<p>bar||baz</p>

のようなHTMLを吐くツールでは、

<p>hoge<div class="inked">fuga</p>
<img src="./foo"/>
<p>bar</div>baz</p>

のように、<div class=”inked”>が<p>を跨いで構造を破壊してしまう恐れがあります。改行代わりに<p>タグを吐くような場合です。

これに関しては、多くのブラウザがきっとその程度の齟齬は柔軟に吸収してくれるでしょうから対処は諦めてください。或いは、加工しやすいタグを吐くツールの仕様を検討して下さい。コードのコメントでも挙げた

2mtmex.com

さんなら、そのようなことは起こらないはずです。

最後に

お互いに、素敵なおーぷんまとめサイトの管理人ライフを。

それから、フラワーナイトガールを遊んでみることを断固！オススメします！