macoblog

「ゲーム × プログラミング」で生きていく

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

JavaScript

この記事では、LINEが提供するLIFFをVue.jsを使って構築する方法について解説しています。LIFF構築に興味がある方は参考にしてください、Node.js(npm)を使用したLIFF構築手順をまるっとご紹介します。

LINE / LIFFとは

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

引用:LINE Front-end Framework | LINE Developers

目次【本記事の内容】 [ click ]

【設定】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アプリをチャネルに追加する

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

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

⑤:LIFF ID・LIFF URLをメモ

⑤: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を指定して保存します。

③:Vueアプリをデプロイ

Vueアプリをビルド

npm run build

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

Vueアプリをデプロイする際は、④:LIFFアプリをチャネルに追加するで設定したエンドポイントに合わせる形でお願いします、ここを間違えるとLIFFは動作しません。

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

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

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

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

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

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

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