LINEではじめるWebアプリ開発入門ハンズオン

2020.01.25【初心者向け】LINEではじめるWebアプリ開発入門ハンズオン [ミニアプリNight]
https://linedevelopercommunity.connpass.com/event/201381/

1. LINEで始めるWebアプリ開発入門 Koki Miura(@k_miura_io)
2. • 今回話すこと • Webアプリがどうやって動くのか • LINE botがどうやって動くのか • 話さないこと • Messaging APIの詳しい話(今回はText Messageのみ) はじめに
3. ご質問・リアクション https://bit.ly/39nzpYs 質問とタイムテーブル リアクション(Comment Screen) https://commentscreen.com/comments?room=linedc
4. 自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア @k_miura_io koki.miura05
5. Me person: name: "Toru Igarashi" twitter: "@iganari_" github: "@iganari" position: company: "SRE" skills: [ Kubernetes, GCP, Terraform, Ansible ] blood-donation: count: 121 description: "I can donate blood a little"
6. 加川 澄廣（かがわ すみひろ） ◼ Keywords ⚫ LINE API Expert ⚫ python , TypeScript, Nuxt.js, AWS, GCP ⚫ “LINE Pay API SDK for python“ Contributor sumihiro3 sumihiro.kagawa 6
7. アジェンダ • Webアプリってどんなもの？ • Webアプリの構成、動作 • HTTP通信 • LINE botが動く仕組み • Webhook
8. Webアプリとは？ • ネットワークを使って動かす アプリケーション • Webサーバー上で動作し、ブ ラウザで操作を行う • すぐ使えるが、動作は重い • Google、Connpass、Amazon など
9. ネイティブアプリとは？ • App Storeなどからダウンロードして 使うアプリ • 端末のシステムを使用するが、動作 は軽い • 開発コストがかかる • LINE、出前館、PayPayなど
10. じゃあミニアプリは？ • LINEのアプリ上でありとあらゆるサー ビスを提供するWebアプリ • ログインはLINEのアカウントを使うだけ • LINEアプリから通知を飛ばせる ユーザー登録が簡単とか、通知 が出来たりとかネイティブとWeb アプリのいいとこ取りを目指して 開発されたもの
11. Webアプリの構成 • 基本の構成はクライアントとサーバー • クライアントはアプリの見た目の処理全般 • サーバーはクライアントから送られたデー タに対して処理を行った結果を返す
12. クライアント • 画面表示を行う • HTMLで骨組みを行い、CSS で見た目を整える • JavaScriptで画面の動き、 サーバーの通信を行う • 開発者モードを開くとページ のソースが見える
13. サーバー • ブラウザで入力したURLを 使って接続されたら、サー バーから画面を出力 • フォームで入力した情報の 受け取り、結果出力 • クラウドを使うことで比較的 安全にサーバー構築できる
14. サーバーとの通信 • クライアントとサーバーを通信するときにはHTTP通信 を行う • クライアントからサーバーにデータを送信することを HTTPリクエストという • クライアントから受け取ったデータに対してサーバー から結果を送信することをHTTPレスポンスという • HTTPを省略してることが多い
15. リクエストのメソッド • GET • サーバーから情報を取得する メソッド • ブラウザでURLを入力したとき に実行される • 送信するデータ量に制限あり • POST • サーバーにデータを登録させ るメソッド • フォームで入力した値を送信 するときに使える • 大量のデータを送信できる
16. LINE botの 仕組み • 送信したメッセージはLINE側のサーバに送られる • Jsonを作成し、自前で用意したサーバに Webhook(POST)で送信 • 返信メッセージを作成し、APIでLINE側のサーバーにPOST • LINE側のサーバーがユーザーにメッセージを返信
17. Webhookとは？ • Webサービスから何かしらのイベントが発生したときにそのイベントを 指定したURLにリクエストすること • LINE botであればLINEのサーバーにメッセージが来たときに指定した URLにイベントをPOSTすること • 要はただのPOST
18. Webアプリの構造と比較
19. LINE botを作る LINEアプリから送信された メッセージのリクエストを 受けるサーバーを作る
20. まとめ • Webアプリはクライアントとサーバーで成り立っている • LINE botも同じ仕組みで動いている • ミニアプリもWebアプリの開発を生かせる LINEを使ってアプリ作るならWeb アプリの仕組みを理解しよう！
21. END