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 3.0のComposition APIを使ってみた

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

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

js

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

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

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年2月
 1234
567891011
12131415161718
19202122232425
262728 

アプリ情報

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