FlexMessageでテキストリンクを設定する方法

目的

FlexMessageにテキストリンクを仕込む方法を紹介します。

実際はテキストリンクに見えるように実装しているだけなので、要件に満たすか検討して使用してください。

FlexMessageSimulatorを使用して基本的に実装を行いますので、説明の中でboxにtextを置いて（追加して）などという日本語が登場します。Simulatorの（+）ボタンのことです。

直接リンクが書いている場合

下記の画像のようなイメージです

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "https://qiita.com/",
        "color": "#0000ee",
        "decoration": "underline",
        "action": {
          "type": "uri",
          "label": "https://qiita.com/",
          "uri": "https://qiita.com/"
        },
        "contents": []
      }
    ]
  }
}

実装方法

1. boxにtextを設置する
2. colorをリンクの青色にする
3. decorationでunderlineを指定して下線を入れる
4. actionをuriで設定する

以上です！

文章中の「こちら」のように仕込む方法

下記のようなイメージです

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "コードを書いていると、つまづくこ",
        "contents": [],
        "wrap": true
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "とありますよね、そんな時は",
            "flex": 1
          },
          {
            "type": "text",
            "text": "こちら",
            "flex": 1,
            "position": "absolute",
            "offsetTop": "none",
            "offsetEnd": "4px",
            "action": {
              "type": "uri",
              "label": "action",
              "uri": "https://qiita.com/"
            },
            "color": "#0000ee",
            "decoration": "underline"
          }
        ],
        "position": "relative"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "で検索をして解決しましょう！"
          }
        ]
      }
    ]
  }
}

制約

1. テキストリンクは改行ができない（文章に制限が生まれます）
2. 正攻法ではなくゴリ押しでの実装になるので端末による差分が発生する可能性あり

実装方法

1. 改行はboxで分割して実装する
2. リンクを仕込む行のBoxにtextを２つ設置する
3. absolute,またはflexを使用して適切な位置にテキストリンクを担当するtextを置く
4. テキストリンクを担当するtextには上で紹介した手順でテキストリンクにする
5. boxを追加し、あとは残りの文章を書いて完了になります

まとめ

結構自由度の高いレイアウトでトーク画面にメッセージを送信できるので私は、FlexMessageが結構好きです。最初は分かりづらく感じていましたが、今後も色々な表現ができるように色々模索しようと思います。