GoogleVisionAPI で 猫の絵を判定するアプリを作ってみた
GoogleVisionAPI を使用して猫の絵をスコアリングしてランキング登録できるアプリを作ってみた。
GoogleVisionAPI とは
以下の記事で紹介しているため、割愛する。
c-taquna.hatenablog.com
どんなアプリか
猫の絵を描いてスコアリングしてランク付けまでします。
使い方を説明します。
まず、以下のURLにアクセスしていただくとトップページに飛びます。
☆PC版
Drawing
☆スマホ版(かなり中途半端な状態2017/7/28)
Drawing
白く塗りつぶされた領域があるとおもうのですが、そこに猫の絵を描きます。
こんな感じ。
絵を書き終えたら JUDGE ボタンを押します。
そうすると、絵のスコアと RANK ボタンが出てきます。
実はこのページの下部には Ranking があるので、RANKボタンを押して登録します。
RANKボタンを押すと・・・
登録されました!こんな感じで自分が描いた猫の絵をスコアリングしてランキングまで作成します。
使用している環境について
- Cloud9
- heroku
- HTML5
- jQuery 2.2.4
- Ruby on Rails 5.0.4
- GoogleVisionAPI
処理の概要
HTMLのCanvasを使用して絵を書くためのスペースを作成する。
以下のサイトを参考にすれば何の問題もなくCanvasで絵が描けるようになります。
【参考にしたサイト】
㉗HTML5+jQueryでお絵かき
絵を描ける様にした後は、描いた絵のデータをGoogleVisionAPIに渡す。
GoogleVisionAPIにdataを渡すためには以下の要領に従い、POST用のデータをJSONリクエスト形式で作成します。
【参考にしたサイト】
Cloud Vision API のリクエストとレスポンス | Google Cloud Vision API ドキュメント | Google Cloud Platform
このJSON形式リクエストにある"content:" に絵のデータについて記述する必要があります。どのように絵をデータ化するかというと、描いた絵をBase64に変換します。"content:"にはその値を入れます。
【参考にしたサイト】
Canvasで描画した画像を送信してサーバに保存する - Qiita
APIの処理は基本的にバックエンドのRailsで処理しています。jQueryからRailsに処理を渡すために、$.ajaxにて上記で作成したJSONリクエストデータをRailsに渡します。そうすると、
裏ではJSONリクエストデータを引数としたAPIを叩くメソッドが実行されAPIの結果を取得します。
【参考にしたサイト】
jQuery.ajax の data の型
JavaScriptからRailsのAPIを叩く方法 - Qiita
ハマったところとその対応
かなりあるので、それはまた別記事で。。
課題
このご時世にスマホに対応していない。。。。
まとめ
フロントからバックエンドまで一人で作成しましたが、大変。特に、最初はBaaSのFirebaseを使用して作成したのですが、APIキーを隠すためにバックエンドをRailsで書き直したり。でもやっぱり何かを作るのは非常に楽しい。
firebase.google.com
参考にしたサイト
他の項目で記載しているので割愛。参考にしたサイトが他にもあったらあらためて記載します。