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
Mobile First: as difficult as doing things right
swwweet
223
9.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Automating Front-end Workflow
addyosmani
1368
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Your Own Lightsaber
phodgson
104
6.2k
GraphQLとの向き合い方2022年版
quramy
44
14k
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(); }) } }