「チェンクロパーティーシミュレーター」を公開しました
昨年からだいぶはまっていた「チェインクロニクル」ですが、
そのパーティー構成を編集して共有するサイト、
「チェンクロパーティーシミュレーター」を公開しました
Get our light! - チェンクロパーティーシミュレーター
（現時点ではまだβ版としています）
- 関連
- ソースコード
経緯
セガさんが「サポーターサイト」というのを募集し始めまして、
素材利用申請をしようとしたところ、
まずサイトを登録する必要があることが判明しましてΣ(ﾟДﾟ)ｶﾞｰﾝ
そこでBlogでも書き始めようかと思ったのですが、
あまりしっくりこなかった*1ので、
いろいろ考えた結果、こういうサイトになったという・・・
元々、私はROを長いことやっていて、
こういった便利ツールにはさんざんお世話になったのもあり、
チェンクロでも何か作れないかな・・・と
アーキテクチャ
今回のサイトはできるだけブラウザ上で完結させることを目指しましたが、
それ以上に「タブレット*2での動作」を意識しました
ずっと「PC向けだけど、たまたまタブレットでも動く」ってサイトばかりだったので、
「タブレットで "快適に" 動く」というのはやったことがなかったのです
時代的にPCよりタブレットやスマフォデバイスがメインになってますし、
そもそもチェンクロ自体、タブレットでプレイしているわけで、
タブレットで動くのは必須だろうと
タブレット向けに調整するまでのメモ
サーバ側のAPIは（得意分野なので）あっという間にできたものの、
そこからView側を調整するのにひたすら時間がかかりました(´-ω-)
せっかくなので、引っかかったポイントを覚えている範囲でメモしておきます
1. clickイベントの動作
ボタンでもリンクでも、たいていのものは「クリック」できるわけで、
clickイベントは相当使いまくります
$("#search").on 'click', (e) -> searchTargets() e.preventDefault()
例えば「検索ボタン」のコードがこれですが、
PCだけ考えればこれで十分すぎます
でも、このままタブレットで動かすと、
タップしてからの反応が恐ろしいほど遅いです
「あれ？ 動かない？」と思う程度のラグがあります(´･ω･`)
原因はモバイルブラウザにおけるイベント処理にあるわけですが、
モバイルブラウザで「click」イベントを処理する前に、
大量のイベント判定をしているようなのです
http://patrickhlauke.github.io/touch/tests/results/
そこでいろいろ調べてみたのですが、
touchstart/touchend等できっちり書くやり方は面倒すぎるので、
もっと楽な方法はないかな・・・と
そこで見つけたのがこれです(´･ω･)っ
これを読み込ませて、先ほどのコードをこう直します
$("#search").hammer().on 'tap', (e) -> searchTargets() e.preventDefault()
すると、PCではclick、タブレットでは「それっぽいタップ動作」になり、
非常に簡単ですヽ(`･ω･´)ノ
Railsに組み込むためのgemもあります
https://github.com/vincent-pochet/hammerjs-rails
2. ドラッグアンドドロップの実装
いつもの私ならこの辺でリリースレベルなので、
データの入力とかちまちま進めていたのですが、
試しに会社の人*3に軽くいじってもらったところ・・・
「ドラッグアンドドロップができないのが違和感」
・・・と言われましたΣ(ﾟДﾟ)ｶﾞｰﾝ
元々、「候補をクリック -> PT欄をクリック」という操作だったのですが、
このデザインだと「（アルカナ自体を）動かしたくなる」、と
最初に設計していた時点で、「ドラッグアンドドロップ」は考えていたものの、
とりあえずプロトタイプを・・・ということでスルーしてしまったのですが、
やはり対応しないとダメでした(´･ω･`)
これもやり方はいろいろあるものの、
面倒なのでjQueryUIを使うことにしました
ただ、さっきのclickイベントより深刻で、
PCで動くように実装しても、タブレットでは全く動きませんΣ(・ω・ノ)ノ
そこでまた調べたところ、「jquery.ui.touch-punch.js」というのを発見
こちらは読み込ませるだけでタブレット対応できてしまうので、
hammer.js以上に簡単です(｀･ω･´) ｂ
ただ、hammer.jsと同時に使う場合、
裏で使っているイベントが競合する場合がある*4ようで、
イベント登録する要素を工夫するとか、気をつけないといけません
3. デザイン周り
プロトタイプからたぶん3周くらい回って今のUIにしてますが、
それでもまだ微妙な感じがします(´-ω-)
チェンクロは「横画面のUI」で、アルカナは「縦表示」なので、
そこをデザインの基本にしました
ぶっちゃけ、アルカナを横長にして縦に積み重ねた方が、
デザインを考えやすかったのですが、
やはりゲームにあわせたかったので・・・
一方で、Twitter経由でサイトを見た際に、
Twitterはどうしても縦画面で見るのもあって、
やはり違和感がある、という意見もいただきました
せっかくBootstrapを使っているわけで、
画面の幅に合わせてデザインを変えられるのがベターですが、
まずは基本的な部分だけリリース、ということで、一つ(´･ω･`)
"全部"対応してから・・・とかやっていると、
いつになってもリリースできませんからね・・・
一方で、「どこを最小限とするか？」は、
「これは何をするためのサイトなのか？」が定義されていないとわからないので、
やっぱりコンセプト設計は大事です*5
追記
そもそもPC/タブレットを想定していたとはいえ、
それ以外のデバイスで画面がめちゃくちゃってのも気分が悪いので、
閲覧機能だけ暫定対応しました
「タッチで操作する」という前提なので、
スマフォの縦長画面だと操作しづらいのは見えているのですが、
どうしたものですかね・・・(´-ω-)
それにしても、classを指定するだけで、
ここまでさくっと表示/非表示やデザインを変更できるあたり、
やはりBootstrapはすばらしい・・・
