Nuxt3 LIFFアプリ開発 SDKを導入して初期化するまで

どもも、ダメおです。

公式ドキュメントに書いてある内容がほぼなので、別で記事をまとめる必要もありませんが、載せておきます。

LIFFとは

LINE Front-end Frameworkの略で、LINEが提供しているウェブアプリプラットフォームです。LINE内のブラウザとは別で、LINEのLIFFブラウザという中で起動するらしい！
LINEアプリもLIFFの一種。

本題のLIFF SDK

LIFF SDKは読んで字のごとく、LIFFの機能を利用するための SDKです。
公式から配信されていて、npmコマンドやyarnコマンドでインストールできます。

では早速インストール

// npm の場合
npm install @line/liff

// yarn の場合
yarn add @line/liff

だけです。

初期化する

LIFF SDKを利用するには、SDKを初期化しなければいけません。

liff.init({ liffId: <developerページ内のLiffId> })

だけです。

ちなみにこの liff.init は非同期処理で、Promise なので

liff.init({ liffId: <liff id>})
  .then(res => {
    // init成功時の処理
  })
  .catch(err => {
    // init失敗時の処理
  })

// または

liff.init({ liffId: <liff id> }, successCallback, errorCallback)

てな感じで成功/失敗のコールバック受け取ることができます。

成功/失敗時でレスポンス返したければ

new Promise((resolve, reject) => {
  liff.init({ liffId: <liff id>})
    .then(res => {
      return true
    })
    .catch(err => {
      return false
    })
})

てな感じで返せます。

成功したときにページ遷移したいとか、useStateで値設定したいとかなら liff.init とthen/catch で対応できますね。

ここまではNuxt3正直関係なく、LIFF SDK共通ですが
これをNuxt3に実装するとすると composables に入れるか、plugins に作成するかってところですかね。またはLIFFブラウザ以外の起動を許可しないとか、それによってページ等変えるなら middleware に作成になるのかなー。と思います。

// composables/useLiff.ts
import liff from '@line/liff'

export const useLiff = () => {
  return liff.init({ liffId: <liff id> })
}

// or

export const useLiff = () => {
  return new Promise((resolve, reject) => {
    liff.init({ liffId: <liff id> })
      .then(res => {
        resolve({
          data: ref(true)
        })
      })
      .catch(err => {
        console.log(err)
        reject({
          data: null,
          error: createError({
            statusCode: err.code,
            statusMessage: err.message
          })
        })
      })
  })
}

OR

// plugins/initLiff.client.ts
import liff from '@line/liff'

export default defineNuxtPlugin(async nuxtApp => {
  await liff.init({ liffId:: <liff id> })
    .then(res => {

    })
    .catch(err => {

    })
})

OR

// middleware/initLiff.ts

export default defineNuxtRouteMiddleware((t, f) => {
  liff.init({ liffId: <liff id> })
    .then(res => {
      // init成功
    })
    .catch(err => {
      // init 失敗
      console.log(err)
      if (t.path != '/notLiffApp') {
        navigateTo('/notLiffBrowser')
      }
    })
})

とかですかね？
相変わらずメモ用コンテンツ。まぁでも どこかの、だれかの参考になりましたら幸いです。

Tweets by dameo_sp