9
Most read
10
Most read
12
Most read
LIFFでLINE公式アカウント上に
予約フォームを作成する
@yagi_eng
2020/5/25
こんなのつくりました
2
こちらのQRコードを
LINEで読み取るとお手元の
端末でお試し頂けます
3
アジェンダ
• こんなのつくりました(済)
• かんたんに自己紹介
• LIFFってなに?
• つくりかた
• まとめ
4
かんたんに自己紹介
・名前
Kohei Yaginuma
・経歴
大手SIerでクラウドエンジニア⇒フリーWebエンジニア
・最近興味があること
LIFF、Go、Nuxt.js、マネジメント、もくもく会、個人サービス開発
・趣味
海外旅行、水泳、ミュージカル鑑賞、ゲーム、なんか面白そうなこと、etc…
5
LIFFってなに?
6
公式HPより引用
LINE Front-end Framework(LIFF)は、LINEが提供するウェブアプリのプラット
フォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと
呼びます。
LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得で
きます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供
したり、ユーザーの代わりにメッセージを送信したりできます。
公式HP:https://developers.line.biz/ja/docs/liff/overview/
7
つまり
LINEと簡単に連携できて
ブラウザやLINE上で動作するアプリを作れるやつ
8
つくりかた
9
おおまかな流れ
1. アカウント作成
2. リッチメニュー作成
3. コーディング( LIFF関係の部分のみ抜粋)
4. GitHubにプッシュ、GitHub Pagesを使って公開
5. リッチメニューにリンクを設定、動作確認
10
↓ 詳しくはQiitaにまとまっています
【LINE/LIFF入門】LIFFでLINE公式アカウント(旧LINE@)上に予約フォームを作成する
(GitHub Pages使用)
https://qiita.com/yagi_eng/items/5dce5527dc5d6a6e9833
1/5 アカウント作成
1. LINE公式アカウントを作成
2. LINE Developersに登録
11
2/5 リッチメニュー作成
トーク画面下に表示されるリッチメニューの画像をCanovaを使って作成します
Canovaでは無料でいい感じのデザインを作れるのでおすすめです
12
これつくりました!
3/5 コーディング( LIFF関係の部分のみ抜粋)
CDNで読み込んで①初期化して②メッセージ送信のメソッドを実行するだけ!
13
① ②
4/5 GitHubにプッシュ、GitHub Pagesを使って公開
14
5/5 リッチメニューにリンクを設定、動作確認
• LINE Official Account Manager(LINE公式アカウントの管理画面)で
リッチメニューにGitHub Pagesのリンクを設定
• 作成したLINE公式アカウントをLINEの友だちに追加して動作確認!
15
まとめ
16
LIFFって便利
17
• DBなどを要さない簡単なアプリであればフロントエンドだけで完結できる
• GitHub Pagesを使えばサーバもいらない
• LINEと連携するアプリ、LINE上で動作するアプリが簡単に作れる
• 友だちに俺LINE上でアプリ作れるんだと自慢できる
• なんかたのしい
おまけ
18
【再掲】詳しくはQiitaにまとまっています
【LINE/LIFF入門】LIFFでLINE公式アカウント(旧LINE@)上に予約フォームを作成する(GitHub Pages使用)
https://qiita.com/yagi_eng/items/5dce5527dc5d6a6e9833
(追記)
ShareTargetPickerという機能を使うと、LINE上だけでなく、Webブラウザ上からLINEトーク画面に
メッセージを送信できます
↓
【LINE】既存LIFFアプリにShareTargetPickerを導入する
https://qiita.com/yagi_eng/items/b5136dae10f2df8ce99a
19
各アカウント
・Twitter
https://twitter.com/yagi_eng
・Qiita
https://qiita.com/yagi_eng
・Wantedly
https://www.wantedly.com/users/135658076
・Instagram
https://www.instagram.com/yaginu_travels_around/
だいだい yagi_eng の
アカウント名でやってます
20

More Related Content

PDF
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
PDF
NFT/VCを活用した「キャリア証明書」の発行を通じて企業の認知形成・採用を支援するサービス「sakazuki」紹介資料【2023年度版】
PDF
ChatGPTをシステムに組み込むためのプロンプト技法 #chatgptjp
PDF
Unityで作ったゲームをDLカードで配布してみた話 #roppongiunity
PDF
データ活用をするための組織
PDF
JDMC LT#1 - なぜモノタロウでデータマネジメントが必要になったのか
PPTX
脱RESTful API設計の提案
PDF
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
NFT/VCを活用した「キャリア証明書」の発行を通じて企業の認知形成・採用を支援するサービス「sakazuki」紹介資料【2023年度版】
ChatGPTをシステムに組み込むためのプロンプト技法 #chatgptjp
Unityで作ったゲームをDLカードで配布してみた話 #roppongiunity
データ活用をするための組織
JDMC LT#1 - なぜモノタロウでデータマネジメントが必要になったのか
脱RESTful API設計の提案
『 イドラ ファンタシースターサーガ 』を支える GCP | Google Cloud INSIDE Games & Apps

What's hot (20)

PPTX
企業でのChatGPTの利用 法的観点からの応急処置(20230629).pptx
PPTX
5分で出来る!イケてるconfluenceページ
PDF
[DO01] DevOps でリードタイムを8ヶ月から最短1週間まで短縮!!  マネージャや開発チーム変化の赤裸々話
PDF
組織デザインの展開 ~官僚制からティール組織まで~
PPTX
Management 3.0 デレゲーションと エンパワーメント
PDF
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
PDF
クラウドを最大限活用するinfrastructure as codeを考えよう
PPTX
【Ltech#5】機械学習を用いた間取り画像の自動解析
PDF
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
PDF
人にうれしいAIのUXデザイン - Googleの「People + AI Guidebook」をひもとく:DevLOVE X
PDF
「伝わるチケット」の書き方
PPTX
アドレスバーにURL打ち込んでからページが表示されるまでに 何が起こっているか
PDF
Redmine 4.2で作るヘルプデスク向け問い合わせ受付・管理システム
PDF
プロダクトマネージャーこそプロジェクトマネジメントを学ぼう (2).pdf
PDF
月商数千万のソーシャルゲームを作る方法
PDF
Social GAME における AI 活用事例 [第 4 回 Google Cloud INSIDE Games & Apps]
PDF
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
PPTX
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
PPTX
Goで実装した UPSIDERの決済金額リミット機能
PPTX
レガシコード改善ガイド
企業でのChatGPTの利用 法的観点からの応急処置(20230629).pptx
5分で出来る!イケてるconfluenceページ
[DO01] DevOps でリードタイムを8ヶ月から最短1週間まで短縮!!  マネージャや開発チーム変化の赤裸々話
組織デザインの展開 ~官僚制からティール組織まで~
Management 3.0 デレゲーションと エンパワーメント
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
クラウドを最大限活用するinfrastructure as codeを考えよう
【Ltech#5】機械学習を用いた間取り画像の自動解析
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
人にうれしいAIのUXデザイン - Googleの「People + AI Guidebook」をひもとく:DevLOVE X
「伝わるチケット」の書き方
アドレスバーにURL打ち込んでからページが表示されるまでに 何が起こっているか
Redmine 4.2で作るヘルプデスク向け問い合わせ受付・管理システム
プロダクトマネージャーこそプロジェクトマネジメントを学ぼう (2).pdf
月商数千万のソーシャルゲームを作る方法
Social GAME における AI 活用事例 [第 4 回 Google Cloud INSIDE Games & Apps]
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
Goで実装した UPSIDERの決済金額リミット機能
レガシコード改善ガイド
Ad

LIFFでLINE公式アカウント上に予約フォームを作成する