シンプルな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)に変更すると、想定通りの動作になりました。
- 公式ドキュメントの LINE Front-end Framework > LIFFアプリを開くを参照

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

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

公式ページを見ながら作成
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 を使った静的サイトの公開方法が、とても簡単になっていたを参考に進める
- GitHubにリポジトリを作って、ファイルを置く
- リポジトリのページにある「settings」を開き、左メニューの「Pages」を開く
- Source欄で、ブランチ名と、公開したいディレクトリを指定
- Saveを押すと、数分で公開される

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

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」をクリック