超軽量な手動data masking用のjavascriptライブラリ

<p align="center">
<img src="https://github.com/HC200ok/manual-data-masking/raw/master/images/miss-mallard.png"  width="200" style="margin: auto"/ />
</p>

`manual-data-masking`は超軽量な手動data masking用のjavascriptライブラリです。

![截屏2022-06-02 上午9.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269934/85e85792-06f8-b7a2-9799-d3d194f6a5b7.png)


# Repository link
https://github.com/HC200ok/manual-data-masking

# 手動data maskingとは？
手動data maskingはテキストデータ内に存在する個人情報や悪い言葉などの機密情報とセンシティブな情報を手動でラベルを付けたり隠したりする操作です。

例えば、下記のようなユーザーコメントがあります：
```html
くそー、先週買ったばかりの携帯なんだけど、もう壊れてしまった😠、今すぐ返金してくれ！この電話番号080808080で連絡してくれ！
```

`manual-data-masking`を使えば、手動data maskingの作業を簡単に行うことができます：

<img src="https://storage.googleapis.com/zenn-user-upload/3b60fd62c04a-20220601.gif" />

同時に、ラベル付きのデータセット(data masked)とdata masking後のテキストデータ(text after data masking)も一緒に生成されます：

Data maskedを用いてdata masking関連のAIモデルのtraining data setを構築することができます：

```js
[
  {
    "content": "くそー",
    "category": "Person Name",
    "start": 0, // テキストデータに、機密情報の開始index
    "end": 3 // テキストデータに、機密情報の終了index
  },
  {
    "content": "080808080",
    "category": "Phone Number",
    "start": 49,
    "end": 58
  }
]
```

Text after data mkasking: 

```html
***、先週買ったばかりの携帯なんだけど、もう壊れてしまった😠、今すぐ返金してくれ！この電話番号*********で連絡してくれ！
```

実際に試してみたら？　[Online preview](https://igykl.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/easy-data-masking-igykl?file=/index.html)


# manual-data-maskingの使い方

## ES modulesの場合

```bash
npm install manual-data-masking
```

```js
import { create as createManualDataMasking } from "manual-data-masking";

const dataMasked = [
  {
    "content": "Damn it",
    "category": "Person Name",
    "start": 0,
    "end": 7
  }
]

const categories = [
  {
    "value": "Person Name",
    "color": "#b6656c"
  },
  {
    "value": "Swear Word",
    "color": "#577eba"
  },
  {
    "value": "Phone Number",
    "color": "#3e6146"
  }
]

const text = "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080."

const $manualDataMasking = createManualDataMasking({
  container: document.getElementById("demo"),
  text,
  dataMasked,
  categories,
  replaceCharactor: "*",
  dataMaskingCharactor: "X",
  maxHeight: 100
})

$manualDataMasking.on("afterDataMasking", (dataMasked, textAfterDataMasking) => {
  console.log(JSON.stringify(dataMasked));
  console.log(textAfterDataMasking);
})
</script>
```

## Script tagの場合
```html
<script src="https://unpkg.com/manual-data-masking"></script>

<script>
  const dataMasked = [
    {
      content: "Damn it",
      category: "Person Name",
      start: 0,
      end: 7,
    },
  ];

  const categories = [
    {
      value: "Person Name",
      color: "#b6656c",
    },
    {
      value: "Swear Word",
      color: "#577eba",
    },
    {
      value: "Phone Number",
      color: "#3e6146",
    },
  ];

  const text =
    "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080.";

  const $manualDataMasking = manualDataMasking.create({
    container: document.getElementById("demo"),
    text,
    dataMasked,
    categories,
    replaceCharactor: "*",
    dataMaskingCharactor: "X",
    maxHeight: 100,
  });

  $manualDataMasking.on(
    "afterdataMasking",
    (dataMasked, textAfterDataMasking) => {
      console.log(JSON.stringify(dataMasked));
      console.log(textAfterDataMasking);
    }
  );
</script>
```

# Document
パラメータやfunctionについて、詳しくはこちらのdocumentを参照してください：
https://github.com/HC200ok/manual-data-masking#readme

# Vue2バージョン
`manual-data-masking`には別のVue2のバージョンもあります、こちらのリンクを参照してください：https://github.com/HC200ok/vue2-text-annotation

# 最後に
manual-data-maskingに関して、何か不具合とか要望とかがありましたら、issueの提出をお願いいたします :pray: