LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編〜【4日目】

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/72) の 4日目の記事になります。

1週間でサーバレスLINEBotを生み出す( @inoue2002  ） | GWアドベントカレンダー

# はじめに
こちらの内容は超初心者向けです。
[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/overview/#messaging-api%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)を読める方はこちらをお読みいただく方が正確です。

[昨日の記事](https://qiita.com/drafts/dcf40d5ebfe2454796fa)をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう！ということを目標に書いている記事です。

LINEBotはおうむがえしぐらいはわかるけど、どんなメッセージが送れるのか知らんという方向けに書かれた記事です。

昨日の記事でおうむ返しを実装しました。そのコードを少しずつ変えて行きながら、様々なMessageを送信してみます

#LINEBotから送信できるメッセージの種類
まずはどんなメッセージを送ることができるのか確認していきましょう。
ドキュメントに書かれている通りです。
![スクリーンショット 2020-05-03 17.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/3d321dc9-5fd1-6329-a237-6dd56d1c7d83.png)
**本日はそのうちのテキストメッセージ/画像メッセージ/スタンプメッセージ/Flex Messageをご紹介します。**

#始める前に注意！
現在ngrokを利用したデバック環境で実装をしておりますが、最近動きが悪くなってきており、一発では起動しない場合があるように感じます。
うまくいかない場合は何度か`control + C`をしてコードを再起動してもらえるとうまく行くと思います。




#画像を送る
まずは[ドキュメント](https://developers.line.biz/ja/reference/messaging-api/#sticker-message)を読んでいきます。以下抜粋
![スクリーンショット 2020-05-03 17.55.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/e9031912-b30a-31b7-1a83-6c4a52bbb910.png)


```
{
    "type": "image",
    "originalContentUrl": "https://example.com/original.jpg",
    "previewImageUrl": "https://example.com/preview.jpg"
}
```
画像MessageのJSONには上記のように画像URLを書き込むだけで送信する事ができます。昨日の記事で使っていたコードのmessageの部分を書き換えていきましょう。
URLには僕が過去に書いたnoteのOGPでも使ってみましょう。
今回使うOGP→https://assets.st-note.com/production/uploads/images/20724948/rectangle_large_type_2_ebc45bb792e72e0c88458104d21977b7.jpg


```index.js
"use strict";

const express = require("express");
const line = require("@line/bot-sdk");
const PORT = process.env.PORT || 5000;

const config = {
  channelSecret: "先ほどLINEBotのアクセストークンを入れる", 
  channelAccessToken: "先ほど発行したBOTのチャンネルアクセストークンを入れる"
};

const app = express();

app.post("/webhook", line.middleware(config), (req, res) => {
  console.log(req.body.events);
  Promise.all(req.body.events.map(handleEvent)).then((result) =>
    res.json(result)
  );
});

const client = new line.Client(config);

async function handleEvent(event) {
  if (event.type !== "message" || event.message.type !== "text") {
    return Promise.resolve(null);
  };
//変更前
  //let mes = { type: "text", text: event.message.text };
//変更後　　2箇所に画像のURLを入れる
    let mes = {
                type: "image", 
                originalContentUrl: "https://assets.st-note.com/production/uploads/images/20724948/rectangle_large_type_2_ebc45bb792e72e0c88458104d21977b7.jpg",
                previewImageUrl: "https://assets.st-note.com/production/uploads/images/20724948/rectangle_large_type_2_ebc45bb792e72e0c88458104d21977b7.jpg"
               }

  return client.replyMessage(event.replyToken, mes);
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);
```
上のコードを全部コピーした人はチャネルアクセストークンとシークレットも忘れず書き換えてね。
完成形はこんな感じ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">わーい！画像が送られてきた！ <a href="https://t.co/VqVz0BcXxy">pic.twitter.com/VqVz0BcXxy</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1256878584645337088?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#スタンプを送る

まずは[ドキュメント](https://developers.line.biz/ja/reference/messaging-api/#sticker-message)を読んでいきます。以下抜粋
![スクリーンショット 2020-05-03 18.33.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/7f3295b7-6d2b-a6e2-9046-f214b9e61528.png)

```
{
  "type": "sticker",
  "packageId": "1",
  "stickerId": "1"
}
```
ステッカーを送るにはこちらに書かれているようにJSONを書き換えるだけです。
先ほどと同じ作業をするだけなのでコードは以下のように変更してください。

```index.js
async function handleEvent(event) {
  if (event.type !== "message" || event.message.type !== "text") {
    return Promise.resolve(null);
  };
//変更前
  //let mes =  {
  //  type: "image", 
  //  originalContentUrl: "https://assets.st-note.com/production/uploads/images/20724948/rectangle_large_type_2_ebc45bb792e72e0c88458104d21977b7.jpg",
  //  previewImageUrl: "https://assets.st-note.com/production/uploads/images/20724948/rectangle_large_type_2_ebc45bb792e72e0c88458104d21977b7.jpg"
  // }
//変更後
    let mes = {
                "type": "sticker",
                "packageId": "1",
                "stickerId": "1"
              }
  return client.replyMessage(event.replyToken, mes);
}
```
完成形はこちら
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">わーい！スタンプが返ってくるようになった <a href="https://t.co/p1wnJ4cQkv">pic.twitter.com/p1wnJ4cQkv</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1256881676384260096?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

他の種類のスタンプを試したい方は[こちら](https://developers.line.biz/media/messaging-api/sticker_list.pdf)
公式アカウントからも何種類かのステッカーなら選んで送る事が可能です。

#Flex Message

次はFlex Messageというものを送れるように実装していきます。
まずはこれがどういうものか説明をみていきましょう。
[ドキュメントはこちら](https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)

>Flex Messageは、レイアウトをカスタマイズできるメッセージです。CSS Flexible Box（CSS Flexbox）の基礎知識を使って、レイアウトを自由にカスタマイズできます。
>
FlexコンテナがFlex Messageのボックスに対応しています。また、FlexアイテムがFlex Messageのコンポーネントに対応しています。

とりあえず説明みていてもわからないので、[LineBotDesigner](https://developers.line.biz/ja/services/bot-designer/)をインストールしてみましょう！これで世界が変わります！
##使い方
インストールができたらプロジェクトを作成をクリック
<img width="457" alt="スクリーンショット 2020-05-03 18.49.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/fed1f17a-eb80-6bc5-573c-442ec8b651a7.png">
プロジェクト名を適当に入力して「OK」
<img width="394" alt="スクリーンショット 2020-05-03 18.51.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/3d1193ed-1cde-1f02-82be-a0bb5e1fb424.png">
左上の四角いところをクリック
<img width="1333" alt="スクリーンショット 2020-05-03 18.51.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/0467956c-8f2c-b411-0a56-f8ff1feca396.png">
バブルメッセージというところの「＋」をクリック
<img width="1345" alt="スクリーンショット 2020-05-03 18.52.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/bef66aed-7852-d4b2-b328-1f897564e151.png">
テンプレートを選択と出てくるのでそのまま「OK」をクリック
<img width="796" alt="スクリーンショット 2020-05-03 18.52.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/c8530f17-57da-5b46-ed60-78c412995dbc.png">
すると以下のような画面になります。この時から、下に出てくるJSONと書かれたところを全部コピーして先ほどから画像やステッカーのJSONを変更していたところに書き換えれば、上のプレビューに出ているようなメッセージを送る事ができる優れものです！！！
<img width="1344" alt="スクリーンショット 2020-05-03 18.52.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/57c2d264-0bab-126b-9b30-4d12789b3f5b.png">
一度そのまま送りつけてみましょう。以下結果
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Flex Messageが送られてきた！ <a href="https://t.co/wxXOHEVP3n">pic.twitter.com/wxXOHEVP3n</a></p>&mdash; ようかん (Yosuke Inoue) (@inoue2002) <a href="https://twitter.com/inoue2002/status/1256886156735598592?ref_src=twsrc%5Etfw">May 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

あとはここを適当に弄りまくって面白いメッセージを作ってみてください！！

明日はユーザーが送ってきた言葉やステッカー、画像などに応じてメッセージを変える処理を実装していきます！！
お疲れ様でした。

本記事：[LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編](https://qiita.com/inoue2002/items/35fab5b7901aa94fafd2)
次の記事：[LINEBotをみんなで作ろう〜Messageを分岐させるぞ編](https://qiita.com/inoue2002/items/650eca3f7dd6a5fccb63)

[LINEBotをみんなで作ろう〜環境構築編〜](https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42)
[LINEBotをみんなで作ろう〜LINEBot is 何？編](https://qiita.com/inoue2002/items/3a5019c07801bcf5ff75)
[LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜](https://qiita.com/inoue2002/items/dcf40d5ebfe2454796fa)
[LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編](https://qiita.com/inoue2002/items/ad945981150c859911fc)
[LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編](https://qiita.com/inoue2002/items/ab226d9836a891b01bc9)
[LINEBotをみんなで作ろう〜コードを実装編](https://qiita.com/inoue2002/items/dbbd862d6149c83f6513)