シンプルなLIFFアプリを構築してみた

概要

はまった点と解決方法

  • メニューをタップすると、予約フォームの画面が、画面いっぱいに表示されており、メッセージ送信しようとするとError: Need consent on shareTargetPicker usage on LINE developer siteというエラーが出ました。しかし shareTargetPicker はオンにしてあります

  • リッチメニューのリンク先URLを、エンドポイント(ファイルを公開したURL)ではなく、LIFF URL( https://liff.line.me/12345 など、liff.line.meのURL)に変更すると、想定通りの動作になりました。

LIFFアプリを構築する流れ

LINE公式アカウント作成

  • 公式サイトを参照
    • メルアド、名前、パスワードを入力
    • アカウント名、メルアド、業種を入力して、LINE公式アカウントを作成。
      • 「ベーシックID」が付与された
      • 「アカウント認証」は後回し

プロフィール情報の設定

  • 管理画面の上部メニューの「プロフィール」をクリック
  • 「プロフィールページ設定」が開くので、真ん中あたりの「プロフィール情報は LINE Official Account Manager から編集できます」をクリック

管理画面にPCからログイン

  • https://www.linebiz.com/jp/login/ に、「ビジネスアカウントでログイン」をクリックし、メアドとパスワードでログイン
  • アカウント一覧からアカウントを選択
  • 「ホーム」ー「トークルーム管理」ー「リッチメニュー」をクリック
  • 「作成」をクリック
  • 以下で作成
    • 「表示設定」ー「タイトル」で、管理画面用の名前を設定
    • 「表示設定」ー「表示期間」で、期間を設定(年末までにした)
    • 「コンテンツ設定」ー「テンプレートを選択」で、小の左右2分割を選択
    • 「コンテンツ設定」ー「画像を作成」で、画像を作成
      • 左下のプレビューで、表示位置を選んでから、右の画像エディタで作成する
      • (用意した画像がある場合は、「背景画像のアップロード」でアップロードできそう)
      • ScreenShot 2021-05-20 13.57.22.png
      • 右側の「アクション」は、リンクにして、https://example.com/とかにしておく(後で変更)

チャネルの作成

  • 公式ページを見ながら作成
  • LINE Developers で、名前とメルアドを指定してユーザ登録
  • ログイン
  • 「Create a new provider」で、プロバイダ名を指定して作成
  • 上記で作成したプロバイダを選択し、「Create a LINE Login Channel」
    • Channel type, Privider, Region(Japan)はそのまま
    • Channel iconは無し
    • Channel name, Channel description, App types(WebAppを指定。Mobile Appは指定しない)を入力
    • Email Addressはそのまま、Privacy policy URLとTerms of use URLは無し、利用規約に同意するチェックを入れる

GitHub Pagesにファイルを置いて公開

LIFFアプリをチャネルに追加

  • 公式ページ を見ながら行う
  • LINE Developersコンソール を開く
  • 一覧からプロバイダ、チャネルを開く
  • LIFFタブを開く
  • Addをクリックして、以下の情報で追加する

    • LIFF app name
    • Size(Full/Tall/Compact)・・・Compact
    • Endpoint URL・・・上記のGitHub Pages(index.htmlがあるURL)
    • Scopes(profile/openid)(chat_message.write)・・・全てチェック
    • Bot link feature(On (Normal)/On (Aggressive)/Off)・・・On(Normal)
    • Options – Scan QR ・・・チェックしない
  • LIFF IDLIFF URL が表示されるので、メモしておく

アプリにLIFF IDを設定

  • GitHubで公開したページでLIFF IDを使っていたら、上記で取得したIDに書き換え

リッチメニューのリンクを、LIFF URLに変更

  • LINE Offical Account Manager を開く
  • 「ホーム」ー「トークルーム管理」ー「リッチメニュー」をクリック
  • 上述で作成したタイトルをクリックし、右上の「編集」
  • アクションのリンクを、上記のLIFF URLに変更して、保存
    • ここで間違って(GitHubで)公開したページのURLを入れてしまうと、最初に書いたように、クリック時に通常のWEBページとして開かれてしまい、メッセージ送信でエラーが出ます。

LIFFアプリを公開

  • LINE Developersコンソール を開く
  • 一覧からプロバイダ、チャネルを開く
  • チャネル名の右下に「Developing」と表示されているので、クリック
  • Publishをクリック
  • ScreenShot 2021-05-20 15.37.30.png
  • ScreenShot 2021-05-20 15.37.40.png
    • これを忘れると、後述の動作確認でメニューをタップした時に、「エラー 正常に処理できませんでした。」と表示される

動作確認

  • 自分のLINEアカウントに、「友達検索」で、ID(@つき)で検索して、友達追加
  • トークを開く
  • 下部にメニューが出るので、タップ。
  • 認証画面で、チャネル名やプロバイダ名が表示され、「サービス提供者が次の許可をリクエストしています。」と表示されるので、「許可する」をタップする。

shareTargetPickerのエラーが出る場合は、設定変更が必要

  • Failed to send message Error: Need consent on shareTargetPicker usage on LINE developer site というエラーが出た。
    • メッセージ送信時に出た
      • liff.shareTargetPicker() でエラーになっている。
  • LINEアプリから開いているのに、別ウインドウでページが開かれているように見える(左上にバツボタンがある)
    • チャネルの設定では、sizeをCompactにしているが、反映されていないようにみえる。
  • ドキュメント を参照
  • 以下でshareTargetPickerをオンにする

    • LINE Developersコンソール を開く
    • 一覧からプロバイダ、チャネルを開く
    • LIFFタブを開く
    • shareTargetPicker をオンにする
    • 同意が必要なので、下まで読んで「I have read and agree to the Agreement Regarding Use of Information」にチェックを入れて、「Enable」をクリック
    • ScreenShot 2021-05-20 15.48.17.png
    • ScreenShot 2021-05-20 15.50.46.png

感想

  • やり方をなぞっただけですが、意外と素直に表示までできて嬉しかったです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です