見出し画像

【チュートリアル】初心者でも簡単に画像認識AIを組み込んだLINE BOTが作れる！

2z＠AIメーカー開発者


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

趣味でWebサービスを開発したり、運営したりしています。

以前、AIメーカーで作成した画像認識AIを誰でも使える（プログラムへ組み込める）ようにAPIを公開しましたので、今回はそのAPIを活用したLINE BOTの作り方をご紹介いたします！

■今注目のAIアプリを簡単に作れる、「AIメーカー」のAPIを公開しました！

このAPIを使って誰でも作れるようにチュートリアルとしてまとめておきたいと思います。


作ったもの

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

「松屋警察」

LINEに牛丼の画像をアップすると、アップされた画像から「松屋」、「すき家」、「吉野家」のうち、どこの牛丼に近いかを判定します。

本チュートリアルに従って作ることで初心者の方でも、上記のようなオリジナルの画像認識AIを使ったLINE BOTを作ることができます！

ぜひ自分でアイディアを考えてみて、様々なLINE BOTの作成に挑戦してみてください！


まずはシステム概要からご紹介します！

システム概要

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

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

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/2475

なお、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 Developerの設定

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

まずはLINE Developerへアクセスしましょう！
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 Developerで発行されたアクセストークンを指定してください$";
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メーカーに少しでも興味をもって頂けましたら、ぜひフォローやいいね、リツイートなどで応援お願いします！

・Twitter： @2zn01

・文字起こし

・画像認識


また、僕が個人でWebサービス開発を始めたきっかけは以下の記事にまとめています。

今、個人で運営している主要なWebサービスは以下の通りです。

・ツイレポ

・AIメーカー


最後まで読んで頂き、ありがとうございました！

それでは！

いいなと思ったら応援しよう！