Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js + TypeScriptで作るLIFF v2アプリ
Kazumasa Yamamoto
July 01, 2020
0
240
Vue.js + TypeScriptで作るLIFF v2アプリ
Kazumasa Yamamoto
July 01, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ストラクチャードコミュニケーション
fill9120
0
42
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
140
Rustでディープラーニング
fill9120
0
180
Rustで定数式を扱う
fill9120
0
170
LINE BotとLIFFを使って謎解きアプリを作った話
fill9120
0
400
Dockerで作るServerlessなLIFFアプリの開発環境
fill9120
2
530
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.6k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Writing Fast Ruby
sferik
612
57k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Statistics for Hackers
jakevdp
781
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Transcript
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(); }) } }