【Microsoft Lists】リストをピアノに変身させてみた🎹♬

SharePoint のリストを、ビューの書式設定を利用して上図のようなピアノに変身させてみました。
鍵盤をクリックすると、鍵盤の上に C（ド） や D（レ）などの音名は表示されるのですが、残念ながら音は出ません。

以下、ピアノの作成方法を記載します。

フィールド定義

カスタムリスト作成時にデフォルトで定義されている タイトル 列のみ利用します。
従って、他にフィールドを定義する必要はありません。

アイテム作成

音名を C（ド）から順番に、表示させたい鍵盤分登録していきます。

ビューの書式設定

ビューの書式設定に、以下に掲載されている JSON を設定すれば完成です。

サイトテーマカラーのピアノの JSON

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "= @window.innerWidth * 0.07 + 'px'",
      "height": "= @window.innerHeight * 0.6 + 'px'",
      "border-top": "3px solid",
      "border-bottom": "3px solid",
      "border-right": "3px solid",
      "border-left": "=if(@rowIndex == 0 , '3px solid' '')",
      "position": "absolute",
      "top": "0",
      "left": "= @rowIndex * @window.innerWidth * 0.07 + 'px'",
      "cursor": "pointer"
    },
    "attributes": {
      "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "position": "relative"
        },
        "customCardProps": {
          "openOnEvent": "click",
          "directionalHint": "topCenter",
          "isBeakVisible": false,
          "formatter": {
            "elmType": "div",
            "style": {
              "padding": "30px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "30px",
                  "font-weight": "bold"
                },
                "attributes": {
                  "class": "ms-fontColor-white"
                }
              }
            ]
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 0 , 'none' , if(@rowIndex % 7 == 3 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "ms-bgColor-themePrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♭'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    },
                    "attributes": {
                      "class": "ms-fontColor-white"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "right": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 2 , 'none' , if(@rowIndex % 7 == 6 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-bgColor-themeDark--hover"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "ms-bgColor-themePrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♯'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    },
                    "attributes": {
                      "class": "ms-fontColor-white"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

レインボーカラーのピアノの JSON

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "= @window.innerWidth * 0.07 + 'px'",
      "height": "= @window.innerHeight * 0.6 + 'px'",
      "position": "absolute",
      "top": "0",
      "left": "= @rowIndex * @window.innerWidth * 0.07 + 'px'",
      "cursor": "pointer"
    },
    "attributes": {
      "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10' , '')))))))"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "position": "relative"
        },
        "customCardProps": {
          "openOnEvent": "click",
          "directionalHint": "topCenter",
          "isBeakVisible": false,
          "formatter": {
            "elmType": "div",
            "style": {
              "padding": "30px"
            },
            "attributes": {
              "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "30px",
                  "font-weight": "bold"
                }
              }
            ]
          }
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 0 , 'none' , if(@rowIndex % 7 == 3 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-neutralPrimary"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '♭'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    }
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "0",
              "right": "0",
              "width": "30%",
              "height": "60%",
              "display": "=if(@rowIndex % 7 == 2 , 'none' , if(@rowIndex % 7 == 6 , 'none' , ''))"
            },
            "attributes": {
              "class": "ms-bgColor-neutralPrimary"
            },
            "customCardProps": {
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": false,
              "formatter": {
                "elmType": "div",
                "style": {
                  "padding": "30px"
                },
                "attributes": {
                  "class": "=if(@rowIndex % 7 == 0 , 'ms-bgColor-sharedRed10 ms-fontColor-white' , if(@rowIndex % 7 == 1 , 'ms-bgColor-sharedOrange10 ms-fontColor-white' , if(@rowIndex % 7 == 2 , 'ms-bgColor-sharedYellow10 ms-fontColor-white' , if(@rowIndex % 7 == 3 , 'ms-bgColor-sharedYellowGreen10 ms-fontColor-white' , if(@rowIndex % 7 == 4 , 'ms-bgColor-sharedCyan10 ms-fontColor-white' , if(@rowIndex % 7 == 5 , 'ms-bgColor-sharedCyanBlue10 ms-fontColor-white' , if(@rowIndex % 7 == 6 , 'ms-bgColor-sharedBlueMagenta10 ms-fontColor-white' , '')))))))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "= [$Title] + '#'",
                    "style": {
                      "font-size": "30px",
                      "font-weight": "bold"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}