Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20210603_enebular developer meetup

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/

1ft-seabass

June 03, 2021
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. フローの様子

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. このように反映されます

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide