20210603_enebular developer meetup

20210603_enebular developer meetup「LINEリッチメニューの制作ツールを enebular で作ったらよかった話」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Transcript

1. 20210603_enebular developer meetup LINEリッチメニューの制作ツールを enebular で作ったらよかった話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. LINE のリッチメニュー作るの手間がかかる問題
5. 親切な API ドキュメントには感謝しつつ 内容を見てみるとなかなかの手順量 https://developers.line.biz/ja/reference/messaging-api/#create-rich-menu
6. Postman なり Node.js なりで API アクセスして 作業まとめたけど繰り返しがつらい そもそもメニューの画像を何度も変えるので何度もやってもストレスが少ないのがいい
7. おーけー、なんとかしよう
8. enebular でLINEリッチメニューの 制作ツールをつくって Discover Flow 公開 https://enebular.com/discover/flow/6e81f347-2809-4fbb-8f10-e318551075c9
9. フローの様子
10. アクセストークンを設定して使う
11. プロパティの様子。この設定で使える。
12. まずはリッチメニューを作成
13. この後、アップロードする画像に どのエリアが、どのように動作するか JSON 設定
14. 設定するとリッチメニューIDが返ってくるので グローバル変数に記録して以後使う リッチメニューIDが保持できると、このあとのアップロード時にIDを打ち直さなくてGood
15. いよいよリッチメニューの画像アップロード これが他のツールで作るとまあまあややこしい
16. node-red-contrib-ui-upload が とてもいい仕事をしてくれる https://flows.nodered.org/node/node-red-contrib-ui-upload
17. ダッシュボードから リッチメニュー画像をアップロード
18. 最後に先ほどのリッチメニューIDを デフォルトにして LINE で表示する
19. このように反映されます
20. リッチメニュー設定を一回デモしてみます！
21. 変更するときは現リッチメニュー削除して 作成→画像登録→デフォルト設定の繰り返し 別タブにリッチメニュー削除あります
22. リッチメニュー変更を一回デモしてみます！ 時間があれば！
23. 作業再開するときは以前のリッチメニューIDを 自動設定や手動設定もできる ただ、APIを理解している人じゃないと、使いこなせるかは難しいところ。なやましい。
24. 何度か使ってイイ感じ。磨いていくのも楽しい。 WEB エディタでやったけど、これは enebular デスクトップエディタで使っても良さそう。
25. まとめ ➔ 今回のようにAPIを手順通り叩くものは GUI で作業できる やりやすかった！ ➔ 画像アップロードが GUI でできたのは良い知見を得た！ ➔ Discover Flow で呼び出せてトークン入れるとすぐツール を使えるのは気持ちが途切れない！ ➔ 自分が手順を忘れててもフローが覚えている。また調べな おす手間が少なくなる！ ➔ なにより本来やりたかった見た目や操作感に作業が注力で きる！