Flex Messageで管理画面へのリンクを埋め込んだ——LINE通知の中にボタンを作る

「注文が届いたときのメッセージに、管理画面へのリンクを埋め込んでほしい」とオーナーから言われた。

最初は意味がすぐわからなかった。注文通知にURLは書いてある。それをタップすれば管理画面に飛ぶ。何が足りないのか。

LINEのテキストメッセージに書いたURLは、長い文字列のまま表示される。https://script.google.com/macros/s/AKfycb... という70文字以上の文字列だ。見た目が悪い。タップするには十分だが、「埋め込みURL」にはなっていない。

LINEのテキストメッセージにハイパーリンクは作れない

LINEのテキストメッセージは、URLを書けばタップできるリンクになる。ただし「ボタン」にはならない。文字列のままだ。

Webページのように <a href="...">注文を確認する</a> と書く方法はLINEには存在しない。

ボタンを作るには、Flex Messageを使う必要がある。

Flex MessageはJSONで組み立てるカード型メッセージ

LINEのFlex Messageは、JSONで構造を定義するメッセージ形式だ。ヘッダー・ボディ・フッターに分かれたバブル型が基本で、フッターにボタンを置ける。

function sendOwnerFlexMessage(userId, title, bodyText, buttonLabel, buttonUrl) {
  const payload = {
    to: userId,
    messages: [{
      type: 'flex',
      altText: title,
      contents: {
        type: 'bubble',
        body: {
          type: 'box',
          layout: 'vertical',
          spacing: 'sm',
          contents: [
            { type: 'text', text: title, weight: 'bold', size: 'md' },
            { type: 'separator', margin: 'sm' },
            { type: 'text', text: bodyText, size: 'sm', wrap: true, margin: 'sm' }
          ]
        },
        footer: {
          type: 'box',
          layout: 'vertical',
          contents: [{
            type: 'button',
            style: 'primary',
            color: '#c8a97e',
            action: { type: 'uri', label: buttonLabel, uri: buttonUrl }
          }]
        }
      }
    }]
  };
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/push', {
    method: 'post',
    contentType: 'application/json',
    headers: { 'Authorization': 'Bearer ' + LINE_CHANNEL_ACCESS_TOKEN },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  });
}

フッターの action.type: 'uri' が外部URLを開くアクションだ。ボタンをタップするとLINEブラウザで指定URLが開く。

ボタンの色は焼き菓子店のカラーに合わせた

#c8a97e は焼き菓子店のブランドカラーであるウォームゴールドだ。

LINE公式のFlex Messageシミュレーターで確認した。薄いベージュ系の背景にゴールドのボタンが馴染んだ。

テキストとして届くメッセージより、視覚的に管理画面へ誘導できる。オーナーが注文確認の動線を迷わない。

既存のテキスト送信関数を置き換えた

それまでの実装は UrlFetchApp.fetch でテキストメッセージを送っていた。Flex Message送信に差し替えた。

呼び出し側は変わらない。引数を渡す1行が変わっただけで、通知の見た目が大きく変わった。

「ボタンがあると全然違う」とオーナーが言った。同じ情報でも届き方が変わると、使われ方が変わる。

*シンプルシステム株式会社 代表　伊藤勝彦*