3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Teachable MachineとCodePenを使って書類判別Webアプリを作ってみた!

Last updated at Posted at 2022-09-21

私は現在、小売業の内部監査室で店舗運営の業務監査を担当しています。
今回は、画像を活用した書類の判別にチャレンジします。

これは新人監査員あるあるなのですが、業務監査で行った先の店舗で管理している書類が会社規定のものか、店舗でアレンジされたものか、はたまた、そもそも会社規定にはない書類なのか判断し兼ねることがあります。

なぜ、このような状況が発生するのでしょうか?
例えば、A社とB社が統合され、基本的にA社のルールが採用されているとします。この場合、往々にして、元B社の店舗ではB社のやり方が残ってしまうのです。
ただでさえ、監査員になりたての時期は確認する書類の種類と量の多さに圧倒されてしまいます。また、初めて見る書類は、事前にストックしている書類見本との突合せにも時間がかってしまいます。
0926.jpg
そこで、もし、アプリが書類の画像から何の書類かを教えてくれたらとても助かるなぁという発想のもと、Teachable Machineの画像判別能力を試してみました。また、業務監査を行う店舗での使用を想定し、CodePenを利用してWebアプリにしました。

完成デモ

使用ツール

Teachable Machine
CodePen

Teachable Machineの設定

本物の書類を掲載することはできないので、「管理書類A」と「管理書類B」という仮の書類を作成しました。
書類.jpg
今回は、Teachable Machineの画像プロジェクトを使用しました。
ウェブカメラで、書類の画像サンプルをそれぞれ300程度、取り込みました。
teach.jpg
モデルをエクスポートします。
code.jpg
下部に表示されているJavaScriptをコピーします。

CodePenの設定

エディター画面のHTMLにTeachable MachineのJavaScriptをペーストします。
画像の左側、赤枠の部分にアプリの名称を入力しました。
画像の右側、赤枠内のflipを削除して取り込んだ画像の反転を修正しました。
エディター.jpg
Webアプリが完成しました。
判定結果も良好です!
kekka .jpg
WebアプリのURLを用いて、Android端末で表示することができました。
Screenshot_20220921-170322.png

課題点

画像判定能力を試してみようと、管理書類Aと管理書類Bをミックスした「管理書類C」を作成しました。
その結果は?
kadai2 .jpg
いい感じで迷っています。ここでAとBのどちらかに判定されては困ります。

では、管理書類Aにも管理書類Bにも、全く似ていない「管理書類D」はどうでしょうか?
kadai 3.jpg
ほぼ、「管理書類B」になっています。
少し残念な結果です。

最後に

今回は、画像から書類の判別ができるかどうかをテーマに、Teachable Machine、CodePenを利用してWebアプリを作成しました。
作成そのものは初心者の私でも比較的簡単でした。一方、画像による書類の判別に関しては課題が残りました。傾向として、空白が多い書類は「管理書類B」に近いと判定されるようです。
改善のために、各書類の特徴的な部分の画像でTeachable Machineをトレーニングする方法も検討したいと思います。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?