やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > プログラミング > JSON-LDを外部ファイル化して読み込みたいが失敗（@id編）

JSON-LDを外部ファイル化して読み込みたいが失敗（@id編）

プログラミング JavaScript

前回のつづき。

仕様書

やはり仕様書をよく読むしかないか。ここによると以下のようなコードがあった。

{
    "@context": {
        "@base": "http://example.com/document.jsonld"
    },
    "@id": "",
    "label": "Just a simple document"
}

おそらくこれはHTML内に入れる必要があるのだろう。気に食わないが、内容まるごとハードコーディングよりはマシである。

アップロード先

JSON-LDファイルをどこにアップロードするか。

直リンできるアップローダでないとダメ。以前はよく使っていたMEGAは直リンできないから使えない。直リンできないアップローダは多い。

cloudup

こちらにてcloudupというアップローダを知った。感謝。

  • 直リン可
  • 200GBまで
  • 1000ファイルまで

ソースコード

アップロードしたJSON-LDファイルは以下。

https://cldup.com/lJD9o60LWo.jsonld

内容は以下。

{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "ytyaru",
  "url": "https://github.com/ytyaru",
  "sameAs": ["http://ytyaru.hatenablog.com/about"]
}

ソースコードは以下。

main.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
<!--
   <link id="person-ld" href="./person.jsonld" rel="alternate" type="application/ld+json" />
-->
   <script id="person-ld" type="application/ld+json">
       {
           "@context": {
               "@base": "https://cldup.com/lJD9o60LWo.jsonld"
           },
           "@id": "",
           "label": "Just a simple document"
       }
   </script>
   <script type="text/javascript" src="./loadJsonLD.js"></script>
</head>
<body>
</body>
</html>

loadJsonLD.js

window.onload = function () {
    console.log(document.getElementById('person-ld'));
    console.log(document.getElementById('person-ld').text);
    person = JSON.parse(document.getElementById('person-ld').text);
    alert(person["@context"]["@base"]);
}

HTML内に書かれてある内容は読み取れる。でも、参照先のテキストまでは読み取れない。

所感

JSON-LDの@idで本当に読み込めているのだろうか。どうやって確認するのか。どうやって読み取るのか。そもそもJavaScriptで読み取れるのか。