LINEリッチメニュービルダーを作る
LINEリッチメニュータブで切り替えから始まる
LINEのリッチメニューをタブで切り替えて管理したいということで、始まった今回の企画。
ですが、もともと自作の写真で見積もりフォームアプリと管理画面、あとスタッフ管理などをFirebaseで管理しているため、Webhookを共有しなくてはならなくなりました。
ですが、現在使っているLメッセージの方では他の外部ツールと一緒に使うことができないため、FirebaseからWebhookを転送すれば動くのですが、「LINE公式との接続が切れています」と毎回警告が入ります。
Webhook URLが何かのきっかけでまた書き換えられても問題が起きてしまうので、とりあえず使いたい部分だけ自作することに決めました。
リッチメニュービルダー(仮)を作ってみた
ビルダーとは言うものの、単に「リッチメニューの骨組みを作るツール」です。
画像はCanvaで作っています。
リッチメニュー画像を読み込んで、その上にドラッグ操作でボタンの範囲を指定していくだけで、LINE APIに必要な座標データ（JSON形式）が自動で生成される
主な機能
サイズは2種類から選択
LINEリッチメニューのサイズが2種類からの選択となっており
大（フルサイズ）：2500 × 1686 px
小（ハーフサイズ）：2500 × 843 px
ツール上でどちらかを選ぶと、キャンバスがそのサイズに自動で切り替わります。
画像を見ながらドラッグで領域指定
作成済みのリッチメニュー画像を背景として読み込み、その上にドラッグしてボタンの範囲を囲うだけです。囲った順番に①②③…と番号が自動で振られます。
重なり検出機能
誤って領域が重なってしまった場合、重なった部分が赤く表示されて警告が出ます。LINE APIでは領域の重なりがトラブルの原因になるらしいので、作業中に気づける仕様にしました。
ZIP形式で保存・読み込み
作成した骨組みは、座標データ（JSON）と背景画像をまとめてZIPファイルとして保存できます。次回作業時にZIPを読み込めば、そのまま続きから作業できます。
読み込み前プレビュー
ZIPファイルを読み込む前に、サムネイル画像・名前・領域数を確認できるプレビュー画面が表示されます。「あれ、これどのメニューだっけ？」という混乱を防ぎます。
最近使ったレイアウトを表示（直近5件）
過去に保存したレイアウトのサムネイルと情報が最大5件表示されます。作業履歴の確認に使えます。
Chrome / Edge では保存先フォルダを指定可能
ChromeやEdgeで使用する場合、保存先フォルダをあらかじめ指定しておけば、毎回同じ場所に自動保存されます。SafariやFirefoxでも動作しますが、その場合はダウンロードフォルダへの保存になります。
このアプリの主なポイント
HTMLファイル1枚で動作するため、インストール不要
ブラウザで開くだけで使える
データはブラウザのローカルストレージとZIPファイルで管理
座標データはLINE APIの形式に準拠したJSONで出力
これからの予定としては
今回はほんの入り口のところだけの機能をアプリにしてみました。
今後作成予定の「リッチメニュー管理アプリ」と連携させる予定です。
管理アプリでは、ビルダーで作った骨組みにアクション（URL遷移・メニュー切り替えなど）を割り当てて、実際にLINEへ反映させる機能を実装していきます。
