🕌

【LINE API】LIFFのAPIリファレンスからの実用例をピックアップ

2023/07/20に公開

LINE

tech

はじめに

この記事の内容

この記事では、LINEのフロントエンドフレームワークであるLIFFについて、
公式ドキュメントのAPIリファレンスに基づいた実用例を紹介します。

参考文献

以下のコードは、
ユーザーがLINEにログインしていないかつ非開発環境である場合、ログインを促す処理を行います。

LIFFブラウザでアプリを開くと、liff.init時に自動的にログインが実行されるので、通常はliff.login()は不要です。

ただし、外部ブラウザでLIFFアプリを開くと、
この処理がないとLINE IDトークンが取得できずAPIとの接続が断たれてしまう問題があったので、下記のように対策しました。

main.ts

async function init() {
  const LIFF_ID = import.meta.env.VITE_APP_LIFF_ID
  await liff.init({ liffId: LIFF_ID })

  if (!liff.isLoggedIn() && import.meta.env.MODE !== 'development') {
      liff.login()
     }

  createApp(App).use(router).mount('#app')
}

init()

友達に紹介ボタンの作成: liff.shareTargetPicker() + liff.isApiAvailable()

次に、友達に紹介ボタンを作成するコードを紹介します。
まずはLINE_FRIEND_URLという定数にシェアしたいLINEアカウントのURLを指定します。

このURLはLINE Official Account Managerから取得できます。

次に、shareFriendsという関数を定義しています。

この関数では、liff.isApiAvailable('shareTargetPicker') を使用してshareTargetPicker APIが利用可能かどうかを判定します。利用可能な場合、liff.shareTargetPickerを呼び出し、テキストメッセージを共有します。
テキストメッセージにシェアしたいLINEアカウントのURLを入れることによって、友達に紹介ボタンの機能を実装しています。

share-friends.vue

<script setup lang="ts">
import liff from '@line/liff'

const LINE_FRIEND_URL = "シェアしたいLINEアカウントの友達追加リンクのURL（LINE Official Account Managerから取得）"

const shareFriends = () => {
  if (liff.isApiAvailable('shareTargetPicker')) {
    liff
      .shareTargetPicker([
        {
          type: 'text',
          text: `サンプルLIFFアプリ を友だち追加できます\n${LINE_FRIEND_URL}
          `,
        },
      ])
      .catch(() => {
        alert("シェアターゲットピッカーの起動に失敗しました。少し時間をおいてから再度お試しください。")
      })
  } else {
    alert('申し訳ありませんが、このデバイスでは「シェアターゲットピッカー」が利用できません。他の方法で共有をお試しください。')
  }
}
</script>
<template>
  <div class="container">
    <h1>サンプルLIFFアプリ を友だちに紹介</h1>
    <div class="box">
      <h2>LINEでシェアする</h2>
      <button @click="shareFriends()" />LINEで友達にシェアする</button>
    </div>
  </div>
</template>

処理成功後に指定のLINEトークルームを開く方法

特定の処理（下記ではIDとプロフィールの紐付け）が成功した後に、指定した公式LINEアカウントのトークルームを開きたい場合、LINE URLスキームのURLをlocation.hrefに代入することで実現できます。

LINE公式アカウントを開くURLスキーム

https://line.me/R/ti/p/{Percent-encoded LINE ID}

.env

VITE_APP_MESSAGING_API_LINE_ID = %40076bwsmq

sample.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/api'

const route = useRoute()
const id: string = route.query.id

const MESSAGING_API_LINE_ID = import.meta.env.VITE_APP_MESSAGING_API_LINE_ID

onMounted(async () => {
  try {
    await api.profile
      .postId(id)
      .then(res => {
        //LINEのトークルームを開く
        location.href = `https://line.me/R/ti/p/${MESSAGING_API_LINE_ID}`
      })
      .catch(error => {
        console.error(error)
      })
  } catch (error) {
    alert(error)
  }
})
</script>

余談

LINE URLスキームを活用すれば、
さまざまな面白い組み合わせが考えられるなと思いました。