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

Transcript

1. Vue.js + TypeScriptで作るLIFF v2アプリ
2. LIFFとは LINEが提供するウェブアプリのプラットフォーム LINEの機能を活かしたWebアプリを開発出来る LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラット フォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと 呼びます。 LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得で きます。LIFFアプリではこれらを利⽤して、ユーザー情報を活⽤した機能を提供 したり、ユーザーの代わりにメッセージを送信したりできます。
3. デモ動画を流す
4. Qiita記事 Qiitaに詳しく書いてあります。このスライドに記事以上の情報はありません。 https://qiita.com/kyamamoto9120/items/210b9123e49a3a148942
5. ⼿順 1. チャネルを作成する 2. Vue.jsのプロジェクトを作成する 3. LIFFアプリを開発する
6. ngrokを起動 ngrok http 8080
7. プロバイダーを作成する 1. LINE Developersにログインする 2. プロバイダーを作成する
8. チャネルを作成する
9. LIFFアプリを追加する
10. 出来たLIFFアプリがこちら
11. Vue.jsのプロジェクトを作成する vue create liff-app
12. ngrokからアクセスできるようにする 以下の設定を package.json に追加します "vue": { "devServer": { "disableHostCheck": true } }
13. 動作確認 Vue.jsアプリを起動 npm run serve https://xxx.ngrok.io からアクセスできることを確認 ngrok経由でVue.jsアプリを開ければ、LIFFアプリとして実⾏することが出来ます。
14. 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>
15. liff-typeの導⼊ liff-typeのインストール npm i -D liff-type tsconfig.json ファイルに以下の内容を追記します。 ※追記内容は環境に応じて適宜読み替えてください { "compilerOptions": { "types": ["liff-type"] } }
16. 正しく設定が⾏えればインテリセンスが利いた快適なLIFFアプリ開発環境が作れると思 います。
17. 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(); }) } }