24日目にLINEミニアプリが完成する初心者 ―― Day19. LIFFアプリを初期化する

はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ―― Day18. リッチメニューの修正」と題して、一旦当初予定していた LIFF アプリの機能開発を終えました。

今回からは LIFF でまだ紹介していない機能を学習しつつ機能修正・開発を行って行きたいと思います。

liff.init()

紹介する機能の 1 つ目としては LIFF アプリを初期化です。

これは LIFF スターターアプリにあらかじめ組み込まれているため、詳しく学習を行いませんでした。

そのためあらためてこの機能について詳しく学習して行きたいと思います。

LIFF アプリの初期化には LIFF SDK のliff.init()を使います。

LIFF アプリはページを開くたびに必ず初期化する必要があり、これは同じ LIFF アプリ内での遷移であっても同様のため、LIFF アプリ開発をするのであれば避けては通れないものです。

LIFF アプリを初期化する前でも実行できるメソッド

初期化前にも以下のメソッドは利用することができます。

• liff.ready
• liff.getOS()
• liff.getAppLanguage()
• liff.getLanguage()（非推奨）
• liff.getVersion()
• liff.getLineVersion()
• liff.isInClient()
• liff.closeWindow()（LIFF SDK バージョンが 2.4.0 以上）
• liff.use()
• liff.i18n.setLang()

実装方法

コードの記述はシンプルで以下のように記載を行います。

thenの中には、LIFF アプリの初期化後に実行する処理を記述します。

liff
  .init({ liffId: process.env.LIFF_ID })
  .then(() => {
    // Start to use liff's api
  })
  .catch((error) => {
    console.log(error);
  });

私は Next.js で実装しているため\_app.tsxファイルでuseEffectを使って記述しています。

src/nextjs/pages/_app.tsx

  useEffect(() => {
    liff
      .init({ liffId: process.env.LIFF_ID })
      .then(() => {
        liff.getProfile().then((profile) => {
          trigger({ userId: profile.userId, name: profile.displayName });
        });
      })
      .catch((error) => {
        console.log(`liff.init() failed: ${error}`);
      });
  }, []);

LIFF アプリ初期化時の注意事項

いくつか注意事項があったためそれぞれ確認しておきます。

liff.init()をエンドポイント URL 以下の階層で実行する

liff.init()メソッドはエンドポイント URL と完全に一致、もしくはエンドポイント URL よりも下の階層においてのみ動作します。

私の場合だとエンドポイント URL として以下の 3 つを登録しています。

• https://mahaloliving.netlify.app/
• https://mahaloliving.netlify.app/catalog
• https://mahaloliving.netlify.app/showroom

これらはそれぞれエンドポイント URL と完全一致しているため、どれも問題ありません。

もしhttps://mahaloliving.netlify.app/をエンドポイント URL として登録していなかった際は、登録されているエンドポイント URL より上の階層になってしまうためliff.init()が動作しません。

liff.init()を 1 次リダイレクト先 URL と 2 次リダイレクト先 URL で 1 回ずつ実行する

liff.init()メソッドは URL に付与されるliff.stateやaccess_token=xxxなどの情報を元に初期化処理を行っています。

そのためエンドポイント URL にクエリパラメータやパスが含まれている場合は、正しく LIFF アプリを初期化するために、2 度 liff.init()メソッドを実行する必要があります。

1 回目は 1 次リダイレクト先 URL とされる、エンドポイント URL での初期化。
2 回目は 2 次リダイレクト先 URL とされる、エンドポイント URL にクエリパラメータやパスを含んだ URL での初期化です。

ただ、今回私が実装した中ではクエリパラメータやパスが含まれている URL はまだ使っていないため対応は不要です。

URL を操作する処理はliff.init()が完了してから実行する

liff.init()メソッドが返すPromiseオブジェクトが resolve する前に、サーバーやフロントエンド側の処理などで URL を変更すると LIFF アプリを開くことができないようです。

リダイレクトなどを行う場合は以下のようにliff.init()完了後に実行するようにしましょう。

liff
  .init({
    liffId: "1234567890-AbcdEfgh", // Use own liffId
  })
  .then(() => {
    // Redirect to another page after the returned Promise object has been resolved
    window.location.replace(location.href + "/entry/");
  });

1 次リダイレクト先 URL の取り扱いに注意する

1 次リダイレクト先 URL には自動的にaccess_token=xxxといったユーザのアクセストークンが付与されます。

アクセストークンは機密情報ですので、このアクセストークンは付与された 1 次リダイレクト先は外部に公開しないよう注意しましょう。

まとめ

ここまでで LIFF アプリの初期化について学習し、実装に問題がないか振り返ってきました。

次回は、二次元コードリーダーについて学習し、機能としての活かし方を考えて行きたいと思います。

残りは 5 日！
気になる方は是非フォローやカレンダー購読をお願いします