はじめに
最近個人的にディープラーニングの勉強をしている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枚ずつ存在するので、同じ牌も選択できるようにする必要があります。
苦肉の策で私が考えたことは、
- 牌を表示するエリアとフォームエリア作成
- フォームエリアには、はじめはsubmitボタンしかない
- それぞれの牌にvalue属性で数値を与えておく
- 牌がクリックされたとき、その牌のvalueの値を持ったinputをフォームエリアに追加する
この考えで書いたJQueryのコードは下記になります。
（長いので、HTML部分は割愛します。）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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アプリを見ると、小さくてとても押せたものではないかと思います。
ディープラーニングの勉強のためとはいえ、せっかくであれば笑いの種になるようなものは作りたいので、レスポンシブも意識したビューに修正していこうと思います。
