//tips
//js理解
data.jsonの内容をもとに表示を変更させていく。
空席状況確認ボタンを押すと、メッセージが表示され、ボタンの色も変更させる。
data.jsonのcrowdedプロパティの値がyesだった場合、その項目の属性にcrowdedを追加。クリックイベント時にcrowdedクラスかどうかを確認し、ボタンの表示を切り替える。
Htmlの記述を下記に変更。
$(document).ready(function(){
$.ajax({url: ‘data.json’,dataType:’json’})
.done(function(data){
data.forEach(function(item,index){
if(item.crowded===‘yes’){
const idName = ‘#’+item.id;
$(idName).find(‘.check’).addClass(‘crowded’);
}
});
})
.fail(function(){
window.alert(‘読み込みエラー’);
});
});
ボタンクリックされた際のイベント設定を行う。
$(‘.check’).on(‘click’,function(){
if($(this).hasClass(‘crowded’)){
$(this).text(‘残席わずか’).addClass(‘red’);
}
else{
$(this).text(‘お席あります’).addClass(‘green’);
}
});
item.crowdedの値がyesならtrueとなり、定数idNameに#id名(item.id)を代入している。ここにはdata.jsonから抜き出された#jsが入る。
取得した要素の子要素のクラス名が.checkの要素を取得して、その要素にcrowdedを追加する。<p class=“check crowded”>空席状況確認</p>となる。
Findメソッドは$()で取得した要素のうち()内のセレクタにマッチする要素を取得する。.checkなのでcheckクラスを取得している。
$(‘セレクタ1’).find(‘セレクタ2’)
セレクタ１で取得される子要素のうちセレクタ２にマッチする要素を取得。
取得した要素.addClass(‘クラス名’);
取得した要素にクラスを追加する。
Checkクラス部分がクリックされると、$(‘.check’).on(‘click’,function(){によってfunction以下の処理が実行される。
if($(this).hasClass(‘crowded’)){でクリックされたcheckクラスの中にcrowdedがあるかどうか調べる。
もしあれば、$(this).text(‘残席わずか’).addClass(‘red’);、なければ、$(this).text(‘お席あります’).addClass(‘green’);に変更する。
$(‘セレクタ’).hasClass(‘クラス名’)
取得した要素にクラスがあるかどうか調べる
$(‘セレクタ’).text(‘書き換えるテキスト’)
取得した要素のテキストを書き換える
Ajax利用の注意点として、ドメイン、サブドメイン、スキーム、ポート番号が同じドメインのものを送受信できず、基本的にはサーバ川の許可しているデータしかダウンロードできない。
例えばhttp://www.abcd.jp/index.htmlに対して
http://www.abcd.jp/contact.htmlはajax可能
http://www.abcd.jp/はajax不可
となっている。
次は現在の位置情報を取得してページに表示させる。
<script>
‘use strict’
function success(pos)
{
console.log(pos);
}
function fail(error){
alert(‘位置情報の取得に失敗’)
}
navigator.geolocation.getCurrentPosition(success,fail);
</script>
</body>
こうするとブラウザを開いたときに位置情報を取得してよいかのダイアログが出てくる。許可をするとコンソールから位置情報を確認できる。
navigatorオブジェクトのgeolocationオブジェクトgetCurrentPositionメソッドを使用することで簡単に取得できた。一つ目の引数は成功した時に呼び出すファンクション、二つ目の引数が失敗した時に呼び出すファンクションになっている。
この情報をページに表示していくためにHTMLの取得と操作を行う。
<section>
<p>あなたは今</p>
<p id=“loc” class=“position”></p>
<p>の場所にいます。精度は半径<span id=“accuracy” class=“position”></span>mです。</p>
</section>
</footer>
<script src =“../../_common/scripts/jquery-3.4.1.min.js”></script>
<script>
‘use strict’
function success(pos)
{
const lat=pos.coords.latitude;
const lng=pos.coords.longitude;
const accuracy = pos.coords.accuracy;
$(‘#loc’).text(‘緯度:${lat} 経度:${lng}’);
$(‘#accuracy’).text(accuracy);
}
function fail(error){
alert(‘位置情報の取得に失敗’)
}
navigator.geolocation.getCurrentPosition(success,fail);
</script>
</body>
</script>
Successファンクションが呼び出された場合には位置情報のオブジェクトがパラメータとして渡され、それはposに保存されるので、posのcoordsプロパティのlatitudeプロパティを読み取ることで緯度がわかる。
緯度と経度は<p id=“loc” class=“position”>に出力したいのでid属性locを使用してコンテンツのテキストを書き換える。
今度は位置情報ではなく天気情報をopenweather社のweb apiを利用して表示させていく。
Webサイトが提供する機能を専用のURLにjsのajaxを使用してリクエストして、データを受け取ることになる。URLは機能ごとに分かれているので欲しい情報に合わせてURLは変えていく必要がある。
API CallがリクエストすべきURLでParametersにはリクエスト時に必要な情報が書かれている。
openweatherのweb apiを使用する際に緯度経度が必要になっているので、先に実施したnavigator.geolocation.getCurrentPositionを活用する。
</footer>
<script src=“../../_common/scripts/jquery-3.4.1.min.js”></script>
<script src=“script.js”></script>
</body>
</html>
script.jsの方を下記に記載。
‘use strict’
function success(pos){
ajaxRequest(pos.coords.latitude,pos.coords.longitude);
}
function fail(error){
alert(‘位置情報の取得に失敗’)
}
navigator.geolocation.getCurrentPosition(success,fail);
function ajaxRequest(lat,long){
const url =‘https://api.openweathermap.org/data/2.5/forecast’;
const appId=‘保存したAPI Key’
$.ajax({
url:url,
data:appId,
lat:lat,
lon:long,
units:’metric’,
lang:’ja’
}
})
.done(function(data){
console.log(data);
})
.fail(function(){
console.log(‘$.ajax failed’!);
})
}
まずはgeolacationを使用して緯度経度を取得し、取得が成功したらajaxRequestファンクションを呼び出し、緯度経度の情報を渡している。
ajaxRequestではapi callのurlとapi keyを使用して$.ajaxメソッドを使用して、apiにデータをリクエストしている。
Url以外に、リクエストの際に送信の必要がある情報は、dataプロパティを追加し、その子として送付する。
このリクエストが完了すると.doneの方に移行するので.done(function(data))でdataに格納されたapiからのリスポンスに対する処理内容を書いている。
受け取ったデータはそのままでは使えないので先のjsで整形していく。
function ajaxRequest(lat,long){
…
}
})
.done(function(data){
console.log(data);
console.log(‘都市名:’+data.city.name);
console.log(‘国名:’+data.city.country);
data.list.forEach(function(forecast,index){
const dataTime=new Data(utcToJsTime(forecast.dt));
…
})
})
予報データはdata.listプロパティに含まれていて、値は配列になっているので、forEachで配列の中身を順に取り出している。
この処理内容はforcastに保存されていく。
これらの内容をページに反映するように変更する。
htmlの方を
<head>
…
<link href=“../../_common/css/style.css” rel=“stylesheet”>
<link href=“css/special.css” rel=“stylesheet”>
</head>
…
<section>
<h3 id=“place”></h3>
<div id=“now”>
<div id=“weather”>
</div>
</div>
<table id=“forecast”>
</table>
</section>
次にjsのコードを改変。
function ajaxRequest(lat,long){
…
}
})
.done(function(data){
$(‘#place’).text(data.city.name+’,’+data.city.country);
data.list.forEach(function(forecast,index){
const dataTime=new Date(utcToJSTime(forecast.dt));
const month=dataTime.getMonth()+1;
…
if(index===0){
const currentweather = ‘
<div class=“icon”><img src=“${iconPath}”></div>
<div class =“info”>
<p>
<span class =“description”>現在の天気:${description}</span>
<span class=“temp”>${temperature}</span>C
</p>
</div>’;
$(‘#weather’).html(currentWeather);
}else{
const tableRow=‘
<tr>
<td class=“info”>
${month}/${date} ${hours}:${min}
</td>
<td class=“icon”><img src=“${iconPath}”></td>
<td><span class=“description”>${description}</span></td>
<td><span class=“temp”>${temperature}C</span></td>
</tr>’;
$(‘#forecast’).append(tableRow);
}
});
都市名や国名の出力のところは今までやってきた通りの$(‘#place’).text(data.city.name+’,’+data.city.country);で対応でき、予報内容の表示はひと工夫必要で、index0の現在の天気とそれ以外の場合に分けて表示を行うため、文字列テンプレートを使って出力するHTMLを作成し、それをindex.htmlに挿入できるようにする。
挿入HTMLの内容を定数currentWeatherに代入し、その定数を<div class=“weather”></div>の中に挿入している。
HTMLの挿入処理は、jqueryのhtmlメソッドを使用し、.html()の()内で指定されたHTMLで書き換える。
<div id= “weather”>
<div class=“icon”><img src=“${iconPath}”></div>
<div class =“info”>
<p>
<span class =“description”>現在の天気:${description}</span>
<span class=“temp”>${temperature}</span>C
</p>
</div>;
</div>
の各${}変数が変更され終わった形でhtmlに反映される。
tdタグは一つのセルを表し、左揃えの通常分となる。trタグは列を表し、この中に書かれたものは同じ列となる。どちらもテーブルを構成する際のタグ。
appendメソッドは挿入処理となり、書き換えではないため、挿入したhtmlの後にさらに挿入を続けることができる。
