Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js + TypeScriptで作るLIFF v2アプリ
Search
Kazumasa Yamamoto
July 01, 2020
0
480
Vue.js + TypeScriptで作るLIFF v2アプリ
Kazumasa Yamamoto
July 01, 2020
Tweet
Share
More Decks by Kazumasa Yamamoto
See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
fill9120
0
1.2k
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2.4k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
830
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
350
Rust を開発言語として採用してからの取り組み
fill9120
1
1.8k
ストラクチャードコミュニケーション
fill9120
0
100
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
750
Rustでディープラーニング
fill9120
0
360
Rustで定数式を扱う
fill9120
0
400
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for Performance
lara
605
68k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
61k
Producing Creativity
orderedlist
PRO
344
40k
Code Review Best Practice
trishagee
67
18k
Optimizing for Happiness
mojombo
377
70k
What's in a price? How to price your products and services
michaelherold
244
12k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
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(); }) } }