unvt/charitesでベクトルタイルをスタイリングする

# はじめに
　ベクトルタイルのスタイリングをする際には、Maputnik等を用いても出来ますが、ファイル上で編集を行いたいときには、JSONファイルで行うことになります。しかし、地図のスタイリングが記載されているJSONファイルは全てのレイヤの情報が記述されており、非常に長くなることが多いため可読性が低く読みにくいです。その問題を解決するために開発されたcharitesというツールがあります。今回は、そのcharitesの簡単な使用方法について書いていきます。

## 環境
macOS Sonoma: 14.6.1
node.js: v20.15.1
npm: 10.7.0

# charitesのインストール
[charitesのドキュメント](https://unvt.github.io/charites/ja/install/install.html
)に記載されている通り、以下のコマンドを実行します。node.jsとnpmは事前にインストールしておく必要があります。

```
npm install -g @unvt/charites
```

@unvt/charitesは、特定のスコープに属するパッケージで、スコープは`@unvt`です。スコープは、パッケージの名前空間のようなもので、同じ名前のパッケージが異なるスコープで存在することを可能にします。

```
charites help
```
とすると以下のように使用方法が表示されます。正常にインストールされていそうです。

```
Usage: charites [options] [command]

Options:
  -v, --version                           output the version number
  -h, --help                              display help for command

Commands:
  init [options] <file>                   initialize a style YAML
  convert <source> [destination]          convert the style JSON to YAML
  build [options] <source> [destination]  build a style JSON from the YAML
  serve [options] <source>                serve your map locally
  help [command]                          display help for command
  ```

# JSONファイルからYAMLファイルへ変換
[こちらの記事](https://qiita.com/k96mz/items/588a5241327f51cb5f9f
)で作成したJSONファイルをYAMLファイルに変換してみます。

元のJSONファイルは以下のとおりです。

```json:download_style.json
{
  "version": 8,
  "name": "Empty Style",
  "metadata": {"maputnik:renderer": "mlgljs"},
  "sources": {
    "v": {
      "type": "vector",
      "tiles": [
        "https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf"
      ],
      "minzoom": 0,
      "maxzoom": 4
    }
  },
  "sprite": "",
  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "coastl",
      "type": "line",
      "source": "v",
      "source-layer": "coastl",
      "maxzoom": 5
    },
    {
      "id": "landmass",
      "type": "fill",
      "source": "v",
      "source-layer": "landmass",
      "maxzoom": 5,
      "paint": {"fill-color": "rgba(195, 176, 176, 1)"}
    },
    {
      "id": "riverl",
      "type": "line",
      "source": "v",
      "source-layer": "riverl",
      "maxzoom": 5,
      "paint": {"line-color": "blue", "line-width": 2}
    }
  ],
  "id": "dsyugj9"
}
```

このJSONファイルをYAMLファイルに変換します。

## YAMLファイルとは
YAML（YAML Ain’t Markup Language）とは、データ形式の一つで、ソフトウェアの設定ファイルなどでよく用いられます。ファイル拡張子は「.yml」とすることが多いですが、公式には「.yaml」が標準とされます。

### 基本的な仕様
YAMLでは基本的に「シーケンス」（配列）、「マッピング」（連想配列）、「スカラ」（単体のデータ）の3種類の形式の組み合わせとしてデータを記述していきます。
シーケンスやマッピングの入れ子（ネスト）構造の表現は、1文字以上の半角スペースを行頭に挿入して字下げ（インデント）することによって行います。スペースの数は任意ですが、タブ文字で代用することはできません。
シーケンスは、一行で記述する場合は [ Red, Green, Blue ] のように角括弧で囲って値をカンマ区切りで並べます。一行に一項目を記述する場合は先頭をハイフン（-）とします。マッピングは「key : value」のようにコロン（:）でキーと値を対応付けます。

では、JSONファイルからYAMLファイルに変換しましょう。

```
charites convert download_style.json
```
とすると、以下のYAMLファイルが生成されます。

```yml:download_style.yml
version: 8
name: Empty Style
metadata:
  maputnik:renderer: mlgljs
sources:
  v:
    type: vector
    tiles:
      - https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf
    minzoom: 0
    maxzoom: 4
sprite: ''
glyphs: https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf
layers:
  - !!inc/file layers/coastl.yml
  - !!inc/file layers/landmass.yml
  - !!inc/file layers/riverl.yml
id: dsyugj9
```
layers:の部分でこのレイヤに関するファイルの関連付けを行っているようです。以下がそれぞれのレイヤのYAMLファイルです。


```yml:coastl.yml
id: coastl
type: line
source: v
source-layer: coastl
maxzoom: 5
```

```yml:landmass.yml
id: landmass
type: fill
source: v
source-layer: landmass
maxzoom: 5
paint:
  fill-color: rgba(195, 176, 176, 1)
```

```yml:riverl.yml
id: riverl
type: line
source: v
source-layer: riverl
maxzoom: 5
paint:
  line-color: blue
  line-width: 2
```

# ブラウザでのリアルタイム編集
YAMLファイルを編集するにあたって、ブラウザに地図を表示させながら編集できると、結果を確認しながら作業が出来るので非常に便利です。そのような機能がcharitesには備わっており、コマンドは以下です。

```
charites serve download_style.yml
```

以下のような地図が表示されました。

![スクリーンショット 2024-08-27 14.38.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/53a7eaff-e842-ae0b-fcf3-629f5308efb4.png)

レイヤをオン・オフで切り替えられるのも便利ですね。

では、スタイルを少し変更してみましょう。
riverl.yml：line-colorをblue　→ greenに変更
landmass.yml：fill-colorを rgba(195, 176, 176, 1) → rgba(50, 50, 50, 1)に変更

地図を表示してみると、リアルタイムで以下のように変化しました。

![スクリーンショット 2024-08-27 15.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/c29d77b7-f338-0f0f-86e2-153e117669b5.png)

リアルタイムで変化を見られるので、スタイルの確認に便利ですね。

serveを終わらせるにはコンソールで「Ctrl+c」とします。


# YAMLファイルからJSONファイルへ変換
最後にYAMLファイルからJSONファイルへ変換します。こうすることで、MapLibre GL JSなどのスタイルファイルとして再度使用することが出来ます。

```
charites build download_style.yml download_style2.json 
```
とすると、download_style.ymlから以下のdownload_style2.jsonが生成されます。

```json:download_style2.json
{
  "version": 8,
  "name": "Empty Style",
  "metadata": {
    "maputnik:renderer": "mlgljs"
  },
  "sources": {
    "v": {
      "type": "vector",
      "tiles": [
        "https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf"
      ],
      "minzoom": 0,
      "maxzoom": 4
    }
  },
  "sprite": "",
  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "coastl",
      "type": "line",
      "source": "v",
      "source-layer": "coastl",
      "maxzoom": 5
    },
    {
      "id": "landmass",
      "type": "fill",
      "source": "v",
      "source-layer": "landmass",
      "maxzoom": 5,
      "paint": {
        "fill-color": "rgba(50, 50, 50, 1)"
      }
    },
    {
      "id": "riverl",
      "type": "line",
      "source": "v",
      "source-layer": "riverl",
      "maxzoom": 5,
      "paint": {
        "line-color": "green",
        "line-width": 2
      }
    }
  ],
  "id": "dsyugj9"
}
```

先ほど変更した箇所が正常に反映されていますね。ちなみに、YAMLファイルにおいて#でコメントアウトした箇所もありましたが、その部分は無視されてJSONファイルに変換されています。
MapLibre GL JSで表示してみると[このような地図](https://k96mz.github.io/20240827charites/index.html)になります。

![スクリーンショット 2024-08-27 15.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/5b7c36c2-403f-77b4-5aa6-a69d703582a7.png)

# まとめ
charitesでベクトルタイルをスタイリングしてみました。始めてcharitesを使用してみましたが、インストールから使用方法まで簡単で使いやすいです。これからは、Maputnikとともにベクトルタイルのスタイリングに利用していこうと思います。

# Reference

https://github.com/unvt/charites

https://qiita.com/ozo360/items/9fa334f1e286280d34fc

https://e-words.jp/w/YAML.html