4ステップでJSON-LDファイル形式のRDFを作ってみた時の覚書

JSON-LDでRDFを作る方法をいろいろと調べていたので、忘備録的に流れをまとめてみました。

まだJSON-LDを自作しようという奇特な方は少ないと思いますが、その時が来たら「そういえばこんな記事があったな」と思い出してもらえると幸いです。

0:データをまとめる

とりあえずどんなデータを作るか仕様決めましょう。

例えばこんな風に、
■特定の場所についての情報を掲載する

データ項目	データ内容
施設の名称	浪乃音酒造
施設の説明	酒蔵
施設の種類	浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。
問い合わせ番号	077-573-0002
場所（住所）	滋賀県大津市本堅田1-7-16
サイトURL	https://naminooto.com/

データの選定はスッゲー私的な理由で選んでますので、深い意味はありません。

1:ここからかなり面倒です

このへんから日本語のドキュメントがだいぶ減ります。

マジで見当たりません。

もし見かけたらコメントしてもらえるとメッチャ喜びますorz

2:使う語彙を選ぶ

まずは使用する語彙を選択して設計します。

セマンティックであることが重要になってくるので、飛ばさずしっかりやりましょう。

たぶんここが一番面倒です。

どの語彙を使うかについては、LOD（Linked Open Data）系のサイトを見ながら選定するというのも手かなと思います。

今回はヨコハマ・アート・LODで紹介されているものを参考にしました。

サンプル：掲載する情報で使用する語彙をまとめる

先ほどのサンプルですと、おおよそこのような形になります。

データ項目	語彙・コンテキスト（URI）
施設の名称	https://schema.org/name
施設の説明	https://schema.org/description
施設の種類	https://fp.yafjp.org/terms/place#genre
問い合わせ番号	https://schema.org/telephone
場所（住所）	https://schema.org/address
場所（座標）	https://schema.org/geo
サイトURL	https://schema.org/url

3:語彙（コンテキスト）を組み立てる

選択した語彙を使ってJSON-LDを組み立てます。

幸いデバッグツールとかコードサンプルは探すと色々出てきます。

いきなり組み立てるのはなかなか面倒なので、まずは語彙の設定から作りましょう。

語彙（コンテキスト）を分けるメリット

RDFはデータそれぞれのURIをコンテキストとして登録する仕様です。

ですので語彙（コンテキスト）をまとめて設定しておくと、繰り返しURIを書かなくて済むのでコーディングが楽になります。

あと使用している語彙の確認・変更がしやすいというメリットも。

ただこのやり方をするとSPARQLで検索する際に面倒なことになるという話も聞いたことがあるので、一長一短なのかもしれません。（要検証）

デバッグしながら作れるめっちゃ便利なサービス

エラーを確認しながら作れる方が精神衛生上よろしいかと思います。

なので↓のサービスを使ってやるのをお勧めします。
JSON-LD Playground

ちなみに「人物」「イベント」「場所」「商品」「レシピ」「書籍」についてはコードサンプルもあります。

語彙（コンテキスト）の作り方

素敵なことに、先ほど入力に使ったサービスでコンテキストだけ自動で抜き出してくれます。
JSON-LD Playground
右側の「New JSON-LD Context」に出てきます。

ちなみにこんなコードです。
[javascript]
{
"@context": {
"name": "https://schema.org/name",
"description": "https://schema.org/description",
"address": "https://schema.org/address",
"url": "https://schema.org/url",
"geo": "https://schema.org/geo",
"latitude": {
"@id": "https://schema.org/latitude",
"@type": "xsd:float"
},
"longitude": {
"@id": "https://schema.org/longitude",
"@type": "xsd:float"
},
"genre": "https://fp.yafjp.org/terms/place#genre",
"xsd": "https://www.w3.org/2001/XMLSchema#"
}
}
[/javascript]

ここで一度保存する

.jsonldファイルでできたコンテキストを保存します。

続いてコンテンツ部分を作ります。

4:コンテンツを組み立てる

「@context」で先ほど作ったjsonldファイルを読み込んで、URIを省略できるようにします。

で、あとはコンテキストでURLを書いた部分にコンテンツを差し込んでいきます。
[javascript]
{
"@context": "contextfile.jsonld",
"name" :"浪乃音酒造",
"description" :"浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。",
"address" :"滋賀県大津市本堅田1-7-16",
"url" :"https://naminooto.com/",
"geo": {
"latitude": "35.109952",
"longitude": "135.918148"
},
"genre" :"酒蔵"
}
[/javascript]

あとはこれを繰り返していくだけです。
[javascript]
[
{
"@context": "contextfile.jsonld",
"name" :"浪乃音酒造",
"description" :"浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。",
"address" :"滋賀県大津市本堅田1-7-16",
"url" :"https://naminooto.com/",
"geo": {
"latitude": "35.109952",
"longitude": "135.918148"
},
"genre" :"酒蔵"
},
{
"@context": "contextfile.jsonld",
"name" :"竹生島",
"description" :"竹生島は、琵琶湖の北部に浮かぶ島。琵琶湖国定公園特別保護地区、国の名勝および史跡に指定されている。",
"address" :"滋賀県長浜市早崎町",
"url" :"https://www.chikubusima.or.jp/",
"geo": {
"latitude": "35.420796",
"longitude": "136.142235"
},
"genre" :"島"
}
]
[/javascript]
JSON-LD Playgroundで作業していればエラー文も表示してくれるので、それを見ながら頑張ってください。

これでJSON-LDファイルが完成です。

余談：Googleの構造化データテストツールで見てみる

Googleがリリースしているツールで作成したJSON-LDファイルを確認することもできます。
Events Markup Tester

HTMLを読み込むので、前後にJSON-LDの宣言を追加しておきましょう。
[html]
<script type="application/ld+json">
[
{
"@context": {
"name": "https://schema.org/name",
"description": "https://schema.org/description",
"address": "https://schema.org/address",
"url": "https://schema.org/url",
"geo": "https://schema.org/geo",
"latitude": {
"@id": "https://schema.org/latitude",
"@type": "xsd:float"
},
"longitude": {
"@id": "https://schema.org/longitude",
"@type": "xsd:float"
},
"genre": "https://fp.yafjp.org/terms/place#genre",
"xsd": "https://www.w3.org/2001/XMLSchema#"
},
"name" :"浪乃音酒造",
"description" :"浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。",
"address" :"滋賀県大津市本堅田1-7-16",
"url" :"https://naminooto.com/",
"geo": {
"latitude": "35.109952",
"longitude": "135.918148"
},
"genre" :"酒蔵"
},
{
"@context": {
"name": "https://schema.org/name",
"description": "https://schema.org/description",
"address": "https://schema.org/address",
"url": "https://schema.org/url",
"geo": "https://schema.org/geo",
"latitude": {
"@id": "https://schema.org/latitude",
"@type": "xsd:float"
},
"longitude": {
"@id": "https://schema.org/longitude",
"@type": "xsd:float"
},
"genre": "https://fp.yafjp.org/terms/place#genre",
"xsd": "https://www.w3.org/2001/XMLSchema#"
},
"name" :"竹生島",
"description" :"竹生島は、琵琶湖の北部に浮かぶ島。琵琶湖国定公園特別保護地区、国の名勝および史跡に指定されている。",
"address" :"滋賀県長浜市早崎町",
"url" :"https://www.chikubusima.or.jp/",
"geo": {
"latitude": "35.420796",
"longitude": "136.142235"
},
"genre" :"島"
}
]
</script>
[/html]

これで「検証」をクリックすれば、Google検索やGmailでどのように認識されるかを見ることができます。

なおGoogleがサポートしている構造化データのみテストするツールですので、上記のコードを入れると「無効なアイテムタイプ」というエラーが出ます。

というかJSON-LD公式サイトにあるサンプルでもエラーが「無効なアイテムタイプ」エラーがでたりします。

これはGoogleがサポートしている構造化データが限られている関係で、タイプ宣言がされていないものは認識されないようになっている・・・のではないかと思います。

GoogleがサポートしているSchema

Googleで対応している構造化データは、構造化データ マークアップ支援ツールからWEBサイトとメール共にに確認できます。

ちなみにWEBサイトで利用できるものは以下の１０種類です。

データタイプ	追加するコード
TV Episodes with Ratings	“@type” : “TVEpisode”,
イベント	“@type” : “Event”,
ソフトウェア アプリケーション	“@type” : “SoftwareApplication”,
テレビ番組のエピソード	“@type” : “TVEpisode”,
レストラン	“@type” : “Restaurant”,
商品	“@type” : “Product”,
地域のお店やサービス	“@type” : “LocalBusiness”,
映画	“@type” : “Movie”,
書評	“@type” : “Book”,
記事	“@type” : “Article”,

どうしても気になる場合

要するに構造化データとしてのタイプ属性がないのが問題ですので、追加しちゃいます。

今回のサンプルですと、「地域のお店やサービス」が一番近そうですので、「”@type” : “https://schema.org/LocalBusiness”」を追加してみます。

・テストツール用コード
[html]
<script type="application/ld+json">
[
{
"@context": {
"name": "https://schema.org/name",
"description": "https://schema.org/description",
"address": "https://schema.org/address",
"url": "https://schema.org/url",
"geo": "https://schema.org/geo",
"latitude": {
"@id": "https://schema.org/latitude",
"@type": "xsd:float"
},
"longitude": {
"@id": "https://schema.org/longitude",
"@type": "xsd:float"
},
"genre": "https://fp.yafjp.org/terms/place#genre"
},
"@type" : "https://schema.org/LocalBusiness",
"name" :"浪乃音酒造",
"description" :"浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。",
"address" :"滋賀県大津市本堅田1-7-16",
"url" :"https://naminooto.com/",
"geo": {
"latitude": "35.109952",
"longitude": "135.918148"
},
"genre" :"酒蔵"
},
{
"@context": {
"name": "https://schema.org/name",
"description": "https://schema.org/description",
"address": "https://schema.org/address",
"url": "https://schema.org/url",
"geo": "https://schema.org/geo",
"latitude": {
"@id": "https://schema.org/latitude",
"@type": "xsd:float"
},
"longitude": {
"@id": "https://schema.org/longitude",
"@type": "xsd:float"
},
"genre": "https://fp.yafjp.org/terms/place#genre"
},
"@type" : "https://schema.org/LocalBusiness",
"name" :"竹生島",
"description" :"竹生島は、琵琶湖の北部に浮かぶ島。琵琶湖国定公園特別保護地区、国の名勝および史跡に指定されている。",
"address" :"滋賀県長浜市早崎町",
"url" :"https://www.chikubusima.or.jp/",
"geo": {
"latitude": "35.420796",
"longitude": "136.142235"
},
"genre" :"島"
}
]
</script>
[/html]

・JSON-LDファイル用コード
[javascript]
[
{
"@context": "contextfile.jsonld",
"@type" : "https://schema.org/LocalBusiness",
"name" :"浪乃音酒造",
"description" :"浪乃音酒造株式会社は滋賀県の酒蔵です。お酒の製造、販売を行っております。",
"address" :"滋賀県大津市本堅田1-7-16",
"url" :"https://naminooto.com/",
"geo": {
"latitude": "35.109952",
"longitude": "135.918148"
},
"genre" :"酒蔵"
},
{
"@context": "contextfile.jsonld",
"@type" : "https://schema.org/LocalBusiness",
"name" :"竹生島",
"description" :"竹生島は、琵琶湖の北部に浮かぶ島。琵琶湖国定公園特別保護地区、国の名勝および史跡に指定されている。",
"address" :"滋賀県長浜市早崎町",
"url" :"https://www.chikubusima.or.jp/",
"geo": {
"latitude": "35.420796",
"longitude": "136.142235"
},
"genre" :"島"
}
]
[/javascript]

この他にも非対応の語彙を使ってる関係で小さなエラーは出ますが、そこはまぁ見なかったことにしようかなと思います。