【Vue.js】「LINE／LIFFアプリ」の構築手順まとめ

LINE / LIFFとは

LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

出典：LINE Developers

【設定】LINE／LIFFアプリの設定をする

まず最初に、LINE DevelopersでLIFF構築の設定を先に済ませておきます、LINE Developersの登録がまだの方は登録しておきましょう。登録が済んだ方は以下の手順で「LIFF ID」と「LIFF URL」を発行しましょう。

1. LINE Developers コンソールを開く
2. プロバイダーを選択（登録）する
3. 新規チャネル作成
4. LIFFアプリをチャネルに追加する
5. LIFF ID・LIFF URLをメモ

③：新規チャネル作成について

プロバイダーの選択後、新規チャネル作成をクリックした際に表示される、チャネルの種類は「LINEログイン」を選択する、アプリタイプは「ウェブアプリ」を選択する、それ以外の項目は適当に入力するかデフォルトのままでOK、任意項目は飛ばしても大丈夫です。

④：LIFFアプリをチャネルに追加する

LIFFアプリを追加する際に設定する、エンドポイントはVueアプリの公開URLを設定してください。例えば、作成したVueアプリをhttps://liffapp.comに公開しているならこのURLを設定する形です。ちなみに、指定するURLはSSL化必須です。

Scopeはprofileとopenidにチェックを入れます、ボットリンク機能はご自由に設定して構いません、よく分からないという方はOn（Normal）を選択しておきましょう。他にも、LINEアプリ名やサイズは適当に設定して、オプションはデフォルトのままで大丈夫です。

⑤：LIFF ID・LIFF URLをメモ

チャネルにLIFFアプリを追加すると「LIFF ID」と「LIFF URL」がそれぞれ発行されるのでコピーしてメモしておきます、前者はVueアプリで使用します、後者はLIFFの動作確認に使用します。

これでLINE Developersで行う設定は完了です。

【実装】VueCLIにLIFFを組み込む

①：VueCLIでプロジェクトを作成

vue create liff-app

cd liff-vue

②：VueアプリにLIFFを導入

プロジェクトにLIFFをインストール

npm add @line/liff

src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  loggedIn: {{ loggedIn }}
  {{ profile.statusMessage }}
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import liff from '@line/liff'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      loggedIn: false,
      profile: {},
      displayName: "",
    }
  },
  mounted() {
    liff
      .init({ liffId: 'ここにLIFFID' }) // LIFF IDを貼る
      .then(() => {
        this.loggedIn = liff.isLoggedIn()
        this.getProfile()
      })
      .catch((err) => {
        this.occoredError = 'error:' + err
      })
  },
  methods: {
    getProfile() {
      liff.getProfile()
      .then(profile => {
        this.profile = profile
      })
    }
  }
}
</script>

src/App.vueは上記のようにして、26行目で⑤：LIFF ID・LIFF URLをメモで取得したLIFF IDを指定して保存します。

LIFFアプリを開発する – LINE Developers

③：Vueアプリをデプロイ

Vueアプリをビルド

npm run build

上記コマンドを実行してVueアプリをビルドします、ビルドしたらdistというフォルダが生成されるのでこれをサーバーにアップしたりホスティングする事でVueアプリとして利用できるようになります。

デプロイできたら後はLINEでLIFFの動作確認です。

【完成】LINEでLIFFの動作確認

LIFFを導入したVueアプリをデプロイしたら、後は⑤：LIFF ID・LIFF URLをメモで取得したLIFF URLをLINEアプリ内で開くだけです。今回は自分しかいないトークにリンクを投稿して、そこからLIFFを起動してみる事にします。

下からニョキッとLIFFアプリが出てきました、画面遷移するのではなくLINEの中でアプリが動いている感がありネイティブっぽい体験ができました。

LIFFの導入自体は、ある程度のプログラミング知識があれば簡単という事がお分かり頂けだかと思います。エンジニアはアプリ開発に集中できるのでLIFFの導入障壁はほとんどありません、たくさんの人にLIFFを使ってもらいたいというLINE開発陣の努力が感じられます。

というところで今回は以上になります。