【Python】bitflyer の API と Tornado のテンプレートを使って注文一覧を表示する
おはようございます。
今回は、注文（中）一覧を取得して表示するのですが、
今までと違い別ファイルのテンプレートHTMLを使ってテーブルを作成する方法を試してみます。
プログラムは前回のものを流用します。
【Python】bitflyer の API を使って約定一覧を取得してみる
スポンサーリンク
画面の修正
注文一覧テーブルを格納する要素を追加
Main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!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 onload="initialize();"> <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="更新"onclick="updateBalance();" /></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="更新"onclick="updateChildOrder();" /></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="更新"onclick="updateExecution();" /></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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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
追加した要素のスタイル定義
1 2 3 | #childOrderContainer { margin:0px; } |
プログラムの修正
注文一覧を取得する処理を追加
今回はテンプレートエンジンを使って HTML を生成します。
BfTool.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | classGetChildOrderHandler(RequestHandler): """ 注文一覧を取得 """ definitialize(self): logging.info("GetChildOrderHandler [initialize]") defpost(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
注文一覧を取得するメソッドの追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /** * 注文一覧を更新します. */ functionupdateChildOrder(){ $.ajax({ url:"http://localhost:8888/childOrder", type:"POST", success:function(response){ $("#childOrderContainer").html(response) }, error:function(){ } }); } |
起動してみる
無事に注文一覧を表示することができました。
まとめ
Ajaxによって画面の要素を書き換える方法でした。
すんなりできると思っていたのですが、テンプレートHTML内でデータをループさせるところで若干嵌りました。（無駄に Python 側で JSONにしたり、HTML側で JSONにしたり。。）
次回こそ注文まで出来ればいいなと思います。
ではでは。