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


関連記事

js

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

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

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

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

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

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

フォロー

blog-page_side_responsive

2017年2月
 1234
567891011
12131415161718
19202122232425
262728  

アプリ情報

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