無料でLINEに複数タブを設置してみよう～リッチメニューエディターは素晴らしい～

## LINEで複数タブをコードを書かずに設置したい
この記事は下記のような方向けに作成したものです。

:princess:LINEオフィシャルアカウントマネージャーを使って公式アカウントを作成したことがある。
:princess:リッチメニューに複数タブを設置してみたいんだけど、コードも何もわかったもんじゃねぇ、というカフェやお寿司屋さん等のお店の従業員の方

できます、無料で。リッチメニューエディターというツールを使えばね:smirk:

今回の作成目標は下記のようなリッチメニューをタブ切り替えできる公式アカウントを作成することです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/049c8b11-7f18-23f4-7963-b36a7fdfac18.png)
それではいってみよう:runner:

## LINE公式アカウントを作成しておく
https://qiita.com/okinakamasayoshi/items/4597b1534597c20de438

今回は上記記事の「友達を増やそう」の前まで実施できればOKです。
## LINEクーポンとショップカードを作成し、URLを発行しておく

https://qiita.com/katourina3/private/81d5ba03b732c83932ea

## リッチメニューエディターの設定

### :keyboard:リッチメニューエディターを開いて自分の公式LINEアカウントと接続する
まずは下記リンクを開いてみましょう。

https://richmenu.app.e-chan.me/

開くと一番最初は下記のような画面になっています。
Botを追加するを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/e6f349ee-6e14-1e20-9c9d-94f23c46eeb0.png)
LINE公式アカウント作成時にコピペしておいた**チャンネルアクセストークン**を貼りましょう。貼り終わったら**編集**を押します。

:::note info
チャンネルアクセストークンはここにあるよ

LINE　Developpersの画面のアカウント画面を開いてください。
Messaging API設定を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/2378cb33-9d50-45ac-f82f-2dadfcfe1293.png)


一番下までスクロールすると**チャンネルアクセストークン**があります。こちらをコピペしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/971fd794-33e5-b564-ed68-f9fe9856dbe9.png)

チャンネルアクセストークンは「鍵」のようなものです。家の鍵を落とすとどうなりますか？強盗に入られてへそくりが盗まれますね。
チャンネルアクセストークンはだれかに見られないよう厳重に管理しましょう。
:::


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/a00d0a7b-7977-c565-1863-4311beb4fe65.png)
リッチメニュー一覧にLINEの公式アカウントが追加されました。今回は「カフェ」のページと「ヨガ」の2ページを作成しますので、2回＋マークを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/f448dcd2-1153-3465-816a-cb01630102a9.png)
名称未設定のリッチメニューが2個できました。

### :gear: カフェページとヨガページの設定をそれぞれ行う。
今からカフェページとヨガページの設定を個別に実施します。
名称未設定のリッチメニューを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/bffa7f33-aa4e-29de-c48c-cb8b0d0cc56f.png)

### :coffee: カフェページの設定
基本設定画面が出てきますので、メニュー名を付けます。わかりやすく今回はcafeとしておきましょう。開閉ボタンはリッチニューの下のボタンのテキストとなります。今回は「開閉ボタン」としておきます。
また、カフェページが今回のDefault画面となりますので、デフォルトでメニューを表示するのところはチェックを入れておきましょう。
ここまでできたら、画像を選択ボタンを押してリッチメニューの画像を取り込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/e4d37313-fa9c-a242-1025-a9ffceed0cc7.png)

:::note alert
画像は１MB以下じゃないと入りません。
:::

<details><summary>カフェリッチメニューの画像入っています練習にお使いください。</summary>


![カフェ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/c1d94036-d037-80cf-f557-4e6e01ae5340.jpeg)

https://i.gyazo.com/e797905ee0994439aa8de20379b05f77.jpg
↑jpegで保存できない人はこちらのURLからどうぞ。
</details>


#### :coffee:１.カフェ→ヨガのリッチメニュー切り替えの設定
それでは次に領域を一つ追加を押してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/457c1e4d-e452-de01-b0c2-d8371c857747.png)

領域を一つ追加ボタンを押すとウィンドウが出てきました。ここで画像の端にある┗を動かしながら領域を設定します。今回はOkina-YOGAの部分を押すと二つ目のリッチメニューに切り替わるようにしたいので、Yogaのタブの部分を下図のようにカーソルを使って選択しましょう。選択が終わったら保存ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/818eb241-bb74-058a-26f4-03b80e8877e0.png)


タップ領域のところにアクション未設定の項目が一つできました。
それでは続いて設定を行いましょう。アクションを編集を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/b8b15770-1612-d177-7543-4946e732b8fe.png)

アクションの選択は**リッチメニューの切り替え**を選びます。 
ラベルは自分がわかりやすいものに設定しましょう。今回は「ヨガページに飛ぶ」としておきます。webhookに送信するテキスト、切り替えリッチメニューのエイリアスはともに<font color="red">**yoga**</font>としておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/d6b45058-8cca-b636-b91c-d92a22be4be6.png)


:::note warn
webhookに送信するテキストと切り替えリッチメニューのエイリアスは<font color="red">**半角英数字とハイフン**</font>の組み合わせで記載します。この二つは別々にしてもかまいませんが、今回はわかりやすいように同じにしておきましょう。
:::

#### :coffee:2.メニュー一覧の設定～WEBホームページとつなぐ～
先ほどと同じく領域を一つ追加ボタンを押します。
今度は左側のメニュー一覧のところにカーソルを合わせていきましょう。
指定出来たら保存ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/a8308e9b-2359-5ccb-fc30-978442fa22eb.png)

アクションの種類は**URL**を選びます。
ラベルは自分がわかりやすい名称であれば何でもOKです。今回はメニュー一覧としておきましょう。URLは自分がリンクしたいホームページのURLを貼ります。
今回はcanvaであらかじめ作成しておいたこちらのホームページリンクを貼ることとします。下記のOkina-cafeホームページを開いてURLをコピペしてください。
全ての設定が終わったら保存ボタンを押しましょう。

https://hokkaido.my.canva.site/okina-cafe

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/38c9dc26-9928-a559-f4b3-81142846ce62.png)

#### :coffee:3.クーポンメニューの設定
続いてクーポンメニューの設定を行いましょう。
先ほどと同様に領域を人追加ボタンを押し、今度は右側のクーポン部分を┗カーソルを使いながら指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/e0042a7e-21ff-e5f4-af19-8da84088d600.png)

それではクーポンの設定を行いましょう。
メニュー一覧と同様にアクションの種類は**URL**を選択します。
ラベルはクーポンリンクに飛ぶにしておきます。
事前準備で作成したLINEクーポンのURLを貼りましょう。
練習用にこちらのURLをお使いください。
:sunny:https://lin.ee/8r5N0Mj

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/f2924849-b332-5f12-6548-a0f707328043.png)
これでカフェ画面の設定は終わりです。お疲れさまでした！

### :dancer_tone2:ヨガメニューの設定を行う。
続きましてヨガメニューの設定です。
左上のハンバーガー:hamburger:ボタンを押してください。
カフェページの下に（名称未設定のリッチメニュー）があるので、そちらを押してヨガのページを作成していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/fd473add-69a0-dc75-b075-bbb9856213ca.png)

先ほどと同様にリッチメニューの名前を付けていきます。今回は「ヨガ」としました。また、同様にリッチメニューの下のボタンテキストは開閉ボタンにしておきます。それでは早速ヨガの画像を取り込んでいきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/58741e3f-d08c-17c1-2aac-f247a1fbd2b9.png)
<details><summary>ヨガの練習用リッチメニューおいておきます。ダウンロードしてお試しください。</summary>

![ヨガ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/ef77feb3-a4b8-954d-6b84-8455288aed78.jpeg)

https://i.gyazo.com/817775220de7e69584b1583c3cd996bd.jpg
↑jpegで保存できない人はこちらのリンクを使ってね
</details>

####  :dancer_tone2:1.ヨガ→カフェのリッチメニュー切り替え設定
カフェの時と同様にリッチメニューの切り替え設定をしていきましょう。今回はカフェページに飛びたいので、切り替えリッチメニューのエイリアスを**cafe**にしています。webhookに送信するテキストもわかりやすいように**cafe**にしております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/06b4f67c-5eb8-f0a0-fb5a-9e8f61d02e87.png)

#### :dancer_tone2:2.スタンプカードの設定
cafeページでクーポンを設定した時と同じ要領でポチポチしていきましょう。
URLには事前準備で発行したLINEのショップカードのURLを貼ります。
練習用にこちらのURLをお使いください。
:sunny:https://lin.ee/ViR0WCU

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/eb2ed55b-6349-a070-9d3d-d44440690383.png)

#### :dancer_tone2:3.SNSリンクに飛ぶ設定
全く同じ要領でSNSにリンクさせることも可能です。
予約をXのDMで受け付けたい時などに便利です。
やり方は簡単です、リンクしたいSNSのURLを画像の4のところに貼ればいいだけです。
練習用にこちらのURLをお使いください。
:sunny:https://twitter.com/katrina01208823
↑フォローしてね:wink:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/dab630b3-ce39-3f51-2e79-721d4c853def.png)
これでヨガページの設定も終わりました。
いよいよリッチメニューをアップロードしてつないでいきましょう。

### :gear:リッチメニューをアップロードしてそれぞれのページのエイリアスを設定する。

それではいよいよリッチメニューをアップロードします。cafeページが選択されている状態で<font color="red">**API呼び出し**</font>を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/fe048d49-2f76-16ee-6ae5-eca2dae2edc8.png)

アップロードの右横の下矢印を押すと<font color="DarkOrange">**実行する**</font>の文字が出てきますので、そちらをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/c90e61c6-b59c-2481-bd6a-581affdff02d.png)

200(成功）と出たら成功です。:relaxed:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/f78f38d8-70b6-5634-d192-dbdda54adf9f.png)

次にカフェページをDefaultに指定したいので、デフォルトに指定を開いて、<font color = "Orange">**実行する**</font>ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/e79d827e-165c-4b1f-a618-8b70777b46d0.png)

続いてエイリアスを追加していきます。これはcafeページをcafe、yogaページをyogaと名付けるイメージです。先ほど切り替え先リッチメニューの設定をしたと思います。「このリッチメニューがcafeのページです！このリッチメニューがyogaのページです！」と教えてあげましょう。

それではcafeメニューのエイリアスをcafeと記載し、<font color = "Orange">**実行する**</font>ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/bbe71d4d-313b-0c1f-be9f-aa348b72b75c.png)

:::note alert
エイリアスには半角英数字とハイフンしか入りません。ひらがな等入れないこと。
:::

同じようにyogaページもリッチメニューをアップロード後、エイリアスにyogaと入力して<font color = "Orange">**実行する**</font>ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/5490c272-8019-d576-2888-890cf29444a9.png)

:::note info
ちなみにヨガページはデフォルトに指定してあげる必要はないので、実行は不要です。
:::


**これで完成です！:bouquet:動いたでしょうか？？？**

## リッチメニューエディターはリッチメニューを上書きできない。
最後に一つだけとても大事なことをお伝えしておきます。
リッチメニューエディタは内容の上書きができません。

:frowning2:やっぱりリッチメニューのタブの部分の色変えたい！
:frowning2:うーーん、クーポンURL変えたい！

そう思ったときは、一旦リッチメニューを削除して、修正後再アップロードしましょう。

まずは一番下の削除を選んでいただき、<font color = "Orange">**実行する**</font>ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/36b85fcc-63f4-1e6e-c74a-abe0b63d7de4.png)

そうすると、削除したリッチメニューが未アップロードの状態に戻ります。
この状態でメニュー設定にてリッチメニューを修正し、再度アップロードと再エイリアス設定を行いましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/f585bfde-db2f-bad5-e771-1f43f8438663.png)

ちなみにエイリアスを再度追加したときに400（エラー）が起きることがあります。これは「前回のデータが残ってまっせ、だから登録できないんでっせ。」というエラーです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/fdde5983-5e45-4703-c19a-8512d43daddc.png)

このエラーメッセージが出たら前回登録したエイリアスを削除してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/e3e0adb0-109d-6737-fa5c-a46d2b8b9f99.png)

そして再度追加しましょう。今度は200（成功）となるはずです。

## いーちゃんさんに手を合わせろ
はい、とっても簡単に、そして無料でLINEの複数タブを作成することができました。
このリッチメニューエディターを制作されたのはいーちゃんさんです。

**いーちゃん**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702358/af1464b3-3986-a487-0c17-207473a88cf3.png)


普通科高校3年生。プログラミングは小学校4年生のときから始め、様々なプログラムを作成。2020年からはSGG(すごくなりたいがくせいぐるーぷ)のメンバーとしても活動している。

ポートフォリオ: https://e-chan.me/
Twitter: [@e_chan1007](https://twitter.com/e_chan1007)

多分今は大学生なんじゃないかな。
こんな学生さんがいるのであれば日本の未来って全然明るいじゃんと思わずにはいられませんね:relaxed: