# 快速測試 LINE Flex 訊息顯示的寬度

自從 LINE 發佈了 Flex 訊息並經歷了幾次改版以後,Flex 訊息已經非常有彈性,你可以用它來排出很華麗的訊息,並透過 Messaging API 或是 liff.shareTargetPicker() 傳送,我所開發的 LINE 數位版名片 (opens new window) 也是透過這個技術來實做的。

但是使用者的手機有大有小,如果想要做出一個好的 Flex 訊息,勢必要能夠在各種尺寸的手機上正常顯示,卡米哥於 2021/09/10 在 Chatbots Meetup (opens new window) 所分享的「深入 Flex 訊息- 以對話遊戲為例」議程中,特地分享了他對於 Flex 訊息中各種 bubble size 的測試結果:

卡米哥同時也在這個議程中,以對話遊戲為例教大家怎麼製作 Flex 訊息,如果沒有聽過這場分享的話,可以透過這個連結觀看錄影 (opens new window),也可以透過這個連結查看簡報 (opens new window)

# 如何快速測試朋友手機的寬度?

測試寬度名片 - 數位版名片

在卡米哥的分享中,有提到他是怎麼測試大家手機所顯示的寬度:

於是我就想到可以把這個 Flex 訊息做成 LINE 數位版名片 (opens new window),方便大家可以傳送給想要測試的人,你可以直接點選上方的連結來傳送這個測試寬度名片。

# 測試寬度名片是如何製作的?

我們會需要寫一個自己的 Flex 訊息來使用「LINE 數位版名片 (opens new window)」,於是我先使用 Flex Message Simulator (opens new window) 來製作一個雛形:

點此查看 JSON 原始碼
{
  "type": "bubble",
  "size": "nano",
  "body": {
    "height": "140px",
    "layout": "horizontal",
    "paddingAll": "0px",
    "type": "box",
    "action": {
      "type": "uri",
      "uri": "https://lihi1.com/zzUs3"
    },
    "contents": [
      {
        "backgroundColor": "#cccccc",
        "height": "20px",
        "layout": "horizontal",
        "offsetStart": "0px",
        "offsetTop": "0px",
        "position": "absolute",
        "type": "box",
        "width": "20px",
        "contents": [
          {
            "align": "center",
            "gravity": "center",
            "size": "xxs",
            "text": "1",
            "type": "text"
          }
        ]
      },
      {
        "flex": 0,
        "layout": "vertical",
        "offsetEnd": "5px",
        "offsetTop": "5px",
        "position": "absolute",
        "type": "box",
        "contents": [
          {
            "size": "xxs",
            "text": "Bubble: nano\nBlock: 20x20\n點擊可分享",
            "type": "text",
            "wrap": true
          }
        ]
      }
    ]
  }
}

根據卡米哥在議程中所整理的表格,我們可以知道每個 bubble size 所需的小方塊數量:

{
  nano: 7,
  micro: 9,
  kilo: 14,
  mega: 16,
  giga: 26,
}

我所開發的「LINE 數位版名片 (opens new window)」有支援 Lodash 的 template 語法,所以我可以透過這個語法來寫一個 JS 的函式來產生 Flex 訊息:

點此查看 JS 原始碼節錄
// 原始碼節錄
(blocks, size) => ({
  altText: size,
  type: 'flex',
  contents: {
    size,
    type: 'bubble',
    body: {
      height: `${20 * blocks}px`,
      layout: 'horizontal',
      paddingAll: '0px',
      type: 'box',
      action: {
        type: 'uri',
        uri: 'https://lihi1.com/zzUs3',
      },
      contents: [
        ..._.times(blocks, i => ({
          backgroundColor: '#cccccc',
          height: '20px',
          layout: 'horizontal',
          offsetStart: `${20 * i}px`,
          offsetTop: `${20 * i}px`,
          position: 'absolute',
          type: 'box',
          width: '20px',
          contents: [{
            align: 'center',
            gravity: 'center',
            size: 'xxs',
            text: `${i + 1}`,
            type: 'text',
          }],
        })),
        {
          flex: 0,
          layout: 'vertical',
          offsetEnd: '5px',
          offsetTop: '5px',
          position: 'absolute',
          type: 'box',
          contents: [{
            size: 'xxs',
            text: `Bubble: ${size}\nBlock: 20x20\n點擊可分享`,
            type: 'text',
            wrap: true,
          }],
        },
      ],
    },
  },
})

將寫好的程式放在 GitHub Gist (opens new window) 中,並取得「Raw」按鈕的連結,然後把網址中的版本刪除:

// Gist 網址
https://gist.github.com/taichunmin/f7741777fe93aa55b9816c859a02d363

// Raw 所取得的網址
https://gist.githubusercontent.com/taichunmin/f7741777fe93aa55b9816c859a02d363/raw/f3d63c4a77373a80f6a4868a1aad257575661d6f/flex-width.js

// 刪除版本後的網址
https://gist.githubusercontent.com/taichunmin/f7741777fe93aa55b9816c859a02d363/raw/flex-width.js

開啟「LINE 數位版名片 (opens new window)」的網頁,點選「CSV」來建立名片,由於這個樣版不需要 CSV 當作資料來源,所以只需要填寫名片樣版的網址即可:

最後,複製名片分享網址並更新到 LiHi 短網址的設定中:

# 原始碼與相關連結

TIP

本文範例程式的原始碼授權為 MIT License,若您有任何疑惑,你可以透過 Facebook (opens new window) 與我聯繫。