見出し画像

LINE Messaging APIのイメージマップ・リッチメニューのボタン領域設定の悩みをGoogleスライドで解決した件

LINE Messaging APIでLINEBOTアプリケーションをつくるうえで一番手間がかかるのはコーディング・・・ではありません。

イメージマップリッチメニューの設定です。

どちらも、ボタン領域を設定するのに、座標・サイズを計算する必要があり、今まではPowerPointで図形を重ねてエクセルでデータ入力して計算するという手順を踏んでいました。

この作業をGoogleスライドを使って自動化することに成功しました。

リッチメニューに関しては、

1.Googleスライドの背景画像にリッチメニューの画像を埋め込む
2.ボタン領域にしたいところに図形(長方形)でマスキングする
3.長方形の中にアクションに関するデータを記入する

という準備をしたうえで、プログラムを実行すると、リッチメニューオブジェクトがLINE Messaging APIのサーバー上に作られます。

画像1

アスペクト比だけアップロードする画像と一致させておきます。

同じ要領で、ボットドックでは、ショートコードを使ってイメージマップを送信できるようにしました。

イメージマップの一部に動画を埋め込むこともできます。ボタンも動画も表示させたい領域を長方形で囲んで、所定の記法でパラメータを設定しておくだけです(message#textみたいな感じのをカンマ区切りで書くだけです)。

["imagemap":"GoogleスライドのID"]

みたいな感じで設定できます。

相変わらず5サイズの画像データを用意しなければならないところだけが億劫ですが、いつぞやに購入・インストールしてある「ズバリ画像変換」というソフトを使って処理しています。

* * *

GASでGoogleスライドを操作する記事はスプレッドシートとかに比べると乏しいですが、原典のリファレンスを直接読解できるようになったこともあり、作ってみたところ、快適すぎてやばかったです。

リッチメニューへの画像のアップロードもそのうちGASで完結できるようになるかもしれません。

Google Apps Script(GAS)の便利さは、実は、あまり認知されていない(もしくはプロのエンジニア・プログラマーが好んで利用しようとしない?)と思いますが、むしろ、GASでできないことの方が少ない気がします。

GASでプログラミングの基礎・応用を身につければ、他言語の学習も容易になりますし、他言語と連携したシステム・プログラムが作れるようにもなります(Google Apps Scriptはプログラミング言語ではありませんが)。

やればやるほど、Googleのすごさを肌身で感じることができます。

実際のリッチメニューをぜひLINE ID@330pjgiuを友だち追加していただきご覧いただけたら幸いです

動画を投稿していますが、OCRから直接翻訳結果を返信する機能も追加してます!

* * *

個人の方にも事業者の方にも、LINEBOTの便利さを共有していきたいと思いますので、ぜひお気軽にコンタクト下さい・ω・

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

独学のすすめ ー『独学力』を日本一シェアするマガジン ー【¥1,000/月】の付録として、さまざまな専門知識・スキル・資格をベースとした相談・助言・提案サービスを提供させていただきます・ω・

ありがとうございます・ω・
8
GoogleAppsScriptでLINEBOT開発するためのライブラリ・フレームワーク『Explode』をプロモーション中です。https://hasekatsu.me