継続は力なり

タイトル通り定期的な更新を心掛けるブログです。

トップ > Google Apps Scripts > 話題の「文字起こしくん」を開発してハマったことまとめ

話題の「文字起こしくん」を開発してハマったことまとめ

Google Apps Scripts LINE Message API Google Vision API 機械学習

タダです。

この記事は、「後回し改善ウィーク」の4日目の記事です。今日で平成が終わりですね。平成中に読み終えたかった「独学プログラマーのためのAIアプリ開発がわかる本」を読了しました。

独学プログラマーのためのAIアプリ開発がわかる本

独学プログラマーのためのAIアプリ開発がわかる本

書籍の概要

本書は、Daiさんの Qiita 記事で紹介されている内容が書籍化されたものになります。

qiita.com

本書では「文字起こしくん」という LINE BOT を開発するのですが、技術として、LINE Message API(以下、Message API)、Google App Script(以下、GAS)、Google Vision API(以下、Vision API)が使われています。以前から Message API と Vision API を使ってみたいと思っていたので購入しました。こちらの処理のイメージ図は、上記の記事より引用させていただきました。

https://camo.qiitausercontent.com/af56456ae7f20030acc23c27447bb14d0593d808/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3133343730342f31303936336463662d363065662d323465372d616430632d6433613939353663646535302e706e67

GAS は以前学んだことをまとめましたが、Message API と Vision API は初めて触ったのでハマった部分がありました。この記事では、そのハマった箇所についてまとめていきます。なお、僕のプログラミングスペックは基本的な文法はわかるが、API のドキュメント読んだり、自分で複雑なロジックを組んだりはまだできないレベルです。

sadayoshi-tada.hatenablog.com

本書の完成物

最終的に完成するのは、以下のような画像を LINE BOT に対して送信すると、Vision API で解析して画像の中の文字情報を返してくれるものになります。この前出た大会の画像を送ったら、文字情報を読んで返してくれました。

f:id:sadayoshi_tada:20190430221404j:plain f:id:sadayoshi_tada:20190430221408p:plain

本書でハマった部分

そしてハマった箇所は、大きく以下の3点です。それぞれ振り返っていきます。

  • Message API から GAS への Webhook 設定する際の権限設定
  • GAS のコードを修正した際の Webhook 設定も修正する必要があること
  • Message API のリクエストヘッダーにおける認証情報の記述方法

Message API から GAS への Webhook 設定する際の権限設定

まずハマったのが、GAS のアプリケーション公開設定の誤りから Message API から Webhook ができなかったことです。赤枠で囲んだ箇所を「全員(匿名ユーザーを含む)」と設定していないと Webhook の接続がエラーが発生します。エラーメッセージが権限設定の問題かと想起しにくいメッセージ担っているため最初ハマった時にどこで間違ったのか戸惑いました。。 f:id:sadayoshi_tada:20190430222008p:plain

f:id:sadayoshi_tada:20190430222904p:plain

GAS のコードを修正した際の Webhook 設定も修正する必要があること

次に、GAS のコードを何回も修正したのですが、アプリケーションのデバッグをしてみたものの下記の画像のようにログに表示されているメッセージが全て一緒になっていました。

f:id:sadayoshi_tada:20190430223640p:plain

本書には、GAS のコードを更新するたびに Webhook に登録する URL を更新しなきゃいけない事が記載されてましたが見落としていました。GAS のコードを修正後、Webhook の URL も更新することを行えば期待通りの挙動に変わりました。

Message API のリクエストヘッダーにおける認証情報の記述方法

最後に、LINE BOT に送った画像を取得する際、GAS の POST リクエストヘッダー情報に LINE Developers のアクセストークンを送ってあげる必要があります。その際の、コードの書き方で注意が必要になります。ヘッダーの情報の Authorization の部分で、"Bearer(スペース入れる)" +アクセストークン情報 と記述します。僕は Bearer の後にスペースを入れておらず、アクセストークン情報も変数化していたのですが、Bearer との間に当初不要なスペースを入れていました。

正しい記述

 "Authorization": "Bearer " +アクセストークン情報

誤っていた記述

 "Authorization": "Bearer" + アクセストークン情報

エラーメッセージは以下のようになっていました。リクエストヘッダーを作っている部分でのエラーとは認識していたのですが、不要なスペースによって引き起こされたとは思わず、スペースの問題に気づけずに2時間ほどハマりました。同じようなエラーに遭遇した方は、不要なスペースが入っていないかを確認してみてください。。

https://api.line.me/v2/bot/message/100001/content/ のリクエストに失敗しました（エラー: 404）。サーバー応答の一部: {"message":"Not found"}（応答の全文を見るには muteHttpExceptions オプションを使用してください） at xxxx(コード:7)

参考情報

developers.line.biz

まとめ

「独学プログラマーのためのAIアプリ開発がわかる本」に取り組んで、僕がハマったことをまとめてみました。上記以外は特にハマらず、すんなりと開発ができたのでとても良心的な内容になっています。

個人的には実用的なアプリケーションを開発できたこともよかったのですが、各社のサービスや API の仕様を確認しつつ実装していくのもいい経験でした。次は本書で学んだことを活かして、違うクラウドサービスの API で遊んでみたり、Python で実装も行なっていきたいと思います！