技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

LINE Messaging APIで名刺のOCRを作ってみる

2017-12-22 勉強会
こんにちは。システム部の菊田です。

今年の勉強会の最後を飾る大トリです。

今回は準備期間が半年と、とっても長かったので、ゼロから技術を習得してやってみようと、あれこれ裏テーマなんかも用意しながら準備を進めてきました。

ブログのタイトルと、メイン画像の内容が一致してなくて違和感だらけのスタートですが、、、まずは、こちらの作品からご覧ください!

第一会議室です!!!

メインホールです!!!

空気清浄機です!!!

これら、本社オフィスをBlender(ブレンダー)を使って再現したものです。

これ、一切知識のなかった管理部の人に協力してもらって、半年ほどBlenderの勉強してもらって作ったものなんですよね。
すごくないですか??

最初、脱出ゲームを作ろうと思ってたので、役割分担して着々と準備進めてたんですけど、、、

大瀬、木村の勉強会

http://www.interpark.co.jp/dev/p0160.htm

須田と島田の勉強会

http://www.interpark.co.jp/dev/p0162.htm
今回は、みんながみんな、本社オフィスをを題材にしてしまって、、、ことごとく、見事にかぶってしまいました、、笑

なので、お蔵入りになったんですけど、勿体なかったので披露させていただきました

あらためて、勉強会のテーマを決定

というわけで、あらためて別のネタを模索しはじめることになりました。

せっかくの準備期間がなくなってしまい、途方にくれながら、テーマとして面白いものは何だろうといろいろ考えた結果、あえて普段の業務で使えるものにしてみようとの思いに至りました。

今年の勉強会を振り返ってみると、普段の業務とは関係のない分野でみんな新しい技術にチャレンジしていたから、逆に違うほうにいって締めくくってみようかなと。

特に今年リリースした、名刺や資料のスキャンに応用できる、OCRあたりをテーマにするといいんじゃないかなと思い、OCRにテーマを決定してみることにしました。

OCRとは?

光学文字認識(こうがくもじにんしき、Optical character recognition)は、活字の文書の画像(通常イメージスキャナーで取り込まれる)を文字コードの列に変換するソフトウェアである。一般にOCRと略記される。

メディアドライブさん

https://mediadrive.jp/technology/ocr.html


今年はサスケでもクラウドスキャンってゆうサービスをリリースして、名刺のOCRを実現し、数ヶ月前には手書き資料のOCRにも対応しました。
(CMなんかもはじめました)

クラウドスキャンプレスリリース

https://www.atpress.ne.jp/news/126224

ただ現在はまだ文字のデータ化は、精度を高めるために、人力で頑張ってるので、速度面や費用面で、メリットが出づらい仕組みになってます。

まさに人口知能や、機械学習の得意とする領域だと思いますので、ここを研究開発の対象として北大との共同研究もはじまっております。

共同研究がスタートしました

http://www.interpark.co.jp/dev/p0140.htm

あらためて、OCRするのに必要なこと

では早速、自前で名刺のOCR機能を実現してみようと思います。

、、、と言っても、ただ一口OCRやる、なんて言ってみても、いくつか準備が必要です。

①名刺の画像データを撮影し、加工するアプリ

②それをサーバーへ送る仕組み

③送られてきた画像を解析する仕組み

④解析結果を、アプリへフィードバックする仕組み



ざっくりと挙げると、こんな形でしょうか。


まともにゼロベースで作ろうとすると、なかなか手間がかかる工程です。

①だけでも、画像の台形補正とか、どこまでが名刺の領域か判別するためのガイド機能とか、これ単体でもなかなかの手間です。

今回は、かけられる手間も限られますし、なにより、技術者として一番大事な「車輪の再発明はしない」精神で、世の中にある便利なサービスを組み合わせて、実現することにします。

活用したサービスはこちら

①名刺の画像データを撮影し、加工するアプリ

MicroSoftの「OfficeLens」です。

Office Lens

https://itunes.apple.com/jp/app/office-lens/id975925059?mt=8
何年か前にこのアプリ知ったときには、すごい感動したんですよね
会議の後に、ホワイトボード撮影したら、台形補正されて、うおおお!みたいな。

なので、リスペクトもこめて、ここは、OfficeLensで。

②それをサーバーへ送る仕組み

OfficeLenから、別のサービスへ連携できる手段はいくつかあるのですが

LINEにも投げられるみたいのなので、

LINE Messaging API

LINEのMessaging APIを使って通信してみることにしました

Channel Saaske

LINEのデベロッパーアカウントで、サスケのチャンネルを作り、このbotとフレンドになって、画像投げることにしました。

LINEのMessaging APIとの連携の話しはあちこちに記事あると思うので割愛しますが、LINEに送ったメッセージ、エンドポイントに設定したサーバに送ることができるようになります。

あと、誰でもLINE持ってると思うんで、あらたなアプリのインストールとかなしに、サクッとツールとして使えるのは利点だと思うんですよね

サーバー

ほんとは、サーバーレスにやりたかったんですけど、今回OCRに選んだのは、メディアドライブさんのLinuxで動かすライブラリだったんで、すぐ使えるサスケのテストサーバーにしました。

ちなみに

LINEから送られてくるJSONはこんな感じになっていて
{
"events": [
{
"message": {
"id": "7179297075329",
"type": "image"
},
"replyToken": "6a03557d360e448ab7f9be5aabd21601",
"source": {
"type": "user",
"userId": "Ub29e560ec0cd9f8a96092c5188f0b526"
},
"timestamp": 1513853555358,
"type": "message"
}
]
}
画像の場合は、messageのidを使って、エンドポイントに取得にいく形でした。

処理をする言語は何でやっても良かったんですが、jsonの形もシンプルだったんで、こんな感じで、perlで書きました。(データ取り出す部分の参考までに)

あとはこのidを、以下パターンで組み立てて送れば、画像のバイナリデータを取得できる形です。

https://api.line.me/v2/bot/message/{message id}/content

LINE API

https://developers.line.me/ja/docs/messaging-api/reference/
ほかにもLINEには様々なAPIがあるんで、ご興味のある方はご参考ください

③送られてきた画像を解析する仕組み

ここは今、メディアドライブさんの名刺OCRを使ってみようと思って、評価版のライブラリを借りてるので、こちらを使わせていただきました!

④解析結果を、アプリへフィードバックする仕組み

これは、そのまま送ってきたLINEに返却すればいいですね

そんなわけで、まずは結果から

HandsOn

メディアドライブさんのOCRの出来が良いのが大きいですが、この応答速度で、解析結果が返ってきてくれるなら、かなり実用的ですよね。

サスケのサーバで応答してるんで、サスケと連携して、関連顧客を割り出すことなんかも、簡単です。

LINEbotはAPIも充実してるので、いろいろ見せ方を変えられたり、幅広い表現ができるので、もっと結果の表示についてもいい感じにできると思います。

来年はここの部分が、今研究開発中の機械学習つきのOCRが置き換わっていけるようになれることを祈りつつ。

いまいち仕事でLINEを使うことが、世の中的に「あり」なのか「なし」なのかわからないので、LINE連携ってどうなんだろって思ってるところもあるんですけど、もしニーズがあるならすぐ実現できると思うんで、弊社営業担当までご要望くださいませ。

最後に

共同研究も来年はより実践的な検証が必要になるので、簡易的な入力装置として、ひとまずこんな感じの仕組みでもあれば、リアルな実験ができるんじゃないかと思ってます。

今年度のインターパークのテーマは、「進化」、なので、自社製品やサービスを進化させるために必要な技術をいろいろ検証し、来年振り返った時に、「いやー、実際ちゃんと進化したよね!っ」て言ってもらえるように頑張りたいと思ってます。

ご静聴ありがとうございました!
記事一覧へ

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部