NGワードの実装事例を見る
サイトの裏側をみるときはChrome系ブラウザの検証機能を使うといい。目的のサイトにいき、右クリックを押し、検証を押す。すると開発者ツールのいろいろが出てくる。
時々こういうサイトを見かけるので、気づいたときに書き足していく。
じゃがりこメーカー
blacklist.json というファイルがどこかにあるのかと探してみても、jsonファイルは見つからなかった。twitterでNGワード見つけた報告をよく見てみると冒頭にjavascriptっぽい記述が見られる。そこで.jsファイルに目を向けてみると、次のファイルでNGワードを定義していることがわかった。以下、該当部分を抜粋する。
https://www.calbee.co.jp/jagarico-maker/_next/static/chunks/pages/generator-5b1d3ed8d04940c60700.js
function(e) { e.exports = JSON.parse("list": ["\u30ab\u30eb\u30c8\u6559\u56e3","\u306d\u305a\u307f\u8b1b",, (以下同様) ] }
なるほどなと思ったのは、blocklist.jsonという別ファイルを作らず、メインのjsファイルにベタ打ちしてる点だ。日本語はUnicodeとして\uから始まる文字列で表現されているので、日本語を探そうと躍起になって気づかなかった。ぼくと同様、jsonファイルを探そうとして失敗してる人もいた。NGワードを見られたくないと思う人は参考にするといい。
とはいえNGワードはもちろんのこと、文字数制限やチェックボックスなど、いちいちサーバーサイドに送って確認するのはユーザーに不親切だろう。なのでフロントエンドで確認するほかない。するとパソコンに強い人に見つかってtwitterでネタにされるだろう。Ajaxでサーバー側に問い合わせて確認するのも手だが、NGワードって人に見られて困るものでもないしなあ。
また、原因は不明なのだが「ゐ」と「ゑ」を入れるとエラーが出るという報告もあった。
どこかのサイトと同じのを使ってるとの報告もあったがツイートが見つからなかった。
独り言
検証は大事だよね
フォーム入力で大切なことは、ブロックすべき情報を、フロントエンドとサーバーサイドの両方でブロックすることだ。Curl で直接HTTPリクエストを送られてしまえばフロントエンドのブロックなんて簡単に突破されてしまう。あくまでもフロントエンド側で行う入力情報の検証は、ユーザーがなるべく早く入力ミスに気づいてもらうためだけの配慮でしかない。ユーザーが入力し終えて送信ボタンを押して一息ついているときに、入力ミスのエラーが出たらストレスが跳ね上がってしまう。
世の中には知らない単語がいっぱいある
NGワードリストを眺めてみるのは興味深い。政治、宗教、差別用語、下ネタ、暴言など、まあ諍いしか起こらない言葉ばっかり並んでいる。中には知らない言葉があって検索して暇つぶししたりもしてみた。なかでもエロワードの多さには驚いた。ブラックリスト方式だから、どんどん言葉を変化させて、どうにかしてでも入力しようとする姿勢は笑ってしまうほど凄みを感じる。下ネタだけで「アイウエオ表」が作れてしまうくらい多種多様だ。このNGワードリストは、秘伝のタレのように、いろんなサービスが付け足してここまで膨らんだんだろう。当然じゃがりこメーカーのように、異性とつながる目的ではなく、あくまでも自己完結するサービスもあったに違いない。それなのになんとか下ネタを書いて、おそらく誰かと共有して、ニヤニヤ楽しむ姿を想像すると笑ってしまう。世の中に余暇は必要だ。
