Zenn
🦄

【GAS】好きなアニメキャラに送信したテキストを翻訳してくれるLINEBOTを作成した話

2023/08/29に公開
Bot
GAS
LINE Bot
tech

こんにちは、ぐらじえです。

最近 GAS（Google Apps Script）に興味を持ったので、これなら気軽に始められそう！と感じ、翻訳 LINEBotを作ってみた話を紹介しようと思います。

ちなみに全部「韓国語」に翻訳してくれるようになってます笑

難易度としては、javaScript が理解できれば容易に理解できるレベル感だと感じました！
想像以上に簡単に作成できました！

大まかにやったこと

  1. LINE アカウントの作成
  2. 翻訳 API の作成（GAS）
  3. LINEBot 用のスクリプト作成（GAS）
  4. LINE アカウントでスクリプトを実行するように設定

LINE アカウントの作成

まずは以下から、LINE 公式アカウント作成しました！

https://manager.line.biz/

アカウント作成後は LINEDevelopers へ移動し、

https://developers.line.biz/console/

チャネルアクセストークン（長期）の取得と、「Webhook の利用」をオンに変更しました。

これで大体、LINE 側で設定はほぼほぼ完了です。
抜けている箇所あったらすみません、、、

翻訳 API の作成

初めて GAS（Google Apps Script）を使用したのですが、思ったより簡単にできました！
ファイルの作成方法は、Google Drive の右クリックで Google Apps Script を選択するだけでした。
使用感もほぼ、JavaScript と大差なかった印象です！

ここから、ソースを書いていく工程ですが、まずは翻訳 API の作成から始めました。

main.gs
function doGet(translateText) {
  var textParameter = translateText.parameter;
  var translatedText = LanguageApp.translate(
    // text：Hello
    // sourceLanguage：en（※空文字なら自動判別）
    // targetLanguage：ja
    // 【言語サポート 文字コード】
    // https://cloud.google.com/translate/docs/languages?hl=ja
    textParameter.text,
    textParameter.sourceLanguage,
    textParameter.targetLanguage
  );
  var body;

  if (translatedText) {
    body = {
      code: 200,
      text: translatedText,
    };
  } else {
    body = {
      code: 400,
      text: "Bad Request",
    };
  }

  var response = ContentService.createTextOutput();
  response.setMimeType(ContentService.MimeType.JSON);
  response.setContent(JSON.stringify(body));

  return response;
}

やってることはシンプルで、API のリクエストとして「翻訳したいテキスト」「翻訳したいテキストの言語」「翻訳したい言語」を受け取りそれらを基に"LanguageApp.translate()"の関数を使用して翻訳を行う。

そして、成功したら 200 番、失敗したら 400 番を返す仕組みです。
レスポンスも Json 形式で返すようになっています！

スクリプトが完成したら、「ウェブアプリ」としてデプロイして、下記のような URL でアクセスしたら翻訳 API の完成です！

■ URL
https://${デプロイしたURL} + "?text=" + ${ text } + "&sourceLanguage=" + ${ sourceLanguage } + "&targetLanguage=" + ${ targetLanguage }

■ Sample URL
https://○○?text=Hello&sourceLanguage=en&targetLanguage=ja

LINEBot 用のスクリプト作成

翻訳 API の作成方法と同じ要領で、こちらもコードを記述！
早速コードを紹介します。

main.gs
// LINE Message API アクセストークン
const ACCESS_TOKEN = ${ ACCESS_TOKEN };
// 翻訳APIのURL
const TRANSLATE_API_URL =
  "${ deploy URL }?text=";
// 文字コード（https://cloud.google.com/translate/docs/languages?hl=ja）
const sourceLanguage = ""; // 空文字で言語を自動判別
const targetLanguage = "ko"; // 翻訳したい文字コード

function doPost(e) {
  const events = JSON.parse(e.postData.contents).events[0];
  const replyToken = events.replyToken;
  const userMessage = events.message.text;

  // 翻訳APIを使用
  var response = UrlFetchApp.fetch(
    TRANSLATE_API_URL +
      userMessage +
      "&sourceLanguage=" +
      sourceLanguage +
      "&targetLanguage=" +
      targetLanguage
  ).getContentText();
  var translatedText = JSON.parse(response).text;

  // 返信処理
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", {
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + ACCESS_TOKEN,
    },
    method: "post",
    payload: JSON.stringify({
      replyToken: replyToken,
      messages: [
        {
          type: "text",
          text: translatedText,
        },
      ],
    }),
  });
}

${ ACCESS_TOKEN }の箇所に取得したアクセストークンを設定します。

処理の概要としては、送信されてきてテキストを作成した「翻訳 API」を使用して翻訳し、その後 LINEDevelopers で用意されている返信用の API を使用して、LINE 上でリプライを送るといった流れです。

このスクリプトも完成したら、「ウェブアプリ」としてデプロイします。

LINE アカウントでスクリプトを実行するように設定

最後は LINEDevelopers にログインし、対象のアカウントを選択、そして「Messaging API 設定」を開きます。

そこで「Webhook 設定」を編集し、リプライ用のスクリプトでデプロイした URL をコピペします！

これで完成です！！

まとめ

意外と時間かかるかな～と思ってスタートしましたが、前提知識があまりない状態からでも、小一時間ほどであっさり完成しました。

GAS って便利だし、LINE の API も便利だな～って感じました。

次は、ChatGPT の API なんかも駆使して、よりアニメキャラに寄せたリプライを返してくれる Bot なんかも作りたいな～って思います。

Discussion