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 に追加します。 <script charset="utf-8"
src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

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(); }) } }

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

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

Kazumasa Yamamoto

More Decks by Kazumasa Yamamoto

Featured

Transcript