やってみる

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

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

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

プログラミング JavaScript

前回のつづき。

FileReader API

linkタグにあるファイルパスを取得してFileAPIから読み取ればいけるのでは？結論からいえばできなかった。

FileAPIコードはStackOverflowを参照した。

検証コード

person.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 type="text/javascript" src="./loadJsonLD.js"></script>
</head>
<body>
</body>
</html>

loadJsonLD.js

window.onload = function () {
    var filePathJsonld = document.getElementById('person-ld').getAttribute("href");
    var f = new FileReader();
    f.onloadend = function(e){
        console.log(e.target.result);
    }
    f.readAsText(filePathJsonld);
}

結果

TypeError: Argument 1 of FileReader.readAsText is not an object.

分析

FileReader.readAsText参照。

こちらを参考にした。感謝。

疑問。

  • ローカルファイルのみ対象なのか？
  • ファイルパスを文字列で指定してもダメなのか？
  • inputタグでファイル選択しないとダメなのか？

所感

GUI必須は不自然。HTML的にはそれが自然なのか。そもそもそういう仕様なのか。いずれにせよ、すぐ解決できそうにない。