##1．ポイントカード使ってますか？
ポイントカードって気がつくと増えていませんか？かく言う私も、財布の肥やしになっているカードが手元にたんまり。たまにお財布の整理でもしようものなら、「このカード使わないから捨てようかな？」「まだこれから使うかもしれない」と自分の中でせめぎ合いを繰り広げています。
そんな自分は、小売業の関連会社に勤務しています。グループの店舗では、お買い物金額に応じてポイントがたまるのサービスも展開しており、企業側の立場になると**「ポイントカード等は有効に活用してもらいたい！」**という切実な思いもあるのです…。
そこで今回は、自分が持っているポイントカードやポイントがたまる電子マネーをカメラにかざすと、利用可能なサービス・店舗（が確認できるURL）を返す、Webアプリを作成してみました。
実体験としても、自分が持っているポイントカードや電子マネーが家の近所でも使えることを知って、久しぶりにカードを使い始めた経験があります。そのカード、意外と身近なお店やサービスで使えるかも？一度このアプリを使って利用可能なお店やサービスを確認してみてください！
##2．完成したWebアプリの動作イメージ
カメラにカードをかざすと**「カードの種類」「カードが利用可能なサービスを確認できるURL」が表示**されます。
「4.実際のアプリケーションを試してみる」の項目で実際に操作できます
##3．どのように作ったのか
###今回使用したツール
- Teachable Machine：画像プロジェクト
- CodePen
####① Teachable Machine
Teachable Machineでは、学習データを登録して、そのデータを元に新たに入力したデータの判別をする事が出来ます。
#####画像学習の方法
Teachable Machineでは、画像プロジェクトを使用しました。
カードの実物が手元にあるものは「ウェブカメラ」を使用して、手元にない種類についてはカードフェイスデザインがわかる画像をアップロードする形で学習をさせました。
今回学習させたカードは「nanacoカード」「Tポイントカード」「dポイントカード」「WAON POINTカード」「Pontaカード」です。WEBカメラを使用する場合は、カメラの映り具合（サイズ／明るさ）にバリエーションをつけて学習させるように工夫しました。
#####次のステップへの準備
学習させた後はモデルをエクスポートし、CodePenで利用可能なURLを発行します。
####② CodePen
CodePenは、ブラウザ上でHTML／CSS／JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発ができるサービスです。他の方が作成したコードを見て実際に使ってみることも可能です。
実際に作成した「完成した実際のアプリケーション」を参照ください。
#####参考にしたページ・書籍
特にJavaScriptはほぼ分からなかったので、書籍やWeb上の情報にとても助けられました。
参考にさせていただいたページや書籍をご紹介します。
-
JavaScriptについて
- JavaScriptエラー時にチェックするポイント ▶ エラーが発生した際のヒントに！
- 中田亨 著／図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編（秀和システム） ▶ JavaScriptとは何ぞや？基本的なことを学びました
-
CSSデザインについて
- CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 ▶ 見出しのデザインを参照
- Color Hunt ▶ 色の組み合わせって難しいですよね、ここを参考に配色を決めています
##4．実際のアプリケーションを試してみる
See the Pen カードが利用可能なお店を確認 by hayapin (@hayapin) on CodePen.
※認識後に表示される、各種サービスのURLはクリックをしても遷移しませんので悪しからず…（リンクの設定がうまくできていません）
##5．実際に作ってみて
###改善したいこと
####① 技術面
- 実現できなかったJavaScriptでのリンクURLの書き換えの実装
-
携帯で使用することを想定した、インカメラ→フロントカメラ切り替えの実装→ 実装できました！ - カードを切り替えるごとに、判別をリセットするような仕組み
- カード以外のものが表示された場合の結果を返すための「その他」モデルの学習をさせる
- モデルの読み込みが完了するまで、「読み込み中」であることがわかるような表示があるとよさそう
####② サービス面
世間的にカードレス化が進んでいるので、物理カードを提示したときに、バーコードやアプリ対応をしているものがあれば、そのサービスに繋いであげるような表示をしたら有用性が高まりそう
###考えたこと
機械学習の手軽さとこういったツールが誰でも簡単に使えるような時代になったことに感動しました。一方で、つい先日までの自分がそうだったように、世間一般が誰でも知っているかと言われると、そのような環境にはまだまだ遠いような気がしています。この機会に周りの人にもこんなツールあるんだよ！と発信してみたいと思いました。