ここから本文です

WEBサイト上でデータを表示する仕組みについて ウェブサイトでデータを様々な...

nnm********さん

2019/8/1111:58:15

WEBサイト上でデータを表示する仕組みについて


ウェブサイトでデータを様々な形で表示する方法について教えてください。

例えば、天気・気温についてのウェブサイトを作る場合、
・8月1日の全国の天気・気温を表示
・特定の地点の過去の天気・気温(8月1~31日とか)を表示
するときに、それぞれ静的htmlページを作るのは現実的ではないと思います。
各データを呼び出す形にできると思うのですが、どういった仕組みを利用しているのかがわかりません。

独学で勉強したいと考えているので、こういった仕組み・言語・スキルを使う、このサイトが参考になるというものがありましたら、教えてください。
よろしくお願いいたします。

閲覧数:
25
回答数:
2
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

f6t********さん

2019/8/1500:33:35

基本的にはHTML、CSS、JavaScriptの知識があれば十分です!

HTMLはWebサイトを作るための言語、CSSはサイトのデザインのための言語、JavaScriptは動的なWebサイトを作るための言語になります。

天気データを取得するには、各組織が発行しているAPIという機能を使うといいでしょう。

例えば、http://fcc-weather-api.glitch.me/ というサイトのAPIを使ってみるとこんな感じになると思います。


=========index.html=========
<script src="script.js"></script>
=========index.htmlここまで=========


=========script.js=========
//北緯36度、東経139度のデータを取得したい場合
const lat = 36;
const long = 139;
const api = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
//データ取得
const response = await fetch(api);
const data = await response.json();
//例えば、気温の表示
document.write(`北緯${lat} 東経${long}の気温は${data.main.temp}度です`);
=========script.jsここまで=========


この2つのファイルを作ってサーバーに載せれば、気温だけが表示される簡単なサイトが作れます!


これらの技術の勉強順序としては、やはりHTML→CSS→JavaScript になると思います。

最近はどのサイトもプログラミング言語について丁寧な説明があるので、Googleで「HTML 入門」などと検索すれば、入門としては十分な知識がつけられるでしょう。例えばhttp://www.ink.or.jp/~bigblock/html/ なんかも参考にしてください。

最も難しい部分はJavascriptで天気のデータを取得し、表示する部分になると思います。まあ、↑を参考にしながら頑張ってみてください!

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

ama********さん

2019/8/1121:07:45

>各データを呼び出す形にできると思うのですが、どういった仕組みを利用しているのかがわかりません。

サーバー・サイド言語で天気のページ(例えば気象庁のページ)からデータをスクレイピング(取得)するにはPython(パイソン)が適してるようですが、現在「気象庁、Yahoo! 、日本気象協会、ウェザーニュース」などのサイトは暗号化されており、そのページからデータをスクレイピング(取得)する事はできないとおもわれます。
暗号化されてない お天気サイトがないと無理でしょう。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる