はじめに
とりあえずなんかボタン作って python 経由でデータが取得したなぁって思って
ガワは割となんでもいいんだけど...。目標点としては、データを取得して動的にグラフの作成をしたい。adoのRecordset型をボンと渡せば表を作ってくれるのがあるといいなぁ。HTMLの「テーブル」はちょっと苦手感あるぜ。デザイン的に...ｗ
#参考ページ
・Python3のインストール
開始
今回は「basic_js_graph」というフォルダを作って練習する。
chart.js は（かつては js をダウンロードして html がそこをのぞくというカタチだったが）いまは CDN という機能を利用し、ライブラリに直リンするほうがいい。
STEP1: index.htmlを作る
・index.html を新規作成
・まだ空っぽのhtmlファイル上で ! を押して tab を押すと、VSCodeがhtmlテンプレートを作ってくれる。すご！
・赤い枠で囲んだ範囲が今回編集した場所（ script のタグだけは手打ちしたけどその他は getting-started からコピペした）
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<!-- chart.js -->
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
STEP2: Webサーバーを起動する
Pythonは簡易Webサーバー機能を持っている。
Webサーバーを一言で説明するのは難しいが、要はブラウザに「http://localhost:8000/」と打ち込んだらさっき作ったグラフが表示されるようにしようぜってこと。
・simpleserver-startup.py を新規作成
・赤い枠で囲んだ範囲が今回編集した場所
・VSCodeのターミナルで「basic_js_graph」に移動して「python simpleserver-startup.py」と打ち込んで実行
・サーバーが起動し、待受状態になる
ソース
import http.server as server
server.test(HandlerClass=server.CGIHTTPRequestHandler)
STEP3: ブラウザで確認する
これはまだ、サンプルコピペでデータが表現されているに過ぎない。しかし表現されたのは大きいね
これで、「ブラウザアドレスバーからのHTTPリクエストに対してHTMLファイルを返す」とこまで行ったようだ。
よし！いったん「Ctrl + C」でサーバを終了。
サーバを終了したあとに F5 で更新するとこの通り。
#つぎは？
pythonからdbにアクセスする（A）、[ブラウザアドレスバーからのHTTPリクエストに対してHTMLファイルを返す（B）まで行ったので、その間の部分を作って「ブラウザアドレスバーからのHTTPリクエストに対して動的なグラフHTMLファイルを返す」をつくる