FrontEnd

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

投稿日:2017年2月26日 更新日:

はじめに

最近個人的にディープラーニングの勉強をしている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部分は割愛します。)

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

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

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

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

さいごに

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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年2月
 1234
567891011
12131415161718
19202122232425
262728 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。