こんにちは！freee で モバイルアプリ 開発を担当している RyoAbe です。
freee Developers Advent Calendar の10日目として、Google Cloud Vision API の導入 〜 OCR 機能の検証の結果についてまとめた記事になります。
Google Cloud Vision API とは？
Google Cloud Vision API とは GCP が提供するサービスの一つで、機械学習により画像から分析情報を抽出する以下のような機能を提供します。
- 乗り物や動物など、画像に写っているさまざまなカテゴリの物体（「ヨット」や「ライオン」、「エッフェル塔」など）を検出
- アダルト コンテンツから暴力的なコンテンツまで、さまざまなタイプの不適切なコンテンツを検出
- 著名人やロゴ、ニュース イベントなどの時事的なエンティティを検出
- 光学式文字認識（OCR）機能による画像内のテキストを検出
今回はこれらの機能のうちの OCR機能 について検証してみました。
API の説明
検出機能のタイプ
| 機能のタイプ | 説明 |
|---|---|
| LABEL_DETECTION | 画像全体に対して画像コンテンツ分析を実行し、結果を返します。 |
| TEXT_DETECTION | 画像内のテキストに対して光学式文字認識（OCR）を実行します。 |
| FACE_DETECTION | 画像内の顔を検出します。 |
| LANDMARK_DETECTION | 画像内の地理的ランドマークを検出します。 |
| LOGO_DETECTION | 画像内の企業ロゴを検出します。 |
| SAFE_SEARCH_DETECTION | 画像の画像セーフサーチ プロパティを判別します。 |
| IMAGE_PROPERTIES | 画像の一連のプロパティ（画像のドミナント カラーなど）を計算します。 |
Vision API リクエストのタイプ | Google Cloud Vision API ドキュメント より
（今回使用するのは TEXT_DETECTION）
API 概要
Cloud Vision API は RSET API で、上記の検出したい機能のタイプ（feature。複数指定可能）と base64 でエンコードした画像を API キーまたは OAuth トークンと一緒に POST して使用します。
POST https://vision.googleapis.com/v1/images:annotate
API の詳細は こちら
初期設定〜APIキー発行
1. プロジェクトを作成
GCP の プロジェクトの一覧 からプロジェクトを作成。
2. Cloud Vision API の有効化（課金情報の入力が必要）
検索窓 に Vision と入れて Cloud Vision API を有効にする。
↑ 移行、手順に沿って課金情報を登録する。
3. API キー を発行
Cloud Vision API を利用するため API キーを発行します。
ここで発行したAPIキーをサンプルプロジェクトに貼り付ける。
サンプルプロジェクト初期設定
README をもと 公式のiOSのサンプルプロジェクト の初期設定をします。
- clone, pod install
$ git clone https://github.com/GoogleCloudPlatform/cloud-vision.git $ cd cloud-vision/ios/Swift $ pod install
- API_KEY
1 で発行したAPI キーを YOUR_API_KEY 貼り付けて実行。
- 利用する機能タイプ（feature）の書き換え
LABEL_DETECTION
検証
アプリを実行すると以下のように画面が表示され、 Choose an image to analyze より写真を選択して写真情報を抽出してみます。
検証１ 手書きの名前
コテはじめに自分の名前を手書きで。
- 自分の名前１
- 結果
阿部訪
おしい。非常におしい。俺の字が汚いせいですよね。。もう一度書き直して
- 自分の名前２
さっきより汚い気もするが。。
- 結果
阿部諒
おおお！成功した。やはり手書きはまだまだ難しいようだ
検証２ 串カツ田中のクーポン
手元にあったので試しに。（ちなみに弊社近くの串カツ田中は、行くとfreee社員の誰かしらがいます）
- 結果
特別クーポン お会計金額10%OFF 名物串かソはパー大阪伝統の味 6名様以上の団体様には 手㈹たこ焼きもプレゼント中! ご予約 できます! ご利用条件·他サービス券との併用不可 一部を除く店舗でご利用いただけます。スタッフにご確認ください。 お会計前にご提示ください。お会計終了後はご利用出来かねます · 1組様1枚限り、お会計金額1000円以上からご利用いただけます 担当内田 有効期限Hdf年12月丰日
おおお、これはすごい。若干特殊な筆文字っぽいフォントだったので難しいのではと思ったが、ほぼほぼ認識できてる。 （ただ大事な店のお名前の「串かつ田中」が「串かソはパー」ってなってるｗ）
検証４ レシート１
サンプル 領収書 2015年4月1日 毎度ご乗車ありがとうございます。 乗車料金 ¥1430円 ¥0円 迎車 計 1430円 freeeタクシー 全自動営業所 TEL: 06-6012-3456
完璧！完璧だ！！！
検証５ レシート２
- 結果
FamilyMart 新宿エルタワー店 東京都新宿区西新宿1丁目6-1 電話: 03-5909-4086 領収証 2017年12月8日 レジ2-4726 (金) 12:39 No. 028 ¥103 ¥233 ¥233 ¥503 有明の海苔 直巻炙り焼たらこ ¥130 小 計 計 (内消費税等 お預り お ¥17) 釣 ¥2-70 対象会員番号 獲得 ポイント(3日後加算) 明細)ショッピングP 現在利用可能ホ·イント Tマネー残高 0000 9941 1P 1P 283P Tカードが無効の場合、Tポイント は貯まりません。詳細はtsite.jp にてご確認下さい。 ■現在のランク ブロンズ ■12\/31までにあと 3952円(12\/06 シルバー達成。ポイント2倍! P対象外分は含まれません。 01\/04までポイント1倍! 時点)ご利用いただくと、01月度は ご利用金額にタバコ·チケット等ショ叱.ング
これはちょっと意外。こちらもすんなりできるかなと思いきや、金額は読みやすさや強調のためかフォントが通常より横に潰れているためうまく読み取れてなかったり、最後の「ショッピング」が半角＋半濁点ゆえかうまく読み取れてないですね。
料金
やっす。月1,000回までは無料で、それを超えても 500万回まで 1,000回あたり $3.5 。
料金 | Google Cloud Vision API ドキュメント より
まとめ
手書きが思いの外うまくいかなかったのは意外でしたね。。（上記のは2回目で成功してますが、5回くらい書き直しています...w）
ですが、デジタルに印刷されたものは細かな文字でも十分読み取れていましたし、ここまで手軽で、レスポンスも早くて（5秒程度）、料金も安いので、プロダクトでも使うことは十分できそうですね。（ユーザによる手直し多少必要かもしれませんが）
モバイルエンジニア募集中
モバイルチームではエンジニア絶賛募集中です。まずは気軽にオフィスに遊びに来てみて下さい！
番外編
番外編として LABEL_DETECTION（画像全体に何が写っているのかラベルとスコアで結果を返す）を使ってみました。
使用する写真はこちら。（私の顔。我ながら気持ち悪い顔 🤢 。この顔と30年共に歩んできました。）
実行してみると、 顎や鼻や、メガネや髭、若干笑顔であること などの情報がスコアと共に抽出することが出来ました。
"labelAnnotations" : [ { "mid" : "\/m\/0j272k5", "score" : 0.93542570000000003, "description" : "eyewear" }, { "mid" : "\/m\/0jyfg", "score" : 0.91612179999999999, "description" : "glasses" }, { "mid" : "\/m\/027n3_", "score" : 0.89901613999999996, "description" : "eyebrow" }, { "mid" : "\/m\/0k0pj", "score" : 0.89364164999999995, "description" : "nose" }, { "mid" : "\/m\/0f9swq", "score" : 0.88021629999999995, "description" : "chin" }, { "mid" : "\/m\/0bby24z", "score" : 0.87939860000000003, "description" : "moustache" }, { "mid" : "\/m\/0h8jxfl", "score" : 0.87331460000000005, "description" : "vision care" }, { "mid" : "\/m\/025kyy", "score" : 0.81071179999999998, "description" : "forehead" }, { "mid" : "\/m\/019nj4", "score" : 0.75038470000000002, "description" : "smile" }, { "mid" : "\/m\/01443y", "score" : 0.67853859999999999, "description" : "headgear" } ]
これは面白いことできそう。これ使って副業で一儲けしようかな😎 （そうです、 freee は副業オッケーなのです😎）
明日は、先月入社の笑顔が素敵、丸メガネがとてもお似合いの bananaumai さんです！お楽しみに！
