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

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

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

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

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

##2．完成したWebアプリの動作イメージ
![00987325-ff4b-4f3d-9bfe-a66449424725.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495359/37cb878d-630c-1fba-8f94-134677cdadbf.gif)
カメラにカードをかざすと**「カードの種類」「カードが利用可能なサービスを確認できるURL」が表示**されます。

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

##3．どのように作ったのか
###今回使用したツール
- [Teachable Machine](https://teachablemachine.withgoogle.com)：画像プロジェクト 
- [CodePen](https://codepen.io)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495359/ea75b747-028e-0d01-4e3b-ccca32fef621.png)

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

#####次のステップへの準備
学習させた後はモデルをエクスポートし、CodePenで利用可能なURLを発行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495359/4c0ab3da-7473-8d79-f4d9-38ee8e9a645f.png)

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

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

- JavaScriptについて
    -  [JavaScriptエラー時にチェックするポイント](https://www.genius-web.co.jp/blog/web-programming/points-to-check-on-javascript-errors.html) ▶ エラーが発生した際のヒントに！
    - [	中田亨 著／図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編（秀和システム）](https://www.shuwasystem.co.jp/book/9784798063867.html) ▶ JavaScriptとは何ぞや？基本的なことを学びました

- CSSデザインについて
    - [CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選](https://saruwakakun.com/html-css/reference/h-design) ▶ 見出しのデザインを参照
    - [Color Hunt](https://colorhunt.co/) ▶ 色の組み合わせって難しいですよね、ここを参考に配色を決めています

##4．実際のアプリケーションを試してみる
<p class="codepen" data-height="650" data-default-tab="result" data-slug-hash="wvPMJEM" data-user="hayapin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hayapin/pen/wvPMJEM">
  カードが利用可能なお店を確認</a> by hayapin (<a href="https://codepen.io/hayapin">@hayapin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

##5．実際に作ってみて
###改善したいこと
####① 技術面
- 実現できなかったJavaScriptでのリンクURLの書き換えの実装
- ~~携帯で使用することを想定した、インカメラ→フロントカメラ切り替えの実装~~ <font color=red>→ 実装できました！</font>
- カードを切り替えるごとに、判別をリセットするような仕組み
- カード以外のものが表示された場合の結果を返すための「その他」モデルの学習をさせる
- モデルの読み込みが完了するまで、「読み込み中」であることがわかるような表示があるとよさそう

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

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