Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

4b2f3a64637b51e81813accbe8a98083?s=47 KMiura
January 25, 2021

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

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

4b2f3a64637b51e81813accbe8a98083?s=128

KMiura

January 25, 2021
Tweet

Transcript

  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