その書類、ちゃんと押印されてます？AIを使用して自動で押印チェック

# 押印が必要な書類って結構ある

どうも、ごくごく一般的なサラリーマン（人事）です。
人事と言っても採用担当みたいな華やかな部署ではなく、もっと裏方の部署でひっそりと働いています。

早速ですが本題です。
皆さん、**会社からなにか証明書を発行してもらった**経験ってありますか？
* 就労証明書
* 退職証明書
* 給与証明書

とか色々ありますが、大体の人は**1回あるかないか**くらいだと思います。

そんな証明書なんですが、僕みたいな裏方の人事は、時期によっては1日に何十枚と作らないといけないことがあるんです。

しかも何が面倒って**押印が必要な書類っていまだに結構ある**

というわけで今回はその面倒な**押印のチェックをAIにやってもらえないか**という思い付きから始まった挑戦です。

# 使用したツール
使用したツールは次の通りです。ちなみにプログラミングの知識や技術は不要です。

* Teachable Machine
* Node-RED　

# Teachable Machineの設定
そもそも**Teachable Machine**とは、簡単に言うと
**画像とか音とか動きをAIに学習させて、オリジナルの判定機能を自分で作れるツール**

です。
その中で今回は画像の判定を行います。

## Teachable Machineに画像を読み取らせる
メインメニュー　⇒　使ってみる　⇒　画像プロジェクト
の順に進むとこんな画面になります。
![TeachableMachineクラス作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/8512f3ba-a708-5556-5b4a-f03b85e31fad.png)

「アップロード」をクリックして押印済の画像と、押印がされていない画像を大量に取り込みます。
![TeachableMachine画像アップロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/178e6830-721d-a492-ca23-f8cabca96980.png)

「押印されている画像たち」と「押印されていない画像たち」を取り込んだら、
さらに精度を上げるために「ウェブカメラ」からも画像を取り込んでおきます。

「ウェブカメラ」をクリックしたら、PCのカメラが起動するのでカメラの前で取り込みたい画像を色々な角度から撮影します。
![TeachableMachineサンプル取込み完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/2fc077e1-6706-120f-64ac-bddca6d79b46.png)

はい。これで学習させる画像の取り込みは完了です。
大体300枚くらい取り込むと良いかもしれません。

ちなみに
はじめは「ウェブカメラ」のみの画像で学習させていたのですが、判定させる書式が変わったりするとうまく判定できなかったので、できるだけ**色んな種類の押印画像**を取り込むことをお勧めします。

## 取り込んだ画像を学習させる
「トレーニング」をクリックすると、取り込んだ画像を基にその法則をAIが学習してくれます。
下の画像の様に一番右側に**できた**っぽい物が表示されたらOKです。
![TeachableMachineモデル完成OK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/db3758e4-e072-3ac7-4939-b60fae8fcddd.png)

## 作成した判定モデルを使用可能にする
「モデルをエクスポートする」　⇒　「モデルをアップロード」　
の順にクリックすると、作成した判定モデルが他のツール等から利用可能になります。

表示されている「共有可能なリンク」をコピーしてどこかに保存しておきましょう。

# Node-REDの設定
次は**Node-RED**の設定です。
これは、**コードの知識が無くても色々な処理を組み立ててオリジナルの処理が作れるツール**です。

Node-RED上で処理を組み合わせて、証明書の押印を判定してくれる処理を作ります。

## Node-REDにノードを追加する
今回、Teachable Machineで作成した判定モデルとNode-REDを繋ぐわけですが、そのためにはそれ用のノード（ポストイットみたいな見た目をした装置みたいなもの）を追加する必要があります。
**右上の三本線の部分　⇒　パレットの管理　⇒　ノードを追加　⇒　「ノードを検索」と表示されている部分に以下の文字をコピペ**　⇒　追加
でノードを追加できます。次の3つのノードを追加しましょう。

* node-red-contrib-teachable-machine
* node-red-contrib-browser-utils
* node-red-contrib-image-output

インターネット環境にもよりますが、ノードの追加にはそこそこ時間がかかりますので気長に待ちましょう。

## ノードを組み立てる
ノードの追加が完了したら、処理に必要なノードを下の画像のように並べます。
![NodeRedフロー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/54e5b1fc-3f71-2f23-e8e6-e6d49bc554bf.png)

この中の**Teachable Machine**のノードをダブルクリックし、先ほど作成した判定モデルのリンクを「URL」欄に貼り付けます。
![NodeRedモデルURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/eb3549a8-6275-17ef-4158-165f7bd3ba23.png)

**template**のノードをダブルクリックし、下の画像のようにテンプレートを変更しておきます。ここに記載した内容に従って、判定結果が表示されるようになります。
![NodeRedテンプレート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/13575a1b-1e42-03e9-fe14-5d5c6d402c6c.png)

これらが完了したら、右上の**「デプロイ」**をクリックします。
これで準備完了です。

# 実際に動かしてみる
では、実際にこの処理を動かしてみましょう！
今回はこんなサンプルを用意してみました。

**押印済みの証明書**
![押印あり写真.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/c8f81537-1c2d-9987-2a43-581a90da7d63.png)

**押印されていない証明書**
![押印なし写真.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467782/e6c0ca08-6bbe-1353-5c2d-188a63aa1714.png)

このサンプルを使って判定をするとこんな感じになります。

**押印済みの証明書**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">押印判定の精度上がったっぽい<br>OKパターン<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/vog2VFy9OP">pic.twitter.com/vog2VFy9OP</a></p>&mdash; go west (@west_twitt) <a href="https://twitter.com/west_twitt/status/1681529551141343235?ref_src=twsrc%5Etfw">July 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


**押印されていない証明書**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">押印判定の精度上がったっぽい<br>NGパターン<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/vaE3MFbrre">pic.twitter.com/vaE3MFbrre</a></p>&mdash; go west (@west_twitt) <a href="https://twitter.com/west_twitt/status/1681529684255997956?ref_src=twsrc%5Etfw">July 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画面の右の方に結果が出ています。
ちゃんと判定できていますね。

# 実務で使えるか
うーん。。。
もっと素早く大量に判定できれば使えるかもしれないですけど、今のままだと**目で見た方が圧倒的に早い**ですね。。。

でも、「押印の有無」という**判定箇所が比較的小さいようなものの判定精度を上げる**事が出来たのはいい勉強になったような気がします。

この経験を活かしてもっと別の事にも使えないか探してみるとします。

ではまた