【Python】bitflyer の API と Tornado のテンプレートを使って注文一覧を表示する
おはようございます。
今回は、注文（中）一覧を取得して表示するのですが、
今までと違い別ファイルのテンプレートHTMLを使ってテーブルを作成する方法を試してみます。
プログラムは前回のものを流用します。
【Python】bitflyer の API を使って約定一覧を取得してみる
スポンサーリンク
画面の修正
注文一覧テーブルを格納する要素を追加
Main.html
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ static_url('css/style.css') }}"/>
<script type="text/javascript" src="{{ static_url('js/script.js') }}"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div style="clear:both; padding-top:10px;">
<div class="entry_title">
<div class="pull_left">資産情報</div>
<div class="pull_right"><input type="button" value="更新" /></div>
</div>
<table id="balanceTable">
<tr><th>円</th><td id="jpy"></td><th>イーサクラシック</th><td id="etc"></td></tr>
<tr><th>ビットコイン</th><td id="btc"></td><th>ライトコイン</th><td id="ltc"></td></tr>
<tr><th>ビットコインキャッシュ</th><td id="bch"></td><th>モナコイン</th><td id="mona"></td></tr>
<tr><th>イーサ</th><td id="eth"></td><th>リスク</th><td id="lsk"></td></tr>
</table>
</div>
<div style="clear:both; padding-top:10px;">
<div class="entry_title">
<div class="pull_left">注文一覧</div>
<div class="pull_right"><input type="button" value="更新" /></div>
</div>
<div id="childOrderContainer">
<table id="childOrderTable">
<tr class="header">
<th style="width:10%">ID</th>
<th style="width:10%">売買</th>
<th style="width:10%">種別</th>
<th style="width:10%">値段</th>
<th style="width:10%">数量</th>
<th style="width:10%">注文日時</th>
<th style="width:10%">期限</th>
</tr>
</table>
</div>
</div>
<div style="clear:both; padding-top:10px;">
<div class="entry_title">ティッカー情報</div>
<table id="tickerTable">
<tr class="header">
<th style="width:5%">種別</th>
<th style="width:10%">時刻</th>
<th style="width:5%">ID</th>
<th style="width:5%">売値</th>
<th style="width:5%">買値</th>
<th style="width:10%">売り数量</th>
<th style="width:10%">買い数量</th>
<th style="width:10%">売り注文総数</th>
<th style="width:10%">買い注文総数</th>
<th style="width:10%">最終取引価格</th>
<th style="width:10%">出来高</th>
<th style="width:10%">価格単位出来高</th>
</tr>
</table>
</div>
<div style="clear:both; padding-top:10px;">
<div class="entry_title">
<div class="pull_left">約定一覧</div>
<div class="pull_right"><input type="button" value="更新" /></div>
</div>
<div class="table_container">
<table id="executionTable">
<tr class="header">
<th style="width:10%">ID</th>
<th style="width:10%">売買</th>
<th style="width:10%">値段</th>
<th style="width:10%">数量</th>
<th style="width:15%">約定日時</th>
<th style="width:20%">注文ID</th>
<th style="width:5%">委任</th>
<th style="width:20%">受付ID</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>テンプレートHTMLの追加
_ChildOrder.html
<!DOCTYPE html>
<table id="childOrderTable">
<tr class="header">
<th style="width:10%">ID</th>
<th style="width:10%">売買</th>
<th style="width:10%">種別</th>
<th style="width:10%">値段</th>
<th style="width:10%">数量</th>
<th style="width:10%">注文日時</th>
<th style="width:10%">期限</th>
</tr>
{% for item in data %}
<tr>
<td>{{ item["child_order_id"] }}</td>
<td>{{ item["side"] }}</td>
<td>{{ item["child_order_type"] }}</td>
<td>{{ item["price"] }}</td>
<td>{{ item["size"] }}</td>
<td>{{ item["child_order_date"] }}</td>
<td>{{ item["expire_date"] }}</td>
</tr>
{% end %}
</table>style.css
追加した要素のスタイル定義
#childOrderContainer {
margin: 0px;
}
プログラムの修正
注文一覧を取得する処理を追加
今回はテンプレートエンジンを使って HTML を生成します。
BfTool.py
class GetChildOrderHandler(RequestHandler):
"""
注文一覧を取得
"""
def initialize(self):
logging.info("GetChildOrderHandler [initialize]")
def post(self):
logging.info("GetChildOrderHandler [post]")
api = BfApi()
data = api.send_req(api_path="/v1/me/getchildorders", product_code="FX_BTC_JPY", child_order_state="ACTIVE")
self.render("_ChildOrder.html", data=data, word="テスト")
app = tornado.web.Application([
(r"/", MainHandler),
(r"/ticker", SendWebSocket),
(r"/balance", GetBalanceHandler),
(r"/execution", GetExecutionHandler),
(r"/childOrder", GetChildOrderHandler)
],
template_path=os.path.join(os.getcwd(), "templates"),
static_path=os.path.join(os.getcwd(), "static"),
js_path=os.path.join(os.getcwd(), "js"),
)script.js
注文一覧を取得するメソッドの追加
/**
* 注文一覧を更新します.
*/
function updateChildOrder() {
$.ajax({
url: "http://localhost:8888/childOrder",
type: "POST",
success: function(response) {
$("#childOrderContainer").html(response)
},
error: function() {
}
});
}
起動してみる
無事に注文一覧を表示することができました。
まとめ
Ajaxによって画面の要素を書き換える方法でした。
すんなりできると思っていたのですが、テンプレートHTML内でデータをループさせるところで若干嵌りました。（無駄に Python 側で JSONにしたり、HTML側で JSONにしたり。。）
次回こそ注文まで出来ればいいなと思います。
ではでは。