LoginSignup
3
3

More than 3 years have passed since last update.

@ozaki25

【LINE】LIFFアプリを試してみる~セットアップまで~

Last updated at Posted at 2020-03-20

概要

  • LIFFアプリとはLIFF(LINE Frontend Framework)を使ったアプリのことでLINEのトーク画面にWebアプリを表示することができます
  • さらにそのWebアプリからLINEの情報を取得したりメッセージを投稿するなどLINEと連携することができます
  • この記事ではLIFFを使った実装まではふれずアカウントの設定などの事前準備までを紹介します
  • 公式ドキュメント

手順

  • まずはLINEのIDでLINE Developperにログインします

スクリーンショット 2020-03-20 23.24.50.png

  • ログインできたら「新規プロバイダー作成」からプロバイダーを作成します

スクリーンショット 2020-03-20 23.27.02.png

  • 次にチャネルを作成します
  • 「LINEログイン」を選択してください

スクリーンショット 2020-03-20 23.34.25.png

  • 必要事項を入力して作成します

スクリーンショット 2020-03-20 23.40.21.png
スクリーンショット 2020-03-20 23.40.41.png

  • チャネルができたらLIFFタブからLIFFの設定を追加します
    • 「サイズ」はLINEのトーク画面に表示する時のサイズです
      • 後からでも変えられるのでそれぞれ試してみてください
    • 「エンドポイントURL」はトーク画面に表示するLIFFアプリ(Webページ)のURLです
      • 今回はまだ作っていないのでとりあえずQiitaのページを出してみます
    • 他の項目の詳細は公式のドキュメントをご参照ください

スクリーンショット 2020-03-21 0.02.05.png

  • 必要事項を入力して追加を押します

スクリーンショット 2020-03-21 0.09.05.png

  • 作成が完了するとURLスキームが表示されます
    • これにアクセスすることでLIFFアプリにアクセスできます

スクリーンショット 2020-03-21 0.13.14.png

  • LINEのトーク画面にURLスキームを投稿しアクセスしてみましょう

Screenshot_20200321-001834.png

  • 初回の場合アクセス許可が求められるので許可します

Screenshot_20200321-001931.png

  • うまくいけばQiitaのページが表示されるはずです

Screenshot_20200321-001953.png

まとめ

  • 今回はセットアップのみで暫定でQiitaのページを出すところまでできました
  • 次回以降でLIFFアプリを作成しトーク画面に表示できるようにしてみます

続編

3
3
0

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
Sign upLogin
3
3