皆さま、こんにちは。7月に入り最高気温が30℃を越える日もあり、クーラーなくしては夏は過ごせず・・でも、クーラーは苦手な北の国に暮らすやまぴです。
今回でQiitaの記事の投稿は４回目です。他の投稿者の方のようなデジタル・AIなどの知識はまだまだ少ないですが、以前よりも知識が深まり「このツールを使うとどんなことができるだろう？」とワクワク（時に煮詰まりつつ）日々を過ごしています。
そんな私の前回投稿した記事がこちらです。
Power Automate Desktopを使って、業務の自動化に挑戦しました。
処理のスピードアップに感動しましたね。（とはいえまだまだ改善の余地あり）
さて、今回ですが、新たに学んだデジタルツールで業務上の課題解決に挑みました。
それは、仕入割戻契約書（リベート契約書）に収入印紙が必要か不要かを判断してくれるツールです。
動画はこちらです！
（スマホのほうの動画も取ったのですが、動画をタップしないと全体像が見えないので今回は掲載あきらめました。）
本当は契約書の印紙貼付の判断＋チャットフローも作成して印紙貼付についてのQ&Aに対応できるようにする予定でしたが、頓挫してしまいました。
＊その顛末も後ほど記事の中で説明させていただきます。
1.作成しようと思った動機
私の担当している業務は、過去記事でもご紹介しましたが自社グループで使用しているシステムで作成した仕入割戻契約書（リベート契約書）・値引き合意書の提出進捗管理・記載内容のチェックなどです。
第２回めの記事では、リベート契約書管理の自動化の作成に挑戦について書いています。
リベート契約関連の業務では、まだまだ課題（小さなものから大きなものまで）がありますが、その中の１つが「契約書に収入印紙の貼付の確認について」です。現在は契約書が提出された時に、私が確認して都度「収入印紙貼付要」の契約書にはその旨メモをつけて処理に回しています。
契約書の点数が少ない時には、大丈夫なのですが、契約書提出件数が多い年末～２月までは丁寧に確認している余裕もない時があります。
「商品部で確認しておいてくれれば・・・」と思うのですが、悲しいかな、このルールを理解できていない人は少なくないようです。
リベート契約書に収入印紙の貼付が必要とされる場合については、当社の「独占禁止法マニュアル」に記載されています。実際の契約書を例にしてみました。
＊印紙貼付対象となるのは達成リベート契約なのですが、国税庁で定めている印紙税額の一覧に記載されている文書の中の７号文書にあたり、4,000円の収入印紙の貼付が必要となります。(詳細は下記のリンクから確認ください）
これを商品部のほうで事前にチェックしてくれれば・・ということで、ツールを作成して簡単にチェックできるようにしよう！と決心。作成にとりかかることにしました。
2.使用したデジタルツール等
・Teachable Machine
・VS Code
・GitHub Pages
・Dify（使う予定だったが・・頓挫）
・ChatGPT
ChatGPTへアイデア出しを考えてもらう
まずは画像を学習させるTeachable Machineを使ってツールを作成したいと考え、ChatGPTに相談しました。
🦊
Teachable Machineを使って、契約書に収入印紙の貼付が必要がどうかを判断するツールを作りたいのだけど、どんなステップで作成したらいいでしょう？
💻
1.収入印紙の判定条件の整理をします
2.整理した条件に該当する契約書のPDFを集めます
3.印紙要・印紙不要のグループに分けて、PDF→PNGに変換します
4.Teachable Machineでクラスを二つに分けて、それぞれ変換した画像をドラッグ＆ドロップでアップロード
5.トレーニングさせて完成したモデルをエクスポート
判定フローは、ユーザーが契約書の画像をアップロード→ブラウザ（サーバー）でモデルをロードし、分類
→印紙要・不要のラベルをチャットボットが返答
以上のステップで作成してみましょう！
作成手順もわかったので、いよいよツールを作っていきます。
3.収入印紙チェックツール作成へ
①契約書のPDFをPNG形式の画像へ変換する
まず、Teachable Machineに契約書の画像を学習させるために契約書のPDFをpdftoppmを使ってPNG形式の画像へ変換させます。私のPCには入っていないので、
1.Poppler for Windowsなどから ZIP をダウンロード
2.ZIP を解凍し、bin\pdftoppm.exe のあるフォルダを探す
3.そのフォルダパスを環境変数 PATH に追加
4エクスプローラーでフォルダを右クリック→「パスをコピー」
5.「システム環境変数の編集」→「環境変数」→「Path」に貼り付け
コマンドプロンプトでPDFをPNGへ変換させます。(一発で成功しませんでしたが、なんとかできました・・）
変換した画像を「収入印紙要」「収入印紙不要」に分けてTeachable Machineでクラス分けし、それぞれトレーニングします。
学習完了したら、モデルをエクスポート→ダウンロードを選択し、保存します。
②収入印紙チェックモデルを動かす準備
ここからが、私の頭がパニック状態になりながら進んでいったパートです。
まず、ダウンロードしたモデル（TensorFlow.js）ファイルを解凍します。
→そしてプロジェクト用のフォルダを作成します（デスクトップなどに）
構成は下記のようにします。
stamp-check-demo/ ← プロジェクトのルートフォルダ
├─ index.html ← ブラウザで開く HTML ファイル
├─ script.js ← JavaScript の処理をまとめるファイル
└─ model/ ← Teachable Machine から解凍したモデル一式
├─ model.json
├─ metadata.json
└─ group1-shard…bin ← 重みファイル群
ダウンロードしたファイルの中身は、それぞれstamp-check-demo/model/フォルダへコピーします。
次にHTMLファイルを用意します。同じルートにindex.html を作り、ブラウザでモデルを使うための土台を書きます。
ブラウザでモデルを使うためのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>収入印紙チェックデモ</title>
</head>
<body>
<h1>収入印紙チェック</h1>
<!-- 画像をアップロードするための入力 -->
<input type="file" id="input-image" accept="image/*">
<!-- 判定結果を表示 -->
<div id="result"></div>
<!-- TensorFlow.js 本体 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<!-- Teachable Machine ライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<!-- 自作のスクリプト -->
<script src="script.js"></script>
</body>
</html>
続いて、同じフォルダにscript.js を作成し、モデルの読み込みと画像判定の処理を記述します。
書いたJavaScriptがこちら
// モデルが入っているフォルダへのパス
const MODEL_URL = "./model/";
let model, maxPredictions;
// ページが読み込まれたらモデルを初期化
window.addEventListener("load", async () => {
const modelURL = MODEL_URL + "model.json";
const metadataURL = MODEL_URL + "metadata.json";
// モデルを読み込む
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// ファイル選択のイベントをセット
document.getElementById("input-image")
.addEventListener("change", handleImageUpload);
});
// 画像が選ばれたときの処理
async function handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
// 画像を <img> タグで一時的に表示（非表示でもOK）
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = async () => {
// モデルで予測
const prediction = await model.predict(img);
showResult(prediction);
};
}
// 判定結果を画面に表示
function showResult(prediction) {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // クリア
prediction.forEach(p => {
const percent = (p.probability * 100).toFixed(1);
const line = document.createElement("p");
line.textContent = `${p.className}: ${percent}%`;
resultDiv.appendChild(line);
});
}
以上の書き込み・保存が完了したら、実際に動かしてみることができるようになります。
しかし・・動かしてみたものの何も起こらず・・
なかなかうまくいかず、ChatGPTに聞きまくって出した方法がこの２つでした。
方法①：Python の簡易サーバーを使う（Windows／Mac／Linux 共通）
方法②：VSCode の Live Server 拡張を使う
VSCodeのほうが簡単にできる（今の私にはその簡単のレベルがわからない！）ということなので、②を選択して実施しました。
1.VSCode で stamp-check-demo フォルダを開く
2.拡張機能（Extensions）アイコンをクリック → 「Live Server」を検索 → インストール
3.エクスプローラーから index.html を開いた状態で画面右下の「Go Live」ボタンをクリック
4.自動的にブラウザが立ち上がり、http://127.0.0.1:5500/index.html（別ポートの場合もあり）で表示
VsCodeはPCに入っていなかったのでインストールします。
続いて以下の項目を実施します。
1. プロジェクトフォルダを開く
VS Code 左上のメニューで File → Open Folder… を選択
stamp-check-demo フォルダを選んで Open
左側のエクスプローラーに、index.html、script.js、model が並んでいるのを確認
2. index.html をアクティブにする
エクスプローラーから index.html をダブルクリック
エディタのタブに index.html が表示された状態にする
3. Go Live ボタンをクリック
VS Code 画面の右下、「Go Live」 ボタンを探してクリック
クリックするとステータスバーに「Port: 5500」（数字は環境による）と表示され、
自動的にブラウザが立ち上がります。
4. ブラウザで動作確認
ブラウザのアドレスバーに http://127.0.0.1:5500/index.html のような URL が表示されます
「収入印紙チェック」の画面が出たら OK！
無事に動いたのを確認し、続けて「スマホでも契約書の画像を読み込んで、確認できるようにしたい！」と考えた私は、更にブラッシュアップをすべくChatGPTに相談し、ファイル構成を次のように変更していきました。
そして、PCとスマホを接続させて動かそうとしましたが、同じWi-Fiにつなげても動きません。
そこで、インターネット越しに公開しようと決意。
GitHub Pagesを使用することにしました。
公開の流れは次の通りです。
1.GitHubにリポジトリを作成
2.ローカルのプロジェクトをGit管理下に置く
3.GitHubにプッシュ＆Pages設定
4.GitHub Pagesを有効化
5.公開URLで動作確認
ここもエラーの連続でしたがなんとか頑張ってクリアしていきました。
（エラーの一例）
無事、GitHubで公開！スマホでも動かせるようになりました。
スマホ・・背景が白くてわかりづらい（誤算）
しかし、更なる誤算はまだあるのでした。
4.完全体にはならず・・・後悔先に立たずです
なんとか収入印紙チェックツールを作成したものの、まだ物足りず、「そうだ！収入印紙チェック→チャットフローをつなげて、確認したり、印紙貼付について質問できるようにしよう！」と考えました。
そこでDify（ディフィ・・ですねｗ）を使って実装しようと思い、早速取り掛かったのですが・・問題発生。
つなげていったフローのうち、HTTPプロンプトのHtmlの設定で、予測エンドポイントを作っておく必要があり、またまたコードをあちこちいじらないといけなくなったのです。
頑張ったのですが・・ダメでした。
チャットフローの作成に固執しすぎて、時間を費やしてしまいました。
今回最後に学んだのは「うまくいかなかったら、次の手はないか、スパッと切り替えて行動する」でした。
LINEBotの連携案もChatGPTは出してくれていたのですが、切り替えられなかった私です。
大反省ですね。
でも、LINEBotを連携させた改良版を絶対に作ってみせます！！諦められません！！
今回参考にさせていただいた記事はこちらです。
追記
PCで実際操作しているところを総務部のCさんに見てもらって意見をもらいました。
🐻契約書に収入印紙が必要かどうかを画像で判断するものを作ったのだけれどどうかな（操作し画面を見てもらう）
🐨うーん・・画像を都度取り込むのは手間ですかね。
それとそもそも商品部の皆さんに契約書に収入印紙の貼付が必要な場合をきちんと理解してもらうことが前提ではないかと思いますよ。
🐻確かに・・・そうだよね（(;^_^A）（ツールがあれば解決できると思った私が浅かった・・）
現実を踏まえて厳しめのコメントをいただきました。
問題の目の付け所を変えないといけないなと反省です。
その後、しばらくしてCさんが別件で私のところに来た時に、こんな提案を持ってきてくれました。
🐨やまぴさんが作ったツール見せていただいて、「こんなのできないかなあ」って考えたんですよ
🐻え？そうなの！教えて欲しいな（興味津々）
🐨リベートシステムで契約内容登録するでしょう？その登録した画面を見せて正しく登録できていれば「OK」間違った箇所があれば「NO」と判断するようなのできないかな？って思ったんですよ
新任の商品部員の方にシステムの説明会をやまぴさんがやってるけど、なかなかすぐには覚えられないじゃないですか。
こういうツールがあったら便利じゃないかなーと。
🐻おおお！それはいいかも！ちょっとすぐには実現できないかもだけど、考えてみる！☺
難易度は高くなるかもしれないですが、実用性は高そうだなと思います。切り替えてチャレンジ・・してみようと思います！
お読みいただきましてありがとうございます。
＊7/13 内容追加しております。