GASで文字起こしLINEWORKSボット作成ハンズオン

Last Updated: 2021-05-30

はじめに

手順概要

このハンズオン手順はLINE WORKS のエンジニア向けコミュニティ LINE WORKS Tech Talkの勉強会「GASで文字起こしLINE WORKSボット作成ハンズオン」で利用したハンズオンです。

非営利のコミュニティ運営者で作成した手順ですが、個人や会社の皆さんに共有して社内勉強会や復習などで自由に使って頂いて構いません。

必要なもの

LINE WORKS（無料プランでもOK）にBot管理権限のある管理者でログインできること、あるいは、わからない場合やLINE WORKS環境を持っていない場合には当日18:30〜の準備フォローの時間帯でご参加ください（こちらの手順のBot登録の前まで終わっていればOKです。公式ページのこちらの動画も参考になります。）
Googleアカウント（無料アカウントでOKです。持っていない方はこちらの手順を参考にして作成しておいてください）
WindowsあるいはMacOSのPCでブラウザ（ChromeあるいはFireFox推奨）でインターネットに接続できること
（任意）カメラ付きのスマホでLINE WORKSにログインできること

準備

こちらのGithubにアクセスしZIPファイルをダウンロードしてください。

Lwtt-gas-ocrbot-main.zipファイルを解凍した「ハンズオン」というフォルダ配下を使用します。

API情報メモ用.txt
bot_icon.png
LWTT_logo.png

ハンズオンルール

わかるようであればハンズオン手順に従いどんどん先に進んでも大丈夫です
わからないことがあればスプレッドシートの質問欄に質問してください。質問以外の感想や簡単な質問であればZoomチャットに書き込んでもいいですが、流れてしまって拾えない場合がありますので、質問はスプレッドシートに入力頂けるとありがたいです。
「人に教える」ということで理解が深まります。運営メンバーだけでなく、参加者の皆さんもわかる内容なら是非質問に答えてください！間違ってても全部わからなくても大丈夫！

勉強会のConnpassページに動画を掲載していますが、チャットボットがいるルームに画像ファイルを送信すると

文字起こしして返してくれるボットを作ります。

LINE WORKSに画像を送ってから文字起こしされたテキストメッセージが返ってくるまでのデータの流れとシステム構成を理解しましょう。

以下のイメージ図をご確認ください。

①LINE WORKSクライアントからボットアカウントとのトークルームに画像ファイルを送信します。

②トークルームに画像ファイルが添付されたことをトリガーとしてBotプログラムが反応し、画像ファイルをLINE WORKSシステムから取得します。

③画像ファイルをGoogle Driveに置きます。

④画像ファイルをGoogleドキュメントで開きます。（≒文字起こし）

⑤Googleドキュメント内のテキストデータを取得し、画像ファイルとGoogleドキュメントファイルを削除します。

⑥文字起こしされたテキストデータをAPI経由で送信します。

⑦文字起こしされたテキストデータがBotアカウントからメッセージ送信されます。

上記の処理とデータの流れを意識してボットを作りましょう。

LINE WORKSのBot登録とAPIキーの発行を行います。構成図だとここの部分を作ります。

LINE WORKS Developer Consoleにログイン

LINE WORKSボットを作成するには、LINE WORKS Developer Consoleの利用が必要です。まず、LINE WORKS Developersサイトにアクセスし、右上の[Developer Console]ボタンをクリックします。

IDでログインもしくは携帯電話でログインのどちらかでログインします。

以下のような画面が表示されたら正常にログインできています。

APIの発行

公式ドキュメントに詳細の説明がありますがLINEWORKSのAPIには、2種類あります。

サービスAPI ログインしている本人のデータへのみアクセスできるAPI
サーバーAPI ユーザーのログインが不要で、ドメイン（ログインアカウントの＠のうしろのグループ単位）内のすべてのユーザーデータにアクセスできるAPI

今回のボットはサービスAPIを使って作ります。

LINE WORKS Developer ConsoleでAPIの発行を行います。

まずは、API IDの発行です。API IDの[発行]ボタンをクリックします。

上からペロンと出てきて[OK]をクリックすると

発行されています。

次に、Server API Consumer Keyの[発行]ボタンをクリック

Server API Consumer Key権限設定ポップアップが起動します。これは、API（Bot）にどこまでの権限を与えるのかということを設定するものです。今回のAPIは、

LINE WORKS内に保存された画像ファイルを外部から取得する（照会）
LINE WORKSのトークルームに外部からメッセージを投稿する（追加）

の処理でAPIを使いますので、追加と照会にチェックをつけて[次へ]をクリック

Server API Consumer Key管理でTokenの設定を行います。今回はハンズオンなので適当に7日間、自動延長ありにして、[保存]をクリックしてください。

発行されました。

次に、Botプログラムのあるサーバー（実際はGoogleクラウド上にあるのでサーバーは意識しない）を登録します。Server Listへの登録には2種類あります。

固定IPタイプ（利用サーバーの IP を用いた認証形式で、サーバーのグローバルIPの登録が必要）
ID登録タイプ（発行されたサーバー ID を用いて Token を発行する認証形式）

今回のプログラムは固定したグローバルIPアドレスの登録が困難（Googleに任せているので）なのでID登録タイプでの登録を行います。

Server List（ID登録タイプ）で[追加]をクリックして

Server Listが起動しますので、サーバー名に「GAS文字起こしBotハンズオン」と入力し、Keyの選択のプルダウンから先ほど発行したServer API Consumer Keyを選択して[保存]ボタンをクリックします。

確認画面で[OK]をクリック

登録できました。[ダウンロード]ボタンをクリックします。

内容を確認して[OK]をクリックします。

認証キーがダウンロード完了という表示となり

PCのダウンロードフォルダにprivate_YYYYMMDDHHMMSS.keyというファイルが格納されていればOKです。

ダウンロードした認証キーファイルをメモ帳や任意のエディタで開きます。

認証キーを使う場合には、改行が正しく認識されないため、改行を「\n」に置換する必要があります。Windows10での置換方法としては、Wordに張り付けて置換する方法などがあるようですが、ご自身で一番やりやすい方法で構いませんので以下のように置換された状態に変換してください。（操作を誤った時のために元のメモ帳ファイルは上書きしないようご注意ください）

もしやり方が思いつかない場合には、インターネット上にある改行置換フォームで置換することが可能ですので参考にしてください。

では、発行したAPI情報をノートにメモしておきましょう。

API情報メモ用.txtを用意しておきましたのでこちらに張り付けて頂いてもよいかと思います。

次に、Bot登録を行います。LINE WORKS Developer ConsoleのBotメニューをクリックし、[登録]をクリックします。

ボットの設定を行います。ボットプロフィール画像とBot名、説明を入力してください。

ここはお好きな名前や画像を入れて頂いて構いません。

サンプルと同じ画像を用意しましたので使って頂いて構いません。

Botポリシーは任意でチェックを付け、管理者として自分のアカウントを検索して主担当に追加し、[保存]をクリックしてください。

ポップアップが起動しますので内容確認して[OK]をクリックします。

Botリストに登録されたら完了です。

このBot No.もあとで使いますのでメモしておきます。

Botのプログラム部分を作ります。ここの部分ですね。

Google Apps Scriptエディタを開く

Googleにログインします。

Googleドライブを開きます。

マイドライブの中のお好きな場所に今日のハンズオン用のフォルダを作成しましょう。

フォルダの名前はなんでも大丈夫です。

フォルダが作成できたら、フォルダを開き、フォルダ内を右クリックし、メニューからGoogle Apps Scriptを選択します。

以下がGoogle Apps Scriptのエディタ画面です。

この画面でもプログラムを書くことができるのですが、2020年12月にエディタが新しくなったばかりでまだ機能が足りていない部分があったり、最新情報がネット上に少なかったりしますので、今回のハンズオンでは以前のエディタを使用してプログラムを書きます。右上の[以前のエディタを使用]のリンクをクリックします。

なんで昔のエディタに切り替えるの？って聞かれてます。なんでもいいのですが今回昔のエディタを使う必要がある一番の理由はプロパティという機能が新しいエディタにないためなので、これをクリックして送信します。

×で閉じます。

しつこく新しいエディタをおススメされますが無視して閉じます。

これが旧エディタです。プログラムファイルの名前を付けますのでここをクリックします。

プロジェクトの名前を「LWTTハンズオンGAS文字起こしボット」など任意の名前をつけて[OK]をクリックしてください。

名前が反映されました。

文字起こしボットのプログラムを書く

プログラムのスクリプトファイル名を付けましょう。コード.gsというファイルのプルダウンからRenameをクリックします。

スクリプトファイル名として「文字起こし」と入力し、[OK]をクリックします。

名前が反映されました。

今回は、サンプルのプログラムを用意してあります。以下のボタンから、用意してあるサンプルプログラムを開きます。

サンプルプログラムリンク

このプログラムをすべて選択し、コピーして

自分のアカウントのGASエディタ上にあるプログラムに上書き（もしくは一度すべてを削除してから貼り付け）してください。

貼り付けました。まだ保存されていないので＊マークがついています。

今回のハンズオンでは、勉強のために2通りの方法でAPIを使っています。

ゼロからAPI利用のためのプログラムを書く
誰かが作ってくれたAPIを使うためのライブラリを使う

この後者を使うために、@kunihiros さんが作成されているライブラリを使いますので、ライブラリの登録を行います。こちらのqiita記事でも紹介されているので後日読んでみてください。

リソース＞ライブラリをクリックします。

ライブラリの追加画面で `1aLcCr3CWqfenPMyM0_FWIDUgRcTxsit9bO6BTx61NCXrCtkY2zbHBlod` を入力し、[追加]ボタンをクリックします。

一番最新のバージョンを指定します。

保存をクリックします。

文字起こしは、裏でGoogle Drive APIを利用しています。無料で使える機能ですが、標準では利用がOFFになっていますので機能を有効にします。

リソース＞Google拡張サービスをクリックします。

Drive APIを有効にします。

ONになったことを確認し[OK]をクリックします。

GASのプログラムができました。LINE WORKSとつなぐためにAPI情報を設定します。

ファイル＞プロジェクトのプロパティをクリックします。

プロジェクトのプロパティのスクリプトのプロパティタブの行を追加リンクをクリックします。

以下のように、メモしてあったAPI情報のServer List(ID登録タイプ)以外をプロパティに登録し[保存]をクリックします。順番はどの順番でも大丈夫です。

プログラム内の 6行目の " " の間にメモしてあったServer List(ID登録タイプ)の値を入れます。

const privateKey = "-----BEGIN PRIVATE KEY-----\nここに認証キーが入ります\n-----END PRIVATE KEY-----";

プログラムを保存する

[Ctrl + S]もしくはファイル>保存をクリックして保存します。

＊が表示されていないことを確認します。

プログラムを公開する

公開タブをクリックし、ウェブアプリケーションとして導入をクリックします。

Deploy as web app画面で

New、Me(自分のGoogleアカウント）になっていることを確認し、Who has access to the app:のプルダウンよりAnyone, even anonymousを選択し、[Deploy]をクリックします。

認証の許可を求めるポップアップが起動しますので、[許可を確認]をクリックします。

GASプログラムエディタにログインしていたGoogleアカウントを選択します。

以下の警告画面が表示されますので、[詳細]をクリックします。

Googleアカウントに間違いがないことを確認の上で、[LWTTハンズオンGAS文字起こしボット（安全ではないページ）に移動]をクリックします。

ボット名とGoogleアカウント名に認識相違がないことを確認し、[許可]をクリックします。

デプロイできました。この表示されるURLをコピーして、[OK]をクリックします。

メモ帳にメモしておきましょう。

LINE WORKS Developer ConsoleのBotメニューを開き、Botを選択します。

[修正]ボタンをクリックします。

Callback URLをONにし、先ほどコピーしたURLを入力し、メンバーが送信可能なメッセージタイプの中の画像にチェックを入れ、保存します。

これでLINE WORKSとつながる準備ができました。

では、Botを公開しましょう。LINE WORKS 管理画面のBotメニューで[Bot追加]をクリックします。

登録したBotが表示されたはずです。[追加]をクリックします。

追加されました。

前に戻ると

Botが追加されています。

Developer ConsoleのBot画面ではステータスがサービス中の表示に変わったはずです。

ところがどっこい。この状態ではまだ誰からもBotが見えない状態です。試しにLINE WORKSのチャット画面でBotとのトークルームを作成しようとしても表示されていません。

LINE WORKS 管理画面のBotメニューからボットをクリックし詳細を開くと

公開設定が非公開になっている状態ですので、[修正]をクリックします。

公開設定をONにして[保存]

チャット画面でボットが追加された旨の通知が届いていることを確認します。

トークルームを作成します。Botタブのメンバーに文字起こしBotが表示されていますので、チェックをして[OK]をクリックしてトークルームを作成しましょう。

利用開始をクリックします。

トークルームが作成されました。

文字起こしが動くか、スマホから画像を送信してみましょう。

文字起こしされましたか？

うまくいかなかった方は設定誤りや漏れがないか確認しましょう。

以下のポイントで作業漏れや設定誤りがないか再度確認しましょう

□LINE WORKS管理画面のBotの公開設定は公開になっていますか？

□発行したAPI情報とGASのプロパティに登録されたキーは一致してますか？

□Developer Consoleのボットのステータスは「サービス中」になっていますか？

□Developer ConsoleのボットのCallback URLはGASの公開URLと一致していますか？

□GASエディタのリソース＞ライブラリにはLINEWORKSライブラリは登録されてますか？

□GASエディタののリソース＞Googleの拡張サービスのDrive APIはONになっていますか？

Google Scriptダッシュボードでログを確認する

GASのログを確認する方法を紹介します。

表示＞ログをクリックし

Apps Scriptダッシュボードをクリックします。

デフォルトだと、自分のアカウントで実行したものにフィルタされていますので×をクリックしてフィルタを解除します。

ログがすべて表示されますので確認したいログのプロジェクトの詳細をクリックすると

実行ログを確認することができます。

プログラムを編集した場合の再公開

GASはプログラムを改変する度に、公開し直す必要があります。

再公開する際には、公開＞ウェブアプリケーションとして導入をクリックし

必ずProject VersionをプルダウンからNewを選択し

[更新]ボタンをクリックしてください。

公開URLは変わらないのでこのURLをLINE WORKS側に登録し直す必要はありませんがこれをやらないと古いプログラムのまま動いてしまいます。

いかがでしたでしょうか？完走できましたでしょうか？

今回のハンズオンはすべて無料で作れますので、放置していても課金されるものではないですが、後片付けは記憶があるうちにやって頂いた方がよいかと思います。

Developer ConsoleのAPIメニューからAPI ID、Server API Consumer Key、Server List（ID登録タイプ）の削除
Developer ConsoleのBotメニューからBot削除
Google Drive上のGASファイルを削除

是非、復習などして、今回の知識を応用したボットができたら twitterで @lwtt_jp メンションして共有して頂けるとうれしいです♪

ありがとうございました！