【クソアプリ】スパムDMメーカー

いつもお世話になっております。
クソアプリアドベントカレンダー4年目のナモすけ（ウラル）です。

さて突然ですが、皆さんはTwitterのダイレクトメッセージ機能、使いこなせているでしょうか？
TwitterでDM通知が来ると嬉しくなりますよね。友達から大切な連絡が来ることもしばしば。
![6CEBE850-5866-4143-B2C7-29E9DD1FFC20.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/81ab7b2a-30bf-f462-78c5-af67c077db07.jpeg)
未読無視は良くないですから、早めに返してあげましょう。
![8F7EEA2C-0B29-4747-ACC0-C25AF23516CB.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/dc063128-c08d-b0f6-fa60-9cae7b0aebc6.jpeg)
……。友達では無かったようですね。でもきっとFF外からファンレターや、取材の依頼が来ているに違いありません。
![4DF25C1E-89BE-4020-B734-D7939E56A466.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/fede1f79-d1eb-100c-8c7c-a97765f31571.png)
ｷﾞｬ！！！！！
![7C7DB63E-B8F2-4B48-8F05-B80A357010D0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/c1b4c222-d472-0948-6f73-b335f7b0b596.jpeg)
なんだこれは。
![1A31B5FD-3A8E-4228-B4B3-FECA9D36BF11.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/dea68b64-93b5-8738-6a25-18a04dac10df.jpeg)
![D178D134-A12A-439F-AA63-8E56798E756B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/9b0bf0a4-dfaa-5927-889b-a665cfc08759.jpeg)
ふざけているのか？
![4ABB5910-B1A5-4B16-B6AE-1EBBE5F3D4DF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/fbf2ea2f-2475-924e-32b7-a44a9e3a52fb.jpeg)
![BDA5CD08-EDE1-4F7D-A136-B7743FEF2164.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/32500279-007f-711d-8d21-e1b044cb9377.jpeg)
![92AB16E6-22E6-4C7A-936C-0BD426956BCB.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/90a52f81-29c5-e9a4-736d-8dfc8b5fec39.jpeg)
![9143F44F-0A5C-4818-B2BA-F2902C2689D0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/84137d20-2a6d-bd54-c371-a615b1db6cfd.jpeg)
![745185D5-5476-4E98-8B2E-EEE28586979A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/94bee624-f555-a3ba-3b9e-ad2cc9b9ada3.jpeg)
![4B4EF21E-2C7A-4493-B518-018E712348BA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/3ef9c3b2-968b-2782-9916-335f3a493b18.jpeg)
![464F43DA-36D4-4877-8078-CFD21287DE43.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/6713ee96-d776-c21e-bfac-5c888086eada.jpeg)
いいえ、きっと最近の若い人の間ではこういうデコ文字が流行りなのでしょう。そうに違いありません。眺めていると、なんだか可愛らしく見えてきませんか？
![32D8DD41-F3F3-4853-B513-3D3541810604.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/12d34c06-8f69-5a36-7dac-02e9268394e7.jpeg)
![D23F77F4-6B1F-4F8A-8058-AAACC6959C46.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/2824c1a3-ae72-0af7-4174-3fca5b935878.jpeg)
![F80B1303-268A-4B66-8973-5FA9BDDB6F8F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/526e85a1-2b3f-961d-26af-63cffc6d8046.jpeg)
…………

というわけで、こういった怪しいDMを生成するツールを開発してみました。

## 怪しい記号の分析

これらのDMをよく観察すると、見慣れない記号が大量に文章中に挿入されていることがわかります。この記号の正体がわかれば、自動生成することができそうです。

そこで、いくつかテキストのサンプルを選んで、文字列をUnicodeエスケープし、目視で記号部分だけを抜き出して、出現数と共に表にまとめてみました。

|コードポイント|出現数|
|---|---|
|\u200c|5|
|\uff9e|14|
|\u200b|12|
|\u200d|13|
|\u180d|8|
|\u180c|5|
|\uffa0|9|
|\u18a6|8|
|\u180e|9|
|\u1802|22|
|\u2061|6|
|\u1808|12|
|\u200a|14|
|\u1c78|2|
|\u2cff|3|

調べてみると、想像以上に非表示の記号が挿入されていることがわかりました。また、メッセージごとに出現数に大きく偏りがありました。
とはいえ、全体の印象としては、およそ元の文字列と同数程度の記号が挿入されているようでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/7caf6846-bf55-d783-73bb-214477ea2e3d.png)

## 実装

必要な記号が分かったので実装に入ります。
実装にはいつも通りNext.jsを使います。自分用のテンプレートリポジトリがあると大変便利です。

https://github.com/namosuke/template-next-ts-tailwind

楽にUIを作りたいので、MUIを使います。

https://mui.com

それぞれの文字の出現率を、スライダーで調整できるようにしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/c2dc0818-3e78-2f90-98d1-9e0a2b4a4510.png)
また、新たな記号パターンが登場するかもしれないので、後から記号を追加できるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/c512a6d4-673d-dc59-cf82-f18deb1f5d22.png)
というわけで、完成したものがこちらです。

https://spam-dm-maker.vercel.app

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218499/39ab6533-2a1f-6796-7610-03e555bcb4e2.png)
かなり正確に、あの残念な感じが再現できるようになったと思います。
ちなみに、デフォルト値として使えるよう、大量のスパム文章を手入力するという仏様もびっくりの写経をしていました。

プログラムに興味を持ってくださった方は、以下で公開しているのでご覧ください。

https://github.com/namosuke/spam-dm-maker

最後までお読みいただきありがとうございました。
よろしければ、過去のクソアプリの記事もお読みいただけると嬉しいです。

https://qiita.com/namosuke/items/c7b3dbb2fe0683a2a04c

https://qiita.com/namosuke/items/96082b5fcbd72d33a530

https://qiita.com/namosuke/items/9b6dff13857f19cb30ec

それではごきげんよう。