LINE FlexMessageでカレンダーを作ろう！

#はじめに
この記事は、カレンダーのコードあんまり見かけないなぁと思い作りました。
サンプルコードは、コピペしていただければFlexMessageSimulatorで動きます。（実機は未確認）

- [基礎はもう知ってるねんコードだけ見せろや！って人はここをクリックorタップ！](#例)

##基礎的なこと
FlexMessageでは、ボックスコンポーネントのレイアウトプロパティは、

* [vertival](#vertical)
* [horizontal](#horizontal)

の二種類があります。

###vertical

![vertical.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266027/2d0c892f-4a0e-14f5-18a5-d73cc08525af.png)

<details><summary>verticalのサンプルコード</summary><div>

```json

{
  "type": "bubble",
  "styles": {
    "footer": {
      "separator": true
    }
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {"type": "box",
    "layout": "vertical",
    "contents": [
        {
        "type": "text",
        "text": "vertical",
        "size": "xl",
        "align": "center"
      },
      {
        "type": "image",
        "aspectMode": "cover",
        "aspectRatio": "20:10",
        "url": "https://存在しない.jpg",
        "backgroundColor": "#000fff"
      },
      {
        "type": "image",
        "aspectMode": "cover",
        "aspectRatio": "20:10",
        "url": "https://存在しない.jpg",
        "backgroundColor": "#ff0000"
      },
      {
        "type": "image",
        "aspectMode": "cover",
        "aspectRatio": "20:10",
        "url": "https://存在しない.jpg",
        "backgroundColor": "#008000"
      }
      ]}
      
    ]
  }
}
```

</div></details>

###horizontal

![horizontal.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266027/9a85e7b9-84f7-66a0-2b71-f7062bbef108.png)

<details><summary>horizontalのサンプルコード</summary><div>

```json
{
  "type": "bubble",
  "styles": {
    "footer": {
      "separator": true
    }
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "horizontal",
        "size": "xl",
        "align": "center"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "image",
            "aspectMode": "cover",
            "aspectRatio": "20:10",
            "url": "https://存在しない.jpg",
            "backgroundColor": "#000fff"
          },
          {
            "type": "image",
            "aspectMode": "cover",
            "aspectRatio": "20:10",
            "url": "https://存在しない.jpg",
            "backgroundColor": "#ff0000"
          },
          {
            "type": "image",
            "aspectMode": "cover",
            "aspectRatio": "20:10",
            "url": "https://存在しない.jpg",
            "backgroundColor": "#008000"
          }
        ]
      }
    ]
  }
}
```

</div></details>

この２種類を組み合わせることでカレンダーを作成することができます。

#どう組み合わせるか

vertical要素の中にhorizontal要素を入れる
or
horizontal要素の中にvertival要素を入れる

このどちらかの組み合わせで作成することができます。（当たり前ですね）

#例
###できたもの
無茶苦茶シンプルなカレンダーを作りました
![karennda-.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266027/b208b21a-9ef6-4b10-7659-977aa4563f33.png)

<details><summary>サンプルコード（長いコードなので一応注意）</summary><div>

```json
{
  "type": "bubble",
  "styles": {
    "footer": {
      "separator": true
    }
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "2019/06",
        "size": "xxl",
        "color": "#333333"
      },
      {
        "type": "separator",
        "margin": "sm",
        "color": "#111111"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "margin": "xs",
        "contents": [
          {
            "type": "separator",
            "margin": "none",
            "color": "#111111"
          },
          {
            "type": "text",
            "text": "日",
            "size": "xxs",
            "color": "#FF3300",
            "align": "center"
          },
          {
            "type": "text",
            "text": "月",
            "size": "xxs",
            "color": "#666666",
            "align": "center"
          },
          {
            "type": "text",
            "text": "火",
            "size": "xxs",
            "color": "#666666",
            "align": "center"
          },
          {
            "type": "text",
            "text": "水",
            "size": "xxs",
            "color": "#666666",
            "align": "center"
          },
          {
            "type": "text",
            "text": "木",
            "size": "xxs",
            "color": "#666666",
            "align": "center"
          },
          {
            "type": "text",
            "text": "金",
            "size": "xxs",
            "color": "#666666",
            "align": "center"
          },
          {
            "type": "text",
            "text": "土",
            "size": "xxs",
            "color": "#0066FF",
            "align": "center"
          },
          {
            "type": "separator",
            "margin": "none",
            "color": "#111111"
          }
        ]
      },
      {
        "type": "separator",
        "margin": "none",
        "color": "#111111"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "margin": "xs",
        "spacing": "xs",
        "contents": [
          {
            "type": "separator",
            "margin": "none",
            "color": "#111111"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "margin": "xs",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "26",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "2",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "9",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "16",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "23",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "30",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "27",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "3",
                    "size": "sm",
                    "color": "#666666",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "10",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "17",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "24",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "1",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "28",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "4",
                    "size": "sm",
                    "color": "#666666",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "11",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "18",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "25",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "2",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "29",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "5",
                    "size": "sm",
                    "color": "#666666",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "12",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "19",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "26",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "3",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "30",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "6",
                    "size": "sm",
                    "color": "#666666",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "13",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "20",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "27",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "4",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "31",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "7",
                    "size": "sm",
                    "color": "#666666",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "14",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "21",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "28",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "5",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              },
              {
                "type": "separator"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "xs",
                "spacing": "xs",
                "contents": [
                  {
                    "type": "text",
                    "text": "1",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "8",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "15",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "22",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "29",
                    "size": "sm",
                    "color": "#333333",
                    "align": "center"
                  },
                  {
                    "type": "separator"
                  },
                  {
                    "type": "text",
                    "text": "6",
                    "size": "sm",
                    "color": "#aaaaaa",
                    "align": "center"
                  }
                ]
              }
            ]
          },
          {
            "type": "separator",
            "margin": "none",
            "color": "#111111"
          }
        ]
      },
      {
        "type": "separator",
        "margin": "none",
        "color": "#111111"
      }
    ]
  }
}
```

</div></details>

#まとめ
とりあえず、horizontalとverticalの組み合わせさえ知っていれば
いろいろなUIなども作れそうだなぁと思いました。