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

サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン

サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン

6d64a4d4ab6201f2ce57e3befc687785?s=128

Yoshiki Kobayashi

December 19, 2020
Tweet

Transcript

  1. サーバレスアーキテクチャで LINE BOTが 多分作れるようになる ハンズオン 2020/12/19 Yoshiki Kobayashi

  2. Hello World!!! 2 器用貧乏な何でも屋 本職はサーバサイド。フロントも好き。SQLは苦手。オ ブジェクト指向はまだいまいち使いこなせないくせに クラス使って書くことの方が多い。 得意な言語はJavaScript(ES5, ES6)、Ruby。最近 GolangとTypeScriptがアツい。実はインフラの方が

    経歴が長い人。 Yoshiki Kobayashi @yoshi0202 https://code-plum.dev @codeplumdev
  3. 過去の資料 3 定期的にこんな感じで ゆるーくやらせてもらっています 過去の資料はこちら https://speakerdeck.com/yoshi0202 よかったらスターつけてください!!!!

  4. 1. 本日のハンズオンについて 2. 今日の成果物 3. サーバレスアーキテクチャの説明 4. じゃあデメリットは? 5. Lambdaを設定してみる

    6. API Gatewayを使うよ 7. LINEと連携してみよう 8. APIと連携してみよう 9. オリジナル要素を入れるには 10. 最後に 本日のアジェンダ 4
  5. 本日のハンズオンについて 1 5

  6. 本日のハンズオンについて 6 みなさま 本日はお集まりいただき ありがとうございます

  7. 本日のハンズオンについて 7 12月。 今年ももう終わりを 迎えますね。

  8. 本日のハンズオンについて 8 今年、どうでした?

  9. 本日のハンズオンについて 9 僕は

  10. 本日のハンズオンについて 10 めっちゃいろいろ活動できた 環境も変わった • 転職(上流現場の何でも屋 → 自社サ開発エンジニア) • オンラインLT(メンター繋がりで二回ほど)

    • オンラインハンズオン(試験的なもの含め二回) • オフラインハンズオン登壇(本日含め二回目) • 利用言語(Golang, Java, Kotlin) プライベートもいろいろ変わったので興味ある人は忘年会か何かで聞いてね
  11. 本日のハンズオンについて 11 つどいのみなさまのおかげで ハンズオン実施の機会が 頂けてます 本当に感謝

  12. 本日のハンズオンについて 本日はハンズオンです 有意義な時間になるように頑張 ります 12

  13. 本日のハンズオンについて 13 スライドについて • ページ単位でのスライドの写真撮影はご遠慮ください • スライドはSpeakerDeckにアップロードします • 再配布や再利用はSpeakerDeckを参照してください •

    ハンズオン中はコピペが多いのでGoogleスライドを使うと楽 だと思います
  14. 本日のハンズオンについて 14 ハンズオンについての諸注意 • 基本的には全員ペースを合わせて進めていきます • プレゼンでは無いので質問は随時受け付けます • わからないところあれば気軽に声をかけてください •

    前回に引き続き写真撮影大歓迎です • 途中で何度か休憩を挟む予定です • AWSを使います(料金的なところが気になる人はご連絡ください )
  15. 本日のハンズオンについて 15 ハンズオンについての諸注意② • 2020年12月時点のAWS、LINEをベースにしてます • サービス仕様が変わることもあります ※ • ハンズオン当日までに画面が変わってたら泣く

    • オンライン参加の方はマイクミュートでお願いします • ガヤスレッドをSlackに建てるのでそこに質問ください • もちろんmeetで話しかけてもらってもOKです! • みんなでわいわい楽しくやりましょう!!!!!
  16. 本日のハンズオンについて 16 (余談) しっかりとフラグ回収して AWS の画面キャプチャ全部撮り直した話 なんか増えてる・・・ Lambdaの画面めちゃくちゃ 変わっとるやんけ!!

  17. 今日の成果物 2 17

  18. 今日の成果物 18 今日作るもの サーバレスアーキテクチャな LINE BOT

  19. 今日の成果物 19 いろいろ細かい説明は後にして おいてまずはどんなものかをご 紹介

  20. 今日の成果物 20

  21. 今日の成果物 21 意外と簡単につくれるので 誰か便利なもの作ったら 共有してください っていうか是非作って欲しい 最後までやるとわかりますが

  22. 今日の成果物 22 こんなのあったらいいよね〜 とか こうしたら面白いよね〜 みたいな意見 大歓迎です

  23. 今日の成果物 23 本日の目標 • サーバレスアーキテクチャの概念を理解する • サーバレスのメリットデメリットを理解する • LINEアカウントとのやりとりの方法を理解する •

    LINE BOTが作れるようになる • Lambda + API Gateway を組み合わせた感動に触れる
  24. サーバレスアーキテクチャの説明 3 24

  25. サーバレスアーキテクチャの説明 25 では早速始めていきますよ

  26. サーバレスアーキテクチャの説明 26 そもそも サーバレスアーキテクチャを 使っていく前に

  27. サーバレスアーキテクチャの説明 27 サーバレス アーキテクチャってなんだ

  28. サーバレスアーキテクチャの説明 28 サーバーレス・コンピューティング(Serverless computing)と は、クラウド・プロバイダーがアプリケーションに必要なマシン・リ ソースの割り当てを動的に管理し、事前に購入されたことに基づ く請求ではなく、各アプリケーション要求を満たすために使用さ れる個々のリソース量に基づいた請求を行うようなクラウド・コン ピューティングの実行モデル(英語版)である。 [1]

    サーバレスとは By Wikipedia
  29. サーバレスアーキテクチャの説明 29 アーキテクチャ(architecture)は、英語で「建築学」、「建築 術」、「構造」を意味する語である。 アーキテクチャとは By Wikipedia

  30. サーバレスアーキテクチャの説明 30 相変わらずWikipediaさんは 難しい説明が好きだなぁ

  31. サーバレスアーキテクチャの説明 31 めちゃくちゃざっくり簡単にいうと アプリケーションを動かすのに サーバを必要としないアプリ ケーションの構成!!

  32. サーバレスアーキテクチャの説明 32 皆さんの頭の中 どゆこと? 具体例無いの?

  33. サーバレスアーキテクチャの説明 33 今までの構成 アクセスする人 Webアプリケーション アプリケーションサーバ (例だとEC2) データベースサーバ (例だとRDS) ブラウザを介して

    アクセス(リクエスト) サーバで処理した結果を ブラウザに返却(レスポンス) いろいろ 連携 いろいろ 連携
  34. サーバレスアーキテクチャの説明 34 サーバレスアーキテクチャ (Lambda + API Gateway + DynamoDBを使った例) アクセスする人

    Webアプリケーション API Gateway Lambda DynamoDB リクエストを API Gatewayで受ける Lambdaで 任意の処理を実行 (使うなら)DynamoDBとかも 使ってデータ保存も可
  35. サーバレスアーキテクチャの説明 35 こんな感じで アプリケーションを動かす時に EC2とかRDSを必要としない設 計思想で作られたアプリケー ション

  36. サーバレスアーキテクチャの説明 36 なんとなく イメージできましたか?

  37. サーバレスアーキテクチャの説明 37 でもこれって 何が嬉しいんや

  38. サーバレスアーキテクチャの説明 38 サーバレスでない構成で アプリケーションを構築する時の ことを考えてみる メリットを理解するために

  39. サーバレスアーキテクチャの説明 39 サービス開始時のお話 ここからの話は 全てフィクションです

  40. サーバレスアーキテクチャの説明 40 例えば 「通知、キュー、1TB以上のレコードが保存できるス トレージ、動画ストリーミングの機能を実装したアプリ ケーションを2週間ぐらいで実装したい!」 って要望、どうします?

  41. サーバレスアーキテクチャの説明 41 例えば A. 納期が短すぎるとプロマネを 問い詰める

  42. サーバレスアーキテクチャの説明 42 • 通知機能 ◦ アプリで無理やりできなくはないけど・・・ • キューイング ◦ 規模は?どのくらいの感覚でキューが貯まる??

    • 大容量ストレージ ◦ Webサーバと兼任しても良いけどメンテがなぁ • ビデオストリーミング ◦ いや、どんな技術使えばええんや
  43. サーバレスアーキテクチャの説明 43 あと 単純に 仕組みが良くわからんくて 調査に時間かかりません?

  44. サーバレスアーキテクチャの説明 44 コーディングに必要な期間も めっちゃ長くなりそう

  45. サーバレスアーキテクチャの説明 45 サーバレスアーキテクチャを採用すると ある程度 物が準備されてるから それなりの物は簡単に作れる

  46. サーバレスアーキテクチャの説明 46 • 通知機能 • キューイング • 大容量ストレージ • ビデオストリーミング

    Amazon Simple Notification Service Amazon SQS Amazon S3 AWS Media Services (よく知らない)
  47. サーバレスアーキテクチャの説明 47 例えば2 「問い合わせフォームが欲しいんだけどアクセスもそ んなにないから、できる限り低コストで作ってもらえ ないかなぁ。あ、カスタマイズできないし GoogleFormは使いたくないや!!」 って要望、どうします?

  48. サーバレスアーキテクチャの説明 48 例えば2 A. いやGoogleForm使おうよ

  49. サーバレスアーキテクチャの説明 49 • アクセスがそんなにない ◦ 低スペックのサーバでも余るぐらいのリソース • アプリの規模が小さくて局所的に利用 ◦ サーバ構築めんどくさいなぁ

    • できる限り小コスト ◦ サーバ24時間起動してるのもったいない
  50. サーバレスアーキテクチャの説明 50 サーバレスアーキテクチャを採用すると サーバを構築せずアプリケー ションを起動できるから構築の 手間もない

  51. サーバレスアーキテクチャの説明 51 サーバレスアーキテクチャを採用すると あと、使う時だけ動くから24時間 環境が動いていることがなくて 小コスト&リソースが余ることがな い

  52. サーバレスアーキテクチャの説明 52 • アクセスがそんなにない ➢ 最低限のリソースで起動できる • アプリの規模が小さくて局所的 ➢ 画面ポチポチでリソース作れるから楽

    • できる限り小コスト ➢ 使う時だけ利用するからコストダウン可能
  53. サーバレスアーキテクチャの説明 53 例えば3 「絶対に落ちないシステム作ってよ! 小林くんなら余裕だよね〜〜〜www」 って要望、どうします?

  54. サーバレスアーキテクチャの説明 54 例えば3 A. そんなものは作れません

  55. サーバレスアーキテクチャの説明 55 • 絶対に落ちないの求めるかぁ・・・ ◦ サーバ100台用意しようが落ちる時は落ちる ◦ アクセススパイク時スケーリングが間に合わない ◦ 事前にアクセスが読めないとつらい

    ◦ でもぶっちゃけ落ちないシステムなんて存在しない ◦ (タイムリーだけどGoogleもこの前落ちてたしね)
  56. サーバレスアーキテクチャの説明 56 サーバレスアーキテクチャを採用すると 裏側で勝手にスケーリングしてく れるからスケーリング考えなくて 良い

  57. サーバレスアーキテクチャの説明 57 サーバレスアーキテクチャを採用すると 処理単位で動くのでスペック(と いう表現は正しいか微妙だけど) もそのタイミングで変更可能

  58. サーバレスアーキテクチャの説明 58 サーバレスアーキテクチャを採用すると でも 急なスケーリングには耐えられ ないけどね

  59. サーバレスアーキテクチャの説明 59 • 多くの機能を簡単に • できる限り短納期で • コストもそこまでかからず • よしなにスケーリングしてくれる

    そんな都合の良いシステムが作れますよ まとめると
  60. じゃあデメリットは? 4 60

  61. じゃあデメリットは? 61 そんな素晴らしい サーバレスアーキテクチャ

  62. じゃあデメリットは? 62 やっぱりメリットもあれば デメリットもあるという ことを知っておこう

  63. ①なんやかんや落ちる ②環境に依存しちゃう ③バージョンアップ対応 じゃあデメリットは? 63

  64. ①なんやかんや落ちる ②環境に依存しちゃう ③バージョンアップ対応 じゃあデメリットは? 64

  65. じゃあデメリットは? 65 なんやかんや落ちる

  66. じゃあデメリットは? 66 なんやかんや落ちる オペミスによりS3が逝く 新機能追加でDynamoDBが逝く オペミスによりELBが逝く データセンターの空調が死んで EC2が逝く

  67. じゃあデメリットは? 67 なんやかんや落ちる まあ、AWSも システムなので・・・ 落ちる時は落ちる

  68. ①なんやかんや落ちる ②環境に依存しちゃう ③バージョンアップ対応 じゃあデメリットは? 68

  69. じゃあデメリットは? 69 環境に依存しちゃう 会社の都合でAWS→GCPとか やる時にめちゃくちゃ苦労する (試される環境非依存なアーキ テクチャ)

  70. じゃあデメリットは? 70 環境に依存しちゃう 偉い人が突然 「AWSが値上げしたから 安いところに乗り換えろ」 みたいなこと普通にありそう

  71. じゃあデメリットは? 71 環境に依存しちゃう S3ガンガンに使う〜〜とか、 ぐらいならまだしも Kinesis系とかSageMaker系 (ML)とか辛そう ※GCPとAzureあんま知らないので代替はあるかも

  72. ①なんやかんや落ちる ②環境に依存しちゃう ③バージョンアップ対応 じゃあデメリットは? 72

  73. じゃあデメリットは? 73 バージョンアップ対応 AWS「APIのバージョンアップし ます!昔のAPIは急に使えなく なります!!!」 プログラマ「」

  74. じゃあデメリットは? 74 バージョンアップ対応 これ、 まあまあよくあることです

  75. じゃあデメリットは? 75 やっぱりメリットもあれば デメリットもあるという ことを知っておこう

  76. じゃあデメリットは? 76 (もちろんケースにはよるが) サーバレスアーキテクチャ 積極的に取り入れて良いと 個人的には思います

  77. 77 Tips ① 最近あった切ない事

  78. Lambdaを設定してみる 5 78

  79. Lambdaを設定してみる 79 長々と説明しましたが 今日は手を動かすハンズオン 早速Lambdaを使ってみよう

  80. Lambdaを設定してみる 80 っと その前に

  81. Lambdaを設定してみる 81 Lambda is 何

  82. Lambdaを設定してみる 82 めちゃくちゃ簡単にいうと アプリケーションをその都度動 かせる実行環境 FaaS(Function as a Service) とか言われる

  83. Lambdaを設定してみる 83 使える言語は? Java、Go、PowerShell、 Node.js、C#、Python、Ruby とかとか https://aws.amazon.com/jp/lambda/faqs/

  84. Lambdaを設定してみる 84 使える言語は? あくまで言語が使えるだけなの で、フレームワークを動かしたり は(物によるけど)今はできな いってことで

  85. Lambdaを設定してみる 85 細かいことを考えるよりも 一回使ってみよう!!

  86. Lambdaを設定してみる 86 Lambdaで Fizz Buzz 動かしてみるの巻

  87. Lambdaを設定してみる 87 AWSログイン後 検索バーからlambda を検索

  88. Lambdaを設定してみる 88 そしたら右上の方にある「関数 の作成」を選択!

  89. Lambdaを設定してみる 89 関数名を適当に入力して、右下の関数の作成を選択!

  90. Lambdaを設定してみる 90 (余談)画面が違う人はここを確認 オフになっていることを確認!

  91. Lambdaを設定してみる 91 (ちなみに)ここのランタイムで言語が選択できます 今回はせっかくなので (というよりも僕の都合上ですが) Node.js 12.x のランタイムで やっていこうと思います

  92. Lambdaを設定してみる 92 作成後画面

  93. Lambdaを設定してみる 93 作成後画面 ここでテスト実行できる ログとか見られる ここにコード書いていく! これでデプロイする (詳しくは後述)

  94. Lambdaを設定してみる 94 では実際にコードを 書いていこう

  95. Lambdaを設定してみる 95 こちらのコードをLambdaにコピペ! exports.handler = async (event) => { const

    max = 50; for (let i = 1; i <= max; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("Fizz Buzz") } else if (i % 3 === 0) { console.log("Fizz") } else if (i % 5 === 0) { console.log("Buzz") } else { console.log(i) } } };
  96. Lambdaを設定してみる 96 そしたら 右上の[デプロイ]ボタンを 押すことを忘れずに これ!!!!!

  97. Lambdaを設定してみる 97 (ちょっとだけデプロイについて補足) Lambdaではコード修正の度に 毎回新しいコンテナが作られ、 新規作成されたコンテナにアプ リケーションがデプロイされます

  98. Lambdaを設定してみる 98 今動いてる アプリケーション v0.1 デプロイを実行 デプロイ後の アプリケーション v0.2 古いアプリケーションコンテナ

    を破棄して 新しいアプリケーションコンテ ナが作成される ① ②
  99. Lambdaを設定してみる 99 コードが書けたので 次はテストを実行して Fizz Buzzを体験してみる

  100. Lambdaを設定してみる 100 テストパラメータを設定 右上のテストボタンを選択して テストパラメータを設定していく

  101. Lambdaを設定してみる 101 テストイベントの設定 イベント名は適当に入力 パラメータは初期で OK 右下の作成ボタンを選択

  102. Lambdaを設定してみる 102 テストを実行! すると…??

  103. Lambdaを設定してみる 103 下の部分にFizz Buzzの結果が表示された

  104. Lambdaを設定してみる 104 こんな感じで Lambdaを使うと ブラウザ上で簡単にアプリケー ションを実行することができる

  105. Lambdaを設定してみる 105 このままでも充分すごいんだけど API Gatewayと 組み合わせることで 真価が発揮されるsugoiやつ

  106. Lambdaを設定してみる 106 ではでは早速 API Gatewayと 組み合わせてみよう

  107. API Gateway を使うよ 6 107

  108. API Gatewayを使うよ 108 細かいことはおいといて、 API Gatewayと組み合わせて みよう

  109. API Gatewayを使うよ 109 その前に

  110. API Gatewayを使うよ 110 API Gateway Is 何

  111. API Gatewayを使うよ 111 めちゃくちゃ簡単にいうと HTTP(HTTPS)の リクエストの受け口

  112. API Gatewayを使うよ 112 えと、つまり HTTP通信を API Gatewayで受けるって どういうこと?

  113. API Gatewayを使うよ 113 サーバでリクエストを受け取る時のイメージ http://example.comに アクセス ブラウザに レスポンスを返却 なんか アプリがいろいろ動いてる

    EC2
  114. API Gatewayを使うよ 114 API Gatewayでリクエストを受け取る時のイメージ http://example.comに アクセス ブラウザに レスポンスを返却 Lambda

    DynamoDB Amazon SQS Amazon SNS アクセスは API Gateway で受け取る 連携するサービスを 自由に選択
  115. API Gatewayを使うよ 115 API Gateway + Lambdaを使うと HTTPのリクエストを トリガーに様々な操作に繋げる ことができる

  116. API Gatewayを使うよ 116 ちょっとだけ 思い出してみよう

  117. API Gatewayを使うよ 117 Lambdaを実行するには このボタンを押さないといけな かった

  118. API Gatewayを使うよ 118 API Gateway + Lambdaを使うと HTTPリクエストを受け取る ↓ 予め用意しておいた

    Lambdaの実行 に繋げることができる
  119. API Gatewayを使うよ 119 さっそく API Gatewayの設定に 入っていく

  120. API Gatewayを使うよ 120 AWSログイン後検索バー からAPI Gateway を検索

  121. API Gatewayを使うよ 121 右上の APIを作成 を選択!

  122. API Gatewayを使うよ 122 APIタイプは HTTP API

  123. API Gatewayを使うよ 123 [統合を追加]から さっき作ったLambdaを選択 適当なAPI名を入力

  124. もうちょっとで 終わります・・・ API Gatewayを使うよ 124 アクセスするパスは / で HTTPメソッドはGET

  125. このまま次へで ヨシ! API Gatewayを使うよ 125

  126. 作成を選択!!! API Gatewayを使うよ 126

  127. API Gatewayの設定完了 API Gatewayを使うよ 127

  128. 早速アクセスしてみよう API Gatewayを使うよ 128 人によってURLが異なるので、 各自クリック

  129. API Gatewayを使うよ 129 あれ・・・

  130. API Gatewayを使うよ 130 さっきFizz Buzz を Lambdaに書いたのに・・・

  131. API Gatewayを使うよ 131 ちょっくら Lambda、 見直してみますかね

  132. API Gatewayを使うよ 132 なぜ ブラウザに [null] と表示されるのか exports.handler = async

    (event) => { const max = 50; for (let i = 1; i <= max; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("Fizz Buzz") } else if (i % 3 === 0) { console.log("Fizz") } else if (i % 5 === 0) { console.log("Buzz") } else { console.log(i) } } };
  133. API Gatewayを使うよ 133 exports.handler = async (event) => { const

    max = 50; for (let i = 1; i <= max; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("Fizz Buzz") } else if (i % 3 === 0) { console.log("Fizz") } else if (i % 5 === 0) { console.log("Buzz") } else { console.log(i) } } }; そもそもこのコード、 console.log()で ログ出力するだけで レスポンス返してなくね??? なぜ ブラウザに [null] と表示されるのか
  134. API Gatewayを使うよ 134 Fizz Buzzのコードをこんな感じに変えてみてください exports.handler = async (event) =>

    { const max = 50; let arr = []; for (let i = 1; i <= max; i++) { if (i % 3 === 0 && i % 5 === 0) { arr.push("Fizz Buzz"); } else if (i % 3 === 0) { arr.push("Fizz"); } else if (i % 5 === 0) { arr.push("Buzz"); } else { arr.push(i); } } return {data: arr} };
  135. API Gatewayを使うよ 135 コード変更したらデプロイボタンを忘れずに! これ!!!!!

  136. デプロイしたらもう一回APIにア クセスしてみよう API Gatewayを使うよ 136 人によってURLが異なるので、 各自クリック

  137. API Gatewayを使うよ 137 Fizz Buzzの結果がブラウザに表示された 簡単にAPI 作れましたすごい!!!

  138. API Gatewayを使うよ 138 こんな感じで 明示的に関数をreturn しない とレスポンスが返らないのです。

  139. API Gatewayを使うよ 139 ではではお待ちかね 次はLINEと連携します よ〜〜〜〜〜〜〜〜

  140. API Gatewayを使うよ 140 (余談) JavaScriptは明示的にreturnしないと値が返らない function test() { var a

    = “aaaaa” return a } function test2() { var a = “aaaaa” } console.log(test()); // “aaaaa” console.log(test2()); // undefined
  141. API Gatewayを使うよ 141 (余談) Rubyの動きは個人的に不気味 def test a = “aiueo”

    end def test2 a = “aiueo” return a end def test3 “aiueo” end p test # “aiueo” p test2 # “aiueo” p test3 # “aiueo” 明示的にreturnしなくても最後に評価された式が返却される
  142. API Gatewayを使うよ 142 (余談)こんな事が発生するから 一律明示的に書いてあげた方が良いと思うタイプ def test(bool) If bool return

    “true” end “false” end def test2(bool) If bool “true” end “false” end p test(true) # “true” p test(true) # “false”
  143. 143 Tips ② 最近 買ったもの

  144. LINEと連携してみよう 7 144

  145. LINEと連携してみよう 145 遂にLINEと連携します! スマホの準備はできてますか

  146. LINEと連携してみよう 146 の前に・・・ いくつか準備しておく必要 と 理解しておく必要があります

  147. LINEと連携してみよう 147 準備 LINE Developerで プロバイダとアカウントを 作成しよう

  148. LINEと連携してみよう 148 LINE Developerについてちょっとだけ説明 https://developers.live.biz/ 事前にログイン確認はしてある・・よね・・?

  149. LINEと連携してみよう 149 LINE Developerについてちょっとだけ説明 めちゃくちゃ簡単にいうと 公式アカウントが作れたり API Tokenが置いてある 開発者向けの管理画面

  150. LINEと連携してみよう 150 LINE Developer consoleにログインして Providerを作成 クリック

  151. LINEと連携してみよう 151 適当な名前を入力してProviderを作成

  152. LINEと連携してみよう 152 こんな画面になります

  153. LINEと連携してみよう 153 Create Messaging API Channel を選択

  154. LINEと連携してみよう 154 適当に項目を入力していきます 友達登録した時の名前になるので 愛着が湧くやつ! 説明(なんでもOK) ぶっちゃけなんでもOK ぶっちゃけなんでもOK

  155. LINEと連携してみよう 155 適当に項目を入力していきます 二つの項目にチェックを入れて Createを選択

  156. LINEと連携してみよう 156 アカウント完成

  157. LINEと連携してみよう 157 最終的には このアカウントに メッセージを送って Lambdaと連携して 良い感じにします

  158. LINEと連携してみよう 158 じゃあ早速組み込み! の前に・・・

  159. LINEと連携してみよう 159 LINEからのメッセージって どうやったら受け取れるんや

  160. LINEと連携してみよう 160 っていうか LINEの仕組みって どうなっとるんや

  161. LINEと連携してみよう 161 登場人物 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント
  162. LINEと連携してみよう 162 まずここに着目 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  163. LINEと連携してみよう 普段やってるように誰かにメッセージを送るのと同様 今回はさっき作ったアカウントにメッセージを送信するような動き をイメージしてください 163 スマートフォン → LINEアカウント Aさん Bさん

    アカウント間の メッセージのやりとり
  164. LINEと連携してみよう 164 次はここ API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  165. LINEと連携してみよう 165 LINEアカウント → API Gateway LINEアカウントにメッセージが送られると、LINEのサーバから API GatewayにHTTPリクエストが送られる この仕組みをWebhookと呼ぶ

    メッセージ送信 任意のリクエスト先 任意のリクエスト先 任意のリクエスト先 HTTPリクエスト (Webhook)送信 今回の例だとここが API GatewayのURLになる スマートフォン (LINE アプリ) テストBOT Aさん テストBOT Bさん テストBOT Cさん
  166. LINEと連携してみよう 166 ここの仕組みがわかりづらい ので もう少し噛み砕くよ

  167. LINEと連携してみよう 167 LINEアカウント → API Gateway 「作成したLINEのアカウント」にメッセージが送られたことの通知 をもらうイメージ “こんにちは!”って メッセージ送信

    Webhook送信先として 作成した API Gateway msg: “こんにちは! ” From: “◦◦” Msg: “こんにちは! ” LINEの サーバ的な 物 From: “◦◦” To: “テストBOT” Msg: “こんにちは! ” 〇〇って人からテストBOTっていう アカウントにメッセージ来たから、内 容と一緒に通知(Webhook)しとこ これがWebhookと呼ばれる物 “こんにちは!”って メッセージが届く! スマートフォン (LINE アプリ) 画面で設定したWebhookURLに通 知
  168. LINEと連携してみよう 168 最後はこれ! API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  169. LINEと連携してみよう 169 Lambda → LINE 任意のアカウント(今回だと送り元)に 任意のメッセージを送る BOTからメッセージが返却されてく る! msg:

    “こんにちは!テス トBOTです” LINEの サーバ的な 物 To: “〇〇” Msg: “こんにちは!テ ストBOTです” メッセージをリクエストに付与 “こんにちは!テストBOTです” ってメッセージを送信 Lambda LINE の用意したMessaging API をLambdaから実行 スマートフォン (LINE アプリ)
  170. LINEと連携してみよう 170 ポイント Webhookへのレスポンスは あくまでLambdaを実行する トリガー

  171. LINEと連携してみよう 171 ポイント 実際にアプリ(ユーザ側アカウン ト)にメッセージを送るのは LambdaからLINEのAPIを実 行する

  172. LINEと連携してみよう 172 流れを再掲 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI) Webhookイベントへのレスポンス で はなく Messaging APIを実行して Lambdaからメッセージを送信
  173. LINEと連携してみよう 173 一通り説明が完了したので LINEとの組み込みに 入っていく

  174. LINEと連携してみよう 174 まずは LINEからメッセージ送信 ↓ その内容をそのまま返信 するオウム返しBOTを 作っていく

  175. LINEと連携してみよう 175 いつものごとく ソースコードはすでに 用意済みです

  176. LINEと連携してみよう 176 ソースコードはこちらから https://github.com/yoshi0202/serverless-handson Cloneしたあとブランチを 切り替えてください

  177. LINEと連携してみよう 177 Clone & ブランチの切り替え ターミナルを開き任意のフォルダでgit clone $ git clone

    https://github.com/yoshi0202/serverless-handson ※エディタで開けるような箇所がCloneするのが良さそう! 移動 $ cd serverless-handson ブランチの切り替え $ git checkout hello-lambda
  178. LINEと連携してみよう 178 cloneしたディレクトリ こんな感じのZipファイルが 存在していませんか?

  179. LINEと連携してみよう 179 ここでLambdaへデプロイ する方法のおさらい

  180. LINEと連携してみよう 180 Lambda画面の再掲 ここでテスト実行できる ログとか見られる ここにコード書いていく! これでデプロイする (詳しくは後述)

  181. LINEと連携してみよう 181 いままではブラウザ画面で 直接ソースコード書いてた

  182. LINEと連携してみよう 182 でもそれだと・・・ • Git管理どうするの? ◦ ブラウザで直接デプロイできるので管理しづらい • 規模が大きくなった時にブラウザコーディングはつらい ◦

    そうだよねぇ〜 • やっぱりお気に入りのエディタで開発したい! ◦ Vimを崇めよ・・・ • (npmモジュール追加したい時どうするんだ・・?)
  183. LINEと連携してみよう 183 そんな課題を解決できる機能 ローカルで開発して ソースコードをZipファイルに圧 縮してそのファイルを デプロイする方法がある

  184. LINEと連携してみよう 184 「Zip」がわからない人 聞いてください

  185. 185 Tips ③ 休憩中にでもアイコン好きなのに設 定しておくとより楽しいかも

  186. LINEと連携してみよう 186 さっそく先ほどのzipを Lambdaにデプロイしていく

  187. LINEと連携してみよう 187 先ほど作成したLambdaのここを開く その後さっきCloneしたソースコード内[api_v1.zip]を 選択してデプロイしてみよう!

  188. LINEと連携してみよう 188

  189. LINEと連携してみよう 189 コーディングしてた部分がこんな感じに変わったらOK

  190. LINEと連携してみよう 190 次は LINEからのWebhook通信の 受け口を API Gateway に 用意してあげる

  191. LINEと連携してみよう 191 設定箇所でいうとこいつ API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  192. LINEと連携してみよう 192 先ほど作ったAPI Gatewayを開き 左側のルートを選択

  193. LINEと連携してみよう 193 現在だと ‘/’ というルーティングしかないので、 ‘/hello’ っていうルーティングを作っていきます

  194. LINEと連携してみよう 194 Createボタンを押したあと、 こんな感じで画面を編集 LINEからのWebhookはPOSTでく るのでPOSTを選択 /hello というルーティングを追加

  195. LINEと連携してみよう 195 (余談)ルートってなに? Railsでいうと routes.rbみたいなもの Rails.application.routes.draw do # For details

    on the DSL available within this file, see http://guides.rubyonrails.org/routing.html namespace :book do get '/index', to: 'book#index' get '/search', to: 'book#search' end end
  196. LINEと連携してみよう 196 routes.rbに設定がないと 事前に設定しておかないと エラーになったと思います。 それと同じような感じ

  197. LINEと連携してみよう 197 作成した /hello を設定していく /hello の下のPOSTをクリック

  198. LINEと連携してみよう 198 API Gateway初期設定の時のLambda設定をそのまま使う 初回に作成したLambda設定を選 択 統合をアタッチする を選択

  199. LINEと連携してみよう 199 /hello の隣に LambdaマークがついたらOK

  200. LINEと連携してみよう 200 最後に API Gatewayに割り振られているURLを コピーしておこう

  201. LINEと連携してみよう 201 次は LINE側の設定を 変更してく

  202. LINEと連携してみよう 202 LINE Developersにアクセスし、 先ほど作ったBOTの[Messaging API]を選択

  203. LINEと連携してみよう 203 Webhook settings の欄にある Webhook URL の Editを選択

  204. LINEと連携してみよう 204 先ほどコピーした API GatewayのURL + /helloを入力して Updateを選択!

  205. LINEと連携してみよう 205 ボタンが [Verify]に変わると思うので 押してみる

  206. LINEと連携してみよう 206 問題なく設定できていれば Success と表示されるはず できない人は声かけてください〜

  207. LINEと連携してみよう 207 もう少し続きます〜 引き続きLINE側の設定を やっていきます

  208. LINEと連携してみよう 208 細かい設定を続けていきます Webhookを利用するので ここをクリック

  209. LINEと連携してみよう 209 細かい設定を続けていきます Auto-replyは無効にしたいので editを選択

  210. LINEと連携してみよう 210 (心の声) なぜ全く違う画面に遷移するんだLINEよ・・・ うっとおしいのでオフ! 今回は使わないのでオフ!

  211. LINEと連携してみよう 211 設定後はこんな感じ! ※あいさつメッセージとか応答メッセージとか どんなものか聞きたい人は聞いてください

  212. LINEと連携してみよう 212 元の画面に戻ってブラウザを更新すると Auto-reply, Greeting messagesが DisabledになっていればOK LINE Developers画面側の ページを更新してから確認!

  213. LINEと連携してみよう 213 最後に Channel access token を発行! (LINE API 使うために必要なAPI

    キーみたいなもの) このボタンをクリック! 次に使うのでコピーしておく!
  214. LINEと連携してみよう 214 API キーとか APIの概念がわからない人 聞いてください

  215. LINEと連携してみよう 215 以上で LINE側の設定は完了

  216. LINEと連携してみよう 216 (余談) 先ほど発行したchannel access token(以下token) Long-lived バージョンといって有効期限がありません。 LINE 側の見解としては

    「Long-lived使わずに 有効期限付きのtoken使ってくれや〜」 ってことっぽいです。 (前職でもそうやってた) https://developers.line.biz/ja/reference/messaging-api/#issue-channel-access-token
  217. LINEと連携してみよう 217 (余談) Q. なぜ Long-livedを使っているか A.コーディング長くなるから & 取得したAPIキーを保存しておく領域(DB等)の連携が 必要になり今回のハンズオンの主旨とは異なるから

  218. LINEと連携してみよう 218 (余談) 簡単に言えば 本来は違うAPIキー使った方が良いよ! & その方が安全だよ! ってことです。捕捉まで。

  219. LINEと連携してみよう 219 最後ですよ〜 さっきコピーした channel access tokenを Lambdaに設定していく

  220. LINEと連携してみよう 220 ところで 機密情報(今回だとToken) の扱いって どんな感じにしたら良いか 覚えてます??

  221. LINEと連携してみよう 221 ①ソースコードに直接書く ②DBに保存する ③環境変数から呼び出す

  222. LINEと連携してみよう 222 それぞれ メリットデメリットは ありますが、 ①はNGかなぁ〜

  223. LINEと連携してみよう 223 今回はDBも使わないので ③の方法でやります

  224. LINEと連携してみよう 224 設定してたLambdaに戻りまして 編集ボタンをクリック

  225. LINEと連携してみよう 225 設定してたLambdaに戻りまして 選択

  226. LINEと連携してみよう 226 LINE_TOKEN というキー名で変数を追加 & 保存 LINE_TOKEN というキー名にして ください! さっきコピーしてきた

    TOKENを貼り 付け
  227. LINEと連携してみよう 227 TOKENが保存されていればOK

  228. LINEと連携してみよう 228 ちょっとだけプログラム見てみる LINE_TOKENは この辺りで使ってます 興味がある人は追ってみてね

  229. LINEと連携してみよう 229 以上で LINE + API Gateway + Lambda の設定が完了!!!

  230. LINEと連携してみよう 230 さて お楽しみの動作確認

  231. LINEと連携してみよう 231 LINE Developers にあったQRコード これをLINEで読み取ってみると・・・

  232. LINEと連携してみよう 232 友達登録できた

  233. LINEと連携してみよう 233 実際にメッセージを送ってみると・・・ スタンプとかLINE絵文字は 非対応なので メッセージだけで勘弁してくれ

  234. LINEと連携してみよう 234 Lambdaと一緒に動いてる

  235. LINEと連携してみよう 235 以上で サーバレスアーキテクチャを 使ったLINE BOT の構築を することができた

  236. LINEと連携してみよう 236 プログラムは用意されてたけど 意外と簡単だったでしょう??

  237. LINEと連携してみよう 237 API Gateway + Lambda を使わないとどうなってたか

  238. LINEと連携してみよう 238 • たった二つのルーティングのためにEC2を用意 ➢ 規模が少ないのにコストが見合わないなぁ • っていうかEC2準備でめっちゃ時間かかる ➢ デプロイカリキュラムのつらみを思い出してくれ

    • ターミナルはほぼ操作してない ➢ (慣れて欲しいけど)CLIアレルギーの人でも簡単
  239. LINEと連携してみよう 239 作る物によってはメリットが生き てくるので 積極的に 使っていきたいところ

  240. LINEと連携してみよう 240 というわけで 以上!!!! サーバレスアーキテクチャで LINE BOTが多分作れるように なる ハンズオンでした!!!

  241. LINEと連携してみよう 241 ・・・ん???

  242. LINEと連携してみよう 242 (まだだ、まだ終わらんよ!) (実はガンダム知らない)

  243. LINEと連携してみよう 243 普段だと 普段だともう少し プログラムの説明して終わり って感じなのですが

  244. LINEと連携してみよう 244 今日は長時間頂けているので もう少し実用的な物に 仕上げてみますか。 年末スペシャルということで

  245. LINEと連携してみよう 245 ということで 突然神からこんな お告げ(無茶振り)がきました 最近Qiita追えてないのう。 このBOTに「Qiitaください」って メッセージを送ったら Qiitaの新着記事を返信できるようにしてくれんかのう

  246. LINEと連携してみよう 246

  247. LINEと連携してみよう 247 そんなこんなでお待ちかね 外部APIと連携してみます 今回はQiitaだ!

  248. 248 Tips ④ 皆様の年末のご予定は? 僕は飲んだくれます

  249. 外部APIと連携してみよう 8 249

  250. 外部APIと連携してみよう 250 今回は QiitaのAPIと連携します 一度全体像の整理

  251. 外部APIと連携してみよう 251 全体像再掲 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  252. 外部APIと連携してみよう 252 ここを少しいじってあげるよ〜 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った

    アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI) 条件によって QiitaAPIを実行
  253. 外部APIと連携してみよう 253 いつものごとくプログラムは用意済みです 先ほどCloneしたリポジトリの内部でブランチを切り替えます ブランチの切り替え $ git checkout qiita-articles api_v2.zip

    ってファイルが現れているか確認
  254. 外部APIと連携してみよう 254 早速Lambdaにデプロイしてみる api_v2.zipを先ほどのLambda画面でアップロード

  255. 外部APIと連携してみよう 255 ここで少し、 Lambdaがキックされて からの導線を追ってみよう

  256. 外部APIと連携してみよう 256 API Gateway 経由でキックされたあと、 ${ファイル名}.handler関数が実行され る

  257. 外部APIと連携してみよう 257 設定したLINE_TOKEN(環境変数)の存 在チェックを実施 event.rawPathでアクセスしてきたURL パスを取得可能 パスによってswitch文で分岐 V2になってこっち側を弄ってるので IndexControllerを追っていく

  258. 外部APIと連携してみよう 258 Webhook経由で送られてきたメッセー ジ内容をここでチェック ①文字列に[Qiita], [qiita], [キータ]が 含まれる場合はArticleControllerを実 行 ②それ以外の場合は

    DefaultControllerを実行 (役割的にはエラーハンドリング )
  259. 外部APIと連携してみよう 259 ①ArticleController Qiitaから取得してきた最新記事を LINE に送信できるメッセージの形に変換 作成した配列を渡して LINEの MessagingAPIを実行してメッセージを 送信

  260. 外部APIと連携してみよう 260 ②DefaultController アカウントに送信したい任意の文字列を 配列で設定

  261. 外部APIと連携してみよう 261 ここでも細かい説明は 割愛しますので 気になる人いたら追ってみてく ださい (ハンズオン終わった後に質問してもらっても大丈夫です) その他のDTOとかmoduleとかもろもろ

  262. 外部APIと連携してみよう 262 Lambdaへの細かい導線が わかってきたところで 残りの作業

  263. 外部APIと連携してみよう 263 LINE側に設定してる Webhook URLを変更してあげる必要がある V2になって ‘/hello’ → ‘/’ を

    使うようになったので変更が必要
  264. 外部APIと連携してみよう 264 もう一個だけ設定する必要が あります!

  265. 外部APIと連携してみよう Q. 残りの設定が必要な箇所は どこでしょう?? せっかくなので 考えてみる & 見直してみよう 265

  266. 外部APIと連携してみよう 266 ヒントは次のページ

  267. 外部APIと連携してみよう 267 ‘/’ って、どのHTTPメソッドの設定してたっけ API Gateway Lambda スマートフォン (LINE アプリ)

    さっき作った アカウント “こんにちは!” ってメッセージ送信 “こんにちは!◦◦さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)
  268. 外部APIと連携してみよう 268 A. LINEからのWebhook通信はPOSTなので ‘/’ にPOSTを追加してあげる必要がある! /hello にPOSTが設定されていたので 同じように /

    にPOSTを追加してみる
  269. 外部APIと連携してみよう 269 パスとしては ‘/’ を設定 POSTメソッドを指定

  270. 外部APIと連携してみよう 270 新しく作成した ‘/’ の POSTを選択 統合をアタッチするを選択

  271. 外部APIと連携してみよう 271 GETに設定していたlambdaと同様の物 を設定 統合をアタッチする を選択

  272. 外部APIと連携してみよう 272 Lambdaマークがつけば準備完了

  273. 外部APIと連携してみよう 273 これで諸々の準備は 完了です 神様からのお告げ(無茶振り) に応えることができるか・・

  274. 外部APIと連携してみよう 274 緊張の瞬間・・・

  275. 外部APIと連携してみよう 275 (たぶん)成功してるはず

  276. 外部APIと連携してみよう 276 Qiitaを含まない文字への対応もできてる

  277. 外部APIと連携してみよう 277 こんな感じでLINE BOTが できました みなさまお疲れ様です。

  278. 外部APIと連携してみよう 278 普段身の回りでよく使う アプリとかサービスと 連携できる喜び、楽しみ わかって貰えると凄く嬉しい

  279. オリジナル要素を入れるには 9 279

  280. オリジナル要素を入れるには 280 さてさて ハンズオンの題材としては これで終了です

  281. オリジナル要素を入れるには 281 実際やってみて 「あ、これくらいなら つくれるかも!」 ってなってくれると 嬉しい

  282. オリジナル要素を入れるには 282 ここで一つ 更に良くするには どうすればよいか 考えてみましょう

  283. オリジナル要素を入れるには 283 Q. 現状の課題は何?

  284. オリジナル要素を入れるには 284 使い辛いポイント • 検索できないのイケてないよなぁ ◦ 検索機能を入れてみる • ページングできないのイケてないよなぁ ◦

    リクエストにパラメータ付与して「次へ」って打ったら次の5 件とか取得できるようにしてみる • 最新しか記事しか取得できないのイケてないよなぁ ◦ LGTM順、ストック順で取得できるようにしてみる
  285. オリジナル要素を入れるには 285 もっと使いやすくするには • Qiitaって打つのめんどくさい ◦ LINEのリッチメニューとか使ってみる • Qiita以外にも対応したい ◦

    まずは一問一答から機能を増やしてみる • Slackとかと連携してみたい ◦ Slackの仕組みも一緒に調べて機能を追加してみる
  286. オリジナル要素を入れるには 286 やれることは いろいろある

  287. 何を追加したら便利か 何ができると嬉しいか どんな物がユーザに 喜ばれるか オリジナル要素を入れるには 287

  288. こんな物を考えていくと 自然とオリジナリティが 出てくると思います オリジナル要素を入れるには 288

  289. ただ作品を仕上げる じゃなくて 愛着のあるシステムに 仕上げてみてください オリジナル要素を入れるには 289

  290. ま、僕偉そうな事 言えないんだけどね オリジナル要素を入れるには 290

  291. 最後に 10 291

  292. これで本当に 本日のハンズオンは 終了となります 最後に 292

  293. 約300Pにも及ぶスライドと ハンズオンに お付き合い頂き 本当に ありがとうございました 最後に 293

  294. 最後に 294 本日勉強したこと • サーバレスアーキテクチャの概念を理解した ◦ そもそもどんな構成なのか ◦ アーキテクチャ採用時のメリットデメリット •

    LINE アカウントが作れるようになった ◦ 公式アカウントの作成方法 ◦ プログラムとの連携方法
  295. 最後に 295 本日勉強したこと • LINE アカウントとのやりとりができるようになった ◦ WebHookの概念 ◦ Messaging

    API を使ったメッセージ送信 • API Gateway + Lambda を組み合わせてAPIが作れた ◦ EC2未構築でリクエストの受け口が作れた ◦ Lambdaキックまでの流れを理解することができた ◦ Lambdaにプログラムをデプロイすることができた
  296. 最後に 296 ここまでできれば サーバレスアーキテクチャ 免許皆伝です

  297. 最後に 297 最後にアンケートにご協力ください URL: https://forms.gle/hHqpJddprbV1f3P6A 「こんなことが聞きたい!」 「こんな題材でハンズオンやりたい!」みたいなご意見 「楽しかった!」「ためになった!」みたいな 一言が次回へのモチベーションになります どんなにくだらない事でも良いので是非ご意見ください

  298. 最後に 298 締めの言葉 終わりっす!!!!!! 最後に好きな絵文字で締めます To be continued …?

  299. Thank you for listening !! 299 全体通して聞きたいこと、 不明点などあれば なんでも質問してください!! 来年も何卒宜しくお願いします

    良いお年を〜〜〜