7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【#LINE】 LIFF v2 (LINE Front-end Framework v2) を使って 2次元バーコード(QRコード)を読み取る

Last updated at Posted at 2019-10-17

概要

今までのLIFF v1 ではできなかった 2次元バーコードの読み取り機能が LIFF v2 に登場したので、サンプルアプリを使ってQRコード読み取りを試してみます。

前提条件

  • LINE Messaging API を利用できるアカウントを持っていること
  • Heroku アカウント

LIFFとは

公式のから引用

LINE Front-end Framework(LIFF)は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

試す

サンプルアプリのデプロイ

LIFF v2のサンプル を Heroku にデプロイします。

image.png

ログイン後必要な情報を入力(ここで新規Herokuアカウントを作ることも可能です)

image.png

デプロイ (Deploy app) します。

image.png

LIFF アプリの作成

作成したアプリのURLを確認します。
image.png
今は設定情報が正しくない為正しい画面は表示されません。(setting から確認することもできます。)
image.png

image.png

作成後 LIFF ID を保管します。
image.png

line://app/{liffId}.です。

サンプルアプリの設定

環境変数(LIFFに必要な情報)を設定するためにダッシュボードに遷移し先ほど保管した LIFF ID を追加します。

image.png

image.png

KEY に MY_LIFF_ID
VALUE に 先ほど保管した LIFFID
を入力し追加(Add)します。

image.png

以上で完了です。
LINE 上で LIFF を開き、動作を確認しましょう。

動作検証

基本はLINEで友達登録などを開くときと同じ(LINE 公式的には隠されていた機能のはず)QRコードリーダーが開かれます。
その為、Android の場合は URL 以外の値は形式エラーとなり取得できません。

図1.png

感想

LIFF で QRコードを読むのは結構な人が待っていた機能ではないでしょうか?
LIFF v2 になり他にも新たに追加された機能が多数あるので試す予定です。

注意点として、 これまであった LIFF v1 は公式ドキュメントにもある通り廃止予定との事ですので、移行するようにしましょう。

7
5
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
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?