読者です 読者をやめる 読者になる 読者になる

2chResAborn.user.js : 2ch.netをWebブラウザーで読むときNGワード含むレスを見せない

JavaScript WebApp

f:id:itouhiro:20150319112722p:plain


[話者] 2ch.netのAPI変更で2ch専用ブラウザが使えなくなった。そこで2ch.netをWebブラウザで見ているわけなんだが‥‥

すると2ch専用ブラウザにあった「あぼーん機能」が使用できない。そこで作ったよ User JavaScript


[合いの手] UserJavaScriptってなんだっけ?


[話者] Webブラウザで動作するJavaScriptだ。「Firefox」と「GoogleChrome」で拡張機能を入れると使えるようになる。
使い方は https://sites.google.com/site/itouhiro/2012/webaborn に書いてあるよ。


以下のスクリプトを登録すればよい。


2chResAborn.user.js

// ==UserScript==
// @name           2chResAborn
// @version        1.0
// @namespace      http://webaborn.herokuapp.com
// @description    Reduce the situation you see disagreeable texts in the way replacing to some word.  ('aborn' means 'purge and unable to read'.)
// @author         itouhiro
// @grant          none
// @match          http://*.2ch.net/*
// @match          http://*.2ch.sc/*
// @match          http://*.open2ch.net/*
// @match          http://*.bbspink.com/*
// @match          http://jbbs.shitaraba.net/bbs/*
// @match          http://*.machi.to/bbs/*
// ==/UserScript==
(function () {
  const abornString = '****';
  const ng_words = ['NGワードを追加します', "ここにNGワードを追加します"];
  var timer = null;
  var resAborn = function(node){
    var cand = document.evaluate('.//text()[parent::dt or parent::dd]', node, null, 6, null);
    var i = 0;
    var j = 0;
    var lenC = 0;
    var lenNG = 0;
    var txt = '';
    var resStart = -1;
    var resDelete = false;
    for (i=0, lenC=cand.snapshotLength; i<lenC; i++) {
      txt = cand.snapshotItem(i).nodeValue;
      if (txt.match(/: ?\d{4}\/\d{2}\/\d{2}\(.\) ?\d{2}:\d{2}:\d{2}/)) {
        if (resDelete && resStart>=0) {
          for (j=resStart; j<i; j++) {
            if (cand.snapshotItem(j).nodeValue !== '\n') cand.snapshotItem(j).nodeValue = abornString;
          }
        }
        resStart = i;
        resDelete = false;
        continue;
      }
      if (resDelete) continue;
      for (j=0, lenNG=ng_words.length; j<lenNG; j++){
        if(txt.indexOf(ng_words[j]) >= 0) {
          resDelete = true;
          break;
        }
      }
    }
    if (resDelete && resStart>=0) {
      for (j=resStart; j<i; j++) {
        if (cand.snapshotItem(j).nodeValue !== '\n') cand.snapshotItem(j).nodeValue = abornString;
      }
    }
  }
  resAborn(document);
  document.addEventListener('DOMSubtreeModified', function(e){ if(timer)clearTimeout(timer); timer=setTimeout(resAborn(e.target),300); }, false);
})();


[合いの手] 2ch.netだけでなく、2ch.sc やおーぷん2ちゃんねるでも使えるのかな?


[話者] 2015年3月時点で、2ch.net、2ch.sc、open2ch.net、したらば で使えることを確認した。next2ch.netでは使えないのはHTML構造が2ch.net等と異なるため。


[合いの手] どうやって使うのか、実際にやってみてよ。


[話者] GoogleChrome拡張機能Tampermonkeyを入れる。
Tampermonkey - Chrome Web Store
でインストールできるぞ。


[≡ - その他のツール - 拡張機能 - Tampermonkey - オプション]をクリック。
f:id:itouhiro:20150319103709p:plain


[新規作成アイコン]をクリック。
f:id:itouhiro:20150319104016p:plain


NGワードを設定するぞ。

const ng_words=[];

の「 [ ] 」のあいだにNGワードを並べていく。

  • NGワードはダブルクォーテーション「"」かシングルクォーテーション「'」で囲む。
  • NGワード複数あるときはコンマ「,」で区切る。

最後に保存ボタンを押そう。
f:id:itouhiro:20150319113911p:plain


ここでは

の2つをNGワードにしたぞ。
f:id:itouhiro:20150319114004p:plain
アスキーアートを消すときは、このようにアスキーアートの一部を選択してNGワードにする。別にアスキーアートの1行全部を追加する必要はない。アスキーアートのなるべく上の行を追加したほうが動作速度は若干速くなるが、気にするほどの速度差はないかな。


[合いの手] NGワードの個数に制限はあるのかな?


[話者] とくにないよ。NGワードは1つでもいいし、1000個でもいい。NGワードが多くなるとWebブラウザー2ch.net等を見るとき少し表示が重くなったりCPUファンが回ったりするかもしれないけどね。


するとこのようにNGワードを含むレスをまるごと隠せるんだ。
f:id:itouhiro:20150319112722p:plain


[合いの手] NGワードを隠す文字は「****」になっているけど、変更できる?


[話者] ソースコード

  const abornString = '****';

を変更すればいいよ。「【削除】」とか全角空白「 」とかに。


[合いの手] NGワード自体を見たくないときはどうすればいいだろう? 今追加するNGワードを見るのはいいんだけど、過去に追加したNGワードは見たくないんだ。


[話者] http://webaborn.herokuapp.comNGワードを入力して、得られるuser.jsファイルの中の

  const ng_words = ['\u9945\u982d','\u30de\u30f3\u30b8\u30e5\u30a6'];

のような行をコピーすればいいよ。これはNGワードに「まんじゅう」「饅頭」を追加したときのNGワードなんだけど、わからなくなっているだろ。




 

Greasemonkeyスクリプティング TIPS&SAMPLES

Greasemonkeyスクリプティング TIPS&SAMPLES