見出し画像

【初WebAIアプリ作成】写真を送れば翻訳してくれるLINEボットアプリを作成してみた

toshi

自動翻訳はもどかしい？

自動翻訳は便利なんだけど、単語や文章を入力するのが面倒だと思ったことはありませんか？特に外出中でスマホしかない時や、非英語兼の旅先でアルファベットが標準的なもの出なかったりした時。。ちょっと入力するのに躊躇しますよね。あと自分は紙の本や雑誌を読んでいる時などもちょっとめんどくさいなと感じます。

それでスマホのカメラで撮影した画像を元に翻訳してくれるスマホアプリがあればいいなと思いました！

ちょうどこんな感じ

文字起こしくんが使えないか？

ちょっと前にネットで文字起こしくんというアプリが話題になりました。APIを利用してLINEで画像を送るとその画像からGoogleのOCRのソフトを利用して文字を起こしてくれるという優れもののアプリです。

開発者の河合大さんがブログや書籍も書かれていて、わかりやすく説明されているので、プログラミング経験がそんなになくても人工知能アプリがつくれてしまうというもの。これを利用して

まずは文字起こしくんをつくる

それからその情報を元に翻訳APIと組み合わせて翻訳機能を持たせるということとしました。

Google App Script + LINE developer toolがキモ

このアプリのキモは、Googleの人工知能システムとLINEのやり取りをGoogle常においた簡単なスクリプトが行うというもので、基本はJavaScriptで動くシステムを作ることとなります。

必要なものは

Googleアカウント

Goole　App　Script　の設定

Google　Cloud　Consoleの設定

LINE developers アカウント

詳しくはDAIさんの本

が詳しいので割愛しますが、その他に


なども参考になりました！

ピットフォールは

1. LINEからコンテンツを取得するURLが本に掲載されているのと異なり今は

https://api-data.line.me/v2/bot/message/MessageId/content/

であること

2. Google App ScriptでStackdrive loggingの設定が代わり、LINEとのやりとりがlog画面に反映されず、デバックをなんらかのアウトプットをLINE出力してやらないといけないこと

でした。LINEのアウトプットの出力は

このプログを参考にmessageId を出力するコードをつかってデバッグしてました。

意外とこの二つにいろいろと時間がかかりすぐ終わるはずが数時間暗闘w

ようやく完成です。

Google App Scriptでの翻訳は、LanguageApp が便利！

次にしないといけないのはここで得られたOCRの結果を翻訳ソフトに渡してやること。いろいろと調べたのですが、Google App ScriptではLanguageAppクラスを利用するのが便利なようです。

そこで最後にLanguageAppを噛ませて、

日→英語翻訳

が完成。

以下のQRコードを読み込んでLINEで友達申請していただいて、画像を投げていただけると翻訳してくれます！

画像1

来年のヨーロッパ旅行に向けて、

独→英も作ってみました。

画像3

あと読書用に英→日も作成

画像2

気になるコードはこんな感じ！


var ACCESS_TOKEN = "YOUR LINE ACCESS_TOKEN";

function doPost(e) {

 // WebHookで受信した応答用Token
 var replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
 // ユーザーのメッセージを取得
 var userMessage = JSON.parse(e.postData.contents).events[0].message.id;
 // 応答メッセージ用のAPI URL
 var url = 'https://api.line.me/v2/bot/message/reply';
 // 画像取得用のAPI URL
 var lineImageUrl = "https://api-data.line.me/v2/bot/message/"+ userMessage +"/content/";
 
　//LINEからの画像取得
 const lineImageResponse = UrlFetchApp.fetch(lineImageUrl,{
   "headers": { //Http header setting
     "Content-Type" : "application/json; charset=UFT-8",
     "Authorization": "Bearer " + ACCESS_TOKEN,
   },
   "method" : "get" // here define method
 }).getContent(); 
 //画像情報のエンコード
 var lineImageBlob = Utilities.base64Encode(lineImageResponse);
 
　//GOOGLE VISON OCRへポスト
 const API_KEY = "YOUR　GOOGLE　API KEY" ;
 const visionRequestUrl ="https://vision.googleapis.com/v1/images:annotate?key="+API_KEY;
 const payload = JSON.stringify({
   "requests":[
     {
       "image":{
       "content":lineImageBlob
     },
       "features" :[
         {
           "type": "TEXT_DETECTION",
           "maxResults": 1
         }
        ]
     }
   ]
 }); 
 const visonTextResponse = UrlFetchApp.fetch(visionRequestUrl,{
   method: "POST",
   contentType: "application/json",
   payload: payload,
 })
 .getContentText();
const visionTextJson = JSON.parse(visonTextResponse); // change out put to JSON format

const visionText = visionTextJson.responses[0].fullTextAnnotation.text; //responses > full 

//英語から日本語へ翻訳
var english = LanguageApp.translate(visionText, 'en', 'ja');

//LINEへ出力
 UrlFetchApp.fetch(url, {
   'headers': {
     'Content-Type': 'application/json; charset=UTF-8',
     'Authorization': 'Bearer ' + ACCESS_TOKEN,
   },
   'method': 'post',
   'payload': JSON.stringify({
     'replyToken': replyToken,
     'messages': [{
       'type': 'text',
       'text': "Translate :"+english
     }],
   }),
   });
 
 return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
 
}

アプリを作るのははじめてでしたが、APIやGoogleのおかげで割と手軽にデプロイまでできてしまうのが驚き！アイディア次第で色々面白いものが作れそうです！！

この記事が気に入ったらサポートをしてみませんか？