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


関連記事

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

[Next.js]FirestoreのデータをServer Componentから取得する

1 はじめに2 Next.jsでFirestoreからデータを取得する方法2.1 Client Componentで直接Firestoreから取得2.2 Route Handlerを使ってAPI化し、 ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

フォロー

blog-page_side_responsive

2017年2月
 1234
567891011
12131415161718
19202122232425
262728  

アプリ情報

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