20210603_enebular developer meetup「LINEリッチメニューの制作ツールを enebular で作ったらよかった話」の登壇資料です。
◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！
・シルエットデザイン http://kage-design.com/ ・human pictogram 2.0 http://pictogram2.com ・ICOOON MONO http://icooon-mono.com/
20210603_enebular developer meetupLINEリッチメニューの制作ツールをenebular で作ったらよかった話ワンフットシーバス 田中正吾
View Slide
私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！
田中正吾（たなかせいご）屋号：ワンフットシーバス2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。
LINE のリッチメニュー作るの手間がかかる問題
親切な API ドキュメントには感謝しつつ内容を見てみるとなかなかの手順量https://developers.line.biz/ja/reference/messaging-api/#create-rich-menu
Postman なり Node.js なりで API アクセスして作業まとめたけど繰り返しがつらいそもそもメニューの画像を何度も変えるので何度もやってもストレスが少ないのがいい
おーけー、なんとかしよう
enebular でLINEリッチメニューの制作ツールをつくって Discover Flow 公開https://enebular.com/discover/flow/6e81f347-2809-4fbb-8f10-e318551075c9
フローの様子
アクセストークンを設定して使う
プロパティの様子。この設定で使える。
まずはリッチメニューを作成
この後、アップロードする画像にどのエリアが、どのように動作するか JSON 設定
設定するとリッチメニューIDが返ってくるのでグローバル変数に記録して以後使うリッチメニューIDが保持できると、このあとのアップロード時にIDを打ち直さなくてGood
いよいよリッチメニューの画像アップロードこれが他のツールで作るとまあまあややこしい
node-red-contrib-ui-upload がとてもいい仕事をしてくれるhttps://flows.nodered.org/node/node-red-contrib-ui-upload
ダッシュボードからリッチメニュー画像をアップロード
最後に先ほどのリッチメニューIDをデフォルトにして LINE で表示する
このように反映されます
リッチメニュー設定を一回デモしてみます！
変更するときは現リッチメニュー削除して作成→画像登録→デフォルト設定の繰り返し別タブにリッチメニュー削除あります
リッチメニュー変更を一回デモしてみます！時間があれば！
作業再開するときは以前のリッチメニューIDを自動設定や手動設定もできるただ、APIを理解している人じゃないと、使いこなせるかは難しいところ。なやましい。
何度か使ってイイ感じ。磨いていくのも楽しい。WEB エディタでやったけど、これは enebular デスクトップエディタで使っても良さそう。
まとめ➔ 今回のようにAPIを手順通り叩くものは GUI で作業できるやりやすかった！➔ 画像アップロードが GUI でできたのは良い知見を得た！➔ Discover Flow で呼び出せてトークン入れるとすぐツールを使えるのは気持ちが途切れない！➔ 自分が手順を忘れててもフローが覚えている。また調べなおす手間が少なくなる！➔ なにより本来やりたかった見た目や操作感に作業が注力できる！
1ftseabass
emgsilva
tkmnzm
kentosuzuki
nktamago
koudaiii
yoshiitaka
kyonmm
miyake
mitsuakitohei
shinrinakamura
nikkei_engineer_recruiting
gawa
morganepeng
reverentgeek
sachag
erikaheidi
sstephenson
stephaniewalter
eileencodes
jeffersonlam
danielanewman
zakiwarfel
jakevdp
thekraken