Line DevelopersとLine official Account Managerでリッチメニューを作成する

先日、MessagingAPIとLIFFをかけわせて以下のようなプロダクトを作成しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E7%A7%81%E7%AB%8B%E6%8E%A2%E6%B1%82%E5%AD%A6%E5%9C%92?src=hash&amp;ref_src=twsrc%5Etfw">#私立探求学園</a> の <a href="https://twitter.com/hashtag/%E6%8A%80%E6%B1%82%E7%A5%AD?src=hash&amp;ref_src=twsrc%5Etfw">#技求祭</a> にて <a href="https://twitter.com/hashtag/%E6%8A%80%E6%B1%82%E7%A5%AD%E9%9D%92%E7%B5%84?src=hash&amp;ref_src=twsrc%5Etfw">#技求祭青組</a> はLineのLIFFを使って暇人マッチングアプリを作成しました🎉<br>メンバーみんながLineDevelopersのプラットフォームを使うのが初めてで要件定義にかなり四苦八苦しましたが、なんとか形になったものができて本当によかったです☺️ <br>みなさん、お疲れさまでした <a href="https://t.co/AMbG3s4v8M">pic.twitter.com/AMbG3s4v8M</a></p>&mdash; Nanaka/国際恋愛系エンジニア (@nanakaglucklich) <a href="https://twitter.com/nanakaglucklich/status/1302114090022699008?ref_src=twsrc%5Etfw">September 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

①Lineに友達追加する
②チャット画面にてリッチーメニューが表示
③リッチメニューからLaravelで作成したアプリケーション(暇人マッチングアプリ)に遷移する
（④アプリケーションで登録したことに合わせてチャットが送信される（これから実装予定））

こちらではLaravelのプロダクトは作成されている前提で、
リッチメニューを作成するまでの手順を明記します。

リッチメニューを作成は
Line official Account Manager(https://manager.line.biz/)
で行うのですが、こちらに該当するLineアカウントを作成するためには
Line Developers（https://developers.line.biz/ja/） でLine Messaging APIのアカウントを作成し、それがLine official Account Managerにも自動的に反映される仕組みになっています。

###最初に以下の公式ドキュメントを参考にLine Messaging APIのアカウントを作成します。
https://developers.line.biz/ja/docs/messaging-api/getting-started/#using-console

この手順で作成された「MessagingAPI設定」タブのQRコードが友達追加の際に読み込んでもらうものになります。もし、urlで読み込んでもらいたい時は、Line official Account Managerの友達追加タブからurlを取得することができます。

###次にリッチメニューの作成に移ります。
Messaging APIアカウントを作成後、Line official Account Manager（https://manager.line.biz/） に移動します。
先ほど作成したアカウントが反映されているはずです。

左側バーのリッチメニューからリッチメニュー作成画面に移ります。
![Screenshot 2020-09-21 at 20.33.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/8f2836f9-55bc-5234-517e-fd05fe608e14.png)


####①最初にタイトルと表示期間等を決めます。
ここは後から変更可能かつ実装に対しては大きな支障はないので、気楽に決めても問題ないです。
![Screenshot 2020-09-21 at 20.36.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/9d124bd8-5c49-b302-8c34-094cebb7bb97.png)

####②テンプレートを選択する。
![Screenshot 2020-09-21 at 20.38.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/7442b85f-6c79-0fba-c472-e5b61255b5d1.png)
自分のイメージに合わせてテンプレートを選択してください。

####③メニューの目的に合わせてタイプを選択してください。
![Screenshot 2020-09-21 at 20.40.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/4aa3c354-7d54-83e6-0bd3-ce59b5c158af.png)

####④タイプに合わせてリンク先を貼る。
下の画像を見てもらえばわかるのですが、私の場合は「リンク」を選択して、クリックしたらherokuであげたリンク先に飛ぶようにしました。こちらはLIFFurlというものを作成して紐付けしてあります。以下のQiitaを参考に取得してください。
（https://qiita.com/sakashin10291029/items/8fc1a30749c7ba6ff356）

####⑤画像を作成します。
![Screenshot 2020-09-21 at 20.42.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/3956e0a2-3390-9fcc-39d6-11b527ba1936.png)
`ここで気を付けて欲しいのは灰色の画面が選択中になります。
全ての枠を選択して装飾して、最後に「適用」を押してください。
１個書いて満足して適用を押すと、最初から作り直す羽目になります。`

ちなみにこちらが私が作ったリッチメニューです。
![Screenshot 2020-09-21 at 20.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/55b1223d-3087-8a9e-8afb-63a6cacbb78a.png)

画像はサイトから持ってきてそれ以外はキーボードと装飾でやりました。

####⑥保存
全てを入力し終えて保存し終えたらトーク画面を確認してみてください。
以下のように反映されています。
![IMG_20200921_205442.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409900/0365ad1e-5397-29fc-a89e-26acee607d67.jpeg)


参考url
https://developers.line.biz/ja/docs/messaging-api/getting-started/
https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/#creating-a-rich-menu-with-the-line-manager