ドキュメントライブラリに画像認識機能を追加する 20171103

19
ドキュメントライブラリに 画像認識機能を追加する アドバンスド・ソリューション株式会社 及川 紘旭 2017年11月3日 Japan SharePoint Group in 東京

Upload: hiroaki-oikawa

Post on 21-Jan-2018

509 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: ドキュメントライブラリに画像認識機能を追加する 20171103

ドキュメントライブラリに画像認識機能を追加する

アドバンスド・ソリューション株式会社

及川 紘旭

2017年11月3日

Japan SharePoint Group in 東京

Page 2: ドキュメントライブラリに画像認識機能を追加する 20171103

目次

はじめに自己紹介

このセッションのゴール

デモの説明今回のデモ 画像認識タグ付け機能

アーキテクチャ

ランニングコスト現時点 (2017/11/3) のランニングコスト

Flow のクォータ

Custom Vision API のクォータ

構築のポイントFlow のポイント

Azure Function のポイント

Custom Vision API のポイント

まとめ

2© SharePoint Developer

sharepoint.orivers.jp

Page 3: ドキュメントライブラリに画像認識機能を追加する 20171103

はじめに セッションの本題に入る前に。

3

Page 4: ドキュメントライブラリに画像認識機能を追加する 20171103

自己紹介

© SharePoint Developersharepoint.orivers.jp 4

及川 紘旭 (おいかわ ひろあき)

Microsoft MVPfor Office Servers and Services 2007年10月~2016年9月

for Office Developer 2016年10月~

アドバンスド・ソリューション株式会社SharePoint 開発担当

ブログ SharePoint Developer(http://sharepoint.orivers.jp)

Twitter @HiroakiOikawa

Qiita https://qiita.com/HiroakiOikawa

Page 5: ドキュメントライブラリに画像認識機能を追加する 20171103

このセッションのゴール

SharePoint Online の機能拡張におけるアーキテクチャの一例を理解する。

© SharePoint Developersharepoint.orivers.jp 5

Page 6: ドキュメントライブラリに画像認識機能を追加する 20171103

デモの説明 今回作るデモをご紹介します。

6

Page 7: ドキュメントライブラリに画像認識機能を追加する 20171103

今回のデモ 画像認識タグ付け機能

ドキュメントライブラリにアップした画像を識別し、自動的にタグ付けする。

© SharePoint Developersharepoint.orivers.jp 7

画像をアップロードすると・・・

キーワードを自動的に更新!

秘スマホに通知!

Page 8: ドキュメントライブラリに画像認識機能を追加する 20171103

アーキテクチャ デモの裏側の仕組みをご紹介します。

8

Page 9: ドキュメントライブラリに画像認識機能を追加する 20171103

アーキテクチャ

© SharePoint Developersharepoint.orivers.jp 9

Flow 画像解析

①画像アップでFlowが起動

②ドキュメントライブラリからバイナリデータ取得

Azure BlobStorage

③バイナリデータをBlobに保存、公開

Azure FunctionGetTag()

Custom VisionAPI

④Function 経由でCustom Vision API呼び出し

④’ 画像解析 AI で画像を識別し、タグを返却

⑤タグをアイテムのキーワードに登録

⑥解析結果をスマホに通知

Page 10: ドキュメントライブラリに画像認識機能を追加する 20171103

ランニングコスト でも、お高いんでしょう?

10

Page 11: ドキュメントライブラリに画像認識機能を追加する 20171103

現時点 (2017/11/3) のランニングコスト

© SharePoint Developersharepoint.orivers.jp 11

Office 365 E3

Flow

Custom Vision API

Azure Function

0円※O365は契約している前提

0円※O365に含まれる

0円※Preview 版のため

0.53円※500Call 辺り

Page 12: ドキュメントライブラリに画像認識機能を追加する 20171103

Flow のクォータ

Office 365 に含まれる Flow にはクォータ制限があります。

クォータ制限を超えて利用する場合は追加コストが発生します。

© SharePoint Developersharepoint.orivers.jp 12

Microsoft 公式情報より抜粋https://japan.flow.microsoft.com/ja-jp/pricing/

Flow の最大実行数は「ユーザー単位の最大実行数 x ユーザー数」で、

テナントの全ユーザーでシェアし、ユーザーごとのクォータはありません。

Page 13: ドキュメントライブラリに画像認識機能を追加する 20171103

Custom Vision API のクォータ

Custom Vision API にはクォータ制限があります。

Preview 版のため、GA後クォータや価格は変更の可能性大です。

© SharePoint Developersharepoint.orivers.jp 13

1 日 1000 Call まで

Page 14: ドキュメントライブラリに画像認識機能を追加する 20171103

構築のポイント 構築時のポイントをハイライトでお届け

14

Page 15: ドキュメントライブラリに画像認識機能を追加する 20171103

Flow のポイント

条件分岐大事

- 無駄を省くためにも条件分岐は入れましょう。

© SharePoint Developersharepoint.orivers.jp 15

Page 16: ドキュメントライブラリに画像認識機能を追加する 20171103

Azure Function のポイント

Flow から Azure Function の呼び出しはひと手間必要

① Azure Function の開発

② API 定義の手直しと、API の公開自動生成された API 定義は、そのままだと Flow で使用するには支障あり。operationId 属性の変更と、parameters 属性の追加。

③ Flow で接続の追加新しい接続の追加ボタンから、②で作成した API を追加し、API Keyを登録して接続。

© SharePoint Developersharepoint.orivers.jp 16

API Key は Azure Function 側で生成し、接続の追加の際にセットする。

Page 17: ドキュメントライブラリに画像認識機能を追加する 20171103

Custom Vision API のポイント

たくさん鍛錬してから公開へ

- とにかくたくさんデータを投入し、精度を高めることが重要。目標は 90%

- 公開は Prediction URL から。使用は JS から。

© SharePoint Developersharepoint.orivers.jp 17

Page 18: ドキュメントライブラリに画像認識機能を追加する 20171103

まとめ 本日のセッションのまとめ。

18

Page 19: ドキュメントライブラリに画像認識機能を追加する 20171103

まとめ

Flow をフル活用

- Flow を使うことであらゆるサービスを連携させることができる。

- Flow そのものは非常に低コスト。

- SharePoint との親和性も高い。

足りない機能のみ補う

- Flow から直接呼び出せない機能や、Flow が備えていない機能は、Azure Function を、API 連携のためのハブとして活用する。

© SharePoint Developersharepoint.orivers.jp 19