スキマノート

AIメーカーなどのwebサービスを作っています。ここでは気になった技術、話題などをまとめたり、雑記を書いたりします。

画像認識AIを使ったLINE BOTの作り方

AIメーカー

f:id:no2z1:20181007223210p:plain

こんにちは、2z（Twitter： @2zn01 ）です。

先日、AIメーカーのAPIを公開しましたので、今回はそのAPIを活用してLINE BOTを作ってみました！

■今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました！ https://qiita.com/2zn01/items/c324c7f4d42e0b335bed

自分だけで作ってても面白くないので、APIを使って誰でも作れるようにチュートリアルとしてまとめておきたいと思います。

作ったもの

あくまで一例ですが、以下のLINE BOTを作ってみました。

「スケベ診断」

  • LINEに画像をアップすると、アップされた画像からどんなスケベかを判定します。

システム概要

  • LINE Messaging API
  • Google Apps Script
  • AIメーカー API

AIメーカー-LINEBOT-システム概要図.png

以下の流れで処理が行われます。

  1. LINEに画像がアップされたらwebhookによりGoogle Apps Scriptのプログラムが呼び出される
  2. Messaging APIで画像を取得してAIメーカーのAPIへ送信する
  3. AIメーカーのAPIから診断結果を受け取り、Messaging APIで結果を返す

作り方

１．AIメーカーで画像認識AIを作る

まずはLINE BOTで画像診断させたいネタを考え、AIメーカーで画像認識AIを作ってみてください。 （Twitterのアカウントが必要になります）

■AIメーカー https://aimaker.io/

作成後、作成したモデルのIDとAPIキーをメモしておいてください。 スケベ診断の場合は以下のURLの「APIを使う！」の欄で確認することができます。

https://aimaker.io/app/image-classification/id/2438

なお、AIを作成せずとも、既に他の人が作成されたAIを使うこともできます。 以下のみんなのAIから探してみてください。

https://aimaker.io/app/search/

２．Google Apps Scriptの設定

LINEとAIメーカーの仲介役プログラムとなるGoogle Apps Scriptの設定を行います。

１．以下のURLからGoogle Driveを開きましょう。 （Googleアカウントがない場合は、作成してください）

https://drive.google.com/

２．左上の「新規」ボタンよりGoogleスプレットシートを開いてください。

３．メニューバーの「ツール」 -> 「スクリプトエディタ」を選択します。

これでGoogle Apps Scriptのエディタが開いたと思います。

一旦、この状態で公開してしまいます。

４．メニューバーの「公開」 -> 「ウェブアプリケーションとして導入」を選択し、 プロジェクト名を入力して、以下の設定で公開します。

  • 次のユーザーとしてアプリケーションを実行：自分
  • アプリケーションにアクセスできるユーザー：全員（匿名ユーザーを含む）

ここで現在のウェブ アプリケーションの URLに表示されたURLをコピーして控えておきます。

３．Googleドキュメントの作成

デバッグログの出力用にGoogleドキュメントを作成します。

１．以下のURLからGoogle Driveを開きましょう。

https://drive.google.com/

２．左上の「新規」ボタンよりGoogleドキュメントを開いてください。

３．作成されたドキュメントに任意の名前をつけて保存します。

GoogleドキュメントのURLの中から「{ドキュメントID}」の部分をメモしておいてください。

https://docs.google.com/document/d/{ドキュメントID}/edit

４．LINE Developperの設定

・LINE Developperへ開発者登録し、プロバイダーを登録する

まずはLINE Developperへアクセスしましょう！

https://developers.line.me/ja/

以下の公式ドキュメントに従って手順1～3まで登録しましょう。

https://developers.line.me/ja/docs/messaging-api/getting-started/

・チャネルを作成する

  1. 作成したプロバイダーへアクセス
  2. 「新規チャネル作成」をクリック
  3. 「Messaging API」を選択
  4. 以下の事項を入力し、チャネルを作成する
    • アプリアイコン画像
    • アプリ名
    • アプリ説明
    • プラン（※フリーを選択）
    • 大業種、小業種
    • メールアドレス

作成したチャネルの「チャネル基本設定」で以下の設定をします。

・メッセージ送受信設定
  • アクセストークン（ロングターム）：発行する（発行されたアクセストークンはメモしておいてください）
  • Webhook送信：「利用する」へ変更
  • Webhook URL：Google Apps Scriptの設定でメモしたURLを指定
・LINE@機能の利用
  • 自動応答メッセージ：「利用しない」へ変更
  • 友だち追加時あいさつ：任意のメッセージを設定ください。

以上でLINE側の設定は完了です。

５．Google Apps Scriptのソースコード

ソースコード上部の「\$～～～\$」の箇所はこれまでの説明の中でメモして頂いた値へ書き換えた上でご利用ください。

var AIMAKER_MODEL_ID = $AIメーカーで作成したモデルのIDを指定してください$;
var AIMAKER_API_KEY = "$AIメーカーのAPIキーを指定してください$";
var LINE_ACCESS_TOKEN = "$LINE Developperで発行されたアクセストークンを指定してください$";
var GOOGLE_DOCS_ID = "$GoogleドキュメントのドキュメントIDを指定してください$";
var doc = DocumentApp.openById(GOOGLE_DOCS_ID);

function doPost(e){
  Logger.log("Post request.");
  try {
    var json = JSON.parse(e.postData.contents);
    var token= json.events[0].replyToken;
    var url = 'https://api.line.me/v2/bot/message/'+ json.events[0].message.id +'/content/';
    var image = getImage(url);
    var base64 = Utilities.base64Encode(image.getContent());
    var message = getResult(base64);
    if (message == '') {
      message = "識別できませんでした。";
    }
    sendLineMessage(message, token);
  } catch (e) {
    Logger.log("ERROR: %s", e)
    message = "処理に失敗しました。"
    sendLineMessage(message, token);
    doc.getBody().appendParagraph(Logger.getLog());
  }
  doc.getBody().appendParagraph(Logger.getLog());
}

function getImage(url){
  return UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN,
    },
    'method': 'GET'
  });
}

function getResult(base64){
  var result = '';
  var url = 'https://aimaker.io/image/classification/api';
  var payload = {
    "id": AIMAKER_MODEL_ID,
    "apikey": AIMAKER_API_KEY,
    "base64": base64
  };
  var response = UrlFetchApp.fetch(url, {   
    method: 'POST', 
    payload: payload, 
    muteHttpExceptions: true
  });
  response = response.getContentText();
  Logger.log(response); 
  var json = JSON.parse(response);
  var labels = sortLabel(json.labels);
  if (labels[0].label && labels[0].score){  
    result = 'この画像の診断結果は、「' + labels[0].label + '： ' + (Math.round(labels[0].score * 10000) / 100) + "％」です！\n\n";
  }
  for (var i in labels) {
    if (labels[i].label && labels[i].score) {
      result = result + labels[i].label + '： ' + (Math.round(labels[i].score * 10000) / 100) + "％\n";
    }
  }
  return result;
}

function sortLabel(labels){
  labels.sort(function(a,b){
    if (a.score > b.score) return -1;
    if (a.score < b.score) return 1;
    return 0;
  });
  return labels;
}

function sendLineMessage(message,token){
  var url = "https://api.line.me/v2/bot/message/reply";
  return UrlFetchApp.fetch(url, {
    'headers': { 
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + LINE_ACCESS_TOKEN,
    },
    'method': 'POST',
    'payload': JSON.stringify({ 
      'replyToken': token,
      'messages': [
        { 
          "type": "text",
          "text": message
        } 
      ], 
    })
  });
}

最後に

手順を参考に画像認識AIを使ったLINE BOTをぜひ作ってみてください。

この記事はあくまでもテンプレートと思って頂き、画像認識AIのネタを変えたり、診断結果をカスタマイズしてみたり、などをしてみるともっと面白いものができるかと思います。

AIメーカーに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！

・文字起こし

・画像認識