5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

FlexMessageのボタンに仕込むLIFFのリンクで気をつけること

Last updated at Posted at 2019-12-23

以前LINE botでFlex MessageのボタンにパラメータをつけたLIFFを取り扱う話を投稿しました。謎のエラーが出てしまって解決できずモヤモヤした気分で書いていて、あわよくば読んでくれた誰かが教えてくれればと思っていました。すると奇跡的にコメントを頂いたので改めて検証してみました。

頂いたコメントによると

どうやらLIFFにパラメータを渡したリンクを仕込んだボタンを使っても普通にLIFFは起動するようです。そして、Flex MessageのJSONもこちらのシミュレータで作成したもので、自分の作った時と全く同じやり方でした。なので、Flex Messageの作り方に問題があるわけではないようです。となると、原因はURLにあるのでしょう。

#URLを調べてみた
今度はボタンに仕込んだURLを検証しました。ひとまずコメントで頂いたURLを自分のLIFFに合わせて変更したら問題なく動きました。
giphy.gif

原因がわかった

そしてここでエラー原因がわかりました。原因はパラメータに日本語を含んだURLを使っていたことです。Template Messageで気にせずやれていたことが、Flex Messageだとエラーになっていたのです。というわけでURIエンコードをかけて【liff_URL】/URLエンコードした日本語の形でURLを生成したらLIFFは問題なくたち上がりました。
giphy (1).gif

まとめると…

今回パラメータ付きのLIFFが立ち上がらなかった原因はFlexMessageの仕様の問題ではなく、LIFFのリンクに日本語が含まれていたことが原因でした。なのでFlex Messageで日本語のパラメータを含めたリンクを扱う際にはURIエンコードを使えばエラーなく使えます。(おそらくプロのエンジニアの人からしたらURIエンコードは当たり前のことでしょうが、、、)

5
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?