【開発奮闘記】機械音痴が挑戦！LINE Botでタイの魅力を発信！

## 開発初挑戦
こんにちは。
タイ在住9年目、バンコクでのんびりOLをしていますが、
コロナ禍でなかなか日本の友人や各国の友人と会えず、少し寂しい思いをしています。

最近は規制が緩和されつつありますが、まだまだ海外旅行がしづらい状況が続いております。
私自身も多くの人からまたタイに行きたいけど、なかなか行くことができないという声をいただきました。

そこで、各国の友人、そしてまだタイを知らない人へタイの魅力を伝えたい、
そんな思いで初心者が１週間試行錯誤しながらLINE Bot制作に挑戦してみました。


## 完成品
<font color='#b22222' fontsize="1" >**私が実際に行ったタイの観光スポットと写真**</font>  

まだタイへ来たことがない人には、こんなところがあるんだと少しでも興味を持ってもらえたら、
日本へ本帰国しまった方、以前来たことはあるけどコロナ禍で来れなくなったという方には、
思い出の場所をみて懐かしい気持ちになってくれたら嬉しいです。
<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LINE Bot 観光地 アユタヤ写真 <a href="https://t.co/nbLfUgpLLj">pic.twitter.com/nbLfUgpLLj</a></p>&mdash; Risa (@ris_aaa26) <a href="https://twitter.com/ris_aaa26/status/1568773164519559169?ref_src=twsrc%5Etfw">September 11, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>
<br>

<font color='#b22222' fontsize="1" >**為替レート**</font>
来タイの際にぜひ活用してもらいたく、為替レートBotも作成しました。
両替の際、BUYとSELLどちらを見ればいいのか？ともう悩まないで済みます。

余談ですが、私は仕事・プライベート共に為替の計算をしばしばします。
でも、何度も計算しているはずなのに為替レートの見方を忘れてしまうので、
これは私も重宝です。

<font color='#6495ed' fontsize="1" >**9月2日**と**9月4日**のレートの変化の様子</font>
レートに大きな変化はありませんが、ちゃんと最新のものが反映されています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/7d7d93b2-3236-14a8-c65c-b49641661e15.jpeg" width=50%>

<font color='#6495ed' fontsize="1" >**実際のLINE Botの様子**</font>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">完成品 JPY-&gt;THB <a href="https://t.co/Eatpmp9hX6">pic.twitter.com/Eatpmp9hX6</a></p>&mdash; Risa (@ris_aaa26) <a href="https://twitter.com/ris_aaa26/status/1566348679476551680?ref_src=twsrc%5Etfw">September 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">完成品 THB-&gt;JPY <a href="https://t.co/8ytsoBUrnK">pic.twitter.com/8ytsoBUrnK</a></p>&mdash; Risa (@ris_aaa26) <a href="https://twitter.com/ris_aaa26/status/1566348887555973120?ref_src=twsrc%5Etfw">September 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 手順
- **使用ツール**
    - MAKE
    - GoogleDrive
    
- **使用API**
    - [為替レート API](https://www.amdoren.com/)
今回はこちらのサイトを使用しましたが、無料版は月に１０回までしか使えないようです。
現在別のサイトを探しています。

**〜MAKE 実装〜**
※LINE Divelopersに登録し、LINE公式アカウントを作成、
LINE Official Account ManagerでBotにするための設定は済ませておきます。

<font color='#b22222' fontsize="1" >**シナリオ全体像**</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/b9e9fa4a-41f0-0224-6f28-32838fdf1ed9.png" width=70%>


まず初めに”タイ”というメッセージを受信したら、タイの観光地をピックアップして返すモジュールを作成しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/26fd9352-6403-2317-195b-fa618ce66b29.png" width=80%>

次にユーザーが送られてきたリスト内にある観光地を送信すると、各地の写真とリンク先が送信されるモジュールを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/4e00f34c-950e-1116-a696-80f8f8946269.png" width=80%>

※自分の個人のGoogleアカウントと連携をする際は、[こちら](https://www.make.com/en/help/connections/connecting-google-services-using-a-custom-oauth-client?_ga=2.233102236.383067977.1662127577-1871761153.1661916245)のサイトを参考にしました。


　　
<font color='#b22222' fontsize="1" >**×失敗例×**</font>
私の場合、以下のことが原因でなかなか連携がうまくいかなかったです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/fb155840-b7d9-7837-8d8a-65b80d982856.png" width=60%>
上記のURLを入力するところで、ミスがありました。

<font color='#000000'>（**誤**）https：//www.<font color='#ff0000'>**make**</font>.com/oauth/cb/google-restricted</font>
<font color='#000000'>（**正**）https：//www.<font color='#ff0000'>**integromat**</font>.com/oauth/cb/google-restricted</font>

サービス名がMAKEに変更になったので、URLもmakeへ変更になるかと思ったのですが、
参考にしたリンク先の通りintegromatで入力したら上手く連携できました。


　　

最後に、上記 APIサイトからJSONを取得し、”円バーツ”のメッセージと”バーツ円”のメッセージで分岐後、それぞれの結果を返すモジュールを作成しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/fb0d3fcd-48dd-f1f0-6be8-aa04278fee39.png" width=80%>

HTTPへ為替レートAPIのURLを入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/9ea85767-cab3-7c11-dcc5-f7662715ed3d.png" width=80%><br>
返信内容にamoutを選択して、レートの結果を返します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/f0d949aa-c902-727f-1931-251690a7f354.png" width=80%><br><br>


以上、観光地の写真リンクと為替レートのLINE Bot実装工程でした。




## あとがき
やりたいことは思いつくのに技術が全く追いつかず、悔しい思いをたくさんしました。
調べれば調べるほど分からない言葉が出てきて、挫折しそうになることも…。
でもきちんと仕組みが理解できれば、完成までの道筋がより明確になっていくのを身を持って感じました。
自分の思った通りの動きができた時の達成感は素晴らしく、とても楽しかったです。

今回は１週間というリミットを設けたのでここまでしかできませんでしたが、
これからもどんどん修正、アップデートをしていって、理想の完成形に近づけたらと思います！

ご覧いただき、ありがとうございました。