【捨てる前に試してみて！】持っているポイントカードや電子マネーが使えるお店を教えてくれるWebアプリを作りました。

5051 ワード
TeachableMachine Webアプリケーション codepen 画像認識 機械学習 機械学習 テキストリンク

1．ポイントカード使ってますか？

ポイントカードって気がつくと増えていませんか？かく言う私も、財布の肥やしになっているカードが手元にたんまり。たまにお財布の整理でもしようものなら、「このカード使わないから捨てようかな？」「まだこれから使うかもしれない」と自分の中でせめぎ合いを繰り広げています。

そんな自分は、小売業の関連会社に勤務しています。グループの店舗では、お買い物金額に応じてポイントがたまるのサービスも展開しており、企業側の立場になると「ポイントカード等は有効に活用してもらいたい！」という切実な思いもあるのです…。

そこで今回は、自分が持っているポイントカードやポイントがたまる電子マネーをカメラにかざすと、利用可能なサービス・店舗（が確認できるURL）を返す、Webアプリを作成してみました。

実体験としても、自分が持っているポイントカードや電子マネーが家の近所でも使えることを知って、久しぶりにカードを使い始めた経験があります。そのカード、意外と身近なお店やサービスで使えるかも？一度このアプリを使って利用可能なお店やサービスを確認してみてください！

2．完成したWebアプリの動作イメージ


カメラにカードをかざすと「カードの種類」「カードが利用可能なサービスを確認できるURL」が表示されます。

「4.実際のアプリケーションを試してみる」の項目で実際に操作できます

3．どのように作ったのか

今回使用したツール

① Teachable Machine

Teachable Machineでは、学習データを登録して、そのデータを元に新たに入力したデータの判別をする事が出来ます。

画像学習の方法

Teachable Machineでは、画像プロジェクトを使用しました。
カードの実物が手元にあるものは「ウェブカメラ」を使用して、手元にない種類についてはカードフェイスデザインがわかる画像をアップロードする形で学習をさせました。
今回学習させたカードは「nanacoカード」「Tポイントカード」「dポイントカード」「WAON POINTカード」「Pontaカード」です。WEBカメラを使用する場合は、カメラの映り具合（サイズ／明るさ）にバリエーションをつけて学習させるように工夫しました。

次のステップへの準備

学習させた後はモデルをエクスポートし、CodePenで利用可能なURLを発行します。

② CodePen

CodePenは、ブラウザ上でHTML／CSS／JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発ができるサービスです。他の方が作成したコードを見て実際に使ってみることも可能です。
実際に作成した「完成した実際のアプリケーション」を参照ください。

参考にしたページ・書籍

特にJavaScriptはほぼ分からなかったので、書籍やWeb上の情報にとても助けられました。
参考にさせていただいたページや書籍をご紹介します。

4．実際のアプリケーションを試してみる

See the Pen カードが利用可能なお店を確認 by hayapin (@hayapin) on CodePen.

※認識後に表示される、各種サービスのURLはクリックをしても遷移しませんので悪しからず…（リンクの設定がうまくできていません）

5．実際に作ってみて

改善したいこと

① 技術面

  • 実現できなかったJavaScriptでのリンクURLの書き換えの実装
  • 携帯で使用することを想定した、インカメラ→フロントカメラ切り替えの実装 → 実装できました！
  • カードを切り替えるごとに、判別をリセットするような仕組み
  • カード以外のものが表示された場合の結果を返すための「その他」モデルの学習をさせる
  • モデルの読み込みが完了するまで、「読み込み中」であることがわかるような表示があるとよさそう

② サービス面

世間的にカードレス化が進んでいるので、物理カードを提示したときに、バーコードやアプリ対応をしているものがあれば、そのサービスに繋いであげるような表示をしたら有用性が高まりそう

考えたこと

機械学習の手軽さとこういったツールが誰でも簡単に使えるような時代になったことに感動しました。一方で、つい先日までの自分がそうだったように、世間一般が誰でも知っているかと言われると、そのような環境にはまだまだ遠いような気がしています。この機会に周りの人にもこんなツールあるんだよ！と発信してみたいと思いました。