Lambda ってなんですか〜SkillBuildersってのがある話


## はじめに

ちょっと執筆中です　LTなどで使ったパワポを記事にしていこうと思います。
アプリケーション（まわりにJava アプリケーションエンジニアがおおかったのもあり、JAVA+Tomcatあたりのアプリケーション書いてる人を前提に進めます）エンジニア向けに書いていきます。

## 経緯

後輩や同僚から、「AWS始めたい」「アプリケーションエンジニアもそろそろサーバレスをしたい」「ラムだって何？」と、いろんなレベル感のメンバから聞かれるので書いたLT資料です。
行間が読めなくなるのでちょこちょこ説明を追記していこうと思います。

目標は「AWS Lambda を使い始める皆様へ」の第一歩目を作る。


##　はじまり,はじまり〜

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/d0d8ddee-d8bf-2c83-db94-aef4f40fc978.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/273e1390-3306-29fa-1177-d7d73b327280.png)

## Lambdaをざっくりと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/3bc75808-8827-df2e-dc67-bec917a6369f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/344f7d62-a215-8690-df6d-f2a51c133f20.png)

## アプリケーションエンジニアの気持ちで、一般アプリケーションから考えてみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/6175864b-d938-0e4d-2e92-d4930f313555.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/a76bf7e0-07e8-a775-39dc-f4b7f79f7fb3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/42781d39-3ae4-7213-f284-ba00ac5a1612.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/bcf49ca6-a35f-0286-04e4-627c0bfe0fe2.png)

## Lambda の立ち位置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/95da1cfe-75b4-6533-1d0e-9bb6fb8600c8.png)


## Lambda をコードにしたけど、　一体どこだ？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/78c27205-de57-f5e0-66a8-6ccedb1f1dd1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/7b1f36e1-32d7-4b84-bd2d-e8f1156e6e0c.png)

## Lambda はここだ。書きたいことを書くんだぜ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/3a4c68d3-1837-eb34-2d76-925773053a56.png)

## Javaのちょっと前に出てきたしそうPOJOであるということ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/71259c64-0af4-62d4-cc08-b6072db2acb0.png)

## Lambdaは　APIもくてきだけじゃないんだぜ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/0373637b-f3f1-aea7-d6da-2223023fc471.png)

## ベーシックに画面の説明（これよく求められる）

話ばかりで実際どう触るのよ？見せてでもして欲しいよ。
とリクエストがあるので、　実際にAWSアカウントからコンソールに入ってみてみましょう。　覚えるべきポイントはまずこの辺りと
「ソースコード書ける領域があるんだな」を知ること。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/2de82b49-5f45-af5c-e3cd-2b1553a5f44a.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/aa402850-76cf-92b3-c292-151031265d88.png)


## やってみよう　LambdaとAPIGateway
※ APIGateway は、ただREST/APIを公開するだけの仕組みにあらず。　環境ステージングを１インスタンスで管理したりとDevOps的な観点から様々な機能を提供してくれている。（今回はこの辺りは省略します）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/3a6c2a1c-2d75-44f0-cbae-d88f2ac763fb.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/2f72c67f-6199-1159-dc4c-81212d78d655.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/05c8c30d-15e0-847c-d45b-3d595a5ea8d7.png)


## エンジニアトランスフォーメーション1：Java（おじさん）エンジニアには懐かしいJavaPetStore を例に例える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/c3f534c4-f9af-bfb5-b5b3-16da12932236.png)

## エンジニアトランスフォーメーション2： 若者にはアマゾンWebサイトを例にとるとわかりやすいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/87df3c42-8efa-e5f7-10ea-31a31d07a7ef.png)

[PetStore] https://cz9lmfit0d.execute-api.us-east-2.amazonaws.com/study/pets/
[PetStore] https://www.oracle.com/java/technologies/petstore-v1312.html
[J2EE] https://www.oracle.com/java/technologies/java-blueprint.html




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/cbb46000-b1a8-45ba-4805-7f6515325385.png)

## あるあるタブー、LambdaからLambdaを呼び出すなし！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/5d070fd5-e41e-3bc1-0d34-d7eb2e64ee29.png)


## なんでか？答えは、re:invent2022 CTO Vogels さんの世界にある　「世の中は非同期でできている」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/f7150803-0e6b-1643-517c-671e541a2090.png)

参考：　マトリクスの世界を模した内容から始まるキーノート（英語わからなくても面白いよ）
　　https://www.youtube.com/watch?v=RfvL_423a-I

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/36c188a9-3f12-10cb-210e-f38ddad63e44.png)

## 解決策　→ ~~あるあるタブー、LambdaからLambdaを呼び出すなし！~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/72cce665-aeca-811f-1f96-b602bbea02c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/e21d4597-eec8-e069-5b2c-fe162f806aaf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/6a4ff7f1-9465-2a52-933a-ec6cfbbb7a4e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/9849088a-b452-aac3-668b-43a81a0d5229.png)

## おまけ：　Lambdaをおぼえたら書いてみよう　サンプルアプリケーション
Lambda + APIGateway を使ってサンプルを書いてみよう。
ただHelloWorld とかするなら　入門書やSkillBUildersを利用して、その次の今一歩。

表示されたサイト上にあるテキストエリアに入れた文字を、Lambdaに送り
送られたテキストをもとに　AWS SDKを利用してPollyで　音声に起こします。
この起こした文字をS3にアップロードすることで、　サイトが発話する仕組みをサンプルにしてあります。

発展系で　AmazonCOnnectやSNSにすると　通知や通話伝達の仕組みが作れます。
（もしかしたらAlexaってこんな仕組みなのかもしれませんね）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/4de6e7c9-c714-8168-82eb-e662682f5372.png)

```python: Lambda側のソース
import json

import os
import logging
import sys
import traceback
import boto3
from boto3 import Session
from boto3 import resource
from botocore.exceptions import BotoCoreError, ClientError

from contextlib import closing
 
logger = logging.getLogger()
logger.setLevel(logging.INFO)


def lambda_handler(event, context):
    ##AWS lib session
    session = Session(region_name="ap-northeast-1")
    
    ## Params
    s3bname = event['queryStringParameters']['s3bname']
    logger.info( "{}".format(s3bname) ) 
    emoiText = event['queryStringParameters']['emoiText']
    logger.info( "{}".format(emoiText) ) 

    
    ## Generate Polly data from string to mp3
    polly = session.client("polly")
    filename = "voice_by_polly.mp3"
    try:
        response = polly.synthesize_speech(
                Text=emoiText,
                OutputFormat="mp3",
                VoiceId="Takumi")
        with closing(response["AudioStream"]) as stream:
            ## To Put in voice data 
            s3 = resource('s3')
            bucket = s3.Bucket(s3bname)
            bucket.put_object(Key=filename, Body=stream.read(), ACL='public-read')
    except BotoCoreError as error:
        logging.error(error)

    ## Return json to sample display.
    res = 'Hello from Lambda!'
    res = event
    return {
        'statusCode': 200,
        'body': json.dumps(res)
    }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/603875ef-0bd3-f8a4-f78f-72bad707d9df.png)
```javascript: フロント側ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>playaudio2</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<body>
<h1>心の声再生くん</h1>

<div>
<h2>俺の話を聞いてくれ<h2>
  <div> <img src="./myvoice.png"> </div>
<form>
<div>
<label for="s3bname">バケット名</label>
  <input  id="s3bname" type="text" value="★★S3バケット名★★" />
</div>

<div>
<label for="apigateway">APIGateway名</label>
  <input  id="apigateway" type="text" value="https://★★APIエンドポイント★★.execute-api.ap-northeast-1.amazonaws.com/default/emoi" />
</div>
<div>
<label for="emo">さけびたいこと</label>
  <input id="emo" type="text" value="今日は早く帰りましょう" >
</div>
<div>
  <input type="button" value="作ってみる" onclick="makeMyHeart()">
  <input type="button" value="叫んでみる" onclick="tryToEmoion()">
</div>

</form>
</div>




<script type="text/javascript">
function makeMyHeart(){
  const s3bname = $('#s3bname').val()
  const s3Path =
            "https://s3-ap-northeast-1.amazonaws.com/" +
            s3bname +
            "/voice.mp3";
  const apigatewayPath = $('#apigateway').val();
  const emoiText = $('#emo').val(); //document.getElementById('emo').value;

  console.log(apigatewayPath);
  console.log(emoiText);


  let resutl = $.ajax({
        url: apigatewayPath,
        type:'GET',
        data:{
            's3Path':s3Path,
            's3bname':s3bname,
            'emoiText':emoiText
        }
    })
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
        //alert("Created");
    })
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
        //alert("Failed");
    })
    .always( (data) => {
      console.log("done");
    });

}

function tryToEmoion(){
  //s3バケットと 音声ファイルURLを作成する
  const s3bname = document.getElementById('s3bname').value;
  const s3Path =
            "https://s3-ap-northeast-1.amazonaws.com/" +
            s3bname +
            "/voice_by_polly.mp3";
            //"/voice.mp3";
  console.log( "音声:" + s3Path );
  // s3バケットに配置されるmp3 を再生する。
  let audioElem = new Audio();
      const param = new Date().getTime();
      const src = s3Path + "?cb=" + param;
      //audioElem.load(src);
      audioElem.src = src;
      audioElem.play();
}
</script>
</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/67855858-85e9-7334-19f9-f1186c1547cb.png)


## さいごに： SkillBuilders 
実際に学び始める際には、AWSには　SkillBuildersという自己学習できるサイトが用意されているので、最後にそちらを紹介しておわりたいとおもいます。　（必ずしも初心入門社だけではないということが最近わかりました）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/0f8d2f01-cc49-3c7f-3865-293340d3829c.png)

フィルタ機能で：　言語　を　「```日本語```」　にすると　やりやすいよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8216/f5fed55e-54fa-5f59-d63b-5add241986dd.png)


参考：
https://explore.skillbuilder.aws/