This post is Private. Only a writer or those who know its URL can access this post.

Improve article
RevisionsShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

LIFF ID 使いまわしテク

はじめに

LIFFはパスとクエリパラメータを受け取ることができるようになっています。
これとテンプレートを使ったページ生成を利用して、用意されている FULL, TALL, COMPACT の3種類の LIFF ID を用意するだけで、あとは自由にサイズと内容を変更できるようにします。
ここではとりあえず動く環境を用意して、その動きから中身を理解していきたいと思います。

手順

  • Heroku の準備1
  • LINE の準備
  • Heroku の準備2

Heroku の準備1

  1. リポジトリへアクセス
  2. Deploy to Heroku ボタンを押す

Deploy to Heroku
3. アプリ名を決める

Screenshot from 2020-09-16 16-48-04.png

  1. appurl は https://アプリ名.herokuapp.com となる
    1. 例えば https://parameterized-liff.herokuapp.com
    2. アプリ名を入力してavailableなら この状態で止めておいて、LINE の準備を行う

LINE の準備

  1. LINE Developers にログイン
  2. Messaging API の新チャネルを作成
    Screenshot from 2020-09-16 16-50-49.png

    1. チャネル基本設定タブ
      Screenshot from 2020-09-16 16-53-19.png

      1. チャネルシークレットをHerokuにコピペ image.png image.png
    2. Messaging API タブ
      Screenshot from 2020-09-16 16-56-33.png

      1. Webhook URL に appurl/callback を設定
        1. ここでは https://parameterized-liff.herokuapp.com/callback
      2. Webhookの利用を有効化
      3. 応答メッセージ、あいさつメッセージ無効化 Screenshot from 2020-09-16 16-58-43.png
      4. チャネルアクセストークン発行
      5. チャネルアクセストークンをHerokuにコピペ
  3. LINE LOGIN の新チャネルを作成
    Screenshot from 2020-09-16 16-50-55.png

    1. 非公開を公開に切り替え(自分以外に使ってもらう時には) Screenshot from 2020-09-16 17-02-57.png
    2. LIFFタブ
      Screenshot from 2020-09-16 17-03-49.png

      1. Full, Tall, CompactのLIFFを作成 Screenshot from 2020-09-16 17-04-26.png
      2. URLは appurl/liff/full, tall, compact Screenshot from 2020-09-16 17-05-32.png
      3. それぞれのLIFF IDをHerokuへコピペ Screenshot from 2020-09-16 17-08-13.png

image.png

Heroku の準備2

  1. Deployボタンを押す Screenshot from 2020-09-16 17-11-02.png

動作確認

  • Messaging APIのチャネルの Messaging APIタブにあるQRコードで友達登録

  • 何かテキストを送信

  • FLEX Messageが帰ってくるのでLIFFの大きさを選ぶとそのページが開かれる

  • Webの中身は送信したテキスト

image.png

LIFFアクセスの流れ

def show_liff(liff_type, page="None"):
    if request.args.get("liff.state"):
        # 1次リダイレクト
        return template_render(liff_type, "login")

    # 2次リダイレクト
    return template_render(liff_type, page)


@app.route("/liff/<liff_type>", methods=['GET'])
def show_liff_1st(liff_type):
    return show_liff(liff_type)


@app.route("/liff/<liff_type>/<page>", methods=['GET'])
def show_liff_2nd(liff_type, page):
    return show_liff(liff_type, page)
  1. パスやパラメータが渡されているときには最初に指定したURLにliff.stateというパラメータが付きのエンドポイントアクセスします。
  2. そこでLIFFへのログインが実行されると、元々設定していたパスとパラメータを持ったURLにアクセスします。

参考URL

groove-x
世界のどこにもない、心を満たすロボットを。私たちGROOVE Xは2015年に設立したスタートアップです。私たちの考えるロボットは、人々の生活に潤いを与える存在として、人が一緒にいたくなるような新世代の家庭用ロボットです。便利さや機能性ではなく、家族や伴侶として愛される存在になれるかどうか。 GROOVE Xが追求するのはあなたの感性の領域に訴えるロボットです。
https://groove-x.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away