快速測試 LINE Flex 訊息顯示的寬度
大家好，我是做出「LINE 數位版名片」的 LINE API 專家均民。
2023/07/04 更新
Flex 訊息有新增幾個新的卡片尺寸，卡片尺寸由小到大依序為：nano、micro、deca、hecto、kilo、mega 以及 giga。
自從 LINE 發佈了 Flex 訊息並經歷了幾次改版以後，Flex 訊息已經非常有彈性，你可以用它來排出很華麗的訊息，並透過 Messaging API 或是 liff.shareTargetPicker() 傳送，我所開發的 LINE 數位版名片 也是透過這個技術來實做的。
但是使用者的手機有大有小，如果想要做出一個好的 Flex 訊息，勢必要能夠在各種尺寸的手機上正常顯示，卡米哥於 2021/09/10 在 Chatbots Meetup 所分享的「深入 Flex 訊息- 以對話遊戲為例」議程中，特地分享了他對於 Flex 訊息中各種 bubble size 的測試結果：
卡米哥同時也在這個議程中，以對話遊戲為例教大家怎麼製作 Flex 訊息，如果沒有聽過這場分享的話，可以透過這個連結觀看錄影，也可以透過這個連結查看簡報。
如何快速測試朋友手機的寬度？
在卡米哥的分享中，有提到他是怎麼測試大家手機所顯示的寬度：
於是我就想到可以把這個 Flex 訊息做成 LINE 數位版名片，方便大家可以傳送給想要測試的人，你可以直接點選上方的連結來傳送這個測試寬度名片。
測試寬度名片是如何製作的？
我們會需要寫一個自己的 Flex 訊息來使用「LINE 數位版名片」，於是我先使用 Flex Message Simulator 來製作一個雛形：
點此查看 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",
"offsetBottom": "5px",
"offsetStart": "5px",
"position": "absolute",
"type": "box",
"contents": [
{
"size": "xxs",
"text": "Bubble: nano\nBlock: 20x20\n點擊可分享",
"type": "text",
"wrap": true
}
]
}
]
}
}
根據卡米哥在議程中所整理的表格，我們可以知道每個 bubble size 所需的小方塊數量：
{
nano: 7,
micro: 9,
deca: 12,
hecto: 13,
kilo: 14,
mega: 16,
giga: 26,
}
我所開發的「LINE 數位版名片」有支援 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',
offsetBottom: '5px',
offsetStart: '5px',
position: 'absolute',
type: 'box',
contents: [{
size: 'xxs',
text: `Bubble: ${size}\nBlock: 20x20\n點擊可分享`,
type: 'text',
wrap: true,
}],
},
],
},
},
})
將寫好的程式放在 GitHub Gist 中，並取得「Raw」按鈕的連結，然後把網址中的版本刪除：
// Gist 網址
https://gist.github.com/taichunmin/f7741777fe93aa55b9816c859a02d363
// Raw 所取得的網址
https://gist.githubusercontent.com/taichunmin/f7741777fe93aa55b9816c859a02d363/raw/f3d63c4a77373a80f6a4868a1aad257575661d6f/flex-width-1.js
// 刪除版本後的網址
https://gist.githubusercontent.com/taichunmin/f7741777fe93aa55b9816c859a02d363/raw/flex-width-1.js
開啟「LINE 數位版名片」的網頁，點選「CSV」來建立名片，由於這個樣版不需要 CSV 當作資料來源，所以只需要填寫名片樣版的網址即可：
最後，複製名片分享網址並更新到 LiHi 短網址的設定中：
「數位版名片技術討論」社群
最近均民創立了一個社群，讓有使用數位版名片的網友可以在上面一起討論，群組內有一些常見問題的回答、名片健檢、以及跟這專案有關的最新消息，入群連結在此：https://lihi1.com/CVjIx/blog！
原始碼與相關連結
本文範例程式的原始碼授權為 MIT License，若您有任何疑惑，你可以點此加入「數位版名片技術討論群」然後在社群內發問。