【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, コンバータ, 台湾ドル, 為替レート, 通貨

: lightbox系プラグイン「Shadowbox.js」で、YouTube動画をオプション付きで埋め込む方法。

プラットフォーム関係なく動画を再生させたかったので、YouTubeにアップして見せることになり、その際に利用したlightbox系のプラグイン「Shadowbox.js」の使い方を忘備録としてポストします。

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

: Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

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

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

: 【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

以前作成したツールチップを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。

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

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

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

APIで為替レートを取得

JavaScript部分

HTML部分

JSONP取得部分

計算部分

3桁カンマを入れる

デモ

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

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

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

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

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

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