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

C5e26822fb2aa64410b50eac63ef7d84?s=47 Kazumasa Yamamoto
July 01, 2020
91

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

C5e26822fb2aa64410b50eac63ef7d84?s=128

Kazumasa Yamamoto

July 01, 2020
Tweet

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