キャンバスの実装
本チュートリアルでは、メインのインタフェースはHTML5 Canvasで実装することにします。インタフェースのメインの描画領域となるキャンバスを実装しましょう。まずは、index.htmlに記述してあったrecsys-djangoへようこそ!の部分を下記のように書き換えてください。
リスト1: recsys_django/online/templates/index.html
...(略)...
<div class="col-md-12 text-center">
<canvas id="main_canvas" width="720" height="750"></canvas> <!-- 修正 -->
</div>
...(略)...
このコードでは、描画領域となるcanvas要素を定義しています。ここでは、キャンバスを特定するためのcanvas_idをmain_canvas、キャンバスの幅と高さをそれぞれ720x750として設定しています。このcanvas_idは、後ほどJavaScriptで対象キャンバスを指定する際に必要となります。