金融と工学のあいだ

興味関心に関するメモ(機械学習、検索エンジン、プログラミングなど)

Bootstrapを用いて為替商品計算ツールインタフェースをつくったみた!

イントロ

目的

  • 日々の業務でもどうせなら流行りのwebアプリにのったものを使いたい
    • 見た目の美しいインタフェース
    • 自由自在で使い勝手の良いインタフェース
    • 端末に関係なく使えるwebアプリ

現状

  • エクセルツールとかいうダサいインタフェース。
  • UI用ライブラリ使ったアプリもあるけど依然としてダサいし、保守がめんどうだ

問題点

  • 見た目が美しくなく良いユーザエクスペリエンスが期待できない
  • 表計算ツールをインタフェースにするというだささ
  • 端末依存甚だしい

解決策

  • 更新が容易なweb UIスキームを用いて、UIを作ろう!
    • なぜなら、
      1. 見た目が美しい
      2. 更新が容易
      3. 端末依存がない

Bootstrapとは

Bootstrap

  • Twitter社が開発したCSSフレームワーク
  • メリットは?
    • レスポンシブルなwebデザインに対応している *
      • CSS3のメディアクエリを利用して、 レスポンシブルにブラウザの横幅サイズを変更できる
    • 追加要件に容易に対応できる *
    • 全体のデザインのバランスが崩れない *

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>