・手順(9) 為替レートの取得処理を記述しよう

今回の目玉機能、中国元への通貨変換機能を作りこみましょう。リアルタイムにその日の為替レートを取得して計算を行います。そのために、Xurrency という為替情報を表示している API を利用します。以下より、為替情報に関する RSS が取得できます。

Xurrency

ただし、RSSからデータを取り出すのは、ちょっとプログラムが大変なので、これを、jQueryで手軽に利用できる、JSON形式で取得することができる API を作りました。

クジラ為替確認 API

これを利用して、中国元(CNY)のレートを取得するのが以下の3行です。jQueryを使うおかげで非常に気軽に記述できます。

// 中国元の取得
$.getJSON("http://api.aoikujira.com/kawase/json",{},
        function(e){
                cny = parseFloat(e["cny"]);
        });

・手順 (10)背景画像を貼り付けよう

CSSの中に背景画像を表示するように設定したのが次のコードです。pngファイルの画像を背景画像に用いています。この部分を変えるだけでも、かなり雰囲気の違う電卓を作ることができるでしょう。

#back {
        width:300px; height:250px;              /* 背景のサイズ */
        background-image:url("calc-back2.png"); /* 背景画像 */
}
#outline {
        position:absolute;                      /* ボタンの位置 */
        left:8px;
        top:8px;
        ～省略～
}