Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

過去の資料 3 定期的にこんな感じで ゆるーくやらせてもらっています 過去の資料はこちら https://speakerdeck.com/yoshi0202 よかったらスターつけてください！！！！

Slide 4

Slide 4 text

1. 本日のハンズオンについて 2. 今日の成果物 3. サーバレスアーキテクチャの説明 4. じゃあデメリットは？ 5. Lambdaを設定してみる 6. API Gatewayを使うよ 7. LINEと連携してみよう 8. APIと連携してみよう 9. オリジナル要素を入れるには 10. 最後に 本日のアジェンダ 4

Slide 5

Slide 5 text

本日のハンズオンについて 1 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

本日のハンズオンについて 10 めっちゃいろいろ活動できた 環境も変わった ● 転職(上流現場の何でも屋 → 自社サ開発エンジニア) ● オンラインLT(メンター繋がりで二回ほど) ● オンラインハンズオン(試験的なもの含め二回) ● オフラインハンズオン登壇(本日含め二回目) ● 利用言語(Golang, Java, Kotlin) プライベートもいろいろ変わったので興味ある人は忘年会か何かで聞いてね

Slide 11

Slide 11 text

本日のハンズオンについて 11 つどいのみなさまのおかげで ハンズオン実施の機会が 頂けてます 本当に感謝

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

本日のハンズオンについて 13 スライドについて ● ページ単位でのスライドの写真撮影はご遠慮ください ● スライドはSpeakerDeckにアップロードします ● 再配布や再利用はSpeakerDeckを参照してください ● ハンズオン中はコピペが多いのでGoogleスライドを使うと楽 だと思います

Slide 14

Slide 14 text

本日のハンズオンについて 14 ハンズオンについての諸注意 ● 基本的には全員ペースを合わせて進めていきます ● プレゼンでは無いので質問は随時受け付けます ● わからないところあれば気軽に声をかけてください ● 前回に引き続き写真撮影大歓迎です ● 途中で何度か休憩を挟む予定です ● AWSを使います(料金的なところが気になる人はご連絡ください )

Slide 15

Slide 15 text

本日のハンズオンについて 15 ハンズオンについての諸注意② ● 2020年12月時点のAWS、LINEをベースにしてます ● サービス仕様が変わることもあります ※ ● ハンズオン当日までに画面が変わってたら泣く ● オンライン参加の方はマイクミュートでお願いします ● ガヤスレッドをSlackに建てるのでそこに質問ください ● もちろんmeetで話しかけてもらってもOKです！ ● みんなでわいわい楽しくやりましょう！！！！！

Slide 16

Slide 16 text

本日のハンズオンについて 16 (余談) しっかりとフラグ回収して AWS の画面キャプチャ全部撮り直した話 なんか増えてる・・・ Lambdaの画面めちゃくちゃ 変わっとるやんけ！！

Slide 17

Slide 17 text

今日の成果物 2 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

今日の成果物 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

今日の成果物 23 本日の目標 ● サーバレスアーキテクチャの概念を理解する ● サーバレスのメリットデメリットを理解する ● LINEアカウントとのやりとりの方法を理解する ● LINE BOTが作れるようになる ● Lambda + API Gateway を組み合わせた感動に触れる

Slide 24

Slide 24 text

サーバレスアーキテクチャの説明 3 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

サーバレスアーキテクチャの説明 33 今までの構成 アクセスする人 Webアプリケーション アプリケーションサーバ (例だとEC2) データベースサーバ (例だとRDS) ブラウザを介して アクセス(リクエスト) サーバで処理した結果を ブラウザに返却(レスポンス) いろいろ 連携 いろいろ 連携

Slide 34

Slide 34 text

サーバレスアーキテクチャの説明 34 サーバレスアーキテクチャ (Lambda + API Gateway + DynamoDBを使った例) アクセスする人 Webアプリケーション API Gateway Lambda DynamoDB リクエストを API Gatewayで受ける Lambdaで 任意の処理を実行 (使うなら)DynamoDBとかも 使ってデータ保存も可

Slide 35

Slide 35 text

サーバレスアーキテクチャの説明 35 こんな感じで アプリケーションを動かす時に EC2とかRDSを必要としない設 計思想で作られたアプリケー ション

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

サーバレスアーキテクチャの説明 42 ● 通知機能 ○ アプリで無理やりできなくはないけど・・・ ● キューイング ○ 規模は？どのくらいの感覚でキューが貯まる？？ ● 大容量ストレージ ○ Webサーバと兼任しても良いけどメンテがなぁ ● ビデオストリーミング ○ いや、どんな技術使えばええんや

Slide 43

Slide 43 text

サーバレスアーキテクチャの説明 43 あと 単純に 仕組みが良くわからんくて 調査に時間かかりません？

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

サーバレスアーキテクチャの説明 46 ● 通知機能 ● キューイング ● 大容量ストレージ ● ビデオストリーミング Amazon Simple Notification Service Amazon SQS Amazon S3 AWS Media Services (よく知らない)

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

サーバレスアーキテクチャの説明 49 ● アクセスがそんなにない ○ 低スペックのサーバでも余るぐらいのリソース ● アプリの規模が小さくて局所的に利用 ○ サーバ構築めんどくさいなぁ ● できる限り小コスト ○ サーバ24時間起動してるのもったいない

Slide 50

Slide 50 text

サーバレスアーキテクチャの説明 50 サーバレスアーキテクチャを採用すると サーバを構築せずアプリケー ションを起動できるから構築の 手間もない

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

サーバレスアーキテクチャの説明 52 ● アクセスがそんなにない ➢ 最低限のリソースで起動できる ● アプリの規模が小さくて局所的 ➢ 画面ポチポチでリソース作れるから楽 ● できる限り小コスト ➢ 使う時だけ利用するからコストダウン可能

Slide 53

Slide 53 text

サーバレスアーキテクチャの説明 53 例えば3 「絶対に落ちないシステム作ってよ！ 小林くんなら余裕だよね〜〜〜www」 って要望、どうします？

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

サーバレスアーキテクチャの説明 55 ● 絶対に落ちないの求めるかぁ・・・ ○ サーバ100台用意しようが落ちる時は落ちる ○ アクセススパイク時スケーリングが間に合わない ○ 事前にアクセスが読めないとつらい ○ でもぶっちゃけ落ちないシステムなんて存在しない ○ (タイムリーだけどGoogleもこの前落ちてたしね)

Slide 56

Slide 56 text

サーバレスアーキテクチャの説明 56 サーバレスアーキテクチャを採用すると 裏側で勝手にスケーリングしてく れるからスケーリング考えなくて 良い

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

サーバレスアーキテクチャの説明 59 ● 多くの機能を簡単に ● できる限り短納期で ● コストもそこまでかからず ● よしなにスケーリングしてくれる そんな都合の良いシステムが作れますよ まとめると

Slide 60

Slide 60 text

じゃあデメリットは？ 4 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Lambdaを設定してみる 5 78

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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) } } };

Slide 96

Slide 96 text

Lambdaを設定してみる 96 そしたら 右上の[デプロイ]ボタンを 押すことを忘れずに これ！！！！！

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Lambdaを設定してみる 98 今動いてる アプリケーション v0.1 デプロイを実行 デプロイ後の アプリケーション v0.2 古いアプリケーションコンテナ を破棄して 新しいアプリケーションコンテ ナが作成される ① ②

Slide 99

Slide 99 text

Lambdaを設定してみる 99 コードが書けたので 次はテストを実行して Fizz Buzzを体験してみる

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Lambdaを設定してみる 102 テストを実行！ すると…？？

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

API Gateway を使うよ 6 107

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

API Gatewayを使うよ 109 その前に

Slide 110

Slide 110 text

API Gatewayを使うよ 110 API Gateway Is 何

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

API Gatewayを使うよ 114 API Gatewayでリクエストを受け取る時のイメージ http://example.comに アクセス ブラウザに レスポンスを返却 Lambda DynamoDB Amazon SQS Amazon SNS アクセスは API Gateway で受け取る 連携するサービスを 自由に選択

Slide 115

Slide 115 text

API Gatewayを使うよ 115 API Gateway + Lambdaを使うと HTTPのリクエストを トリガーに様々な操作に繋げる ことができる

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

API Gatewayを使うよ 118 API Gateway + Lambdaを使うと HTTPリクエストを受け取る ↓ 予め用意しておいた Lambdaの実行 に繋げることができる

Slide 119

Slide 119 text

API Gatewayを使うよ 119 さっそく API Gatewayの設定に 入っていく

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

作成を選択！！！ API Gatewayを使うよ 126

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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) } } };

Slide 133

Slide 133 text

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] と表示されるのか

Slide 134

Slide 134 text

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} };

Slide 135

Slide 135 text

API Gatewayを使うよ 135 コード変更したらデプロイボタンを忘れずに！ これ！！！！！

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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しなくても最後に評価された式が返却される

Slide 142

Slide 142 text

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”

Slide 143

Slide 143 text

143 Tips ② 最近 買ったもの

Slide 144

Slide 144 text

LINEと連携してみよう 7 144

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

LINEと連携してみよう 162 まずここに着目 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)

Slide 163

Slide 163 text

LINEと連携してみよう 普段やってるように誰かにメッセージを送るのと同様 今回はさっき作ったアカウントにメッセージを送信するような動き をイメージしてください 163 スマートフォン → LINEアカウント Aさん Bさん アカウント間の メッセージのやりとり

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

LINEと連携してみよう 165 LINEアカウント → API Gateway LINEアカウントにメッセージが送られると、LINEのサーバから API GatewayにHTTPリクエストが送られる この仕組みをWebhookと呼ぶ メッセージ送信 任意のリクエスト先 任意のリクエスト先 任意のリクエスト先 HTTPリクエスト (Webhook)送信 今回の例だとここが API GatewayのURLになる スマートフォン (LINE アプリ) テストBOT Aさん テストBOT Bさん テストBOT Cさん

Slide 166

Slide 166 text

LINEと連携してみよう 166 ここの仕組みがわかりづらい ので もう少し噛み砕くよ

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

LINEと連携してみよう 168 最後はこれ！ API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)

Slide 169

Slide 169 text

LINEと連携してみよう 169 Lambda → LINE 任意のアカウント(今回だと送り元)に 任意のメッセージを送る BOTからメッセージが返却されてく る！ msg: “こんにちは！テス トBOTです” LINEの サーバ的な 物 To: “〇〇” Msg: “こんにちは！テ ストBOTです” メッセージをリクエストに付与 “こんにちは！テストBOTです” ってメッセージを送信 Lambda LINE の用意したMessaging API をLambdaから実行 スマートフォン (LINE アプリ)

Slide 170

Slide 170 text

LINEと連携してみよう 170 ポイント Webhookへのレスポンスは あくまでLambdaを実行する トリガー

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

LINEと連携してみよう 172 流れを再掲 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI) Webhookイベントへのレスポンス で はなく Messaging APIを実行して Lambdaからメッセージを送信

Slide 173

Slide 173 text

LINEと連携してみよう 173 一通り説明が完了したので LINEとの組み込みに 入っていく

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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

Slide 177

Slide 177 text

LINEと連携してみよう 177 Clone & ブランチの切り替え ターミナルを開き任意のフォルダでgit clone $ git clone https://github.com/yoshi0202/serverless-handson ※エディタで開けるような箇所がCloneするのが良さそう！ 移動 $ cd serverless-handson ブランチの切り替え $ git checkout hello-lambda

Slide 178

Slide 178 text

LINEと連携してみよう 178 cloneしたディレクトリ こんな感じのZipファイルが 存在していませんか？

Slide 179

Slide 179 text

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

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

LINEと連携してみよう 182 でもそれだと・・・ ● Git管理どうするの？ ○ ブラウザで直接デプロイできるので管理しづらい ● 規模が大きくなった時にブラウザコーディングはつらい ○ そうだよねぇ〜 ● やっぱりお気に入りのエディタで開発したい！ ○ Vimを崇めよ・・・ ● (npmモジュール追加したい時どうするんだ・・？)

Slide 183

Slide 183 text

LINEと連携してみよう 183 そんな課題を解決できる機能 ローカルで開発して ソースコードをZipファイルに圧 縮してそのファイルを デプロイする方法がある

Slide 184

Slide 184 text

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

Slide 185

Slide 185 text

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

Slide 186

Slide 186 text

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

Slide 187

Slide 187 text

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

Slide 188

Slide 188 text

LINEと連携してみよう 188

Slide 189

Slide 189 text

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

Slide 190

Slide 190 text

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

Slide 191

Slide 191 text

LINEと連携してみよう 191 設定箇所でいうとこいつ API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)

Slide 192

Slide 192 text

LINEと連携してみよう 192 先ほど作ったAPI Gatewayを開き 左側のルートを選択

Slide 193

Slide 193 text

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

Slide 194

Slide 194 text

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

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

LINEと連携してみよう 196 routes.rbに設定がないと 事前に設定しておかないと エラーになったと思います。 それと同じような感じ

Slide 197

Slide 197 text

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

Slide 198

Slide 198 text

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

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

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

Slide 201

Slide 201 text

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

Slide 202

Slide 202 text

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

Slide 203

Slide 203 text

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

Slide 204

Slide 204 text

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

Slide 205

Slide 205 text

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

Slide 206

Slide 206 text

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

Slide 207

Slide 207 text

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

Slide 208

Slide 208 text

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

Slide 209

Slide 209 text

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

Slide 210

Slide 210 text

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

Slide 211

Slide 211 text

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

Slide 212

Slide 212 text

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

Slide 213

Slide 213 text

LINEと連携してみよう 213 最後に Channel access token を発行！ (LINE API 使うために必要なAPI キーみたいなもの) このボタンをクリック！ 次に使うのでコピーしておく！

Slide 214

Slide 214 text

LINEと連携してみよう 214 API キーとか APIの概念がわからない人 聞いてください

Slide 215

Slide 215 text

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

Slide 216

Slide 216 text

LINEと連携してみよう 216 (余談) 先ほど発行したchannel access token(以下token) Long-lived バージョンといって有効期限がありません。 LINE 側の見解としては 「Long-lived使わずに 有効期限付きのtoken使ってくれや〜」 ってことっぽいです。 (前職でもそうやってた) https://developers.line.biz/ja/reference/messaging-api/#issue-channel-access-token

Slide 217

Slide 217 text

LINEと連携してみよう 217 (余談) Q. なぜ Long-livedを使っているか A.コーディング長くなるから & 取得したAPIキーを保存しておく領域(DB等)の連携が 必要になり今回のハンズオンの主旨とは異なるから

Slide 218

Slide 218 text

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

Slide 219

Slide 219 text

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

Slide 220

Slide 220 text

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

Slide 221

Slide 221 text

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

Slide 222

Slide 222 text

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

Slide 223

Slide 223 text

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

Slide 224

Slide 224 text

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

Slide 225

Slide 225 text

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

Slide 226

Slide 226 text

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

Slide 227

Slide 227 text

LINEと連携してみよう 227 TOKENが保存されていればOK

Slide 228

Slide 228 text

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

Slide 229

Slide 229 text

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

Slide 230

Slide 230 text

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

Slide 231

Slide 231 text

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

Slide 232

Slide 232 text

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

Slide 233

Slide 233 text

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

Slide 234

Slide 234 text

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

Slide 235

Slide 235 text

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

Slide 236

Slide 236 text

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

Slide 237

Slide 237 text

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

Slide 238

Slide 238 text

LINEと連携してみよう 238 ● たった二つのルーティングのためにEC2を用意 ➢ 規模が少ないのにコストが見合わないなぁ ● っていうかEC2準備でめっちゃ時間かかる ➢ デプロイカリキュラムのつらみを思い出してくれ ● ターミナルはほぼ操作してない ➢ (慣れて欲しいけど)CLIアレルギーの人でも簡単

Slide 239

Slide 239 text

LINEと連携してみよう 239 作る物によってはメリットが生き てくるので 積極的に 使っていきたいところ

Slide 240

Slide 240 text

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

Slide 241

Slide 241 text

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

Slide 242

Slide 242 text

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

Slide 243

Slide 243 text

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

Slide 244

Slide 244 text

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

Slide 245

Slide 245 text

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

Slide 246

Slide 246 text

LINEと連携してみよう 246

Slide 247

Slide 247 text

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

Slide 248

Slide 248 text

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

Slide 249

Slide 249 text

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

Slide 250

Slide 250 text

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

Slide 251

Slide 251 text

外部APIと連携してみよう 251 全体像再掲 API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)

Slide 252

Slide 252 text

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

Slide 253

Slide 253 text

外部APIと連携してみよう 253 いつものごとくプログラムは用意済みです 先ほどCloneしたリポジトリの内部でブランチを切り替えます ブランチの切り替え $ git checkout qiita-articles api_v2.zip ってファイルが現れているか確認

Slide 254

Slide 254 text

外部APIと連携してみよう 254 早速Lambdaにデプロイしてみる api_v2.zipを先ほどのLambda画面でアップロード

Slide 255

Slide 255 text

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

Slide 256

Slide 256 text

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

Slide 257

Slide 257 text

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

Slide 258

Slide 258 text

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

Slide 259

Slide 259 text

外部APIと連携してみよう 259 ①ArticleController Qiitaから取得してきた最新記事を LINE に送信できるメッセージの形に変換 作成した配列を渡して LINEの MessagingAPIを実行してメッセージを 送信

Slide 260

Slide 260 text

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

Slide 261

Slide 261 text

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

Slide 262

Slide 262 text

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

Slide 263

Slide 263 text

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

Slide 264

Slide 264 text

外部APIと連携してみよう 264 もう一個だけ設定する必要が あります！

Slide 265

Slide 265 text

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

Slide 266

Slide 266 text

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

Slide 267

Slide 267 text

外部APIと連携してみよう 267 ‘/’ って、どのHTTPメソッドの設定してたっけ API Gateway Lambda スマートフォン (LINE アプリ) さっき作った アカウント “こんにちは！” ってメッセージ送信 “こんにちは！○○さん” ってメッセージを送信元に 返信 Webhookイベント送信 Lambdaキック なんらかしらの 処理結果を載せて Messaging APIを実行 LINE Messaging API (LINEが用意したAPI)

Slide 268

Slide 268 text

外部APIと連携してみよう 268 A. LINEからのWebhook通信はPOSTなので ‘/’ にPOSTを追加してあげる必要がある！ /hello にPOSTが設定されていたので 同じように / にPOSTを追加してみる

Slide 269

Slide 269 text

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

Slide 270

Slide 270 text

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

Slide 271

Slide 271 text

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

Slide 272

Slide 272 text

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

Slide 273

Slide 273 text

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

Slide 274

Slide 274 text

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

Slide 275

Slide 275 text

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

Slide 276

Slide 276 text

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

Slide 277

Slide 277 text

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

Slide 278

Slide 278 text

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

Slide 279

Slide 279 text

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

Slide 280

Slide 280 text

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

Slide 281

Slide 281 text

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

Slide 282

Slide 282 text

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

Slide 283

Slide 283 text

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

Slide 284

Slide 284 text

オリジナル要素を入れるには 284 使い辛いポイント ● 検索できないのイケてないよなぁ ○ 検索機能を入れてみる ● ページングできないのイケてないよなぁ ○ リクエストにパラメータ付与して「次へ」って打ったら次の5 件とか取得できるようにしてみる ● 最新しか記事しか取得できないのイケてないよなぁ ○ LGTM順、ストック順で取得できるようにしてみる

Slide 285

Slide 285 text

オリジナル要素を入れるには 285 もっと使いやすくするには ● Qiitaって打つのめんどくさい ○ LINEのリッチメニューとか使ってみる ● Qiita以外にも対応したい ○ まずは一問一答から機能を増やしてみる ● Slackとかと連携してみたい ○ Slackの仕組みも一緒に調べて機能を追加してみる

Slide 286

Slide 286 text

オリジナル要素を入れるには 286 やれることは いろいろある

Slide 287

Slide 287 text

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

Slide 288

Slide 288 text

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

Slide 289

Slide 289 text

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

Slide 290

Slide 290 text

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

Slide 291

Slide 291 text

最後に 10 291

Slide 292

Slide 292 text

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

Slide 293

Slide 293 text

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

Slide 294

Slide 294 text

最後に 294 本日勉強したこと ● サーバレスアーキテクチャの概念を理解した ○ そもそもどんな構成なのか ○ アーキテクチャ採用時のメリットデメリット ● LINE アカウントが作れるようになった ○ 公式アカウントの作成方法 ○ プログラムとの連携方法

Slide 295

Slide 295 text

最後に 295 本日勉強したこと ● LINE アカウントとのやりとりができるようになった ○ WebHookの概念 ○ Messaging API を使ったメッセージ送信 ● API Gateway + Lambda を組み合わせてAPIが作れた ○ EC2未構築でリクエストの受け口が作れた ○ Lambdaキックまでの流れを理解することができた ○ Lambdaにプログラムをデプロイすることができた

Slide 296

Slide 296 text

最後に 296 ここまでできれば サーバレスアーキテクチャ 免許皆伝です

Slide 297

Slide 297 text

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

Slide 298

Slide 298 text

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

Slide 299

Slide 299 text

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