JQueryでformにinput要素を足していく

はじめに

最近個人的にディープラーニングの勉強をしているtonnyです。
ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。

今回はその作成の中で、今まであまりやってこなかった、JQueryを使用してformタグにinput要素を追加することを実践したので、そちらについて記述したいと思います。

環境

• JQuery 1.12.4
• Python 3.6.0
• bottle 0.12.13 （PythonのWebフレームワーク）
• heroku

作成したWebアプリ

https://python-mahjang.herokuapp.com/index

簡単に言えば、競馬の予想屋と同じです。

• 配牌（13枚）の形を見て、過去の学習結果から「アガれる」か「アガれないか」の判定をします。
• 役などは考えておらず、あくまで形になります。

実際のソースコードは下記に公開しております。
https://github.com/naoki85/python_mahjong

ビューで困ったところ

配牌選択画面で配牌を選んでもらい、結果画面にリストで渡して計算させています。
formを使用するのが一般的かとは思いつつも、全ての牌のチェックボックスを用意するのは、使いづらくなるだけです。
また、麻雀では同じ牌が4枚ずつ存在するので、同じ牌も選択できるようにする必要があります。

苦肉の策で私が考えたことは、

1. 牌を表示するエリアとフォームエリア作成
2. フォームエリアには、はじめはsubmitボタンしかない
3. それぞれの牌にvalue属性で数値を与えておく
4. 牌がクリックされたとき、その牌のvalueの値を持ったinputをフォームエリアに追加する

この考えで書いたJQueryのコードは下記になります。
（長いので、HTML部分は割愛します。）

<script>
$(function() {
    var selected_count = 0;
    $('.tile').on('click', function() {
        selected_count += 1;
        if (selected_count > 13) {
            alert('選択できるのは13枚までです。1度リセットしてください。');
            return;
        }
        tile = $(this).val();
        html_input = '<input name="tile" type="hidden" value="' + tile + '" />';
        html_img = '<img src="img/' + tile + '.gif">';
        $('form').prepend(html_input);
        $('form').prepend(html_img);
    });
});
</script>

基本的な流れは先ほど記載した通りです。

14枚以上選択されても計算できないので、簡単なバリデーションも設けてあります。

appendではなくprependを使用しているのは、formタグの最後に追加してしまうと、submitボタンよりも後ろにきてしまうためです。

こんな感じのビューができました！

さいごに

スマホでこのWebアプリを見ると、小さくてとても押せたものではないかと思います。
ディープラーニングの勉強のためとはいえ、せっかくであれば笑いの種になるようなものは作りたいので、レスポンシブも意識したビューに修正していこうと思います。