先日、MessagingAPIとLIFFをかけわせて以下のようなプロダクトを作成しました。
#私立探求学園 の #技求祭 にて #技求祭青組 はLineのLIFFを使って暇人マッチングアプリを作成しました🎉
— Nanaka/国際恋愛系エンジニア (@nanakaglucklich) September 5, 2020
メンバーみんながLineDevelopersのプラットフォームを使うのが初めてで要件定義にかなり四苦八苦しましたが、なんとか形になったものができて本当によかったです☺️
みなさん、お疲れさまでした pic.twitter.com/AMbG3s4v8M
①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/) に移動します。
先ほど作成したアカウントが反映されているはずです。
左側バーのリッチメニューからリッチメニュー作成画面に移ります。
####①最初にタイトルと表示期間等を決めます。
ここは後から変更可能かつ実装に対しては大きな支障はないので、気楽に決めても問題ないです。
####②テンプレートを選択する。
自分のイメージに合わせてテンプレートを選択してください。
####③メニューの目的に合わせてタイプを選択してください。
####④タイプに合わせてリンク先を貼る。
下の画像を見てもらえばわかるのですが、私の場合は「リンク」を選択して、クリックしたらherokuであげたリンク先に飛ぶようにしました。こちらはLIFFurlというものを作成して紐付けしてあります。以下のQiitaを参考に取得してください。
(https://qiita.com/sakashin10291029/items/8fc1a30749c7ba6ff356)
####⑤画像を作成します。
ここで気を付けて欲しいのは灰色の画面が選択中になります。 全ての枠を選択して装飾して、最後に「適用」を押してください。 1個書いて満足して適用を押すと、最初から作り直す羽目になります。
画像はサイトから持ってきてそれ以外はキーボードと装飾でやりました。
####⑥保存
全てを入力し終えて保存し終えたらトーク画面を確認してみてください。
以下のように反映されています。
参考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