専属秘書を作ろう！ - #05 リッチメニューを作成する①
専属秘書を作ろう！#04 までで、LINE と GAS の間で送受信ができるようになりました。
これからどんどん機能を盛り込んでいくぜ～💪
と意気込みたいところですが、これから追加していく機能すべてを覚えておくのは一苦労です💦
そこで、機能を盛り込む前に "リッチメニュー" を作っておきたいと思います。
リッチメニューには、タップすると自動でコマンド(テキスト)を入力してくれる機能があります。
この機能を使用して、何らかの機能を使いたい場合にタップするだけで使用することが出来るようにしてしまいましょう。
⬇️ 過去の note をまだご覧になっていない方はこちら ⬇️
リッチメニューをどのように使うか
リッチメニューには様々なアクションが設定できます。
・メッセージを送る
・キーボードを開く
・指定した URL を開く
・日時を選択させる
・位置情報を取得する
・リッチメニューを切り替える
このアクションの中から "メッセージを送る" 機能を使います。
「なぁ～んだ、一番オーソドックスなやつ？」
と思われた方…、まあその通りなのですが、通知などとは違いますよ。
"制作者側が決めたテキストをユーザーに送らせる" 機能ですので、通知などとは意味合いが違うのが分かりますでしょうか😅
これは、どのように使うかというと、
1．ユーザーがリッチメニューの特定の領域をタップする
2．タップした領域に設定したテキストが送られる
3．送られたテキストに反応する "応答メッセージ" で対応する
ということができるのです！
良いですよね～。
と言ってますが、おそらく、まだこの良さが分かりませんよね…💦
例えば、カレンダーの予定を確認するためのコマンドを「予定の確認」としたとします。
ユーザーに入力してもらうと "予定確認" とか "予定を確認" とか意図しないコマンド(テキスト)を入力する可能性があります。
これだとコマンドとして認識できません。
※もしくは複雑な処理を作成する必要があります。
それを回避するためには、ヘルプやドキュメントを作成したりする必要があるので、これもまた手間になります。
この問題を解決できる、もっとも簡単な方法は、絶対にコマンドを間違えないようにすることです。
つまり、"自動で正しいコマンド(テキスト)を送らせる" のが最も良い解決策になります。
上図のように、"FUNC1エリア" をタップしたら "FunctionA-1" を送る、といった具合です。
特に入力しなくても、タップしただけでテキストが送られます。
この機能をうまく使って、みどりこちゃんに活躍してもらいましょう！
タブ切替機能
リッチメニューは使用するのですが、LINE公式アカウントではなく、せっかく Messaging API を使用するのですから、Messaging API にしか無い機能を使ってみましょう。
それは…【タブ切替機能】です。
図のようにリッチメニューがタブ化されて、切り替えられるようになる機能です。
LINE公式アカウントしか使ったことの無い方からしたら、
「何それ～？そんな機能あるの？」という感じですよね。
絶対に使わないといけない(実現できない)といったものではないのですが、面白さ半分で作ってみましょう。
⬇️ LINE Developers コンソールのドキュメントはこちら ⬇️
スプレッドシートで設定
次回の note で実際にリッチメニューを作成していきますが、設定項目が多く、ソースコードに手を加えてもらって改変してもらうのは大変です。
しかし、そこは Mr.Green。
ユーザーにそんなことはさせません👍
スプレッドシート上で設定値を入力してもらって、自動で設定するようにします。
リッチメニューの画像、各種タップ領域の設定やアクションの設定など、簡単にできるようにしますのでご安心を。
タップする数などが固定されているから出来ることなので、あまり汎用性はありませんが、今回は簡便さを重要視していますので、これでご勘弁を💦
画像の読み込み
C列上部に Googleドライブからコピーしてきたリンクをペーストします。
その後、「BBP>リッチメニュー>ID抽出＆画像読込」をクリックすると、C列下部に画像を読み込みます。
スプレッドシート上に画像は表示したいけど、Googleドライブの画像を読み込ませるのは少々手間なので、自動化しています。
※なぜ Google上での連携なのに、ここは実現できていないのか不思議です…。
設定内容の検証とLINE設定
スプレッドシートに記載した設定情報が正しいかどうか確認します。
その上で問題なければ、LINEに設定します。
検証した結果は、L列に記載されます。
※問題無ければ "OK"、問題があれば問題点が記載されます。
LINE Messaging API には、リッチメニューの情報が正しいかどうか検証するためのエンドポイントが設定されていますので、それを使用しています。
もし何らかのエラーが出ている場合は、L列を参照して修正してください。
検証が OK になりましたら、LINE に設定します。
※LINE 設定時にも問題が発生することがありますので、ご注意ください。
⬇️ 詳しくはこちら ⬇️
まとめ
今回は、専属秘書みどりこちゃんのリッチメニュー作り、しかもタブ切替機能付き、というお話をしました。
結構設定することが多く、1回では文章量が多すぎてお腹いっぱいになってしまうと思いましたので、2回に分けました。
次回は、実際に制作していきますので、お楽しみに～✨
もしわからないことがありましたら、お気軽に LINE公式アカウント でご質問くださいね。
今回のご提供ファイルのキーワードは【専属秘書みどりこV3】です。
LINE公式アカウントにご登録の上、キーワードを送信してくださいね。
⬇️LINE公式アカウントに登録してご連絡ください⬇️
もし「サポートしたい！」という方がいらっしゃいましたら、ぜひぜひサポートをお願いいたします！ 開発費や外注費などクリエイター活動の一部として使用させて頂きます✨