LINE BOTを用いてフォトシャワーを自作した

# はじめに
・そうだ、結婚式しよう
・コロコロウイルスの状況次第でゲストの皆様への連絡増えそう
　→連絡用のLINE公式アカウント作っておこう
・ついでにLINEのAPIで何かおもしろいことできないかなー
・この公式アカウントからフォトシャワーできたらおもしろそう
・ついでにメッセージも送れたらオリジナリティあっておもしろそう

ということで、LINE Messaging APIとクラウドサービスのAWSを利用して、オリジナルのフォト&メッセージシャワーを作りました。

# 構成
以下の構成で実装しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989761/855aed0f-3b67-d3df-173a-be83b10dba74.png)
ゲストの皆様にLINE公式アカウントを登録していただき、そこからテキストや画像を送ると、それらがブラウザ上に表示されるというモノです。テキストが送られた場合、ユーザ名とアイコンも一緒にブラウザ表示されるようにしています。

# LINEから届いたコンテンツをLambdaで処理
LINEのAdventCalendarなので、LINEから届いたコンテンツの処理について書いてみます。
ここでは、「ユーザー名、ユーザーのLINEアイコン、テキスト情報」の3つについて、取得方法を記します。
画像情報の取得に関しては、過去記事で紹介していますのでよろしければご覧ください。
[LINEで送った画像をS3に保存する(LINE Messaging API x AWS )
](https://qiita.com/ted-17/items/0e3e4956a19ad183e739)[表情判定するLINE BOTをつくった(LINE x Amazon Rekognition)
](https://qiita.com/ted-17/items/edd6c457704c58c731c2)

```python:lambda_function.py
def lambda_handler(event, context):
    print('json dumps start --------')
    print(json.dumps(event)) #dict->str(json形式にエンコード)
    print('json dumps end --------')
    body = json.loads(event['body'])
    for event in body['events']:
        #--　ユーザー名(username)、アイコン(icon)の取得
        userinfo=requests.get('https://api.line.me/v2/bot/profile/'+event['source']['userId'],headers=HEADER)
        userinfo=json.loads(userinfo.text)
        username=userinfo['displayName']
        icon=userinfo['pictureUrl']
        
        #-- TextMessageが来た時
        if event['message']['type'] == 'text':
            #-- メッセージ本文を取得
            textmsg=event['message']['text']
            #-- 匿名希望の人への対応
            if '匿名希望' in textmsg:
                textmsg=textmsg.replace('匿名希望','')
                username='匿名希望'
                icon='photo_shower/nigaoe.png'
            textmsg_display=textmsg+'**=** (%sさん)'%username
            textmsg_display+='**=**'+icon
            #-- メッセージ内容によってBOTに返すメッセージを微妙に変える
            if 'おめでとう' in textmsg:
                msg='%sさん お祝いのメッセージありがとうございます！'%username
            else:
                msg='%sさん メッセージありがとうございます！'%username
            
            #-- txtをS3に保存
            FileName_rec='message_from_%s.txt'%(userinfo['displayName'])
            obj = s3.Object(BUCKET_NAME,FileName_rec)
            obj.put( Body=textmsg+'(%sさん)'%username )

        #-- return する情報の記述
        REQUEST_MESSAGE = [
        {
        'type': 'text',
        'text': msg,
        }
        ]
        payload = {'replyToken': event['replyToken'], 'messages': REQUEST_MESSAGE}
        
        #--HEADERとmessages(pyload)を付加してpost
        if len(payload['messages']) > 0:
                response = requests.post(
                'https://api.line.me/v2/bot/message/reply',
                headers=HEADER,
                data=json.dumps(payload)
                )
                print('request sent!')
```

完成イメージはこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989761/9b460738-06bc-a9c3-0d34-94e4ee65d22b.png)

# 工夫点
上記コードの工夫点を３点ほど。
## 1. LINEから受信した情報を、フロントエンドに渡す際の工夫
テキストデータをフロントエンドに渡す際には、「ユーザー名、ユーザーのLINEアイコン、テキスト情報」が必要になります。これらを全て含んだデータを、ファイル(.txt)に保存し、S3に格納しました。
このとき、ひとつのテキストファイルでいっぺんに送りたかった(そしてフロントエンドでsplitしたかった)ので独自の区切り文字「\*\*=\*\*」を用意しました。

```message.txt
こんにちはあ**=** (hogeさん)**=**https://sprofile.line-scdn.net/your_name_id
```
メッセージ\*\*=\*\* (名前さん)\*\*=\*\*アイコンURL
となってます。メッセージ中にこの記号があったらバグってたところでした。

そして、フロントエンド側で「S3に格納されているテキストデータを読み込み、ブラウザ表示させる」という機能を実装しています。
<h6>↓詳しくはこちら↓</h6>[S3に格納されているテキストデータを読み込みブラウザ表示させる
](https://qiita.com/tomtom_pudding/items/8ec5ef304d9d32c746f4)


## 2. スクリーンに個人情報を映してほしくない人への配慮
受信したメッセージの中に「匿名希望」が入っている場合は、アイコンと名前を伏せるようにしました。
当日は誰も使っていませんでした。陽の目を浴びない隠れ機能としての役割を果たしました。
## 3. メッセージ内容によってBOTの返事を変更
受信したメッセージの中に「おめでとう」が入っている場合は、微妙に返事を変えました。
BOTの返事は、return部分のpayloadに記述します。
今回はルールベースでシンプルなものでしたが、AWSと連携して自然言語処理による適切な応答を返す、なんてこともできそうですね。

# おまけ
・LINEBOTと直接関係ないのですが、気合いを入れた部分なのでついでにご紹介です。
写真を送って頂いた方への返事にも工夫を凝らしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989761/159a2ade-4582-883f-e780-e57b3f60588a.png)
上図のように、
顔写真が送られたときには、<b>笑顔度</b>とそれに応じたコメントを返すようにしました。
モノが送られたときには、物体検出して上位の３件を表示するようにしました。
これらはAmazon Rekognitionを用いて実現しています。

# まとめ
今回はLINE BOTを用いてフォトシャワーを自作したお話でした。
「メッセージを受信→S3に保存→フロントエンドで展開」というシンプルなものですが、工夫次第でいろんな応用ができるなあと思いました！