Google Apps ScriptとLINEボットで翻訳アプリ作成 – GASによる翻訳アプリの作成 –

Google Apps Script（GAS）のLanguageAppを利用して、英語と日本語の双方向の翻訳をするLINEボットをプログラミングをしていきます。

GoogleのOCR技術を利用して、テキストだけではなく、画像内の文字列に対しても、翻訳をかけていきます。

このプログラムで出来る事
具体的な手順（３つの手順で10～30分程度）
1. 関連

このプログラムで出来る事

下の図の様に、LINEによる翻訳機が作成できます。

このアプリを利用すれば、英語でのちょっとした言い回しがわからない、英語の書籍の翻訳をしたいなどと言った場合に、ブラウザを立ち上げてGoogle翻訳などのWebサイトを立ち上げたりする手間や、パソコンなどで打ち直しをする手間を省略することが出来ます。

我が家ではこれを作成したことで、中学生の息子が電子辞書を使わなくなりました。（良くも悪くもありますが。。）

具体的な手順（３つの手順で10～30分程度）

大きくは以下の３つです。

OCR画像一時保存用フォルダの作成
LINE Developerアカウントの作成とGoogle Apps Scriptソースの貼り付け
DriveAPIのサービス追加、及び、APIの有効化

LINE Developerアカウントの作成ができていれば作業としては10分もかからないものです。尚、Googleアカウント（Gmailなどを利用する為のアカウント）は予め作成されているものとします。

OCR画像一時保存用フォルダの作成

ブラウザからGoogleDrive（https://drive.google.com/drive/）へ移動し、任意のフォルダを作成します。

　手順：新規ボタン　→　フォルダ

この時、作成したフォルダのフォルダID（※）は後ほど利用する為、メモ帳にでも保持しておいてください。

（※）フォルダを開いたときにURLバーに表示される以下の部分。
　　　https://drive.google.com/drive/folders/[フォルダID]

LINE Developerアカウントの作成とGoogle Apps Scriptソースの貼り付け

LINE Developerアカウントの作成について

作成方法を説明した動画がありますので、そちらを参照してください。

Google Apps Script（GAS）ソースの貼り付けについて

上記の動画内で最後に張り付けるソースコードを以下に差し替えてください。（ソースコード内に、コメントを記載したため、解説は割愛します。）

// LINE Message API アクセストークン
var ACCESS_TOKEN = "[LINE Message API アクセストークン]";
// OCRフォルダID
var OCR_DIR_ID = "[フォルダID]";
// リプライ時URL
var REPLY = "https://api.line.me/v2/bot/message/reply";
// 翻訳元言語
var MOTO_GENGO = "ja";
// 翻訳先言語
var SAKI_GENGO = "en";
// 参考）言語コードのリスト
// https://cloud.google.com/translate/docs/languages

/** 
* doPost 
* POSTリクエストのハンドリング
*/
function doPost(e) {  
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if(event.type == "message") {
      var json = JSON.parse(e.postData.contents);
      reply(json);
    } else if(event.type == "follow") {
      // 友達登録した際の処理をここに書く
    } else if(event.type == "unfollow") {
      // 登録解除した際の処理をここに書く
    }
 });
}

/** 
* doGet
* GETリクエストのハンドリング
*/
function doGet(e) {
  return ContentService.createTextOutput("SUCCESS");
}

/** 
* reply
* ユーザからのアクションに返信する
*/
function reply(data) {
  var folder = DriveApp.getFolderById(OCR_DIR_ID);
  
  var event = data.events[0];
  // 返信用トークンの取得
  var replyToken = event.replyToken;
  // 返却テキスト
  var replyText = "";
  
  // 画像が添付された場合の処理
  if(event.message.type == 'image'){
    // LINEのメッセージIDから画像のURLを取得する
    var messageId = event.message.id;
    var imageEndPoint = "https://api-data.line.me/v2/bot/message/" + messageId + "/content";
    // 送られた画像をBlob形式で取得
    imageBlob = getImageBlobByImageUrl(imageEndPoint);
    var docName = event.source.userId;
    var Request_body = {
      title: docName, 
      mimeType: 'image/jpeg'
    }        
    // 画像を保存
    Drive.Files.insert(Request_body, imageBlob, { ocr: true });
    var newFile = DriveApp.getFilesByName(docName).next();
    folder.addFile(newFile);
    //ルートディレクトリに勝手にできてしまうファイルを削除
    DriveApp.getRootFolder().removeFile(newFile);
    
    var docs = folder.getFilesByType('application/vnd.google-apps.document');
    // 今作成したファイルを取得
    if (docs.hasNext()) {
      var file = docs.next();
      var docId = file.getId();
      var doc = DocumentApp.openById(docId);
      
      // 画像内の文字列を取得
      var allText = doc.getBody().getText().replace(/\n/g,' ');
      // 取得した文字列を翻訳
      var jaText = LanguageApp.translate(allText, SAKI_GENGO, MOTO_GENGO);  
      // 英語：.や?で改行。日本語：。や？で改行しながら、二つを結合
      replyText = allText.replace(/\./g,'\.\n').replace(/\?/g,'\?\n') + '\n' + jaText.replace(/。/g,'。\n').replace(/？/g,'？\n')
      
      // 作成したGoogleドキュメント削除（やらないと永遠と増えてしまう。）
      folder.removeFile(file);    
      
    }
  // 文字列が送付された場合の処理
  } else if (event.message.type == 'text') {
    // LINEからのメッセージを取得
    var postMsg = data.events[0].message.text;
    // 翻訳文取得
    var allText = LanguageApp.translate(postMsg, MOTO_GENGO, SAKI_GENGO);
    // 逆翻訳文を取得
    var jaText = LanguageApp.translate(postMsg, SAKI_GENGO, MOTO_GENGO); 
    
    replyText = allText + '\n' + jaText
    
  }  else {
    replyText = "なにもない";
  }
  
  if(replyText == ""){
    return;
  } else {
    // replyするメッセージの定義
    var postData = {
      "replyToken" : replyToken,
      "messages" : [
        {
          "type" : "text",
          "text" : replyText
        }
      ]
    };
    
    // リクエストヘッダ
    var headers = {
      "Content-Type" : "application/json; charset=UTF-8",
      "Authorization" : "Bearer " + ACCESS_TOKEN
    };
    
    // POSTオプション作成
    var options = {
      "method" : "POST",
      "headers" : headers,
      "payload" : JSON.stringify(postData)
    };
    
    return UrlFetchApp.fetch(REPLY, options);      
  }
}


// 送られた画像をBlob形式で取得
function getImageBlobByImageUrl(url){
  
  /* 
  * @params
  - url{string}: 取得したい画像のURL
  * @return
  * - imageBlob<string>: Blob形式で取得した画像ファイル
  */
  var res = UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'get'
  });
  
  var imageBlob = res.getBlob().getAs("image/jpeg").setName("temp.jpg");
  
  return imageBlob;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

// LINE Message API アクセストークン

var ACCESS_TOKEN = "[LINE Message API アクセストークン]";

// OCRフォルダID

var OCR_DIR_ID = "[フォルダID]";

// リプライ時URL

var REPLY = "https://api.line.me/v2/bot/message/reply";

// 翻訳元言語

var MOTO_GENGO = "ja";

// 翻訳先言語

var SAKI_GENGO = "en";

// 参考）言語コードのリスト

// https://cloud.google.com/translate/docs/languages

/**

* doPost

* POSTリクエストのハンドリング

function doPost(e) {

var events = JSON.parse(e.postData.contents).events;

events.forEach(function(event) {

if(event.type == "message") {

var json = JSON.parse(e.postData.contents);

reply(json);

} else if(event.type == "follow") {

// 友達登録した際の処理をここに書く

} else if(event.type == "unfollow") {

// 登録解除した際の処理をここに書く

}

});

}

/**

* doGet

* GETリクエストのハンドリング

function doGet(e) {

return ContentService.createTextOutput("SUCCESS");

}

/**

* reply

* ユーザからのアクションに返信する

function reply(data) {

var folder = DriveApp.getFolderById(OCR_DIR_ID);

var event = data.events[0];

// 返信用トークンの取得

var replyToken = event.replyToken;

// 返却テキスト

var replyText = "";

// 画像が添付された場合の処理

if(event.message.type == 'image'){

// LINEのメッセージIDから画像のURLを取得する

var messageId = event.message.id;

var imageEndPoint = "https://api-data.line.me/v2/bot/message/" + messageId + "/content";

// 送られた画像をBlob形式で取得

imageBlob = getImageBlobByImageUrl(imageEndPoint);

var docName = event.source.userId;

var Request_body = {

title: docName,

mimeType: 'image/jpeg'

}

// 画像を保存

Drive.Files.insert(Request_body, imageBlob, { ocr: true });

var newFile = DriveApp.getFilesByName(docName).next();

folder.addFile(newFile);

//ルートディレクトリに勝手にできてしまうファイルを削除

DriveApp.getRootFolder().removeFile(newFile);

var docs = folder.getFilesByType('application/vnd.google-apps.document');

// 今作成したファイルを取得

if (docs.hasNext()) {

var file = docs.next();

var docId = file.getId();

var doc = DocumentApp.openById(docId);

// 画像内の文字列を取得

var allText = doc.getBody().getText().replace(/\n/g,' ');

// 取得した文字列を翻訳

var jaText = LanguageApp.translate(allText, SAKI_GENGO, MOTO_GENGO);

// 英語：.や?で改行。日本語：。や？で改行しながら、二つを結合

replyText = allText.replace(/\./g,'\.\n').replace(/\?/g,'\?\n') + '\n' + jaText.replace(/。/g,'。\n').replace(/？/g,'？\n')

// 作成したGoogleドキュメント削除（やらないと永遠と増えてしまう。）

folder.removeFile(file);

}

// 文字列が送付された場合の処理

} else if (event.message.type == 'text') {

// LINEからのメッセージを取得

var postMsg = data.events[0].message.text;

// 翻訳文取得

var allText = LanguageApp.translate(postMsg, MOTO_GENGO, SAKI_GENGO);

// 逆翻訳文を取得

var jaText = LanguageApp.translate(postMsg, SAKI_GENGO, MOTO_GENGO);

replyText = allText + '\n' + jaText

} else {

replyText = "なにもない";

}

if(replyText == ""){

return;

} else {

// replyするメッセージの定義

var postData = {

"replyToken" : replyToken,

"messages" : [

{

"type" : "text",

"text" : replyText

}

]

};

// リクエストヘッダ

var headers = {

"Content-Type" : "application/json; charset=UTF-8",

"Authorization" : "Bearer " + ACCESS_TOKEN

};

// POSTオプション作成

var options = {

"method" : "POST",

"headers" : headers,

"payload" : JSON.stringify(postData)

};

return UrlFetchApp.fetch(REPLY, options);

}

// 送られた画像をBlob形式で取得

function getImageBlobByImageUrl(url){

* @params

- url{string}: 取得したい画像のURL

* @return

* - imageBlob<string>: Blob形式で取得した画像ファイル

var res = UrlFetchApp.fetch(url, {

'headers': {

'Content-Type': 'application/json; charset=UTF-8',

'Authorization': 'Bearer ' + ACCESS_TOKEN,

'method': 'get'

});

var imageBlob = res.getBlob().getAs("image/jpeg").setName("temp.jpg");

return imageBlob;

}

差し替え後、１．で保持しておいたフォルダIDをソースコード内の[フォルダID]の部分に貼り付けます。また、動画の内容に従って、[LINE Message API アクセストークン]の部分も修正します。

DriveAPIのサービス追加、及び、APIの有効化

Google Apps Scriptの画面で、サービスにDriveAPIを追加します。

　手順：サービス　→　DriveAPI選択　→　追加

追加したDriveAPIをGoogle Cloud PlatForm（https://console.cloud.google.com/）上で有効化します。

　手順：サイドメニュー　→　APIとサービス　→　APIとサービスの有効化　→　DriveAPIを検索　→　Google Drive API を有効化

終わりに

すべての手順が終わったら、Google Apps Script上で「デプロイ」をし、デプロイ時に作成されたURLを　LINE Developers – Messaging API設定 – Webhook設定のURLに貼り付けます。
貼り付ける場所がわからない場合は、動画内の該当箇所の説明を参照してください。