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

# 概要
- 以下のページを見ながら、LIFFアプリを構築してみました。

    - [【LINE/LIFF入門】LIFFでLINE公式アカウント（旧LINE＠）上に予約フォームを作成する（GitHub Pages使用）
](https://qiita.com/yagi_eng/items/5dce5527dc5d6a6e9833)


# はまった点と解決方法
- メニューをタップすると、予約フォームの画面が、画面いっぱいに表示されており、メッセージ送信しようとすると`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アプリを開く](https://developers.line.biz/ja/docs/liff/opening-liff-app/) を参照

# LIFFアプリを構築する流れ

## LINE公式アカウント作成
- [公式サイト](https://www.linebiz.com/jp/column/technique/20190418-3/)を参照
    - メルアド、名前、パスワードを入力
    - アカウント名、メルアド、業種を入力して、LINE公式アカウントを作成。
        - 「ベーシックID」が付与された
        - 「アカウント認証」は後回し


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


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



## チャネルの作成
- [公式ページ](https://developers.line.biz/ja/docs/liff/getting-started/#%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)を見ながら作成
- [LINE Developers](https://developers.line.biz/console/) で、名前とメルアドを指定してユーザ登録
- ログイン
- 「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 Pages を使った静的サイトの公開方法が、とても簡単になっていた
](https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html) を参考に進める
    - GitHubにリポジトリを作って、ファイルを置く
    - リポジトリのページにある「settings」を開き、左メニューの「Pages」を開く
    - Source欄で、ブランチ名と、公開したいディレクトリを指定
    - Saveを押すと、数分で公開される


## LIFFアプリをチャネルに追加
- [公式ページ](https://developers.line.biz/ja/docs/liff/registering-liff-apps/#registering-liff-app) を見ながら行う
- 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 ID` と `LIFF 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/a34ab312-9ab7-9c26-d6f2-aef455e72048.png)
- ![ScreenShot 2021-05-20 15.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/8062f88e-f3f0-6a0e-6bd1-3fc137e68e74.png)
    - これを忘れると、後述の動作確認でメニューをタップした時に、「エラー 正常に処理できませんでした。」と表示される


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

# shareTargetPickerのエラーが出る場合は、設定変更が必要
- `Failed to send message Error: Need consent on shareTargetPicker usage on LINE developer site` というエラーが出た。
    - メッセージ送信時に出た
        - `liff.shareTargetPicker()` でエラーになっている。
- LINEアプリから開いているのに、別ウインドウでページが開かれているように見える(左上にバツボタンがある)
    - チャネルの設定では、sizeを`Compact`にしているが、反映されていないようにみえる。
- [ドキュメント](https://developers.line.biz/en/reference/liff/#share-target-picker) を参照
- 以下で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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/b6d65a25-c30f-e417-e9c9-dc8a6be2ed0a.png)
    - ![ScreenShot 2021-05-20 15.50.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/6ac57fe1-6003-446e-6246-a802ac71a17e.png)

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