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

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 全体通して聞きたいこと、 不明点などあれば なんでも質問してください！！ 来年も何卒宜しくお願いします 良いお年を〜〜〜