LoginSignup
7
1

More than 1 year has passed since last update.

MakeとGyazo APIで画像を送信して画像を送り返すLINE Botを作ってみる #linedc #withMake

Last updated at Posted at 2022-06-04

こんな感じで画像を送ると画像を送り返してくれるLINE Botを作ってみます。

スクリーンショット 2022-06-04 13.02.00.png

途中でGyazoのAPIに送っているのですが、GyazoのモジュールがMakeにないのでHTTPモジュールとJSONモジュールで処理を行なっています。

使うモジュールは5つ

スクリーンショット 2022-06-04 12.55.47.png

  • LINE: Watch Event
  • LINE: Download a Message Attachement
  • HTTP: Make a Request
  • JSON: Parse json
  • LINE: Send a Broadcast Message

これらを使っています。

また、Gyazoのアクセストークンを取得しておきます。

1. Download a Message Attachementでファイルをダウンロードする

Download a Message AttachementにはMessage IDを入れることができるので、Watch Eventから送られたメッセージIDを設定します。

スクリーンショット 2022-06-04 13.10.18.png

2. HTTPモジュールでGyazo APIを叩いてアップロードする

一つ前のDownload a Message Attachementからバイナリデータが送られてきます。

Gyazo APIのドキュメントをみつつ、以下のように

  • URL: https://upload.gyazo.com/api/upload
  • Method: POST
  • Body type: Multipart/form-data
  • Item1:
    • Field type: Text
    • Key: access_token
    • Value: 取得した自身Gyazoのアクセストークン
  • Item2:
    • Field type: File
    • Key: imagedata
    • File: LINE - Download Message Attachementを選択

スクリーンショット 2022-06-04 12.50.17.png

スクリーンショット 2022-06-04 12.50.27.png

画像を参考にして設定しましょう。

これでLINEからダウンロードした写真がGyazoにアップロードされます。

3. JSONモジュールでパースする

あとはGyazoにアップロードされたURLを取得したいのですが、このままだとDATAというKeyにJSONが丸っと返却されてくるのでJSONモジュールでパースします。

スクリーンショット 2022-06-04 13.26.51.png

と言ってもDataを入れるだけ。

4. LINEで送信する

LINEで画像を送信する際にはMessage TypeをImageにする必要があるので設定します。

そして、パースされたJSONの中にURLというKEYがあるのでそれをOriginal Content URLとPreview Image URLに設定してあげればOKです。

スクリーンショット 2022-06-04 13.28.46.png

5. Run Onceで試す。

最後にRun Onceで起動させて、画像を送ってみるとちゃんと画像を送り返してくれます。

画像を送ると画像を送り返してくれるだけですが、裏側ではGyazoに保存を咬ませている感じですね。

お疲れ様でした。

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1