電話もマップも1タップ! 多機能LINE Botを爆速開発 #Lメニュープラス

 こんにちは🤗[おきなかがいこつ](https://twitter.com/okinakamasayos1)です!
 [沖中塾(初心者向け記事) アドベントカレンダー 2022](https://qiita.com/advent-calendar/2022/okinakajyuku)、18日目の記事です。
 初心者向け記事でしたらどんなものでもOK よければ是非ご参加ください!!

https://qiita.com/advent-calendar/2022/okinakajyuku

昨日のめっちゃ面白い記事は[こちら](https://qiita.com/shokim0320/items/28d50e93a1eed2b8d11a)です!!

https://qiita.com/shokim0320/items/28d50e93a1eed2b8d11a

# リッチメニュー 便利ですよね

 [LINE Official Account Manager](https://manager.line.biz/)から
 設定できるのは6区画・4アクションまで。
 形も下記の中からしか選べません。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/7f44f731-0df5-d7a5-181d-a0016f20da4b.png)

 下記のような複雑なリッチメニューを作る場合、本来コードを書く必要があります。
<font color="Red">**ノーコードで簡単に、多機能リッチメニューが作れたら素敵じゃないですか？**</front>

https://twitter.com/okinakamasayos1/status/1594345275627253761

# Lメニュープラス

 が、その夢を叶えてくれます。

 ノーコードで下記12個の便利機能をサクッと実装できます。
 実際に上記のQRコードか[こちら](https://lin.ee/tposXSs)からお試しください!
 
:::note warn
 ①メッセージ入力
 ②タブ切替<font color="Red">**(これのみ有料機能)**
</font>③WEBページリンク
 ④電話📞
 ⑤指定地点の地図を開く
 ⑥カメラ起動画像送信
 ⑦現在地送信
 ⑧ショップカード
 ⑨クーポン
 ⑩アカウントシェア
 ⑪タイムライン表示
 ⑫プロフィール表示
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/dbec215e-bafd-a3c6-2ec0-76473d4874e3.png)


 # はじめかた

 LINE公式アカウントって何？ という方はぜひ[こちら](https://qiita.com/okinakamasayoshi/items/4597b1534597c20de438)の記事で
 公式アカウントを作るところから始めましょう。

 https://qiita.com/okinakamasayoshi/items/4597b1534597c20de438

 それでは解説していきます。[こちら](https://lmenuplus.jp/)にアクセス

 https://lmenuplus.jp/

◆ログイン→Googleアカウント→リッチメニュー→「＋」ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/bb11b864-a1a2-93d3-9e19-f5af1d363b33.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/eae01e81-23e4-4a03-c071-3884702a823b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/13335b43-ebc3-c1ff-287a-9b11e78730fe.png)

◆プレーン→とりあえず図のものを選択→レイアウト→12マスのものに変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/fccd17c3-f4bf-ad08-6345-858b3c9d560d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a147ebab-1218-0d23-5c31-d9dd41bbf65e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/6dcccde4-6e8e-9e01-e915-52f8b165efa9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e17233d9-d92a-a11d-09fc-99beb41403b4.png)

 # カスタマイズしていく

◆ページ背景からカラー変更→区画選択→タイトル変更→サイズ/位置変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/3588c565-23c9-a274-60f6-5920eadb892c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/00648640-7e32-5b5e-db4e-a9409ff3a3e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/97e91159-d4af-e518-a627-6fb88dad5bc1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ea693002-9de7-2175-c4aa-97e92c944bb3.png)

◆アイコン→画像→アイコン選択→サイズ/位置変更→カラー変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/3f257aae-1d15-dfd6-7c75-2b1d753110a9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/26078378-7831-ac9e-77d5-263a84781ea8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/005ffe87-d977-1c39-29c7-937e15fe50b1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e4036f4f-0592-52d2-8860-62e20339e955.png)

 # アクションを割り当てる

◆アクション→今回は「メッセージ」選択→メッセージ入力→OK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d53037dc-f5da-5ff9-14bd-56b67a7e09af.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d6893bf7-eade-162d-e0b6-f63eecaa305d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e6a859c6-428b-e874-456d-77ec1d6d69aa.png)

◆同じ要領でどんどん機能を割り当てよう!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2c093684-b999-92c0-5224-9ce5959d05b0.png)

# LINE公式アカウントと連携する

LINE公式アカウントって何？ という方はぜひ[こちら](https://qiita.com/okinakamasayoshi/items/4597b1534597c20de438)の記事で
公式アカウントを作るところから始めましょう。

 https://qiita.com/okinakamasayoshi/items/4597b1534597c20de438

◆LINE Developers→Messaging API設定→チャネルアクセストークンをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a45599a8-a7ce-afd6-b390-0ae7597dbe02.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e9c59b6c-61c5-08a6-9363-144973c7ecb9.png)

◆Lメニュープラスに戻り「公式アカウント&プラン」→コピーしたものを貼り付け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/1f04323d-95de-cb05-d6e8-66a4149ad1da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b1ac6e57-7ee6-4c54-8e1b-a1c220f57d46.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f6b1de4f-b088-9572-93ee-90c1b2b18634.png)

◆リッチメニュー→インストール→画面の通り進める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/44910b29-73ec-b6bb-2781-7966772ff7d6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/5afc7fed-e463-d8d4-49d7-f0a80781ba8d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/82939254-4b13-183b-01e6-54205b7289ed.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b4c63d47-51ef-a805-2603-ee1ef96aaab0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/37913970-2600-7983-9eb6-fb8ceb8ed40b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a85e8a1f-17ed-2ad3-b8c2-58862bd20f59.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0b68489e-c038-58da-81ec-1bc48b9fe0e5.png)

◆これでリッチメニュー完成です!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c55f4b64-996b-a64a-7c76-2e8c2b8dc252.png)

# 【有料】リッチメニュー切替の実装

月1,000円のLiteプランで実装できるようになります!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a1d91b2a-a7fc-8a86-5672-4e85a6fbaa83.png)

◆リッチメニュー作成画面で「＋」→カラー/レイアウトを変更してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ace4b33e-b29e-441c-d4ef-fe33362d9f54.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/fe2112f6-40a0-4e66-e1a5-e57787510123.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2b29f73b-e777-fa45-a4ca-41e5c05b9c67.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/730783a0-178a-c49d-9987-5b9c23ae315a.png)

◆ボタン背景→アップロード画像→アクションから「ページ移動」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/84f3291c-7aaa-d38b-9169-4f0132fbf26c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/45a4123f-41e9-82a9-bb50-d914e8d39dc4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/7dfa5891-05fc-30f9-cb4d-5c01cb0011a8.png)

◆ページの行先を選択すれば完成!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e8348a10-6dd4-2960-5bbf-2d068938dfd6.png)

https://twitter.com/okinakamasayos1/status/1594345275627253761

# その他使い方

こちらから是非ご覧ください！

https://voiceapplab.notion.site/L-a01c60281de9404691f89812619a2146

# 初心者向け記事 募集中🙋

 お付き合いありがとうございます！
 上手くいかなかったから[DM](https://twitter.com/okinakamasayos1)かコメント下さい。
 そして初心者向けの記事、まだまだ募集してますので、ぜひ[こちら](https://qiita.com/advent-calendar/2022/okinakajyuku)に投稿お待ちしてます！

 明日以降も「やってみよっかな！」と思える初心者向け記事が盛り沢山👍
 一緒にものづくりを楽しみましょう～😍

https://qiita.com/advent-calendar/2022/okinakajyuku