はじめに

最近「閃光のハサウェイ」を観るにあたって宇宙世紀の年表と作品の時系列をよく調べていたので、どうせならとSharePointリストで年表を作成してみました。

f:id:mofumofu_dance:20210628150259p:plain

時系列なビューを作成するにあたり、てっちゃんのタイムラインフォーマットを利用させていただきました。

mynote365.hatenadiary.com

列とビューの関係

てっちゃんのサンプルと比べると、"Tag"という名前の選択肢列を追加しています。この列は複数選択可で、対応する作品名を入れています。

表示と列の対応は下図を参照してください。

f:id:mofumofu_dance:20210628151420p:plain

フォーマット用JSON

作ったJSONは以下の通りです。複数選択可の列を列挙するためにforEachを入れています。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "height": "100px",
      "width": "200px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "width": "50%",
          "text-align": "center"
        },
        "txtContent": "[$Year]"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
          "height": "100%",
          "width": "45%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "20px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            },
            "customCardProps": {
              "directionalHint": "rightCenter",
              "isBeakVisible": true,
              "openOnEvent": "hover",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "200px",
                  "width": "600px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "height": "25%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "display": "flex",
                      "align-items": "center",
                      "padding-left": "40px",
                      "font-weight": "bold"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Description]",
                    "style": {
                      "height": "80%",
                      "width": "90%",
                      "padding-top": "10px"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "justify-content": "left",
                      "width": "100%",
                      "float": "left",
                      "display": "flex",
                      "flex-direction": "row",
                      "margin-top": "10px",
                      "margin-left":"40px",
                      "margin-bottom":"10px"
                                          },
                    "children": [
                      {
                        "forEach": "choiceIterator in [$Tag]",
                        "elmType": "div",
                        "txtContent": "[$choiceIterator]",
                        "style": {
                          "margin-right": "10px",
                          "background-color": "#3c3c3c",
                          "color": "#fff",
                          "padding": "7px",
                          "font-size":"10px"
                        }
                      }
                    ]
                  }
                ]
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "60px"
            },
            "attributes": {
              "class": "ms-borderColor-neutralSecondary"
            }
          }
        ]
      }
    ]
  }
}