Q&A
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
JavaScriptで天気情報が読み込まれた時に、表示したい
天気予報を表示するページを作成しており、画面の中にTwitterのタイムラインを挿入したいと思っています。今回、天気の情報を表示する部分はテンプレート文字列で表示しているため、直接HTMLにTwitterを挿入していまうと画面の読み込みの際に画面上に表示されていしまいます。
そのため初期表示はstyleをnoneに設定し、非表示にしています。
要素を取得して、addEventListenerでは表示することが出来たのですが、if文を使っての表示が上手くいきません。
if文を用いて天気情報または位置情報が取得された瞬間に天気情報と同じタイミングで表示したいです。
お時間のある方、アドバイス頂けると幸いです。宜しくお願いします。
html
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <title>weather</title> 8 <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> 9 <script src="https://kit.fontawesome.com/2cd57c5436.js" crossorigin="anonymous"></script> 10 <link href="css/style.css" rel="stylesheet"> 11</head> 12 13<body> 14 <main> 15 <div id="loading"> 16 <div id="spiner"></div> 17 </div> 18 <div class="container"> 19 <section> 20 <div id="today"> 21 <h3 id="place"></h3> 22 <div id="now"> 23 <div id="weather"> 24 </div> 25 </div> 26 </div> 27 28 <div class="scroll"> 29 <div id="forecast"> 30 </div> 31 </div> 32 <div id="twdp"> 33 <a class="twitter-timeline" data-width="350" data-height="700" 34 href="https://twitter.com/JMA_kishou?ref_src=twsrc%5Etfw">Tweets by JMA_kishou</a> 35 </div> 36 </section> 37 </div> 38 </main> 39 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 40 <script src="./jquery-3.5.1.min.js"></script> 41 <script src="script.js"></script> 42</body> 43 44</html>
javascript
1'use strict'; 2 3// 位置情報 4navigator.geolocation.getCurrentPosition(success, fail); 5 6function success(pos) { 7 ajaxRequest(pos.coords.latitude, pos.coords.longitude); 8}; 9 10function fail(error) { 11 alert('位置情報の取得に失敗しました。ERROR：' + error.code); 12}; 13 14// 日時データ（UTC）をミリ秒に変換する関数 15function ToJSTime(utcTime) { 16 return utcTime * 1000; 17}; 18 19//画面読み込み時にTwitterを非表示する初期設定 20document.getElementById('twdp').style.display = "none"; 21 22// データ取得 23function ajaxRequest(lat, long) { 24 const url = 'https://api.openweathermap.org/data/2.5/forecast'; 25 const appId = '{MY ID}'; 26 27 $.ajax({ 28 url: url, 29 data: { 30 appid: appId, 31 lat: lat, 32 lon: long, 33 units: 'metric', 34 lang: 'en' 35 },//ここから追記↓↓↓// 36 success: function (reult) { 37 document.getElementById('twdp').style.display = "inline-block"; 38 } 39 //ここまで↑↑↑// 40 }) 41 .done(function (data) { 42 // 都市名、国名 43 $('#place').text(data.city.name + data.city.country); 44 45 // 天気のデータ 46 data.list.forEach(function (forecast, index) { 47 const dateTime = new Date(ToJSTime(forecast.dt)); 48 const month = dateTime.getMonth() + 1; 49 const date = dateTime.getDate(); 50 const hours = dateTime.getHours(); 51 const min = String(dateTime.getMinutes()).padStart(2, '0'); 52 const temperature = Math.round(forecast.main.temp); 53 const description = forecast.weather[0].description; 54 const iconPath = `images/${forecast.weather[0].icon}.svg`; 55 56 if (index === 0) { 57 const Weatherinfo = ` 58 <div class="icon"><img src="${iconPath}"></div> 59 <div class="info"> 60 <p> 61 <span class="description">${description}</span> 62 <span class="temp">${temperature}</span>℃ 63 </p> 64 </div>`; 65 $('#weather').html(Weatherinfo); 66 } else if (index > 0) { 67 const threeDays = ` 68 <tr> 69 <td class="info"> 70 ${month}/${date} ${hours}:${min} 71 </td> 72 <td class="icon"><img src="${iconPath}"></td> 73 <td><span class="temp">${temperature}℃</span></td> 74 </tr> 75 `; 76 $('#forecast').append(threeDays); 77 } 78 }); 79 80 81 // ページ読み込み時の関数 82 window.onload = function () { 83 const spinner = document.getElementById('loading'); 84 spinner.classList.add('loaded'); 85 }; 86 87 //コメントアウト 88 //function loadTw() { 89 //const twdp = document.getElementById('twdp'); 90 91 //if (ajaxRequest()) { 92 //twdp.style.display = "inline-block"; 93 //} else { 94 //twdp.style.display = "none"; 95 //} 96 //} 97 //loadTw(); 98 //}) 99 //.fail(function (data) { 100 //alert('ajax!') 101 //}); //追記１ 102//}; 103 104 105 106//コメントアウト 107//function loadTw() { 108 //const twdp = document.getElementById('twdp'); 109 110 //if (ajaxRequest()) { 111 //twdp.style.display = "inline-block"; 112 //} else { 113 //twdp.style.display = "none"; 114 //} 115//} 116 117// window.addEventListener('load', function timeLine() { 118 // document.getElementById('twdp').style.display = "inline-block"; 119// }); 120 121
回答1件
0
ベストアンサー
ajaxRequest関数が何も返していないのと、中で非同期処理をしているので、doneの中で「Twitterを表示」をするようにしてみてください。
投稿2020/06/01 06:45
総合スコア69608
コメントありがとうございます！
ajaxReqeest関数で.failを返して、doneの中に記載してみましたが上手く表示できませんでした。
参考サイトです。
https://qiita.com/katsukii/items/bd64efcf4f070d77c028
// データ取得
function ajaxRequest(lat, long) {
const url = 'https://api.openweathermap.org/data/2.5/forecast';
const appId = 'my id';
$.ajax({
url: url,
data: {
appid: appId,
lat: lat,
lon: long,
units: 'metric',
lang: 'en'
}
})
.done(function (data) {
// 都市名、国名
$('#place').text(data.city.name + data.city.country);
// 天気のデータ
data.list.forEach(function (forecast, index) {
const dateTime = new Date(ToJSTime(forecast.dt));
const month = dateTime.getMonth() + 1;
const date = dateTime.getDate();
const hours = dateTime.getHours();
const min = String(dateTime.getMinutes()).padStart(2, '0');
const temperature = Math.round(forecast.main.temp);
const description = forecast.weather[0].description;
const iconPath = `images/${forecast.weather[0].icon}.svg`;
if (index === 0) {
const Weatherinfo = `
<div class="icon"><img src="${iconPath}"></div>
<div class="info">
<p>
<span class="description">${description}</span>
<span class="temp">${temperature}</span>℃
</p>
</div>`;
$('#weather').html(Weatherinfo);
} else if (index > 0) {
const threeDays = `
<tr>
<td class="info">
${month}/${date} ${hours}:${min}
</td>
<td class="icon"><img src="${iconPath}"></td>
<td><span class="temp">${temperature}℃</span></td>
</tr>
`;
$('#forecast').append(threeDays);
}
});
function loadTw() {
const twdp = document.getElementById('twdp');
if (ajaxRequest()) {
twdp.style.display = "inline-block";
} else {
twdp.style.display = "none";
}
}
loadTw();
})
.fail(function (data) {
alert('ajax!')
});
};
// 読み込み時の関数
window.onload = function () {
const spinner = document.getElementById('loading');
spinner.classList.add('loaded');
};
document.getElementById('twdp').style.display = "none";
コメントエリアではマークダウンが使えないため、コードはここではなく質問文にコードブロックで追記してください。（決して元のコードを消さないでください）
ご指摘ありがとうございます！
変更点追記しました！
すいません、アドバイス頂いたことを元に調べていき解決することが出来ました！
ありがとうございました。
解決後のコードを追記しておきます。
あなたの回答
tips
プレビュー
