【jQuery】台湾ドル to 日本円コンバータを作ってみた

前回のポストネタであるJSONP取得を使い、台湾ドルの為替レートAPIを利用して日本円では幾らになるかのコンバーターを作成したので晒してみます。

台湾ドル→日本円コンバータ

APIで為替レートを取得

APIはこちらのものを利用させて頂きました。

画面はこんな感じ。
アクセスした時にAPIを実行し、レートを取得し、表示。
金額を入力し、Convert ボタンで日本円に換算するという、単純なものです。

JavaScript部分

まずはスクリプトを全部載っけてみます。

[js]
$(function() {
$.ajax({
url: 'http://api.aoikujira.com/kawase/get.php?format=jsonp2&code=twd&to=jpy&callback=json',
type: 'GET',
dataType: 'jsonp',
success: function(json) {
rateTwDoller = json.JPY; // 台湾ドル→日本円レート（約3.4円）
update = json.update; // アップデート日時

var exampleTwd1 = 123; // サンプル
var exampleYen1 = exampleTwd1 * rateTwDoller; // サンプル計算

$("#update").append(update);
$("#rate").append(rateTwDoller);
$("#exampleTwd1").append(exampleTwd1);
$("#exampleYen1").append(exampleYen1);
}
});

// Convertボタン 押下後処理
$('#calcButton').click( function(e) {
e.preventDefault(); // hrefが無効になり、画面遷移が行わない

var inputTwd = $('#inputTwd').val(); // input台湾ドル

// 計算
if (inputTwd !== '') {
var ansJpy = rateTwDoller * inputTwd; // 計算
ansJpy = Math.floor(ansJpy); // 小数点切り捨て
ansJpy = insertComma(ansJpy); // 3桁カンマ追加
$('#returnYen').text(ansJpy + ' 円'); // 結果の表示
}
});

// リセット
$('#resetButton').click(function(){
$('#returnYen').text("Result");
});
});

/**
* 3桁のカンマ区切りの値をセット
*
*/
function insertComma(num) {
return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
[/js]

HTML部分

つぎにHTML部分。

[html]

[/html]

JSONP取得部分

前回ポストの復習にもなりますが、JSONPデータの取得部分。
$ajax() 関数を利用して 指定URL へアクセスし、必要な値を変数へ代入しています。

[js]
$.ajax({
url: 'http://api.aoikujira.com/kawase/get.php?format=jsonp2&code=twd&to=jpy&callback=json',
type: 'GET',
dataType: 'jsonp',
success: function(json) {
rateTwDoller = json.JPY; // 台湾ドル→日本円レート（約3.4円）
update = json.update; // アップデート日時

var exampleTwd1 = 123; // サンプル
var exampleYen1 = exampleTwd1 * rateTwDoller; // サンプル計算

$("#update").append(update);
$("#rate").append(rateTwDoller);
$("#exampleTwd1").append(exampleTwd1);
$("#exampleYen1").append(exampleYen1);
}
});
[/js]

計算部分

「Convert」ボタン押下時の処理。
入力金額金額と取得したレートを掛けて結果を取得しているだけです。

[js]
// Convertボタン 押下後処理
$('#calcButton').click( function(e) {
e.preventDefault(); // hrefが無効になり、画面遷移が行わない

var inputTwd = $('#inputTwd').val(); // input台湾ドル

// 計算
if (inputTwd !== '') {
var ansJpy = rateTwDoller * inputTwd; // 計算
ansJpy = Math.floor(ansJpy); // 小数点切り捨て
ansJpy = insertComma(ansJpy); // 3桁カンマ追加
$('#returnYen').text(ansJpy + ' 円'); // 結果の表示
}
})

// リセット
$('#resetButton').click(function(){
$('#returnYen').text("Result");
});
[/js]

3桁カンマを入れる

結果を見やすくするために、結果に対し、3桁カンマを入れています。
PHPの number_format() の様な関数は無いために、独自で関数を作成する必要がありました。
すげー面倒。

[js]
/**
* 3桁のカンマ区切りの値をセット
*
*/
function insertComma(num) {
return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
[/js]

デモ

-Javascript,jQuery
-JSON, JSONP, コンバータ, 台湾ドル, 為替レート, 通貨