【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 で作ってみました。

: ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた。

ブラウザごとに異なるCSSのclassを付与し、見た目を変えてみる仕組みをjQueryを使って作ってみました。

: 【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

複数（今回は３つ）のプルダウンメニューを連動させ選択内容を変更させる、いわゆる「連動プルダウン」のプラグインをjQueryで作ってみました。

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

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

: 【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ

以前作成した「jquery.tgHierSelect」ですが、連動させるプルダウン数が増えた場合や、同じページに2個以上の連動プルダウンがある場合などに、かなり手を入れないと使えない状態だったので、それらを解決しつつ、オプションの記述もシンプルになるよう、バージョンアップしました。

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

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

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

APIで為替レートを取得

JavaScript部分

HTML部分

JSONP取得部分

計算部分

3桁カンマを入れる

デモ

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

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

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

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

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

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