Vue.js + TypeScriptで作るLIFF v2アプリ

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

デモ動画を流す

Qiita記事 Qiitaに詳しく書いてあります。このスライドに記事以上の情報はありません。 https://qiita.com/kyamamoto9120/items/210b9123e49a3a148942

⼿順 1. チャネルを作成する 2. Vue.jsのプロジェクトを作成する 3. LIFFアプリを開発する

ngrokを起動 ngrok http 8080

プロバイダーを作成する 1. LINE Developersにログインする 2. プロバイダーを作成する

チャネルを作成する

LIFFアプリを追加する

出来たLIFFアプリがこちら

Vue.jsのプロジェクトを作成する vue create liff-app

ngrokからアクセスできるようにする 以下の設定を package.json に追加します "vue": { "devServer": { "disableHostCheck": true } }

動作確認 Vue.jsアプリを起動 npm run serve https://xxx.ngrok.io からアクセスできることを確認 ngrok経由でVue.jsアプリを開ければ、LIFFアプリとして実⾏することが出来ます。

LIFFアプリを開発する LIFF SDKを組み込む LINE SDKはCDN経由でのみ配布されています。以下のscriptタグを index.html に追加 します。

liff-typeの導⼊ liff-typeのインストール npm i -D liff-type tsconfig.json ファイルに以下の内容を追記します。 ※追記内容は環境に応じて適宜読み替えてください { "compilerOptions": { "types": ["liff-type"] } }

正しく設定が⾏えればインテリセンスが利いた快適なLIFFアプリ開発環境が作れると思 います。

LIFFアプリを初期化する @Component export default class App extends Vue { @Prop({ type: Boolean, default: false }) loggedIn = false; created() { liff.init({ liffId: 'ここにLIFF IDを⼊れる' }) .then(() => { this.loggedIn = liff.isLoggedIn(); }) } }