スーパーセントウです！
先月に公開した競馬ゲーム
↓↓↓こんな感じのゲームです。
１着を当ててもなんの配当も商品もないゲームです。
使い方を考えました。
実現はしませんでしたが、POGドラフトで選択馬が被った場合に
UMATOME記念を使うことにしていました。
もう一度言います。
実現しませんでした・・・。
使いたかった・・・。
例えば２人がくじ引きする場合。
それぞれ馬を選んでもらいます。
レース終了時に先着した方の勝ちということです。
８人まで使えます！
これは考えたというか成り行き上、発生した使い方です。
イヤイヤしている子どもに見せて、
馬を選ばせてレースを見せます。
これでなににイヤイヤしていたか忘れます。
うちの子限定かもしれません(笑)
選んだ馬を一緒に応援するのがポイントです。
今のところ選んだ馬が勝たなくても満足しているのですが、
そのうち勝つまでやるようになるのが恐いですね。
今まで作ったアプリケーションの中では圧倒的に実用しやすいので、
今後も模索していきます。
スーパーセントウです！
回収率計算機のリニューアルについて書きます。
大幅なデザイン変更をしました。
←旧 新→
変更点と方法を１つずつ書いていきます。
デザインうんぬんの前にずっとやりたかったことはこれです。
旧を見てもらうとわかりますが、0を初期表示しています。
これはnull値の場合計算エラーになってしまうからでした。
虚弱な仕様ですね(笑)
この0のおかげでとにかく入力がやりにくい・・・。
そんな悩みをついに解決しました。
参考にさせてもらった資料はQiitaの以下です。
javascript側で
a[0] = document.form3.txtA0.value;
と受けているのですが、
if (!(document.form3.txtA0.value)) {
a[0] = 0;
}
このようにnull値の場合のチェックを加えました。
リニューアル当初やりたかったことはここまでです。
ここからはデザインの変更についてです。
枠の神様はじめ他にもよく使っている
に統一しました。
若干無機質になった印象です。
回収率計算機におけるボタンは３つ。
・ファイルアップロードボタン（input type=”file”）
・計算ボタン（input type=”image”）
・ファイルダウンロードボタン（input type=”image”）
下部の２つは画像に置き換えているのでいいとして、
ファイルアップロードボタンは直接デザイン変更することができない仕様とのことで、
初期表示させていました。
これがとにかください(笑)
参考にさせてもらったページは以下です。
input type=”file”のボタンデザインを変更する方法
つまり、inputタグを非表示（style=”display:none;”）し、
labelタグでラベル化してしまうという手法ですね。
旧との違いはこうすることで選択したファイルのファイル名を表示させる
機能がなくなったことです。
表示するやり方もjavascriptを追加すればできそうでしたが、
いったんここまでとしました。
上を変更したら画像だった下部のボタンと雰囲気がことなってしまったので、
imageをbuttonに変更し、要領はfileのときと同様にlabelで囲ってCSSでデザインしました。
ダウンロードボタンのほうはダウンロード機能のために
<a>タグを利用しているので直接<a>タグにCSSでデザインしました。
どんなに色を変更してもダサい感じだったのは表ですね。
参考にさせてもらったページは以下です。
レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS]
個人的好みで横の罫線のみにしました。
欧米では縦の罫線を引かないとか噂で聞きましたが、
本当なのでしょうか？
最後に色をシンプルに変えました。
あまり色を使いすぎないのがかっこいいと昨年学びました。
（デザイン系のお仕事の方から）
カラーパレットによく使わせていただいている
を利用し、もともと緑っぽいページだったので、
引き継いだような、もはや別物なような・・・
かっこよくなりました！
多少使いやすくなったと思いますので、
誰かの役に立てたら幸いです。
※webページですが、一応スマホでも使えます。
p.s 回収率レースのために作ったのにレースする機会が・・・
[ad#co-1]
今話題（？）の４月８日生まれ！スーパーセントウです！
こんな感じでこの日がフューチャーされるの嫌だなー
今回たぶん誰も使っていないうちのページ
を更新しました！
＜変更点＞
入力フォームをhtml5の<input tel>にしました。
元々は<input text>でした。
PCから使う人には違いが全くわからないと思います。
唯一の利用者である私はスマホで使います。
（競馬場にPC持ってくことは少ないので）
スマホで見ると今まではこんな感じでした。
入力フォームにカーソルを合わせると、
文字入力用のフリック入力が表示されます。
これだと数字を入力するために切り替えないといけません。
今回の更新版ではこうなります。
入力フォームにカーソルを合わせると、
いきなり数字が入力できるようになりました！
telにすると電話番号入力用のテンキーが出るようです。
ちなみにhtml5ってのは新しい規格なので、
対応しているブラウザでしかこうならないようです。
これで若干使いやすくなったかなー。
次回競馬場参戦時にお試ししてみます。
[ad#co-1]