コミュニケーションをとりたい！OVER40の初心者が翻訳LINE botの作成に1週間チャレンジ！

# LINE bot作成1週間チャレンジ！！
**「今の話伝わったのかなぁ・・・？」**
私は小売業の物流管理部門で働いていますが、昨今の労働人口不足もあって、
物流センターなどの物流現場では**非常に多くの外国人の方**に支えられて成り立っています。
しかしながら、**日本語は勉強中**！といった外国人の方も多く、
現場間で細かいコミュニケーションをとれない事が課題の一つとなっていました。

どうやったら伝わるかな？もっとコミュニケーションをとりたい！
と考えていた時に**LINE botなるものをノーコードで作成できる**という事を知り、これは
使えるという事でOVER40の初心者ながらもLINE botの作成に1週間チャレンジしてみました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/84614e95-a8e1-88de-33bf-1ff59d5add10.png" width=80%>
# 使用したツール
- LINE　(ただのSNSツールじゃなかったんだね。)　　
- DeepL (翻訳API。翻訳をお願いしました。)
- Googleスプレッドシート(翻訳したテキストの保存をお願いしました。)
- Make

:::note info
　**Make(旧Integromat)とは**
今さら補足不要かと思いますが、自分のためにあらためて書くと
Makeは異なるツール同士をノーコードで連携できるツールとの事。
しかも視覚的でわかりやすい！！！
RPAのようなツールを作れるのは一部のプログラミングマスター(個人のイメージ)
しかいないと思っていた私はこんな便利なものがあるんだと感激しました。
(そういえばノーコードとかいう言葉は聞いていたけどスルーしていました)
:::

# LINE botの作成結果
「外国人の方とのコミュニケーションといえば**やっぱり翻訳**かな。」

「日本語のマニュアルも外国語化したいな。おっ、**画像をOCRして文字情報をLINE botに
返信する**的な過去記事がいくつかあるから、これを組み合わせたらおもしろそう・・・」

「じゃあ、**LINEで画像を送ったら文字を外国語にして返してくれるLINE bot**を作ろう♪」
と安易な気持ちで作成に入った私は現実を知りました・・・

#### 「全然うまくいかない・・・・・・・!?」

ほとんど、真似ばかりしているのに全然うまく動かない・・・
今回は1週間チャレンジという事で早々にOCR機能の実装を後回しにし(日和りました)、
入力した言葉を翻訳して返してくれる翻訳LINE bot(日本語⇔中国語ver)を作成しました。
- **軌道修正してできたLINE bot**
https://im2.ezgif.com/tmp/ezgif-2-31acf72ceb.gif
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/e1ab8083-6f03-7e9c-a07a-5beb6ea442f9.png)


双方向のやり取りを一画面で済ませたかったので、
頭に『**C**』**をつけて日本語入力すると中国語に翻訳**して返す、
頭に『**J**』**をつけて中国語入力すると日本語に翻訳**して返す、
『C』『J』をつけずに他の文字を入力すると、「何語に翻訳する？？」という
テキストと画像を返してくれる仕様にしました。

### Makeのシナリオはこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/04c656c7-809a-ef26-e32f-1a6b2fa0b9d5.png)
（LINE botのおおまかな動き）
　①LINEに文字を入力する。
　②ルーターで『日本語訳』『中国語訳』『それ以外』に分岐させる。
　③DeepLで翻訳しする。
　④LINEに翻訳した言葉を返す。　
　⑤会話内容をGoogleスプレッドシートに保存する。

# LINE botの作成手順
#### 1. 事前準備
- LINE Developersでチャネルを作成する。
- Makeのアカウントを作成し、LINEと連携させる。
- 翻訳用のDeepLのアカウントを作成し、Makeと連携させる。
- 会話保存用のGoogleスプレッドシートを準備しておく。

#### 2. 作業の流れ
###### ①MakeとLINE DevelopersをWebhookとチャンネルアクセストークンで紐付けます。 ###### 
- **モジュール：LINE (Watch Events)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/de4b738d-e85c-c985-7da4-bb6478ed300b.png)

###### ②フィルタリングをかけルーターで分岐させます。 ######
- **モジュール：Router**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/5a67c820-c836-360e-e9fe-a52bb890e4c9.png)

『日本語⇔中国語』に翻訳の部分はフィルターの`Text operators`を
`Starts with(case insensitive)`(～で始まる(大文字と小文字を区別し ない))に設定し、
**『J』で始まる場合と『C』で始まる場合に分けました。**

逆に『それ以外』の場合は`Text operators`を
`Does not start with(case insensitive)`(～で始まらない(大文字と小文字を区別しない))
に設定し、**『J』と『C』で始まるもの以外を通す設定にしました。**

:::note info
ご注意下さい
ここで、追加ルールを`Add AND rule`ではなく`Add or rule`で設定してしまうと『J』『C』で始まるものも通過しエラーが発生しますのでご注意下さい。
:::

###### ③DeepLで『日本語⇔中国語』に翻訳します
- **モジュール：DeepL (Translate a Text)**　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/fd97a2a2-a126-3706-c05a-5e7c5e2c3d5a.png)

まず、`Connection`でMakeと事前にアカウント登録しておいたDeepLを紐付けます。
紐付けの際には**DeepLアカウント側で認証のためのAPIキーを取得**して、
モジュールの`API Key`に貼り付けLINE botとの紐付けを行います。

次に翻訳したい言語を`Target Language`に、元となる言語を`Source Language`に
入力します。(サンプルでは日本語を中国語に翻訳するパターンを表示しています)

また、`Split on Punctuation and on Newlines`(句読点と改行で分割)に設定しておくと、
一文でない場合に句読点と改行で分けてくれるようです。

###### ④LINEに翻訳した言葉を返します。 ######
- **モジュール：LINE (Send a Reply Massage)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/a71ff646-bcae-99fa-a0a1-3f17ed7e0547.png)

ここではまず`Reply Token`に`1.Events[` `]:Reply Token`を選択します。
次に返信するメッセージとして、`Type`に`Text`を選択、`Text`に`1.Translatiions[`　`]:Text`を選択します。

###### ⑤Googleスプレッドシートに会話内容を保存する。 ######
- **モジュール：Google sheet (Add a raw)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/962e8eba-74db-8518-37c9-38fd708496c8.png)

**まず、Googleドライブのマイドライブに格納してあるスプレッドシートと紐付けするため、**
`connection`でMakeとGoogleアカウントを紐付けます。

次に、データを保存するスプレッドシートを指定するためシートのIDを入力します。
該当のスプレッドシートの開くとURLが表示されますが、**URLの後半部分が
該当スプレッドシートのID**になりますので、コピペしてモジュールの`Spreadsheet ID`に
スプレッドシートのIDを入力します。

モジュールを下にスクロールして`Values`欄を見ると、
スプレッドシート内のどの列に取得したデータを保存するかの指定ができますので、
今回はE列に`1.Events[` `]:Timestamp` F列に`1.Events{` `]:Message.Text`
G列に`3.Translations[` `]:Text`をそれぞれ選択することにします。

##### (延長戦)⑥pokemon APIから情報を取得して返す #####
- **モジュール：HTTP(Make a request)とLINE (Send a Reply Message)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790954/a2d6aa0f-e8f4-eb64-02e3-e8fd462294a0.png)

今回、1週間を超えてしまいましたが、最初に『C』と『J』がつかなかった場合、テキストメッセージに添えて
ポケモンAPIからポケモン名と画像を返す仕様としました。

まず、1つ目のHTTPモジュール(Make a request)にポケモンAPIのURLを貼り付けます。**このとき、`Query string`の
`Name`にlimit、`Value`に30と入力し**、ポケモンAPIの中から30体のポケモンのみを抽出するようにしました。

次に2つ目のHTTPモジュール(Make a request)のURL欄に**1つ目のHTTPモジュールで抽出したポケモンのURL**を指定します。
(URL欄に`13. Date.results[` `]: url`を入力)

最後にLINE(Send a Reply Message)で2つ目のHTTPモジュールからポケモンの詳細を抽出します。
今回はテキストメッセージに加えて、`Text`に`13．Date.results[` `]: name`を入力し名前(英語表記)を
`image`に`20. date:sprites:other:official-artwork:front_default`を選択して**画像をゲット**しました！

本当は30体のポケモンの中から、ランダムに画像をゲットしたかったのですが、うまくいかなかったので
次回の課題とします。

### これが今回の翻訳LINE bot作成の一通りの作業です！

# 反省点、今後改良したい点
- 当初目論んでいたOCRができなかった。
- 技術の向上のため**httpからJSON**を取得して活用したかったができなかった。
- 翻訳後に返ってきたテキストの『C』とか『J』とかを取り除きたい。
- **Time Stampの日時を調整したい**。保存するスプレッドシートを美しくしたい。
- **ベトナム語を追加**したかったが、DeepLは対応していなかったので別のAPIで対応する。

細かく言えばいっぱいありますが、**これから改良していきたいです！**

# 最後に～無限の可能性～

今回の1週間チャレンジの作成結果は以上ですが、多くの学びのある刺激的な1週間でした！

学びを通じて世の中には様々なAPIがある事を知りましたが、**APIの組み合わせ次第**では
私のような**OVER40の初心者でも無限の可能性のあるITツールを作成できる**のではないか
ということです。(Make必須！！)

今回の作成のほとんど(全てに近いほとんど)が過去の記事を参考にさせて頂きましたが、
この分野の進歩が早いのは諸先輩方が自分の知識を惜しげもなく共有し、
それを皆で吸収してより**新しいものを生み出している**からだと感じています。

ITの分野ではOVER40どころかまだまだ赤ちゃんですが、**年齢は関係なくこれからも
どんどん学んで、どんどん新しいものにチャレンジしていきたいです！**

最後に**何とか作成できたのも記事を共有して頂いた方や、助言を頂いた方のおかげです。**
ありがとうございました！