LINE公式アカウントのリッチメニューのタブを3つにするのに悪戦苦闘した!

スポンサーリンク
050-VBA

へっぽこヘタレシステム管理者かつ超ド底辺地方公務員の管理人です。

さて・・・

はやりで、管理人が勤務する自治体でもLINE公式アカウントを運用していますが・・・

リッチメニューをタブ化して複数にしたいという要望がでており、

なんとかネットの情報を駆使して2タブ化まではできたのですが・・・

今度は、3タブ化して欲しいと・・・

今のところ断っているのですが・・・

なんとか無料で、3タブ化できないかトライしたので、忘備録として掲載しておきます。

有料サービスなら簡単にできるのに

さて、あたりまえですが・・・

LINEには、多数の有料サービスが展開されているので、金さえだせば・・・

リッチメニューの3タブ化なんて簡単にできます。

管理人は、使ったことがありませんが、おそらくGUIで・・・

チョチョイノチョイでできるのでしょう。

たった・・・月あたり数万円の料金ですが・・・

3タブ化して欲しいと依頼があっても、金はつきません。

貧乏な自治体はキツいですね。

ブラウザのみでできるサイトならできる

リッチメニューを2タブ化したときに管理人が、選択しなかった方法ですが・・・

次のブラウザのみでリッチメニューをタブ化できるサイトであれば、

3タブ化でも容易にできます。

リッチメニューエディタ
LINE公式アカウントのトーク画面下部に表示される、リッチメニューを作成するツールです。GUI・コードの両方で直感的に編集でき、アップロードまで一貫して行うことができます。

リッチメニューエディタというサイトですね。

こちらで、テストしてみましたが・・・

いともたやすく3タブ化が可能でした。

試していませんが、4タブ以上もできるのかもしれません。

必要なのは・・・

  • LINE Developersのチャンネルアクセストークン
  • リッチメニューの画像

たった、これだけ・・・

非常に簡単です。

設定のインポート・エクスポートもできますので・・・

使い勝手は非常に良いですね。

心配なのは、サイトが突然閉鎖されて使えなくならないかどうか?

だけですね。

スポンサーリンク

googleスプレッドシートを使う方法

続いて管理人が利用させていただいているgoogleのスプレッドシートを使う方法です。

こちらは・・・

youtubeで紹介されているものですが・・・

googleスプレッドシートのリンクは下記から

リッチメニュー切り替えLINEDC
メニュー構成 トークン メニューバー,メニュー 2022/06/28追記 C2セルに貼り付けるチャネルアクセストークの始まりが+やーの場合、うまく設定されない場合があります。 その際は、LINE developersでMessegingAP...

googleスライド(資料)のリンクは下記から

リッチメニュー切り替え
【商用利用可】ノーコードでLINEBotリッチメニュー タブ切り替えを実現!リアルタイム解説! 2021/11/8 LINE DeveloperCommunity スペシャルマン マッシュルーマン ハンズオンは後半で

今のところ、2タブバージョンしか公開されていないようです。

GASが全く分からない

googleスプレッドシートで【Apps Script】(エクセルのVBAの様なもの)が動いているようですが・・・

見てもさっぱり分かりません。

googleスプレッドシートの最後のページに3タブ版のスプレッドシートのリンクが、

【こちらのスプレッドシートをご参考いただければと、、、】という注意書きと共に

公開されていますが・・・

スポンサーリンク

こちらは残念ながら【Apps Script】が見れない状態で公開されています。

リッチメニュー切り替えLINEDC(タブ3つ) 20230518改修
メニュー構成 トークン メニューバー,メニュー リッチメニュー用画像フォーマットはこちら リッチメニュー保存フォルダ 保存先ドライブ ドライブID Googleドライブでの画像の共有URL,完了フラグ リッチメニュー1の画像のURL リッチ...

こちらは【参考に】という注意書きがあったので、動くか分からず・・・

試していませんが・・・

なんとか、このスプレッドシートを参考に・・・

2タブのスプレッドシートを修正して3タブ化にトライすることに・・・

悪戦苦闘

【Apps Script】なんて、使ったことがありませんので、悪戦苦闘です。

ブログランキングにご協力ください!
ブログランキング・にほんブログ村へ

とりあえず・・・

リッチメニューの画像とリンクが関係するコードを手当たり次第で・・・

3つ目のタブの情報を追加しましたが・・・

上手く動きません・・・

正確には、画像は3タブ化していますが・・・

2タブとしてしか動かない感じです。

どうやら下のコードの書き方が悪いようですが・・・

ググッてもヒットしないのですが・・・

//修正前

areas =[];

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

//3タブめの画像を追加 2024/02/05
bounds = {};
bounds.x =801;
bounds.y =0;
bounds.width =399;
bounds.height =199;
action = {};
action.type = "richmenuswitch";
action.richMenuAliasId = "richmenu-alias-c";
action.data = "richmenu-changed-to-c";
//

areas.push({bounds,action})

次のとおり修正したらなんとか動くようになりました。

変数名は何故か同じでも・・・・

areas.push({bounds,action})

で一端区切ればイケる様子・・・

//修正後

areas =[];

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

areas.push({bounds,action})

//3タブめの画像を追加
bounds = {};
bounds.x =801;
bounds.y =0;
bounds.width =399;
bounds.height =199;
action = {};
action.type = "richmenuswitch";
action.richMenuAliasId = "richmenu-alias-c";
action.data = "richmenu-changed-to-c";

areas.push({bounds,action})
//

試しに次のとおり変数名を変更してみても・・・

動いたので、どちらでも良い様です。

【Apps Script】は全く分かりませんがとりあえず動けばヨシとすることにします。

areas =[];

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

areas.push({bounds,action})

//3タブめの画像を追加
boundsX = {};
boundsX.x =801;
boundsX.y =0;
boundsX.width =399;
boundsX.height =199;
actionX = {};
actionX.type = "richmenuswitch";
actionX.richMenuAliasId = "richmenu-alias-c";
actionX.data = "richmenu-changed-to-c";

areas.push({bounds: boundsX,action: actionX})
//

ただ、これが分かるまでに、ほぼ丸1日を要しました。

コロナ後遺症で頭が全く冴えない中で、

結構アレコレ考えて、試行錯誤して、もう疲れてヘトヘトです。

ただ、答えが分かってしまえば、実は非常に簡単な事で・・・

こんな些細な事に丸1日も費やしたのかと思う我が身の愚かさに腹が立ちます。

ブログ開設に必要なドメイン取得、サーバーレンタル、ASPの登録等は、こちらのサイトから!

コメント

タイトルとURLをコピーしました