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

2014/09/03 2019/12/17

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

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

APIで為替レートを取得

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

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

JavaScript部分

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

$(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,');
}

$(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,');

}

HTML部分

つぎにHTML部分。

<div class="col-md-12" id="mainContents">
    <div>
        <p class="text-left">
            <span id="update"></span> 更新<br>
            1 TWD(台湾ドル) ≒ <strong><span id="rate"></span></strong> 円
        </p>

        <p class="text-left">
            例）<span id="exampleTwd1"></span> TWD = <span id="exampleYen1"></span> 円
        </p>
    </div>

    <!--結果-->
    <div id="result">
        <p id="ans"><span id="returnYen">Result</span></p>
    </div>

    <form method="post" name="from" action="/" id="test1">

    <div class="input-group input-group-lg">
        <span class="input-group-addon">金額</span>
        <input name="input_taiwan_doller" class="form-control" size="5" placeholder="台湾ドル" type="number" id="inputTwd">
    </div>

    <div class="buttons">
        <input type="submit" name="regist" value="Convert" id="calcButton" class="btn btn-success btn-lg">
        <input type="reset" name="reset" value="Reset" id="resetButton" class="btn btn-default btn-lg">
    </div>

    </form>
</div>

<div>

1 TWD(台湾ドル) ≒ <strong><span id="rate"></span></strong> 円

</p>

例）<span id="exampleTwd1"></span> TWD = <span id="exampleYen1"></span> 円

</p>

</div>

<p id="ans"><span id="returnYen">Result</span></p>

</div>

</div>

</div>

</form>

</div>

JSONP取得部分

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

    $.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);
        }
    });

$.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」ボタン押下時の処理。
入力金額金額と取得したレートを掛けて結果を取得しているだけです。

    // 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");
    });

// 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桁カンマを入れる

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

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

/**

* 3桁のカンマ区切りの値をセット

function insertComma(num) {

return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');

}

デモ

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

: 【jQuery】タブの切替スクリプトを作成してみました

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

: 【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる

「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているような、カウントダウンしていくタイマーが必要になったので、その設置方法の紹介です。今回は「jQuery Countdown」というライブラリを使用します。

: jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォー ...

: 【JS】jQueryでAタグ（リンク）を無効化する方法

jQueryを使い、Aタグ（リンク）を無効にするスクリプトを作成したのですが、ちょくちょく出てくるたびに調べるか自分で書いた過去ネタを探しに行っているので、備忘録としてポストします。

: 【JS】ラジオボタンでブロックの開閉を制御するスクリプトをjQueryで組んでみた

大きいブロックが十数個並ぶようなページで、それぞれのブロックの頭にラジオボタンを置き、その選択値によってブロックを開閉するスクリプトが必要になったので、例によってjQueryで組んでみました。

PREV: jQueryでJSON、JSONP 連携してみる。
NEXT: jQueryで各国通貨を日本円にするコンバーターを作ってみた。

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

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

APIで為替レートを取得

JavaScript部分

HTML部分

JSONP取得部分

計算部分

3桁カンマを入れる

デモ

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,289)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,572)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,028)

【歴史】江戸幕府歴代将軍一覧 (142,979)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,963)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,046)