お絵描きデータをPOSTする
HTMLのフォームにある送信ボタンが押された際、JavaScriptを使用して、お絵描きデータをdrawページ自身へPOST送信する処理を作成します。 ここであえてJavaScriptを介在させる理由は、お絵描きのベジェ曲線データがクライアントサイド（main.js内の変数）で保持されているためです。フォーム送信時にこのデータを動的に含める必要があります。
「js」→「main.js」ファイルを実装する
js/main.jsファイルにpostForm関数を追加し、POST処理を実装します。具体的には、JavaScriptを用いて<form name="myform">内に隠しフィールド（<input type="hidden">）を動的に生成し、そこにお絵描きデータをセットして送信します。
(前略)
// 絵をPOSTする
function postForm(event) {
let form = document.myform;
let request = document.createElement('input');
let xy = _pos[0].toString();
for ( let i = 1; i < _current*4; i++ ) xy += "," + _pos[i];
request.type = 'hidden';
request.name = 'xy';
request.value = xy;
form.appendChild(request);
form.submit();
}
サンプルコードの解説
<form>タグの「name」がmyFormを「form」変数に代入します。
お絵描きデータを文字列にして「xy」変数に代入します。
<input>タグを「request」変数に代入し非表示にし、nameを'xy'にし、「value」にxy変数を代入します。
form変数の子にrequest変数を追加し、「submit(登録)」してPOSTを実行します。
「pages」→「draw.py」ファイルを実装する
「pages」→「draw.py」ファイルを次のように追記し、タイトルと名前とコメントとお絵描きデータをPOSTするフォームをHTML5文書に出力します。イベントリスナーでボタンがクリックされたらmain.jsファイルのpostForm関数を呼び出してPOSTします。
def html(form,con,cur):
print('''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お絵描き - 一筆書きBBS</title>
<link href="css/pc.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1023px)" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="left">
<header>
<h1>お絵描き</h1>
<nav>
<a href="?page=home">HOME</a>
<a href="?page=draw">DRAW</a>
<a href="?page=about">ABOUT</a>
</nav>
</header>
<h2>記事投稿</h2>
<form name="myform" method="post" action="?page=draw">
<input placeholder="ここにタイトルを書く。" name="title" />
<input placeholder="お名前" name="speaker" />
<textarea placeholder="ここにコメントを書く。" name="sentence"></textarea>
<button name="btn">送信</button>
</form>
<h2>操作方法</h2>
<ul>
<li>クリック＆ドラッグで曲線を描けます。</li>
<li>マウスホイールでアンドゥやリドゥできます。</li>
<li>「送信」で絵を掲示板に載せられます。</li>
</ul>
<script>
document.myform.btn.addEventListener('click', function(event) {
postForm(event);
});
</script>
''')
サンプルコードの解説
<form>タグで「index.py?page=draw」にPOSTを用意します。
POSTに使うタイトルの"title"パラメータを<input>で作ります。
POSTに使う発言者の"speaker"パラメータを<input>で作ります。
POSTに使うコメントの"sentence"パラメータを<textarea>で作ります。
送信ボタンを作ります。
<script>タグでJavaScriptを記述し、送信ボタンが'click'されたらpostForm関数をJavaScriptで呼び出します。
