![見出し画像](https://assets.st-note.com/production/uploads/images/17079664/rectangle_large_type_2_9be45d584f74fbdc333d29c02791f6c0.jpeg?width=1200)
【初WebAIアプリ作成】写真を送れば翻訳してくれるLINEボットアプリを作成してみた
#非エンジニアのコーディング
— Toshi@MD,PhD 🇺🇸 (@tokitky) December 20, 2019
文字起こしくんを改良して、日英翻訳機能もつけて、文書から日本語を読み取って、英語に翻訳するLINEボット作ってみた! pic.twitter.com/kXA9WaJ3Ft
自動翻訳はもどかしい?
自動翻訳は便利なんだけど、単語や文章を入力するのが面倒だと思ったことはありませんか?特に外出中でスマホしかない時や、非英語兼の旅先でアルファベットが標準的なもの出なかったりした時。。ちょっと入力するのに躊躇しますよね。あと自分は紙の本や雑誌を読んでいる時などもちょっとめんどくさいなと感じます。
それでスマホのカメラで撮影した画像を元に翻訳してくれるスマホアプリがあればいいなと思いました!
ちょうどこんな感じ
わからない言語はLINEに聞こう!
— Toshi@MD,PhD 🇺🇸 (@tokitky) December 20, 2019
Google ApiとGoogle app scriptを利用した自作独英LINE翻訳アプリ‼️
こういうの旅行に便利⁈
というかこういうアプリが無料でほぼ素人でも作れてデプロイできるって恐ろしい時代や… pic.twitter.com/5GPgJ9LZeb
文字起こしくんが使えないか?
ちょっと前にネットで文字起こしくんというアプリが話題になりました。APIを利用してLINEで画像を送るとその画像からGoogleのOCRのソフトを利用して文字を起こしてくれるという優れもののアプリです。
【拡散希望】
— DAI (@never_be_a_pm) February 3, 2019
カドカワさんから『独学プログラマーのためのAIアプリ開発がわかる本』を出版します。5万RT、12万ユーザー登録者数を誇る『文字起こし君』の作り方を解説しています。「プログラミングをはじめたばかり。アプリ作ってみたい!」という方に非常におすすめです!https://t.co/In0veJVkNQ pic.twitter.com/76JnEqizKz
開発者の河合大さんがブログや書籍も書かれていて、わかりやすく説明されているので、プログラミング経験がそんなになくても人工知能アプリがつくれてしまうというもの。これを利用して
まずは文字起こしくんをつくる
それからその情報を元に翻訳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
ようやく完成です。
河合大さんの本見て、linebotで文字起こしくん、作ってみた!面白い! pic.twitter.com/uiW7Ha3aQ8
— Toshi@MD,PhD 🇺🇸 (@tokitky) December 20, 2019
Google App Scriptでの翻訳は、LanguageApp が便利!
次にしないといけないのはここで得られたOCRの結果を翻訳ソフトに渡してやること。いろいろと調べたのですが、Google App ScriptではLanguageAppクラスを利用するのが便利なようです。
そこで最後にLanguageAppを噛ませて、
日→英語翻訳
#非エンジニアのコーディング
— Toshi@MD,PhD 🇺🇸 (@tokitky) December 20, 2019
文字起こしくんを改良して、日英翻訳機能もつけて、文書から日本語を読み取って、英語に翻訳するLINEボット作ってみた! pic.twitter.com/kXA9WaJ3Ft
が完成。
以下のQRコードを読み込んでLINEで友達申請していただいて、画像を投げていただけると翻訳してくれます!
来年のヨーロッパ旅行に向けて、
独→英も作ってみました。
あと読書用に英→日も作成
気になるコードはこんな感じ!
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のおかげで割と手軽にデプロイまでできてしまうのが驚き!アイディア次第で色々面白いものが作れそうです!!