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

2020/05/25 LT用資料
元記事のQiitaのURLはこちら↓
https://qiita.com/yagi_eng/items/5dce5527dc5d6a6e9833

※スライド中の「こんなのつくりました」の動画はSlideShare上で再生できません。Qiitaでは動画を再生頂けます。

Transcript

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