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