Help us understand the problem. What is going on with this article?

LIFF v2 APIを使ってみた

概要

先日、LIFFのAPIのv2がリリースされました。
早速試してみようと思ったのですが、私の持っているAndroid端末は対応しておらず(Android:5.0以降対応)
ちゃんと検証できなきゃ記事も書けないと試行錯誤の結果、何とか動作したのでその成果を残しておきます。

はじめに

LIFFとは

「LINE Front-end Framework」の略で、LINE社が提供するWEBアプリのプラットフォームの一種です。
LINEのトーク上にWEBアプリを表示することができ、ユーザー情報も連携することができます。
さらに、v2ではLIFFアプリ以外でもLIFF SDKを利用してユーザー情報を取得できるようになりました。

詳しくはこちらをご覧ください。

スターターアプリを試してみよう

公式からv2の新機能を盛り込んだスターターアプリがGitHubで公開されています。
早速利用してみようと思ったのですがREADMEを読むと「Herokuが前提」で「Node.jsが必要」!?

ソースを見てみるとNode.jsはインストールしなくても大丈夫のようですし、WEBサーバーでファイルを公開すれば利用できるようでした。
そこで、手ごろなWEBサーバーに設置し、LIFFアプリの設定もしてアクセスしてみましたが、必要な情報が表示されませんでした。
LIFFアプリとしての画面は表示されますし、最初から表示されている静的な記述は表示されます。
しかし、LIFF SDKで取得されるSDKのバージョンやOSの情報などは表示されませんでした。

検証

前述したようにv2はLINEアプリ外のブラウザでも動作させることができます。
そこで設置したLIFFアプリにブラウザでアクセスしたところちゃんとSDKのバージョンやOSの情報が表示されました。

外部ブラウザからLIFFアプリにアクセスする場合、SDKが用意したログイン処理を施せばユーザー情報も利用できます。
その機能もちゃんと確認することができました。

ここまで来てやっと気が付きました。
私の検証しているAndroidが古いからなんだと・・・。

スターターアプリの罠

どうにかして古い端末ではv1のSDKを読み込んで動作させられないかと思案したのですが、どうやらSDKの読み込みは正常に終了しているようでした。
LIFFアプリとして表示させている状況をデベロッパーツールで確認することはできないので、コメントアウトをしながら処理を追いかけたところ最初の初期化の処理で異常終了していたことがわかりました。

/**
* Initialize LIFF
* @param {string} myLiffId The LIFF ID of the selected element
*/
function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            // start to use LIFF's api
            initializeApp();
        })
        .catch((err) => {
            document.getElementById("liffAppContent").classList.add('hidden');
            document.getElementById("liffInitErrorMessage").classList.remove('hidden');
        });
}

どうやらAndroid 4のLINEアプリ上のLIFFはES6で追加されたアロー関数=>に対応していなかったようです。
Promise オブジェクトの then メソッドや catch メソッドにおけるを従来のようなコールバック関数に変更したところ、Android 4の端末でも動作することが確認できました

デモ用アカウント

デモ用のLINEアカウントを準備しましたので、登録して試してみてください。

友だち追加

まとめ

今回のはスターターアプリで使われていた内容を修正して動作するようになりました。
しかし、あくまで暫定対応で、今後はSDK自体が古いAndroid端末のLINEアプリでは解析できない可能性もあります。
もしそういった場合もフォローしようと思ったら別の対策が必要になってきますね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした