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
410
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
730
Rust & AWS X-Ray による分散トレーシングの実現
fill9120
0
2k
Rust製プロダクトを 3年以上運用して得たノウハウ
fill9120
0
680
Messaging APIを駆使した ChatGPT ボットのUX改善
fill9120
0
330
Rust を開発言語として採用してからの取り組み
fill9120
1
1.7k
ストラクチャードコミュニケーション
fill9120
0
85
Cloudflare PagesにVue.jsアプリをデプロイしてみた
fill9120
0
600
Rustでディープラーニング
fill9120
0
330
Rustで定数式を扱う
fill9120
0
370
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Being A Developer After 40
akosma
72
580k
A better future with KSS
kneath
231
17k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Infographics Made Easy
chrislema
238
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
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(); }) } }