兼ねてから定期的に「JSON-LD」と「WebComponents」を勝手にプッシュしてたわけですが、ついにGoogleからのレコメンドがやってきました。

Google ウェブマスター向け公式ブログ: Web Components と JSON-LD でウェブサイト開発がより簡単に

こんな記事見つけたら紹介しないわけにはいかないじゃないですか！

というわけで記事を読んで感じたことやポイント・参考などをざざっと紹介します。

About JSON-LD

まずは「JSON-LD」と「Web Components」についてです。

JSON-LDはJSONにschema.orgをはじめとするRDF（Googleでは「構造化データ」と称しています）を加えたものです。

なので使用する側の感覚としては「RDFに基づいたキーが割り振られたJSONファイル」と思ってもらえるといいかなと思います。

ノーマルなJSON

[js]
[
{
"name": "Google Inc.",
"address": {
"addressCountry": "United States",
"streetAddress": "1600 Amphitheatre Parkway",
"addressLocality": "Mountain View",
"addressRegion": "CA",
"postOfficeBoxNumber": null,
"postalCode": "94043",
"telephone": "+1 650-253-0000",
"faxNumber": "+1 650-253-0001"
}
}
]
[/js]

ちょっとネストしていますが、比較的よく見かけるJSONじゃないかなと思います。

これがJSON-LDになると少し変わります。

JSON-LD

[js]
{
"@context": "https://schema.org",
"@graph": [
{
"name": "Google Inc.",
"address": {
"@type": "PostalAddress",
"addressCountry": "United States",
"streetAddress": "1600 Amphitheatre Parkway",
"addressLocality": "Mountain View",
"addressRegion": "CA",
"postOfficeBoxNumber": null,
"postalCode": "94043",
"telephone": "+1 650-253-0000",
"faxNumber": "+1 650-253-0001"
}
}
]
}
[/js]
JSON-LDでは「@context:語彙の定義」や「@type:オブジェクトのデータタイプ指定」などの項目が加わり、それぞれのキーに対して「@contextで指定されたRDFによる意味づけ」がおこなわれます。

JSONファイル単体で「postalCodeは郵便番号」「nameはその場所の名前」のようにデータを解析することが可能になるため、GoogleではナレッジグラフやInboxなどに活用されています。

About WebComponents

Web Componentsをざっくり表現すると「拡張HTMLタグ」です。

独自のHTMLタグを自作・インポートすることが可能となり、タグの中専用のJS/CSSが扱えるようになることでHTMLタグの再利用性が圧倒的に上がります。

よく自分は「オブジェクト指向HTMLタグ」と勝手に呼んでいますが、よそで使うとマサカリが飛んでくる可能性が非常に高いのでご注意ください。

あとWP-D Fesで尋常じゃなくざっくりした紹介をしたことがありますので、そのスライドで「何となくすごい」ってことだけわかっていただければです。

JSON-LDとWeb Componentsで楽にコンテンツが作れるように！

この記事で注目したいのは、「JSON-LD（構造化データ）でコンテンツを作って、Web Componentsに流し込む」というサイト構築方法をお勧めしていることだと思います。

元記事ではこんな風に紹介がされています。

JSON-LD と Web Components は、併せて利用するととてもうまく機能します。Custom Elements がプレゼンテーション層として機能し、JSON-LD は Custom Elements や検索エンジンが読み込むデータ層として機能します。つまり、schema.org/Event や schema.org/LocalBusiness など、どのような種類の schema.org についても、Custom Elements をビルドできることになります。

これだけだと少しわかりにくいかもしれませんが、目指すところはだいたいこんな感じです。

JSON-LD形式で「イベント情報」や「店舗情報」などのデータを作成すれば、Web Componentsで作ったオリジナルタグを書くだけでサイトが作れる！

さらに極端な言い方をすれば、「コンテンツ管理者はJSON-LDさえ作れればOKで、制作者は今までにストックした or GitHubに公開されているHTMLタグ（Web Components）を使って簡単にサイトが作れるということになります。

表示速度のことを考えるとコンテンツの表示処理をサーバーで行うのはそろそろバッドプラクティス化しそうですし、「JSON-LDでコンテンツを出力して、WebComponentsで表示させる」というやり方は個人的にかなり流行ってほしいところです。

Googleが推す理由を勝手に想像

で、なぜGoogleがJSON-LD+WebComponentsを推し始めたのかというところを勝手に想像してみたのですが、本命は「JSON-LDで公開された情報を集めたい」というところなのではと思います。

JSON-LDは通常のJSONやHTMLファイルと異なりRDF（Google曰く構造化データ）形式ですので、Googleの検索エンジンが解析するまでもなく整理された状態のコンテンツを手に入れることができます。

なので「JSON-LDでコンテンツを出力するサイトを増やしたい→WebComponentsを使えばより一層楽ですよー！」というところからあの記事が公開されたのではないでしょうか。

これからJSON-LD & WebComponentsを始めるなら

どちらもGoogleが入門的なツールやチュートリアルを出しているので、まずはそこから試してみるのが手軽かなと思います。

JSON-LDを始める

JSON-LDを始めるならばGoogle Developersの「Testing Tool」をお勧めします。

これはGoogleの検索エンジンが認識できる範囲で作られたJSON-LDのサンプルと、解析結果を確認できるツールです。

まずはこれでJSON-LDとJSONの違いなどをざっくりと把握するのが一番じゃないかなと思います。

WebComponentsを始める

Web Componentsの入門として個人的にはGoogle製ライブラリの「Polymer」をお勧めします。

というのもPolymerにはPolymer Polytechnic Codelabsという日本語チュートリアルが存在するので、とりあえずこれをやればなんとなくの理解はできそうなのです。

もっとも「Web Components＝Polymer」ではありませんので、Polymerオンリーに偏ってしまうのも考えものですが・・・

がっつり取り組むなら

「どっちもだいたいわかってるからもっと詳しいのを！」という方はGoogleの記事内で紹介されているサンプルをイジってみるのが良さそうです。

PolymerLabs/structured-data-web-components

コードを見たところ、GoogleMap系のデータをJSON-LDで作成してWebComponentsで処理しているみたいです。

多店舗展開されているショップサイトや全国ツアー中のイベントサイトなどではもしかするとそのまま使いまわせるかも・・・です。