Tweet
Tweet

Slide 1

Slide 1 text

LINEで始めるWebアプリ開発入門 Koki Miura(@k_miura_io)

Slide 2

Slide 2 text

• 今回話すこと • Webアプリがどうやって動くのか • LINE botがどうやって動くのか • 話さないこと • Messaging APIの詳しい話(今回はText Messageのみ) はじめに

Slide 3

Slide 3 text

ご質問・リアクション https://bit.ly/39nzpYs 質問とタイムテーブル リアクション(Comment Screen) https://commentscreen.com/comments?room=linedc

Slide 4

Slide 4 text

自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア @k_miura_io koki.miura05

Slide 5

Slide 5 text

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"

Slide 6

Slide 6 text

加川 澄廣（かがわ すみひろ） ◼ Keywords ⚫ LINE API Expert ⚫ python , TypeScript, Nuxt.js, AWS, GCP ⚫ “LINE Pay API SDK for python“ Contributor sumihiro3 sumihiro.kagawa 6

Slide 7

Slide 7 text

アジェンダ • Webアプリってどんなもの？ • Webアプリの構成、動作 • HTTP通信 • LINE botが動く仕組み • Webhook

Slide 8

Slide 8 text

Webアプリとは？ • ネットワークを使って動かす アプリケーション • Webサーバー上で動作し、ブ ラウザで操作を行う • すぐ使えるが、動作は重い • Google、Connpass、Amazon など

Slide 9

Slide 9 text

ネイティブアプリとは？ • App Storeなどからダウンロードして 使うアプリ • 端末のシステムを使用するが、動作 は軽い • 開発コストがかかる • LINE、出前館、PayPayなど

Slide 10

Slide 10 text

じゃあミニアプリは？ • LINEのアプリ上でありとあらゆるサー ビスを提供するWebアプリ • ログインはLINEのアカウントを使うだけ • LINEアプリから通知を飛ばせる ユーザー登録が簡単とか、通知 が出来たりとかネイティブとWeb アプリのいいとこ取りを目指して 開発されたもの

Slide 11

Slide 11 text

Webアプリの構成 • 基本の構成はクライアントとサーバー • クライアントはアプリの見た目の処理全般 • サーバーはクライアントから送られたデー タに対して処理を行った結果を返す

Slide 12

Slide 12 text

クライアント • 画面表示を行う • HTMLで骨組みを行い、CSS で見た目を整える • JavaScriptで画面の動き、 サーバーの通信を行う • 開発者モードを開くとページ のソースが見える

Slide 13

Slide 13 text

サーバー • ブラウザで入力したURLを 使って接続されたら、サー バーから画面を出力 • フォームで入力した情報の 受け取り、結果出力 • クラウドを使うことで比較的 安全にサーバー構築できる

Slide 14

Slide 14 text

サーバーとの通信 • クライアントとサーバーを通信するときにはHTTP通信 を行う • クライアントからサーバーにデータを送信することを HTTPリクエストという • クライアントから受け取ったデータに対してサーバー から結果を送信することをHTTPレスポンスという • HTTPを省略してることが多い

Slide 15

Slide 15 text

リクエストのメソッド • GET • サーバーから情報を取得する メソッド • ブラウザでURLを入力したとき に実行される • 送信するデータ量に制限あり • POST • サーバーにデータを登録させ るメソッド • フォームで入力した値を送信 するときに使える • 大量のデータを送信できる

Slide 16

Slide 16 text

LINE botの 仕組み • 送信したメッセージはLINE側のサーバに送られる • Jsonを作成し、自前で用意したサーバに Webhook(POST)で送信 • 返信メッセージを作成し、APIでLINE側のサーバーにPOST • LINE側のサーバーがユーザーにメッセージを返信

Slide 17

Slide 17 text

Webhookとは？ • Webサービスから何かしらのイベントが発生したときにそのイベントを 指定したURLにリクエストすること • LINE botであればLINEのサーバーにメッセージが来たときに指定した URLにイベントをPOSTすること • 要はただのPOST

Slide 18

Slide 18 text

Webアプリの構造と比較

Slide 19

Slide 19 text

LINE botを作る LINEアプリから送信された メッセージのリクエストを 受けるサーバーを作る

Slide 20

Slide 20 text

まとめ • Webアプリはクライアントとサーバーで成り立っている • LINE botも同じ仕組みで動いている • ミニアプリもWebアプリの開発を生かせる LINEを使ってアプリ作るならWeb アプリの仕組みを理解しよう！

Slide 21

Slide 21 text

END