LINEボットでMicrosoft Face APIを用いた顔判定アプリを作成する方法

LINEボットが手軽に作成できることから、LINEボットを使ったアプリを開発する方が増えています。

僕もその一人でLINEボットと様々なWebAPIを組み合わせてLINEボットの作成を行なっています。

以前には、文字を含む画像を送信すると文字起こしをしてくれるLINEボットの作成手順やソースを公開しました。

今回はMicrosoft Azure Cognitive Serviceの一つ「Face API」を利用して顔認識が行えるLINEボットの作成手順とソースを公開します。

Face APIについては以下の記事に記載しています。

【Microsoft Face API】無料で使える機械学習を使用したAI顔認識サービスの利用方法

このチュートリアルを行うことで画像に含まれる顔を認識してその顔についての以下の情報を自由に利用することが可能になります。

Face APIで認識可能な情報
・年齢
・性別
・顔の向き
・笑顔
・髭(口髭、あご髭、頬髭)
・メガネの有無
・感情(怒り、軽蔑、嫌悪、恐れ、幸福、無感情、悲しみ、驚き)
・髪(ハゲ度合い、髪色)
・化粧の有無
・顔の一部が隠れているか
・アクセサリー装着有無
・霞み具合

実際に作成したLINEボットは以下です。

このLINEボットでは、年齢・性別・笑顔・メガネ有無・感情・ハゲ度合いの情報を判定して返すようにしています。

実際に動作している様子は以下

フリー素材のパクたそから何枚か写真をチョイスして試しています。

フリー素材 ぱくたそ - すぐに使える無料の写真素材・AI画像素材

笑顔や感情など一部判定が怪しい部分もありますが、このように画像から顔の情報を抜き出すことが可能です。

僕の作成したアプリでは単純に結果をメッセージで返すだけですが、そこから抜き出した情報を元にごにょごにょしてから返すといった利用方法も可能です。

それでは次に本チュートリアルで使用する技術について記載しておきます。

本チュートリアルで使用する技術・サービス
・LINE Messaging API
・Google Apps Script
・Cognitive Service Face API
・Google Drive

図にすると以下のような感じになります。

本チュートリアルは次の方にオススメ
・LINEボットを作成したい方
・Face APIを利用した顔認識アプリを作成したい方
・Webアプリの技術を学びたい方

このチュートリアルではGASを利用したLINEボットの作成とMicrosoft Azure Cognitive ServiceのFace APIとの連携方法とうについて学ぶことができます。

LINEボットを初めて作成するという方でも基本的にはコピペで作成できるようにしています。

また、コピペした各ソースがそれぞれどのような挙動をするのかなどソースについての解説も行なっていますので、プログラミングを学習したい方や実際のWebアプリのソースなどを見て見たい方にもオススメです。

それでは実際に作成していきましょう。

AI顔認識LINEボットの作成手順
1.Messaging APIの登録及びアクセストークン取得
2.Face APIの登録及びAPIキー取得
3.Google DriveのフォルダIDを取得する
4.Google Apps Script(GAS)のソース作成
5.動作確認(各種権限の付与)
6.GASとMessaging APIの紐付け
7.LINEボットを友達追加して遊ぶ

ざっくりと記載すると上記のような手順で作成が可能です。
いずれも記載している手順通りに従えば難なく行えるはずです。
もし詰まることがあればTwitterのDMなどで質問いただければ回答します。

さて、それでは作成していきましょう。

1.Messaging APIの登録及びアクセストークン取得

Messaging APIはLINEボットを登録するためのサービスになります。
ここでLINEボットの名称やLINEボットとWebサービスを連携させるために必要なアクセストークンの取得を行います。

Messaging APIのアカウント登録方法については以下記事の最初を参考にしてください。GASの新規作成方法についても記載があります。

【LINE Botの作り方】Messaging API × GAS(Google Apps Script)でおうむ返しボットを作成する

2.Face APIの登録及びAPIキー取得

Face APIのキー取得方法については以下記事を参考にしてください。

【Microsoft Face API】無料で使える機械学習を使用したAI顔認識サービスの利用方法

3.Google DriveのフォルダIDを取得する

一時的に画像を保存する目的でGoogle Driveを使用します。
適当なフォルダを作成してフォルダのIDを取得してください。

まずGoogleDriveを開いて適当なフォルダを作成してください。

名前もわかりやすいものにしておいてください。

作成したフォルダを開いてURLの末尾部分をメモしておきます。
これはGASからGoogle Driveにアクセスする際に使用します。

また、以下の画像を動作確認で使用するので「face.jpg」という名称で上記で作成したGoogleDrive上に保存してください。
※動作確認用なのでこの画像でなくても構いません。

以下のような状態にしておけばOKです。

4.Google Apps Script(GAS)のソース作成

続いてもっとも重要であるGASのソース部分です。
ソースの解説自体は後ほど行うのでここでは一旦コピペしてください。

ここまでに以下ができていればOKです。
・Messaging APIのアクセストークンの発行が完了
・Face APIのAPIキー発行が完了
・新規GASの作成が完了
・Google DriveのフォルダID取得完了

ソースのコピペが完了したら、ソースの最初に記載してある以下の3つのキーを取得した値で書き換えてください。

・Messaging APIのアクセストークン
・Google DriveのフォルダID
・Face APIのAPIキー

※Messaging APIの設定は以下のようにしておいてください。
　・アプリタイプ：BOT
　・プラン：フリー

※どこかで詰まったりした場合はブログに載せているでTwitterなどからDMいただければ対応します。

それではまず、GASのソースから公開していきます。
以下の画像の状態かと思うので、既に記載されている「function myFunction()・・」は削除してください。

代わりに以下のソースをGASにコピペしてください。