外部データ取り込み色々テスト中１
プログラムを書いてると言うと、(コンピュータのことを)何でも知ってると思われることもあるのですが、知らないことだらけと言うのが正直な話です。
前回の、ゲームブックシナリオデータをネットから読み込む作業中ですが、せっかくですので試行錯誤も含めて書いていきます。(冒頭に書きましたが、これも知らない分野です)
やりたいことは、ネットのどこかにあるJSONデータ(アドレスと名前は判っているものとします)を読み込むだけですので、なるべく簡便に出来るのが望ましいので、まずJavascript だけでやってみる事にしました。
さて、その前に調べている最中に見つけたネットのデータ利用の歴史的経緯が判りやすく書いて有るサイトがあったので、そちらのご紹介をします。
Fetch: クロスオリジン(Cross-Origin) リクエスト
https://ja.javascript.info/fetch-crossorigin
技術的部分は読み飛ばしても一読の価値はあるかと思います。
例えば今では考えられない事ですが、初期のインターネットでは『あるサイトのスクリプトが別のサイトのコンテンツへアクセスすることはできませんでした。』と言う辺りは知らない方少なくないかも？
閑話休題
まず、自分のサイトから別のサイトに置いたJSONデータを利用する実験から始めます。
参考サイト：これでできる！ クロスブラウザJavaScript入門｜第11回JSONP入門
https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011
別のサイトに以下の内容のファイルを置きます。
------------------------------------------------------------
price={
"products": [
{ "Name": "Cheese", "Price": 2.5, "Location": "Refrigerated foods" },
{ "Name": "Ground almonds", "Price": 3, "Location": "Home baking" }
]
}
------------------------------------------------------------
次にこのデータを読み込むhtmlを自分のサイトに置きます。
------------------------------------------------------------
<!DOCTYPE html>
<html">
<body>
</body>
<script src="https://別なサイト/fetchtest/products2.js">
</script>
<script>
alert(JSON.stringify(price));
</script>
</html>
------------------------------------------------------------
とりあえず、これで外部のJSONデータ(スクリプトになってますが)を読み込むことは出来ました。
次は動的にスクリプトを読み込むことに挑戦です。
ここで投稿
アドレス、テストに使った生アドレス記述してました。
見られて困るサイトではないし宣伝したいくらいですが、テスト用仮アドレスなので修正しました。
なお、こういうサイトです。
原生生物博物館ミクロの世界
https://al-museum.com/
最近更新できていませんが好き嫌いの分かれるサイトですね。
