20210603_enebular developer meetup

by 1ft-seabass

Slide 1

Slide 1 text

20210603_enebular developer meetup LINEリッチメニューの制作ツールを enebular で作ったらよかった話ワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

LINE のリッチメニュー作るの手間がかかる問題

Slide 5

Slide 5 text

親切な API ドキュメントには感謝しつつ内容を見てみるとなかなかの手順量 https://developers.line.biz/ja/reference/messaging-api/#create-rich-menu

Slide 6

Slide 6 text

Postman なり Node.js なりで API アクセスして作業まとめたけど繰り返しがつらいそもそもメニューの画像を何度も変えるので何度もやってもストレスが少ないのがいい

Slide 7

Slide 7 text

おーけー、なんとかしよう

Slide 8

Slide 8 text

enebular でLINEリッチメニューの制作ツールをつくって Discover Flow 公開 https://enebular.com/discover/ﬂow/6e81f347-2809-4fbb-8f10-e318551075c9

Slide 9

Slide 9 text

フローの様子

Slide 10

Slide 10 text

アクセストークンを設定して使う

Slide 11

Slide 11 text

プロパティの様子。この設定で使える。

Slide 12

Slide 12 text

まずはリッチメニューを作成

Slide 13

Slide 13 text

この後、アップロードする画像にどのエリアが、どのように動作するか JSON 設定

Slide 14

Slide 14 text

設定するとリッチメニューIDが返ってくるのでグローバル変数に記録して以後使うリッチメニューIDが保持できると、このあとのアップロード時にIDを打ち直さなくてGood

Slide 15

Slide 15 text

いよいよリッチメニューの画像アップロードこれが他のツールで作るとまあまあややこしい

Slide 16

Slide 16 text

node-red-contrib-ui-upload がとてもいい仕事をしてくれる https://ﬂows.nodered.org/node/node-red-contrib-ui-upload

Slide 17

Slide 17 text

ダッシュボードからリッチメニュー画像をアップロード

Slide 18

Slide 18 text

最後に先ほどのリッチメニューIDをデフォルトにして LINE で表示する

Slide 19

Slide 19 text

このように反映されます

Slide 20

Slide 20 text

リッチメニュー設定を一回デモしてみます！

Slide 21

Slide 21 text

変更するときは現リッチメニュー削除して作成→画像登録→デフォルト設定の繰り返し別タブにリッチメニュー削除あります

Slide 22

Slide 22 text

リッチメニュー変更を一回デモしてみます！時間があれば！

Slide 23

Slide 23 text

作業再開するときは以前のリッチメニューIDを自動設定や手動設定もできるただ、APIを理解している人じゃないと、使いこなせるかは難しいところ。なやましい。

Slide 24

Slide 24 text

何度か使ってイイ感じ。磨いていくのも楽しい。 WEB エディタでやったけど、これは enebular デスクトップエディタで使っても良さそう。

Slide 25

Slide 25 text

まとめ ➔ 今回のようにAPIを手順通り叩くものは GUI で作業できるやりやすかった！ ➔ 画像アップロードが GUI でできたのは良い知見を得た！ ➔ Discover Flow で呼び出せてトークン入れるとすぐツールを使えるのは気持ちが途切れない！ ➔ 自分が手順を忘れててもフローが覚えている。また調べなおす手間が少なくなる！ ➔ なにより本来やりたかった見た目や操作感に作業が注力できる！