またIDを間違えた…を防ぐ！ 顔画像でIDを教えてくれるWebアプリ

　こんばんは！小売業で採用担当をしているミハタです
自社では通年で採用活動を行なっているのですが、3~5月と9~10月は新しく入社する方が増える傾向にあります
ちょうどこの時期、各事業所の人事担当者は入社対応で忙しい日々を送っているはず…

　そんな中、必須かつ超重要な業務があります
それはマイナンバーの登録です
そこで今回は、マイナンバーの登録に関わる課題を解決するWebアプリを作ってみました！

マイナンバーの登録に関わる課題って？

　正しく税金を納めることを目的として、会社は従業員にマイナンバーを報告してもらっています
報告したことあるな～、と思いあたる方もいますよね
　マイナンバーは超重要書類であるため、自社では一つの事業所のうち、セキュリティ基準を満たしたパソコン1台でしかマイナンバー登録システムにログイン出来ないようしています

　マイナンバー登録システムにログインできる人事担当者は、各事業所に複数人います
複数人が同じパソコンを使ってシステムにログインするため、一人一人に電子証明書ID(以下証明書ID)が発行され、自分の証明書IDを選択してログインします
しかし証明書IDを選択する際に、誤って別の人の証明書IDを選択してしまい、エラーになることが多いのです

　誤った証明書IDを選択してもログインエラーになり、セキュリティ上は問題ありません
しかし証明書IDが誤っているとは思わず、何度もログインを試そうとうすると不正アクセスとみなされ強制的にログインができないようシステムからロックされてしまいます
そうなると各事業所の人事担当はわたしたち本部の人事にロックを解除するよう依頼する手間がかかってしまうのです…
しかも、本部の人事がすぐに対応できない場合は何日か待ってもらう必要があります
すぐに登録できない場合はいったん本人に返却しているため、後日また持ってきてもらうと二度手間になってしまいます
そこで、確実に自分の証明書IDを選択するような仕組みを考えたいと思いました！

Webアプリの概要

　Teachable Machineを使って顔認証をすることで、マイナンバーを登録するためのシステムにログインする際に必要な証明書IDを教えてくれるWebアプリをカンタンに作成する方法を紹介します

Teachable Machineとは？
Googleが提供する機械学習のツールで、誰でも簡単に画像認識や音声認識のモデルを作成できます

実際に使った顔認証アプリで判定している様子はこちら↓

作成手順

ステップ1. Teachable Machineで顔認証モデルを作成

1. Teachable MachineのWebサイトにアクセスし、画像モデルを選択し、次の画面で「標準の画像モデル」を選択
　

2.画像のサンプルをアップロードして、トレーニングを行います

3.モデルをエクスポートして、URLを取得します

ステップ2. CodePenでWebアプリを作成

1. CodePenにアクセスし、右上の「Log in」からGoogleアカウントなどでログイン後、左上の鉛筆マークから名前を変更してください

2.HTMLコードを入力します
　

実際に入力したプロンプトはこちら

    
    
    Teachable Machineで画像認証


    Teachable Machine 画像認証アプリ
    画像認証を開始
<div id="webcam-container">Webカメラがここに表示されます</div>
<div id="label-container"></div>

<!-- TensorFlow.js と Teachable Machineのスクリプト -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>

Codepenに記載したコードはChat GPTに書いてもらいました！
知識がなくてもプロンプトを真似してもらえば作成できます
一部、うまく作成できなかったプロンプトもそのまま＆修正依頼をそのまま記載しているので、合わせて見てみてください

3.CSSコードを入力します

実際に入力したプロンプトはこちら

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f5;
}
h1 {
color: #333;
}
#webcam-container {
margin: 20px auto;
border: 2px solid #ddd;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
#label-container {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.label {
font-size: 18px;
margin: 5px 0;
}

4.JSコードを入力します

実際に入力したプロンプトはこちら

// Teachable MachineのモデルURL
const URL = "Teachable Machineで作成しコピーしたURLを入力してください";
let model, webcam, labelContainer, maxPredictions;
// モデルとWebカメラのセットアップ
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
// モデルとメタデータを読み込む
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();

// Webカメラの設定
const flip = true; // Webカメラの映像を反転するかどうか
webcam = new tmImage.Webcam(200, 200, flip); // 幅, 高さ, 反転
await webcam.setup(); // Webカメラのアクセスをリクエスト
await webcam.play();
window.requestAnimationFrame(loop);

// HTMLにWebカメラを追加
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) {
    const labelDiv = document.createElement("div");
    labelDiv.classList.add('label');
    labelContainer.appendChild(labelDiv);
}

}
// Webカメラの映像を更新して、モデルで予測を実行
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
// 予測を実行して、結果を表示
async function predict() {
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ": " + (prediction[i].probability * 100).toFixed(2) + "%";
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}

ここまでCodepenを順調に進めていましたが、いざカWebカメラを使おうとすると
…ん？カメラがうまく起動しないぞ…？
よーく見るとHTMLタグの右下に赤丸の「！」マークがある。
クリックしてみると次の文言が↓

Chat GPT聞いてみたら、余分なタグを入れていたようで解決策を教えてくれました

ということで、修正されたコードをHTMLタブに入力しなおします
ついでに、コードの中身も修正します

修正したHTMLのプロンプトはこちら

Teachable Machine 画像認証アプリ
画像認証を開始
Webカメラがここに表示されます

WEBカメラが表示され、「画面認証を開始」ボタンを押すとカメラが起動し
写した顔から自分の証明書IDを判断して教えてくれました！

職場の方に試してもらった！

　今回、作成にあたり職場のSさんとYさんに協力してもらいました
Sさん・Yさん・わたしの3人ともそれぞれ証明書IDが発行されています

　たしかに、「あなたの証明書のIDは○○です」と断言してくれる方がわかりやすく、より確実に間違いを防止できます
そこで、ChatGPTの力を借りて、JSタブのコードを書き換えることにしました

修正したJSのプロンプトはこちら

// Teachable MachineのモデルURL
const URL = "Teachable Machineで作成しコピーしたURLを入力してください";
let model, webcam, labelContainer, maxPredictions;
// モデルとWebカメラのセットアップ
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
// モデルとメタデータを読み込む
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();

// Webカメラの設定
const flip = true; // Webカメラの映像を反転するかどうか
webcam = new tmImage.Webcam(200, 200, flip); // 幅, 高さ, 反転
await webcam.setup(); // Webカメラのアクセスをリクエスト
await webcam.play();
window.requestAnimationFrame(loop);

// HTMLにWebカメラを追加
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");

}
// Webカメラの映像を更新して、モデルで予測を実行
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
// 予測を実行して、最も高い確率のクラスを表示
async function predict() {
const prediction = await model.predict(webcam.canvas);
// 最も確率の高いクラスを見つける
let highestPrediction = prediction[0];
for (let i = 1; i < prediction.length; i++) {
    if (prediction[i].probability > highestPrediction.probability) {
        highestPrediction = prediction[i];
    }
}

// 「IDは○○です」と表示
labelContainer.innerHTML = `IDは ${highestPrediction.className} です`;

}

　JSタブのコードを書き換えが成功し、より理想のUIに近づけることができました！
Yさんから、「自分の証明書IDが瞬時にわかるから、間違いが減るね(⌒∇⌒)」とほめてもらえました◎

　実際に使用してもらった感想をもらえると改善点が見つかって、よりよいプロトタイプを作成することができるのでいいスパイラルを回せますね★
SさんとYさん、ご協力ありがとうございました！

まとめ

　Teachable MachineとCodePenを使って、簡単に顔認証Webアプリを作成できました
今後はこのシステムを上手く活用してもらうための方法を考えたいです
例えば、Microsoft EdgeであればRedirector拡張機能をインストールすることで、マイナンバー登録システムのログインページをクリックしたらこのWebアプリが起動するようにすれば、確実に顔認証をして正しい証明書IDを教えてくれるはずです

　また、Teachable Machineを応用すれば、さらにいろいろなツールを作成できそうです
例えば、自社では安心・安全を担保するために食品コーナーで勤務する従業員にたいして出勤時に体温など体調チェックを行っています
Webカメラで顔の表面温度を測定しながら顔認証をすることで、一人一人の体温が何℃なのか自動で登録してくれたら便利ですよね！

　Teachable Machineのような機械学習のツールは大量のデータを登録することでさまざまなデータが結びつき、認識ができるようになります
この特徴を活用し、「たくさん教えれば判断ができるようになる」という身近な課題の解決に役立てたいと思います！

今回もお付き合いありがとうございました！　お疲れ様でした♪

参考記事はこちら