#ノーコード リッチメニューを秒で増殖! #リッチメニューエディタ #LINEDC

## ノーコードでのリッチメニュー作成は6区画まで

 リッチメニュー便利ですよね。
 [LINE Official Account Manager](https://manager.line.biz/)から
 設定できるのは6区画・6アクションまで。
 形も下記の中からしか選べません。
 ![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/1522238956091285504

 いや、自分でコード書くし。の上級者の方もぜひお付き合いください。

 ## 神ツール リッチメニューエディタ

 使ってみるツールはこちら

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

 コードを書かずに、直感的にリッチメニューを作れます。
 やってみましょう。

 ### アクセストークン・リッチメニューの画像登録

 botのアクセストークン入力　→　新しいリッチメニュー
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c7d79f36-f43c-0e60-b75d-6b75e4cf1db1.png)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/51244a7f-9cc8-1d93-eabf-552a3d6f4cbe.png)

 名前　→　開閉ボタンテキスト　→　画像アップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/980327f2-8c49-f2c0-3056-7c3c3562d847.png)

### リッチメニュー設定

 タップ領域　→　領域を追加　→　保存
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/931ba9b2-2d51-0ec2-786b-5d85f2eba274.png)

 アクションを編集　→　好きなアクション選択　→　保存　<font color="Red">**これで完了!**</front>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c8aa8c8e-38a6-c150-82e4-9827b6ed3ef7.png)

 選らべるアクションは日時選択や、リッチメニュー切替など、充実しています。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b6d29661-079d-4dfc-dd23-91a5936be2a8.png)

 あとは好きなだけアクションをサクサク追加しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/14191b24-7184-69a8-2c65-65c80ec5118c.png)

### アップロードして完了!
 デフォルトでメニューを表示する をONに(OFFでもOK)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e7a0191a-ce18-722a-2e49-f152574df194.png)

 API呼び出し　→　アップロード　→　実行　→　デフォルト　→　実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/56113d99-6702-6975-93f9-543b4e2cf9a1.png)

 LINEを開いてみよう　<font color="Red">**もう完成!!**</front>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c2329399-a1b0-811d-60a2-9eb80f76f113.png)

 ## ノーコード万歳🙌

 もしGASで同様のコード書いたら
<details><summary><font color="Red"> (こんな感じです　クリックで表示) </font></summary><div><br><br>

```js
var areas =[];

function richmenu1() {
// // SpreadsheetのURL
// const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
// // Spreadsheetのシート名（タブ名）
// const menuSheet = spreadSheet.getSheetByName("メニュー構成");


var menutext = menuSheet.getRange(3,3).getValue();

var menu1 = menuSheet.getRange(20,3).getValue();
var type1value = menuSheet.getRange(21,3).getValue();

var menu2 = menuSheet.getRange(20,5).getValue();
var type2value = menuSheet.getRange(21,5).getValue();

var menu3 = menuSheet.getRange(20,7).getValue();
var type3value = menuSheet.getRange(21,7).getValue();

var menu31 = menuSheet.getRange(20,9).getValue();
var type31value = menuSheet.getRange(21,9).getValue();

var menu32 = menuSheet.getRange(20,11).getValue();
var type32value = menuSheet.getRange(21,11).getValue();

var menu4 = menuSheet.getRange(22,3).getValue();
var type4value = menuSheet.getRange(23,3).getValue();

var menu5 = menuSheet.getRange(22,5).getValue();
var type5value = menuSheet.getRange(23,5).getValue();

var menu6 = menuSheet.getRange(22,7).getValue();
var type6value = menuSheet.getRange(23,7).getValue();

var menu61 = menuSheet.getRange(22,9).getValue();
var type61value = menuSheet.getRange(23,9).getValue();

var menu62 = menuSheet.getRange(22,11).getValue();
var type62value = menuSheet.getRange(23,11).getValue();

var menu7 = menuSheet.getRange(20,15).getValue();
var type7value = menuSheet.getRange(21,15).getValue();

var menu8 = menuSheet.getRange(20,17).getValue();
var type8value = menuSheet.getRange(21,17).getValue();

var menu9 = menuSheet.getRange(20,19).getValue();
var type9value = menuSheet.getRange(21,19).getValue();

var menu10 = menuSheet.getRange(20,21).getValue();
var type10value = menuSheet.getRange(21,21).getValue();

var menu11 = menuSheet.getRange(20,23).getValue();
var type11value = menuSheet.getRange(21,23).getValue();

var menu12 = menuSheet.getRange(22,15).getValue();
var type12value = menuSheet.getRange(23,15).getValue();

var menu13 = menuSheet.getRange(22,17).getValue();
var type13value = menuSheet.getRange(23,17).getValue();

var menu14 = menuSheet.getRange(22,19).getValue();
var type14value = menuSheet.getRange(23,19).getValue();

var menu15 = menuSheet.getRange(22,21).getValue();
var type15value = menuSheet.getRange(23,21).getValue();



const CHANNEL_ACCESS_TOKEN = menuSheet.getRange(2,3).getValue();

var keys = {};
keys.size = {};
keys.size.width = 1200;
keys.size.height = 810;
keys.selected = "true";
keys.name = menutext;
keys.chatBarText = menutext;

areas =[];

bounds = {};
bounds.x =601;
bounds.y =0;
bounds.width =600;
bounds.height =199;
action = {};
action.type = "richmenuswitch";
action.richMenuAliasId = "richmenu-alias-b";
action.data = "richmenu-changed-to-b";

areas.push({bounds,action})

richmenujson(0,0,240,352,menu1,type1value)
richmenujson(241,0,240,352,menu2,type2value)
richmenujson(481,0,240,352,menu3,type3value)
richmenujson(721,0,240,352,menu31,type31value)
richmenujson(961,0,240,352,menu32,type32value)



richmenujson(0,353,240,152,menu4,type4value)
richmenujson(241,353,240,152,menu5,type5value)
richmenujson(481,353,240,152,menu6,type6value)
richmenujson(721,353,240,152,menu61,type61value)
richmenujson(961,353,240,152,menu62,type62value)

richmenujson(0,505,240,152,menu7,type7value)
richmenujson(241,505,240,152,menu8,type8value)
richmenujson(481,505,240,152,menu9,type9value)
richmenujson(721,505,240,152,menu10,type10value)
richmenujson(961,505,240,152,menu11,type11value)

richmenujson(0,657,240,152,menu12,type12value)
richmenujson(241,657,240,152,menu13,type13value)
richmenujson(481,657,240,152,menu14,type14value)
richmenujson(721,657,240,152,menu15,type15value)



console.log(areas)


keys.areas = areas
console.log(keys)




const options = {
"method": "post",
"headers":
{
"Content-Type": "application/json",
"Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
},
"payload": JSON.stringify(keys)
};

// Line該当ユーザーに応答を返している
var response = UrlFetchApp.fetch("https://api.line.me/v2/bot/richmenu", options);

var richmenu1response = JSON.parse(response.getContentText());

menuSheet.getRange(24,3).setValue(richmenu1response);

}
```
</div></details>

 **これがノーコードで出来るなんて素晴らしすぎて泣けます**
 開発してくれた [いーちゃん](https://twitter.com/e_chan1007) さんをぜひフォローしましょう!!

 マス目も簡単にどんどん増やせるので、遊んでみました。秒で完成します。

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

 そのほか、実装できる便利機能もこちらにまとめらています。謝謝!!
 サクッと色々試してみよう!

 https://e-chan1007.notion.site/978d23b0469d45a3930811abce86761e

 ## 感じたこと

 **すごくなりたいがくせいぐるーぷ** はすごい ([いーちゃん](https://twitter.com/e_chan1007)さんもメンバーです)

 https://sugokunaritai.dev/

 https://www.youtube.com/channel/UChVaX0bWn3W-X53FxQoxLBw

　

 最終的に作ったものも一応紹介(👍してくれると嬉しいです)

 https://protopedia.net/prototype/3012

 それではまたお会いしましょう(^.^)/~~~