この記事は「HTMLでトーナメントの作成」をテーマに、連載のような形でいくつかの記事で一つになるようにしています。
まとめページとして以下の記事をご参照ください。
リンク：トーナメントの作成まとめ記事
機能策定、HTML（草案）作成
本ページではトーナメント表作成に向け、
どんな機能を持たせるかとベースとなるHTMLの下地を作ります。
ゴール地点を決めなければ進むことはできません。
HTML・JavaScriptを作るにあたっては、
表示されるベースのHTMLを仮置きでいいので作っておくことが大事です。
機能策定
まずは実装したいことを列挙します。
①トーナメント表を簡単に表示･更新したい
②参加者リストか参加人数で山の数を決めたい
③山の数は2の累乗で固定（★）
④トーナメントを作った後に、参加者名を変更したい
⑤トーナメントの結果をCSVで保存、読み込んで再開できるようにしたい
★ 6人トーナメントなら、8人分枠を作って2人空欄(不戦敗)にすれば実装が楽になるという目的。シードにして山の形が崩れるとその分考えないといけない。
全て2の累乗にそろえることでフラクタル構造みたいにとらえれば、同じ処理の繰り返しでトーナメント表を作成できる。
①の目標達成のため、ブラウザがあれば誰でも動かせるHTML・JavaScriptをベースに決定。
②③で処理の構造をふんわりとイメージ。多分再帰処理でいいだろう（再帰にした）。入力ページと表示ページに分けたほうがいいかな。
④はトーナメントの一番下の段をテキストボックスにして編集可に、また変更があったときにリフレッシュする必要がある。一番下以外は逆に変な編集はされたくないのでセレクトボックスで制限する。
⑤は少し毛色が違うので別にして考える。（何なら一旦忘れる）
ここで根本の問題と向き合います。
トーナメントの線をどのように引くか。
テキストの横棒縦棒で表現しているものが既存であったり、以前自分でExcelベースでやったときは枠線に色を付けて表現しました。
しかし、HTML5なら自由度が高く描画ができる機能【Canvas】があります。使い方は調べながらでいいから、これを使ってみましょう。
やること
ダーッと考えを口走りましたが、ここでやることの道筋を整理。
- HTML・JavaScriptで作る
- 入力用ページと表示用の2ページ用意
- テキストボックスとセレクトボックスで名前を表示、更新する
- Canvasで線を引く
- 処理構造はフラクタルをイメージして使いまわす
さしあたってはこんなイメージ。
HTML（草案）作成
やりたいことはイメージできたので、次はとりあえず白紙のページを用意。
以下の4ファイルを同じディレクトリに準備。
input.html
main.html
style.css
tournamentJs.js
jsファイルは後々いっぱい書くのでおいといて、まずはHTMLのガワを作ります。
白紙のHTML
HTML5で記述するため、以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>初期設定</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./tournamentJs.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
取りあえず中身のない白紙ページです。
jQueryをどうせ使うので読み込めるようにしておきます。
同じようにmainも書き込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./tournamentJs.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
ブラウザで開いて、何もエラーがなければOK！
入力欄・ページ遷移を実装
白紙のページができたら、次は入力欄を作ります。
input.htmlの<body>にテキストボックス2つとボタン1つを加えます。
<body>
<div class="inputBlock">
<div class="inputSet">
<input type="text" name="names" value="" placeholder="参加者名" />
</div>
<div class="inputSet">
<input type="text" name="names" value="" placeholder="参加者名" />
</div>
<div class="edit">
<button class="btn" onclick="openPage();">トーナメントを作る</button>
</div>
</div>
</body>
inputのname属性を同じにすることで、それぞれの値を配列として受け取れます。
表示してみましょう。
テキストボックスとボタンが表示されました。
しかしまだ、押しても何も起きません。onclickイベントの"openPage"を実装します。
少し上に戻って<script>にJavaScriptを書きましょう。
<head>
<script type="text/javascript">
function openPage() {
window.location.href = './main.html';
}
</script>
</head>
これでボタンを押せばmain.htmlに移動するはずです。
やってみましょう。
無事mainページに移動することができました。
次回はテキストボックスから値を受け取って表示、および
Canvasの使い方をやっていこうと思います。
リンク：トーナメントの作成まとめ記事