データ構造の可視化 (JSON)

Snow Flower Text では AsciiDoc の拡張として JSON データの構造の可視化をサポートしています。 JSON はテキスト形式のデータ記述言語の一つで、Webサービスのデータ交換や、アプリケーションの設定データ等に広く使われています。 構造を可視化することで階層構造が明確になり短時間でデータ全体を把握するのに役立ちます。

AsciiDoc のためのデータ構造の可視化(JSON) 機能は Snow Flower Text の独自拡張です。

例えば、Weather API のレスポンスデータは、 JSON データを綺麗にフォーマットしてシンタックスハイライトを使用しても テキスト形式では階層構造を読み取ることは困難です。

{
"coord": {
"lon": -122.08,
"lat": 37.39
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"base": "stations",
"main": {
"temp": 282.55,
"feels_like": 281.86,
"temp_min": 280.37,
"temp_max": 284.26,
"pressure": 1023,
"humidity": 100
},
"visibility": 16093,
"wind": {
"speed": 1.5,
"deg": 350
},
"clouds": {
"all": 1
},
"dt": 1560350645,
"sys": {
"type": 1,
"id": 5122,
"message": 0.0139,
"country": "US",
"sunrise": 1560343627,
"sunset": 1560396563
},
"timezone": -25200,
"id": 420006353,
"name": "Mountain View",
"cod": 200
}

データ構造の可視化によって、これは次のようにレンダリングされます。

あなたは全体を一目で把握できるようになったはずです。 これがデータ構造の可視化の効果です。

使用方法

json ブロックを使用することで JSON データを可視化できます。

[json]
--------------------------------------
JSON data
--------------------------------------

たとえば、次のように記述します。

[json]
--------------------------------------
{
"coord": {
"lon": -122.08,
"lat": 37.39
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"base": "stations",
"main": {
"temp": 282.55,
"feels_like": 281.86,
"temp_min": 280.37,
"temp_max": 284.26,
"pressure": 1023,
"humidity": 100
},
"visibility": 16093,
"wind": {
"speed": 1.5,
"deg": 350
},
"clouds": {
"all": 1
},
"dt": 1560350645,
"sys": {
"type": 1,
"id": 5122,
"message": 0.0139,
"country": "US",
"sunrise": 1560343627,
"sunset": 1560396563
},
"timezone": -25200,
"id": 420006353,
"name": "Mountain View",
"cod": 200
}
--------------------------------------

JSON データの指定のプロパティをハイライト表示することができます。 この場合、#highlight コマンドを使用します。

[json]
--------------------------------------
#highlight "coord"
#highlight "coord" / "lon"
#highlight "coord" / "lat"

{
"coord": {
"lon": -122.08,
"lat": 37.39
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"base": "stations",
"main": {
"temp": 282.55,
"feels_like": 281.86,
"temp_min": 280.37,
"temp_max": 284.26,
"pressure": 1023,
"humidity": 100
},
"visibility": 16093,
"wind": {
"speed": 1.5,
"deg": 350
},
"clouds": {
"all": 1
},
"dt": 1560350645,
"sys": {
"type": 1,
"id": 5122,
"message": 0.0139,
"country": "US",
"sunrise": 1560343627,
"sunset": 1560396563
},
"timezone": -25200,
"id": 420006353,
"name": "Mountain View",
"cod": 200
}
--------------------------------------
Download on the Mac App Store