妖精ってなに？ 子供のなぜなぜ期を解消したい
年長の娘はYouTubeや本で知った言葉を聞いてくるのですが、表現が難しいものについてはイメージを伝えることに困ることがあります
もっと教えてあげたいのに娘が理解しきれていない状態で終わってしまうことも・・・
そんな時にLINE Botに入力するだけで簡単に写真が表示されれば、こんなのだよとすぐに答えられて便利だと思います
そして、LINE Botであれば、簡単に履歴を追える便利ですね
LINE Botの実装イメージ
LINE Botに「妖精」と単語を入力する → 妖精の画像が返ってくる
単純なLINE Botをイメージしています。
画像を返してくれるAPIってどんなものがあるの？
WebAPIってどうやって使うのか設定方法が知りたい！
まずは、LINE BotとAPI、Node-REDで検索をかけました。
参考にした記事
以下の記事はAPI取得手順から丁寧に書いてありました
こちを参考にして画像を出力できるか実践していきます！
環境
Node-RED
LINE Bot（Messaging API）
rinna API
Gyazo API
実装した結果
① LINE Botに「妖精」と単語を入力する
② rinna APIが文字から画像を生成してくれる
③ ②で作った画像（base64文字列）をBuffer形式に変換
④⑤ 画像をgazo にアップロードする
⑥ JSON形式に変換
⑦ ⑧で返すために設定
originalContentUrl: 'オリジナルサイズの画像URL’
previewImageUrl: 'LINEアプリのトーク画面にプレビューされるサイズの画像URL’
⑧ URLをLINE Botにかえす
[{"id":"679b23ea477d9d4c","type":"rinna","z":"11d14759a40da384","name":"","api":"ldm","subscription":"","x":310,"y":60,"wires":[["286ed77437845460","f2a8012cd7145063","24a5cb304229cf7c"]]},{"id":"286ed77437845460","type":"image","z":"11d14759a40da384","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":300,"y":200,"wires":[]},{"id":"a26acea9f7fe5dff","type":"Webhook","z":"11d14759a40da384","name":"","url":"/webhook","x":140,"y":60,"wires":[["6c8d62d1fed760fb","679b23ea477d9d4c"]]},{"id":"6c8d62d1fed760fb","type":"debug","z":"11d14759a40da384","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":140,"y":140,"wires":[]},{"id":"02eb29bdbc5713d2","type":"ReplyMessage","z":"11d14759a40da384","name":"","replyMessage":"","x":740,"y":420,"wires":[]},{"id":"9b13730b6012b5b3","type":"change","z":"11d14759a40da384","name":"","rules":[{"t":"set","p":"headers.content-type","pt":"msg","to":"multipart/form-data","tot":"str"},{"t":"set","p":"temp","pt":"msg","to":"payload","tot":"msg","dc":true},{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"payload.access_token","pt":"msg","to":"8b74Wad9ECb_Facsw8vP9R7mc3LiWUvn_P-WoMgJ6-Y","tot":"str"},{"t":"set","p":"payload.imagedata.value","pt":"msg","to":"temp","tot":"msg","dc":true},{"t":"set","p":"payload.imagedata.options.filename","pt":"msg","to":"image.png","tot":"str"},{"t":"delete","p":"tmp","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":700,"y":60,"wires":[["01bbb139ce04e4ae","523f4e49785e176d"]]},{"id":"f2a8012cd7145063","type":"debug","z":"11d14759a40da384","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":320,"y":140,"wires":[]},{"id":"efc81245f7303bb6","type":"debug","z":"11d14759a40da384","name":"debug 7","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":500,"y":140,"wires":[]},{"id":"24a5cb304229cf7c","type":"function","z":"11d14759a40da384","name":"function 4","func":"const base64 = msg.payload.split(',')[1];\nmsg.payload = Buffer.from(base64, 'base64') //Buffer形式の画像バイナリに変換\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":60,"wires":[["efc81245f7303bb6","9b13730b6012b5b3"]]},{"id":"01bbb139ce04e4ae","type":"debug","z":"11d14759a40da384","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":680,"y":140,"wires":[]},{"id":"4d28f0dadd0a39b0","type":"debug","z":"11d14759a40da384","name":"debug 9","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":140,"y":500,"wires":[]},{"id":"cf90dab5.815908","type":"debug","z":"11d14759a40da384","name":"debug10","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":320,"y":500,"wires":[]},{"id":"8037b4c8.94c7c8","type":"json","z":"11d14759a40da384","name":"","property":"payload","action":"","pretty":false,"x":330,"y":420,"wires":[["cf90dab5.815908","0adf342694d1eb65"]]},{"id":"0adf342694d1eb65","type":"change","z":"11d14759a40da384","name":"","rules":[{"t":"set","p":"temp","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"temp.thumb_url","pt":"msg","to":"payload.thumb_url","tot":"msg","dc":true},{"t":"set","p":"temp.url","pt":"msg","to":"payload.url","tot":"msg","dc":true},{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"payload.type","pt":"msg","to":"image","tot":"str"},{"t":"set","p":"payload.originalContentUrl","pt":"msg","to":"temp.url","tot":"msg","dc":true},{"t":"set","p":"payload.previewImageUrl","pt":"msg","to":"temp.thumb_url","tot":"msg","dc":true},{"t":"delete","p":"tmp","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":420,"wires":[["a92b30d9b13897eb","02eb29bdbc5713d2"]]},{"id":"a92b30d9b13897eb","type":"debug","z":"11d14759a40da384","name":"debug 11","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":520,"y":500,"wires":[]},{"id":"523f4e49785e176d","type":"http request","z":"11d14759a40da384","name":"","method":"POST","ret":"txt","paytoqs":"ignore","url":"https://upload.gyazo.com/api/upload","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"basic","senderr":false,"headers":[],"x":130,"y":420,"wires":[["4d28f0dadd0a39b0","8037b4c8.94c7c8"]]}]
手が止まった部分
参考にした記事に詳しく書いてありますが、それでもWEB API初めてですとどこから手をつけたら良いのか分からないと思います。
最低限こちらが必要です。
①APIのアカウント登録する
②アクセスキーを確認する
①rinna APIの設定
rinna APIをアカウント登録するときにこちらの手順に従って登録しました。
今回はText to Image API - v2のサブスクリプションキーを発行しました。
rinnaにPrimary keyを設定します。
②Gyazo APIの設定
以下の記事を参考にして登録しました。
今回は、api testと設定してURL名は適当につけました。
changeの１つめに上記で確認したaccess tokenを設定する。
③image preview のノードを追加する
こちらの記事を参考にして追加しました。
https://uepon.hatenadiary.com/entry/2022/02/22/232611
さあ動かしてみよう
設定したAPIを指定してみましたが、画像が返ってこない。。
恐らく、http requestのGyazo APIの設定が違うのかな？
もう少し試行錯誤してみたいのですが、一旦この時点で記事をあげます。
わかる方、教えていただけると助かります！
→上記の３点が解決した結果、LINEに画像が返ってきました！
子供と一緒に使った結果はこちらです。
子供のなぜなぜに対して画像が返ってくるのは便利です
ちょっと待たないといけないので、その間に次の質問が浮かんでいます。
子供のなぜは無限ですね
こちらの記事も参考にしました。