JSON-LDデータからWebページを生成する

コンテンツの修復と整理だが、まずhttps://www.sfpgmr.net/から取り掛かり始めた。 コンテンツは古いし、コンテンツに関する解説はほとんどないし、最新のコンテンツへのリンクもないしで、かなり過疎化が進んでおり、日に1人か2人訪問があればいいような状態となっている。 何か手を入れたからといってアクセスが増えるともあまり思えない。が、ちょっとやってみたいことがあり、題材として適切かなと思って敢えて手を入れることにした。

やってみたいことはタイトルどおりの「JSON-LDデータからWebページを生成する」である。

JSON-LDって検索エンジン対応のメタデータの表記方法の一つみたいなイメージが強い。 私はJSON-LDでデータフォーマットを定義すれば、schema.orgにある語彙で共通化されて何やらうれしいことがいろいろありそうだというぼんやりとしたメリットを感じている。 JSON-LDでコンテンツデータのフォーマットを定義して、Webページを生成してみようかなと前から考えていて、今回はどうしてもそれを実現したくなったのである。 つまりWebページを修飾するためにJSON-LDを使うのではなくて、JSON-LDをデータ定義言語として用いて、そのデータからWebページを生成するのである。 そのページにはJSON-LDのデータも埋め込んで、検索エンジン用メタデータとしての恩恵も受けるつもりでいる。

それでデータフォーマットをどうするか今考えているところなのである。これさえ決まれば、EJSを使って簡単にWebページにレンダリングできる。だけどもなかなか意図どおりにデータフォーマットを定義するのが難しい。

今考えているフォーマットは下記である。これでいいのかな？と思いつつ書いて、Googleの構造化データ検証ツールでチェックしている。今のところはパスしている。ところどころ属性の抜け漏れがあるが、それは後で修正することにする。

{
  "@context": "http://schema.org/",
  "@graph": [
    {
      "@type": "WebSite",
      "@id":"https://sfpgmr.net/",
      "url": "https://www.sfpgmr.net/",
      "about": "IT技術や音楽に関する情報発信を行っています。",
      "keywords": "Programming,Music,C++,DirectX,HTML5,WebGL,javascript,WebAudio",
      "author": {
        "@type": "Person",
        "@id": "https://www.sfpgmr.net/profile.html#sfpgmr",
        "name": "Satoshi Fujiwara",
        "alternateName":"SFPGMR"
      }
    },
    {
      "@type": "WebPage",
      "@id":"https://www.sfpgmr.net/index.html",
      "url": "./index.html",
      "headline": "トップページ",
      "name": "index.html",
      "author": "https://www.sfpgmr.net/profile.html#sfpgmr",
      "keywords": "Programming,Music,HTML5,WebGL,javascript,WebAudio",
      "description": "プログラミング創作物",
      "about": "1996年ころから趣味でホームーページを公開し始めました。その後、自分でサーバを立ち上げホスティングしたり、フリーのブログサービスへ移行したりした後、現在は仮想サーバ（ServersMan@VPS）で公開しています。<br/>そのほかはてなブログ・twitter・tumblr・Qiitaなどを使用しておもにITに関する情報提供を行っています。またPCを使用したソフトウェア音源による音楽演奏も趣味で、主にYoutubeでYMOのカバー曲なども公開しています。",
      "relatedLink": [
        "https://github.sfpgmr.net",
        "http://blog.sfgpmr.net/"
      ],
      "mainEntity": [
        {
          "@type": "WebPageElement",
          "url": "https://blog.sfpgmr.net/",
          "name": "Blog",
          "headline": "Blog",
          "about": "Programming,Music,etc.いろいろな事を書いています。最近はHTML5,WebGL,JSの話題が多くなっています。"
        },
        {
          "@type": "WebPageElement",
          "@id":"https://www.sfpgmr.net/www.html",
          "url": "./www.html",
          "name": "Web",
          "headline": "Web",
          "about": "HTML5/WebGL/WebAudioなどのコンテンツです。ちょこちょこ作ったものなのでそんな大したものはありませんが。"
        },
        {
          "@type": "WebPageElement",
          "url": "./node.html",
          "name": "node.js/electron/nw.js",
          "headline": "node.js/electron/nw.js",
          "about": "node.js/electron/nw.jsに関するコンテンツです。"
        },
        {
          "@type": "WebPageElement",
          "url": "./windows.html",
          "name": "Windows/C++ Programming",
          "headline": "Windows/C++ Programming",
          "about": "Windowsプログラミングに関するコンテンツです。"
        }
      ]
    },
    {
      "@type": "WebPage",
      "@id": "https://www.sfpgmr.net/web.html",
      "url": "./web.html",
      "headline": "Web技術を使用した創作物のページ",
      "keywords": "Programming,Music,HTML5,WebGL,javascript,WebAudio",
      "about": "Web技術を使用した創作物の一覧ページです。きちんと作り上げたものはあまりなく、途中で放置しているものが結構多いです。",
      "author": "https://www.sfpgmr.net/profile.html#sfpgmr",
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "item": {
              "@id": "https://www.sfpgmr.net/",
              "name": "S.F. Home Page"
            }
          },
          {
            "@type": "ListItem",
            "position": 2,
            "item": {
              "@id": "https://www.sfpgmr.net/www.html",
              "name": "Web"
            }
          }
        ]
      },
      "relatedLink": [
        "https://github.sfpgmr.net",
        "http://blog.sfgpmr.net/"
      ],
      "mainEntity": [
        {
          "@type": "WebPageElement",
          "@id": "https://www.sfpgmr.net/www.html#HTML5Canvas",
          "url": "./www.html#HTML5Canvas",
          "name": "HTML5 Canvas",
          "headline": "HTML5 Canvas",
          "keywords":"HTML5,Canvas",
          "about": "HTML5 Canvasの実験ページです。ちょこちょこ作ったものなのでそんな大したものはありませんが。",
          "mainEntity":[
            {
              "@type":"WebPageElement",
              "@id":"https://www.sfpgmr.net/test/html5test0001.htm",
              "url":"./test/html5test0001.htm",
              "name":"Canvas上でボールを跳ねさせてみる",
              "about":"Canvas上でボールが跳ねるリアルタイムアニメーションを作ってみました。",
              "author":{
                "@type":"Person",
                "@id":"http://wwww.sfpgmr.net/prpfile.html#SFPGMR"
              }
            }
          ]
        }
      ]
    }
  ]
}