Tweet

Pocket

今年のGWに試してみたよ第2弾です。
以前「たった3ステップ！ノンコーディングで画像の文字をテキスト化する(OCR) 仕組みを試してみました。」という記事を書いたのですが、書類などをキレイに撮影するのってナナメになったり切れたりして難しいなーと…。
書類やホワイトボードの撮影にすごく便利な「Office Lens」というアプリをMicrosoftが出してることに思い出しまして、これをイイ感じで利用すれば書類整理が捗るんじゃないかな？と思ったので試してみました。
…よく書類無くすもので（白目）

「Office Lens」ってどういうアプリ？という方は以下の記事を参考にされてください。

「Office Lens」はすごく便利なんですけど、目的の画像を探すのに1枚1枚見ていくのは手間だなーって個人的に思ってまして「Googleスプレッドシート内で単語を検索→画像URLクリックで画像を見られる」ができたらいいなと。
今回は、Office Lensで撮影した書類画像をOneDriveにアップロードし、Computer Vision APIで画像内のテキストをOCR化、画像のURLとOCR化したテキストをGoogleスプレッドシートにリスト化してみました。

今回やったこと

図解するとこのような形。
Office Lensで撮影してOneDriveに画像をアップロードすると、BLOBストレージに画像がコピーされます。
BLOBストレージを使ったのは、以下の理由です。

• 画像のバックアップの目的
• OneDriveの容量問題が発生したときに該当画像を削除できる

画像など容量が大きなファイルの格納にはBLOBストレージを使うのがオススメ。

事前準備

事前に「Computer Vision API」・「Googleスプレッドシート」・「BLOBストレージ」を準備しておきます。

Computer Vision APIの準備

初めて利用する場合の詳細はこちらの記事をどうぞ。

Googleスプレッドシートの準備

以下の項目を入れたGoogleスプレッドシートを作成します。スプレッドシートの名前もわかりやすいものがよいかと。

• ファイル名
• 画像URL
• ファイル内容（テキスト）

BLOBストレージの準備

OneDrive内の画像をコピーするBLOBストレージを準備します。

設定はこのような形で。BLOBストレージができたら「新しいコンテナー」を作成。
アクセスの種類は「BLOB」にしました。

ここまで設定できたら設定→アクセスキーで情報を表示し、赤枠内の内容を控えておきます。（LogicAppsで使うので）

Logic Appsを作成する

全体のLogic Flowはこのような感じ。たったの5つです！
今回はBLOBストレージの兼ね合いもあったのでリージョンは「西日本」を選びました。（使用したコネクター全て利用できる状態だったので）

トリガーは「OneDriveにファイルが作成されたとき」を使います。
Office Lensは画像のアップロード先が「画像フォルダ」になっているので、指定します。（変更できないようです…）
また、画像がアップロードされたらというトリガーも現時点ではないので、項目を確認する頻度はこのようにしました。

Azure Blob Storageコネクターを検索し「Blobの更新」を選択。

赤枠内の接続名に入力（ストレージアカウントのKey1接続文字列）し、ストレージアカウントを選択します。

赤枠の中を入力していきます。OneDriveにアップデートされる画像をコピーするのでこのような内容になります。

Computer Vision APIを検索し、画像内のテキストを出力したいので「Computer Vision API(OCR)to Text」を選びます。

事前準備で作成したGoogleスプレッドシートを選択し、書き出します。
ポイントは画像URLを自動生成できるようにすること。
Blobストレージの「プライマリBlob serviceエンドポイント」の後ろにファイル名が自動で追加された形でGoogleスプレッドシートに出力されるようにしました。
ファイル内容（テキスト）には、さきほどの「Computer Vision API(OCR)to Text」の結果が入ります。

変換が終わったらSlackに通知するようにしました。（これはいらないかも？）

結果を見てみる

今回は以下の書類をOffice Lensで撮影してみました。

使った書類は、出張で航空券を取ったときに印刷したものです。
Office Lensはこんな感じでまっすぐキレイに整形してくれるのでホントに便利！
アプリで撮影後、OneDriveに保存します。

Googleスプレッドシートを確認するとキチンと出力されています。
画像URL部分のURLをクリックすると、Blobストレージにコピーした書類画像が表示されるので、画像を一覧表示してプレビュー見つつ探す手間も省けます。

さて、画像内のテキストをOCR化してリスト化した利点として「単語で該当画像を検索できるようになる」です。
ですが残念ながら「Computer Vision API(OCR)to Text」で出力した文章には、半角スペースが細かく入っている場合が多いです…。

なので、Googleスプレッドシート側で文章中の半角スペースを削除しておきます。こうすると検索できるようになって便利です！
※C列（ファイル内容）のみ選んで置換することをいオススメします。

Computer Vision APIコネクターを使う際の注意事項

5月4日に「Cognitive Services エンドポイントの移行」のお知らせメールが来ています。
「api.projectoxford.aiエンドポイント」を使用してAPI 呼び出しをアクティブに行っている場合、サービスの中断が発生する可能性があるので2017年6月12日より前に新しいエンドポイントへの切り替えを促すものです。
Logic Appsのコネクターはエンドポイントを自分で設定せず使えますが、このあたりどういう処理になるかは明言されていません…。
ちょっと気にしておこうと思います。

最後に

Office Lensはとても便利で、Word形式など画像ではなくテキスト化して保存することもできますので、そこは適宜使い分けていくとよいかと。
私は「書類画像の保管と管理が目的」で、大元のファイルをすぐに見れるようにしたかったためこの方法を試してみました。
書類をすぐ無くすんだ…という方、書類が結構手元にあって困るという方、手軽にできる仕組みなのでぜひ試してみてください♪

加筆（2017.05.10）

指摘をいただいたので以下、加筆しておきます。
Office Lensですが、標準機能でOCR情報は付加されるのでOneNoteやPDFを利用するのももちろんオススメです。（アプリ自体にOCR機能がないわけではないです）
今回の方法は「書類を画像として保管する場合」の一例として見ていただければと！m(_ _)m