Bootstrapを用いて為替商品計算ツールインタフェースをつくったみた!
イントロ
目的
- 日々の業務でもどうせなら流行りのwebアプリにのったものを使いたい
- 見た目の美しいインタフェース
- 自由自在で使い勝手の良いインタフェース
- 端末に関係なく使えるwebアプリ
現状
- エクセルツールとかいうダサいインタフェース。
- UI用ライブラリ使ったアプリもあるけど依然としてダサいし、保守がめんどうだ
問題点
解決策
- 更新が容易なweb UIスキームを用いて、UIを作ろう!
- なぜなら、
- 見た目が美しい
- 更新が容易
- 端末依存がない
- なぜなら、
Bootstrapとは
Bootstrap
Bootstrapを使ってみよう
準備
- このページに従って準備を行った
Fx Calculatorをつくってみた
依然としてダサいがまあデザインは後で改良するとしてこんな感じ
<!DOCTYPE html>
Bootstrap Sample <header style="background-color:white"> <h1>Fx Calculator</h1> </header> <div class="container-fluid"> <div class="row"> <div class="col-sm-4" style="background-color:gray;"> <h3>Today</h1> <div class="form-group"> <lable for="today">Today</lable> <input type="date" class="form-control" id="today"> </div> <div class="form-group"> <lable for="spot-rate">Spot Rate</lable> <input type="value" class="form-control" id="spot-rate" value="100.0"> </div> <h3>Model</h1> <div class="form-group"> <lable for="drift">Drift</lable> <input type="value" class="form-control" id="drift" value="0.0"> </div> <div class="form-group"> <lable for="volatility">Volatility</lable> <input type="value" class="form-control" id="volatility" value="0.0"> </div> <h3>Contract</h1> <select class="form-control"> <option>FxForward</option> <option>FxCallOption</option> <option>FxPutOption</option> </select> <div class="form-group"> <lable for="strike">Strike</lable> <input type="value" class="form-control" id="strike" value="0.0"> </div> <div class="form-group"> <lable for="delivery">DeliveryDate</lable> <input type="date" class="form-control" id="delivery"> </div> </div> <div class="col-sm-8" style="background-color:white;"> <h3>Result</h1> </div> </div> </div> <footer style="background-color:gray"> <button type="button" class="btn btn-primary btn-lg btn-block">Calculate</button> </footer> </body>