概要
対象
- 実際に公開するページ(ride.html)で動く以下Javascript
- インラインでコメントしながら理解する
js/ride.js
メソッド一覧
- function rideScopeWrapper($)
- function requestUnicorn(pickupLocation)
- function completeRequest(result)
- function handlePickupChanged()
- function handleRequestClick(event)
- function animateArrival(callback)
- function displayUpdate(text)
function rideScopeWrapper($)
- then()はPromiseを返す
- 認証トークンの確認
- request/signoutボタンの制御
- pickupChangeイベントの定義
/*global WildRydes _config*/
// グローバル変数「WildRydes」を定義。定義済みだったら定義済みの変数を使う
var WildRydes = window.WildRydes || {};
// 「WildRydes」のmapオブジェクトを定義。こちらも同じく定義済みだったら定義済みの変数を使う
WildRydes.map = WildRydes.map || {};
// ()でくくってあるので、読み込みと同時に実行される即時関数
(function rideScopeWrapper($) {
// 認証トークン
var authToken;
// 認証トークンを取得する。取得できたらsetAuthToken()を実行する
WildRydes.authToken.then(function setAuthToken(token) {
if (token) {
// トークンがあったら認証トークンにセット
authToken = token;
} else {
// なかったらサインインページに遷移
window.location.href = '/signin.html';
}
}).catch(function handleTokenError(error) {
// exception発生したら画面にエラー表示して、サインインページに遷移
alert(error);
window.location.href = '/signin.html';
});
...
// Register click handler for #request button
$(function onDocReady() {
// requestボタンをクリックしたらhandleRequestClick()(後述)を実行するように定義
$('#request').click(handleRequestClick);
// signOutボタンをクリックしたら無名関数を実行
$('#signOut').click(function() {
// サインアウト処理
WildRydes.signOut();
// サインアウトしたメッセージを表示
alert("You have been signed out.");
// サインインページに遷移
window.location = "signin.html";
});
// 地図上で「pickupChange」eventが発生したらhandlePickupChanged()を実行
$(WildRydes.map).on('pickupChange', handlePickupChanged);
// 認証トークンを取得する。取得できたらupdateAuthMessage()(後述)を実行する
WildRydes.authToken.then(function updateAuthMessage(token) {
if (token) {
// トークンがある場合、メッセージを画面表示
displayUpdate('You are authenticated. Click to see your <a href="#authTokenModal" data-toggle="modal">auth token</a>.');
// 認証トークンにトークンをセット
$('.authToken').text(token);
}
});
// Lambdaのendpointが無かったら「#noApiMessage」のメッセージを表示
if (!_config.api.invokeUrl) {
$('#noApiMessage').show();
}
});
...
}(jQuery));
function handlePickupChanged()
function handlePickupChanged() {
// requestボタンのjQueryオブジェクト
var requestButton = $('#request');
// requestButtonオブジェクトのテキストに文字列をセット
requestButton.text('Request Unicorn');
// requestButtonオブジェクトの「disabled」にfalseをセット。(requestボタンの非表示を解除)
requestButton.prop('disabled', false);
}
function requestUnicorn(pickupLocation)
function requestUnicorn(pickupLocation) {
// ajax通信を行う
$.ajax({
// POSTで通信
method: 'POST',
// 通信先はAPI Gateway
url: _config.api.invokeUrl + '/ride',
// ヘッダをセット
// API Gatewayのオーサライザをセットしたときの「トークンのソース」にセットしたキー
headers: {
Authorization: authToken
},
// 地図上でクリックした地点の緯度経度情報をJSONにしたものをBodyにセット
data: JSON.stringify({
PickupLocation: {
Latitude: pickupLocation.latitude,
Longitude: pickupLocation.longitude
}
}),
// コンテンツタイプセット
contentType: 'application/json',
// 成功時の処理。completeRequest()を実行
success: completeRequest,
// エラー時の処理
error: function ajaxError(jqXHR, textStatus, errorThrown) {
// エラーログを出力して、エラー画面を表示
console.error('Error requesting ride: ', textStatus, ', Details: ', errorThrown);
console.error('Response: ', jqXHR.responseText);
alert('An error occured when requesting your unicorn:\n' + jqXHR.responseText);
}
});
}
function completeRequest(result)
- requestUnicorn()でAPI Gatewayへの通信が成功した時に呼び出される
- 画面右上のメッセージ表示やボタン制御などを行う
function completeRequest(result) {
var unicorn; // Unicornオブジェクト格納変数
var pronoun; // 代名詞?
// API Gatewayから受信した結果をログ出力
console.log('Response received from API: ', result);
// 結果からUnicornオブジェクトをセット
unicorn = result.Unicorn;
// Unicornの性別によって、メッセージに表示する代名詞をセット
pronoun = unicorn.Gender === 'Male' ? 'his' : 'her';
// Unicornの名前、色などをメッセージに表示
displayUpdate(unicorn.Name + ', your ' + unicorn.Color + ' unicorn, is on ' + pronoun + ' way.');
// animateArrival()(後述)を実行
animateArrival(function animateCallback() {
// Unicornが来たというメッセージを表示
displayUpdate(unicorn.Name + ' has arrived. Giddy up!');
// 地図上の緯度経度を外す
WildRydes.map.unsetLocation();
// requestボタンを非表示
$('#request').prop('disabled', 'disabled');
// requestボタンの表示を「Set Pickup」に変更
$('#request').text('Set Pickup');
});
}
function handleRequestClick(event)
function handleRequestClick(event) {
// 地図の選択された地点の緯度経度を取得
var pickupLocation = WildRydes.map.selectedPoint;
// eventの処理を停止
event.preventDefault();
// requestUnicorn()を実行
requestUnicorn(pickupLocation);
}
function animateArrival(callback)
function animateArrival(callback) {
// 地図の選択された地点の緯度経度を取得
var dest = WildRydes.map.selectedPoint;
// 現在地をリセット
var origin = {};
// 選択された地点に現在地をセット
if (dest.latitude > WildRydes.map.center.latitude) {
//
origin.latitude = WildRydes.map.extent.minLat;
} else {
origin.latitude = WildRydes.map.extent.maxLat;
}
if (dest.longitude > WildRydes.map.center.longitude) {
origin.longitude = WildRydes.map.extent.minLng;
} else {
origin.longitude = WildRydes.map.extent.maxLng;
}
// 地図の描画
WildRydes.map.animate(origin, dest, callback);
}
function displayUpdate(text)
function displayUpdate(text) {
// メッセージフィールドにテキストを表示
$('#updates').append($('<li>' + text + '</li>'));
}
わかったこと
わからなかったこと
- 認証・認可って何？(裏で全部やってくれてるっぽい)
