Twitter で次の Microsoft の社員さんのツイートを見かけました。
Lists got your back #MicrosoftLists pic.twitter.com/Dxf5pElS3R
— Miceile Barrett (@MSFTMiceile) 2021年8月18日
このツイートの画像を見て、「Microsoft Lists のアイスモチーフめっちゃ良い😍」となり、下図のような数値列（パーセント表示）の見た目を変える書式設定を作成してみました。
以下に作成した書式設定の JSON を掲載しておきます。利用する場合は、数値列（パーセント表示） の書式設定に、掲載されている JSON をコピー & ペーストしてください。
バージョン①（アタリ無し）
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"margin-bottom": "5px",
"width": "120px"
},
"children": [
{
"elmType": "div",
"txtContent": "=if(@currentField.displayValue=='', '0%' , @currentField.displayValue)",
"style": {
"margin": "2px",
"font-size": "14px",
"font-weight": "bold"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"position": "relative",
"align-items": "center",
"left": "30px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row-reverse",
"width": "80px",
"height": "35px",
"z-index": "1",
"position": "relative",
"right": "40px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.25 , '20px' , (20 * ( @currentField / 0.25 ) + 'px' )",
"height": "100%",
"background-color": "#7E4B7C",
"border-top-right-radius": "30%",
"border-bottom-right-radius": "30%"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.5 ,'20px', (20 * ((@currentField - 0.25) / 0.25 ) + 'px' )",
"display": "=if(@currentField < 0.25 ,'none', '')",
"height": "100%",
"background-color": "#D03403"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.75 ,'20px', (20 * ((@currentField - 0.5) / 0.25 ) + 'px' )",
"display": "=if(@currentField < 0.5 ,'none', '')",
"height": "100%",
"background-color": "#F78019"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 1 ,'20px', (20 * ((@currentField - 0.75) / 0.25 ) + 'px')",
"display": "=if(@currentField < 0.75 ,'none', '')",
"height": "100%",
"background-color": "#FDE108",
"border-top-left-radius": "50%",
"border-bottom-left-radius": "50%"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "70px",
"height": "15px",
"right": "20px",
"background-color": "#FDBF5D",
"border-radius": "20px"
}
}
]
}
]
}
バージョン②（アタリ有り）
In Japan, there is a low probability that a stick of ice cream may have a "Atari"(hit) written on it.
— てっちゃん (Tetsuya Kawahara) (@techan_k) 2021年8月22日
If you bring that stick to the store, you can exchange it for a new ice cream for free. pic.twitter.com/Wzgt0qp199
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"margin-bottom": "5px",
"width": "120px"
},
"children": [
{
"elmType": "div",
"txtContent": "=if(@currentField.displayValue=='', '0%' , @currentField.displayValue)",
"style": {
"margin": "2px",
"font-size": "14px",
"font-weight": "bold"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"position": "relative",
"align-items": "center",
"left": "30px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row-reverse",
"width": "80px",
"height": "35px",
"z-index": "1",
"position": "relative",
"right": "40px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.25 , '20px' , (20 * ( @currentField / 0.25 ) + 'px' )",
"height": "100%",
"background-color": "#7E4B7C",
"border-top-right-radius": "30%",
"border-bottom-right-radius": "30%"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.5 ,'20px', (20 * ((@currentField - 0.25) / 0.25 ) + 'px' )",
"display": "=if(@currentField < 0.25 ,'none', '')",
"height": "100%",
"background-color": "#D03403"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 0.75 ,'20px', (20 * ((@currentField - 0.5) / 0.25 ) + 'px' )",
"display": "=if(@currentField < 0.5 ,'none', '')",
"height": "100%",
"background-color": "#F78019"
}
},
{
"elmType": "div",
"style": {
"width": "=if(@currentField > 1 ,'20px', (20 * ((@currentField - 0.75) / 0.25 ) + 'px')",
"display": "=if(@currentField < 0.75 ,'none', '')",
"height": "100%",
"background-color": "#FDE108",
"border-top-left-radius": "50%",
"border-bottom-left-radius": "50%"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"width": "70px",
"height": "15px",
"right": "20px",
"background-color": "#FDBF5D",
"border-radius": "20px"
},
"children": [
{
"elmType": "span",
"txtContent": "=if((@currentField * 100) % 9 == 0 , '○ Atari' , '')",
"style": {
"font-size": "11px",
"margin-left": "7px"
}
}
]
}
]
}
]
}
アタリが表示される条件は、97 行目に記載されています。好きに条件を変更ください。
（サンプルでは、特に理由なくパーセントが 9 の倍数だったときにアタリが表示されるようになっています。）
