LIFF新機能の「liff.id」を試してみた

この記事はすごくなりたいがくせいぐるーぷGWアドベントカレンダー3日目の記事です。

すごくなりたいがくせいぐるーぷ | GWアドベントカレンダー

はじめに

LIFFにliff.idというプロパティが追加されたので仕様などを調べてみました。

機能

liff.init()に渡したLIFFアプリID（String型）を保持するプロパティです。

liff.init()を実行するまでは、nullです。

と公式リファレンスにおる通り、どうやらliff.initで指定したliffIdを取得できるみたいです。

とりあえず実装してみた

まずは先にliff.initをしてからliff.idを出力してみます。

liff
  .init({
    liffId: '1234567890-abcedfgh'
  })
  .then(() => {
    console.log('さくせす', liff.id);
  })
  .catch((err) => {
    console.log(err.code, err.message);
    alert('エラーが発生しました');
  });

console

さくせす 1234567890-abcedfgh

次に、liff.initをする前にliff.idを出力してみます。

console.log(liff.id);

liff
  .init({
    liffId: '1234567890-abcedfgh'
  })
  .then(() => {
    console.log('さくせす');
  })
  .catch((err) => {
    console.log(err.code, err.message);
    alert('エラーが発生しました');
  });

console

null

確かにnullが返ってきました。

用途

liffIdを取得するという用途での使い方は思いつきませんが、liff.initをする前にliff.idを取得するとnullが返ってくるという仕様を使えば、まだliff.initをしていないのかどうかを判定できます。

僕は今まで、liff.initをする前にliff.isLoggedIn()をするとエラーを吐くという仕様を使い、以下のようなコードでliffアプリが初期化済みかどうかを判定していました。

try {
  liff.isLoggedIn();
} catch (e) {
  // 初期化済みでない時の処理
}

ですが、今回実装されたliff.idを使って上記のコードを書き換えてみたところ、うまく動作しました。上記のコードは若干無理矢理感が否めないですが、liff.idを使えば以下のような綺麗なコードになります。

if (!liff.id) {
  // 初期化済みでない時の処理
}

おわりに

本日、@stachibana さん作成のLIFF APP MARKETがリリースされました！

僕も時間割botという学生向けサービスのLIFFアプリ版を公開しましたので興味がある方は是非ご利用ください！