画像から文字を抽出し、翻訳するLINE BOTを作ろう！　GoogleAppsScript × LINE × CloudVision API #LINEmessagingAPI

この記事について

英語の翻訳をするためにGoogle翻訳を使用する機会は多いと思います。
基本はそれで事足りますが、概要だけ素早く理解したいとき等にコピペして、、という作業は煩わしい時がありますよね。また、場合によって翻訳したい英文が紙媒体だったり、、
そこで、今回はLINEに翻訳したい英文の書いてある画像を送るだけで、翻訳してくれるBOTを作ることを思い立ったわけです。
未経験者でも大丈夫です！　作っていきましょう

全体のイメージ

全体のイメージはこんな感じです。

成果物

それでは作っていきましょう

事前準備

まず、Googleアカウントが必要になりますので、ない方は作成しましょう！
アカウントの無い方はこちらから作成できます。
https://accounts.google.com

LINE developersの設定

次に、LINE developersの設定です。これはイメージ図でいう自分のLINEとLINE サーバーをつなげる過程です。

こちらから設定していきます。
https://developers.line.biz/ja/
アクセス後、
「ログイン」をクリック(connect with LINE Developとの表記の下）→「LINEアカウントでログイン」→「QRコードでログイン」
でQRコードが表示されると思いますので、自分のLINEから表示されたQRコードをスキャンして「ログインする」をクリックしてください。
その後、パソコン画面に表示された暗証番号を入力し、「本人確認」をクリックして下さい。

ログインできない場合：　
ラインの設定を変更する必要があります。「設定」→「アカウント」→「ログイン許可」にチェックを入れてください。

プロバイダーの作成

その後、プロバイダーの「作成」をクリックし、プロバイダー名を入力後、「作成」をクリックして下さい。（プロバイダー名は何でもよいですが、思いつかない方は文字抽出とかにすれば良いかと思います。）

チャンネルの作成

「チャンネル設定」の「Messaging API」をクリックします。
必要な情報を入力し、「作成」をクリック→「同意」をクリックしてください。
（チャネル名はラインに表示される名前です。入力必須項目だけで構いません。大業種、小業種は適当でも大丈夫です。）

「Messaging API設定」のタブをクリックし、一番下にある「チャンネルアクセストークン（長期）」の「発行」をクリックし、発行されたことを確認してください。
同ページの上部にある「ボット情報」にあるQRコードを携帯で読み取り、友達登録をしてください。友達登録後、トーク画面で何か文章を送ってください。「メッセージありがとうございます!、、、」と返信されれば、完璧です。
（ちなみにこの返信される文はチャンネルアクセストークンの少し上にある「応答メッセージ」から「編集」→詳細設定の項の「応答メッセージ設定」から好きな文章に変更できます。）

Cloud Vision APIの設定

まず、こちらにアクセス
https://console.cloud.google.com

このような表示が出る場合

右上の有効化をクリックし、必要事項を記載して「無料トライアルを開始」をクリックしてください。
クレジットカードの情報が必要ですが、無料トライアル期間が終了しても、有料アカウントに手動でアップグレードしない限り、課金されることはありません。ロボットでないことを確認するために使用するようです。
また、90 日間有効の $300 分のクレジットもついてきます。クレジットを使い切っても、自動請求を有効にするまで課金されることはありません。

その後、画面上部のプロダクトとリソースの検索から「Cloud vision API」と検索してください。

この画面が表示されたら、「有効にする」をクリックしてください。

その後、この画面が表示されると思います。左の「認証情報」をクリックしてください。

この API と互換性のある認証情報の項にある「API とサービスの認証情報」をクリックし、認証情報の表示の横にある「認証情報の作成」から「APIキー」をクリックしてください。

APIキーを作成しましたと表示され、自分のAPIキーが発行されます。
「閉じる」を押し、APIキーの項に追加されていることを確認したら、左上のGoogleCloudPlatformの表示の左の三本線のところをクリックし、「ホーム」を押します。
プロジェクト情報の項にプロジェクト名、プロジェクトID、プロジェクト番号が書いてあると思います。プロジェクト番号を後ほど使用しますのでメモするなりしてください。

GoogleAppsScriptとGoogleCloudPlatformの連携

今度はGoogleAppsScriptとGoogleCloudPlatformとを連携させます。イメージ図でいう右の箇所です。
まず、Googleドライブを開いてください。
Googleドライブの「新規」をクリック→「その他」→「GoogleAppsScript」をクリックしてください。
表示された画面の左上に「無題のプロジェクト」と表示されていると思います。

そのままでも問題ありませんが、分かりやすく名前を変更しましょう！「無題のプロジェクト」をクリックすれば変更できます。
「リソース」のタブ→「Cloud platform プロジェクト」をクリックします。
するとこちらの画面が表示されます。

「ここにプロジェクト番号を入力」の欄に先ほどのプロジェクト番号を入力します。

「プロジェクトに切り替えるには、OAuth 同意画面を設定する必要があります。同意画面を設定するには、こちらをご覧ください。」と表示された場合、「こちら」をクリックし→「外部」→「アプリケーション名」を適当に入力し、保存を押し、再度行ってください。
コード.gsの内容を

function myFunction() {
  console.log("hello!");
}

に書き換え、虫みたいなマークの左にある三角のマークを押し、実行します。
その後、「表示」から「stackdriver logging」を」クリックし、hello!と表示されていれば、GoogleAppsScriptとGoogleCloudPlatformは完璧です！

GoogleAppsScriptのコード作成

あともう一息です。GoogleAppsScriptでコードを書いていきましょう。
コードは以下の通りです。

function doPost(e) {
  var line = JSON.parse(e.postData.contents);
  var lineMsg = line.events[0].message.text;
  var replyToken = line.events[0].replyToken;
  var messageId = line.events[0].message.id;
  var LINE_ACCESS_TOKEN = "チャネルアクセストークン（長期）をコピペしてください";
  var lineImageUrl = "https://api.line.me/v2/bot/message/"+messageId+"/content/";
  var lineResponse = UrlFetchApp.fetch(lineImageUrl,{"headers":{"Authorization":"Bearer "+LINE_ACCESS_TOKEN}}).getContent();
  var blob = Utilities.base64Encode(lineResponse);
  var API_KEY ="先ほど生成したCloud VisionのAPIキーをコピペしてください";
  var visionUrl ="https://vision.googleapis.com/v1/images:annotate?key="+ API_KEY;
  var payload = JSON.stringify({
    "requests":[{
      "image":{"content":blob},
      "features":[{"type":"TEXT_DETECTION"}]
    }]
  });
  var visionResponse = UrlFetchApp.fetch(visionUrl,{"contentType":"application/json","payload":payload,}).getContentText();
  var visionJson = JSON.parse(visionResponse);
  var visonText = visionJson.responses[0].fullTextAnnotation.text;
  var vison_translate_Text = LanguageApp.translate(visonText, "", "ja");
   var messages =[{"type":"text","text":visonText},{'type': 'text','text': vison_translate_Text,}];
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply",{"headers":{"Content-Type":"application/json; charset = UTF-8","Authorization":"Bearer "+LINE_ACCESS_TOKEN,},
                    "payload":JSON.stringify({"replyToken":replyToken,"messages":messages})});
  }

(var LINE_ACCESS_TOKENとvar API_KEYの箇所だけ変更してください。）

入力後、保存ボタン（三角マークの二個左）を押すか、ctrl + s で保存してください。
次に「公開タブ」→「ウェブアプリケーションとして導入...」を押してください。
projrct verssion:をnew

Who has access to the app:をAnyone,even anonymous
にしてください。ここ大事です。

Authorization requiredが表示されたら。。
「許可を確認」→アカウントを選択→このアプリは確認されていませんとの表示ページの「詳細」をクリック→「(安全ではないページ）に移動」をクリック」→「許可」でOK!

その後、Deploy as web appと表示されたページのcurrent web app URL:のところにURLがある。それをコピーします！

GoogleAppsScriptとLINEの連携

最後！
GoogleAppsScriptとLINEの連携をさせましょう。
イメージ図でいう真ん中のところですね！
Messaging API設定（チャネルアクセストークンがあった場所）に、Webhook設定があります。Webhook URL の項にある「編集」をクリックし、先ほどコピーしたURLを入れましょう！
「検証」を押して、成功と表記されたらWebhookの利用をオンにしましょう。（緑色がオン）

完成

改めて、ラインで画像を送ってみましょう。英文画像を送ったなら原文と翻訳された文が返ってくるはずです。

最後に

vision APIは月1000ユニットまでは無料ですが、それ以降は料金が発生します。

画像から文字を抽出し、翻訳するLINE BOTを作ろう！ GoogleAppsScript × LINE × CloudVision API