ランダムにベジェ曲線の図形を描画する
やっと本来の目的である「SQLite3」のデータベースを使ったプログラミングをします。SQL文については前回学習しました。このページでは新たなSQL文も出てきます。
完成すると、次の図のようなWebページをXAMPPのWebサーバで表示できるようになります。
「pages」→「about.py」ファイル
「pages」→「etc.py」ファイルから「random_load」関数を呼び出して、ランダムな「id」番号のベジェ曲線の図形を描画します。
import pages.etc as etc
def html(cur):
print('''
(中略)
''')
etc.random_load(cur)
サンプルコードの解説
import文で「pages」→「etc.py」ファイルを「etc」モジュールとして読み込みます。
etcモジュールのrandom_load関数を呼び出します。
SQL文のSELECTでベジェ曲線データを取得する
SQL文のSELECT文を実行して、JavaScriptからloadPos関数にxyカラムの引数を渡します。
恐らくこのMAX（id）ではarticle（記事）カラムの途中のidの行が削除されていた場合、削除されたid番号も含まれるため、何も表示されないことがある可能性があります。ですが、本連載で記事を削除することはないので、その心配はいらないかもしれません。削除要請があった場合は何らかの対策を考えてください。
def random_load(cur):
xy = ''
sql = 'SELECT xy FROM article WHERE id = (SELECT ABS(RANDOM()) % (SELECT MAX(id) FROM article) + 1) LIMIT 1;'
for row in cur.execute(sql):
if row[0] != None:
xy = row[0]
if (xy != ''):
print('<script>loadPos("{}");</script>'.format(xy))
サンプルコードの解説
SQL文は、articleテーブルのidカラムの最大値（MAX）を乱数（RANDOM）で除算した余りに1を加算したid番号のところの、xyカラム（ベジェ曲線データ）を取得します。
SQL文を実行したら、レコード行の文字列をJavaScriptのloadPos関数に出力します。
JavaScriptで文字列からベジェ曲線を読み込む
「js」→「main.js」ファイルは第1回で解説したものに、次のサンプルコードを追記します。「loadPos」関数は文字列「str」引数の各数値をベジェ曲線の「_pos」配列に追加します。
(前略)
// 読み込み関数
function loadPos(str) {
let pos = [];
let xy = str.split(',');
for (let i = 0; i < xy.length; i++) pos.push(parseInt(xy[i]));
if (pos.length > 0) {
_pos = pos;
_current = _pos.length/4;
}
}
サンプルコードの解説
JavaScriptのloadPos関数はPythonとは別のプログラミング言語です。
str引数を「,（カンマ）」区切りで文字列を配列にします。それを整数化（「parseInt」関数）して、「pos」配列に追加（push）します。pos配列の要素数が0より大きければ_pos配列に代入し、現在の頂点（_current）を_posの最後の頂点にします。
おわりに
今回はPythonでデータベースを利用して一筆書きBBSのアバウトページを表示しました。データベースからベジェ曲線データも取得して一筆書きの図形も表示しました。
次回は今回と同様に一筆書きBBSのトップページを表示する解説をします。
