【Python】bitflyer の API と Tornado のテンプレートを使って注文一覧を表示する

公開日:2018-12-13
最終更新:2018-12-13
※この記事は外部サイト(https://www.doraxdora.com/blog/2018/03/17/...)からのクロス投稿です

おはようございます。

今回は、注文(中)一覧を取得して表示するのですが、
今までと違い別ファイルのテンプレート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 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
<!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にしたり。。)

次回こそ注文まで出来ればいいなと思います。

ではでは。

記事が少しでもいいなと思ったらクラップを送ってみよう!
21
+1
@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする