読者です 読者をやめる 読者になる 読者になる

ぱろっと・すたじお

技術メモなどをまったりと / my site : http://parrot-studio.com/

「チェンクロパーティーシミュレーター」を公開しました

サービス Ruby Rails jQuery MySQL ccpts

昨年からだいぶはまっていた「チェインクロニクル」ですが、
そのパーティー構成を編集して共有するサイト、
「チェンクロパーティーシミュレーター」を公開しました


Get our light! - チェンクロパーティーシミュレーター
(現時点ではまだβ版としています)

経緯

セガさんが「サポーターサイト」というのを募集し始めまして、
素材利用申請をしようとしたところ、
まずサイトを登録する必要があることが判明しましてΣ(゚Д゚)ガーン

セガR&D1サポーターズサイト

そこで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等できっちり書くやり方は面倒すぎるので、
もっと楽な方法はないかな・・・と

そこで見つけたのがこれです(´・ω・)っ

http://hammerjs.github.io/

これを読み込ませて、先ほどのコードをこう直します

$("#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」というのを発見

http://touchpunch.furf.com/

こちらは読み込ませるだけでタブレット対応できてしまうので、
hammer.js以上に簡単です(`・ω・´) b

ただ、hammer.jsと同時に使う場合、
裏で使っているイベントが競合する場合がある*4ようで、
イベント登録する要素を工夫するとか、気をつけないといけません

3. デザイン周り

プロトタイプからたぶん3周くらい回って今のUIにしてますが、
それでもまだ微妙な感じがします(´-ω-)

チェンクロは「横画面のUI」で、アルカナは「縦表示」なので、
そこをデザインの基本にしました

ぶっちゃけ、アルカナを横長にして縦に積み重ねた方が、
デザインを考えやすかったのですが、
やはりゲームにあわせたかったので・・・

一方で、Twitter経由でサイトを見た際に、
Twitterはどうしても縦画面で見るのもあって、
やはり違和感がある、という意見もいただきました

せっかくBootstrapを使っているわけで、
画面の幅に合わせてデザインを変えられるのがベターですが、
まずは基本的な部分だけリリース、ということで、一つ(´・ω・`)

"全部"対応してから・・・とかやっていると、
いつになってもリリースできませんからね・・・

一方で、「どこを最小限とするか?」は、
「これは何をするためのサイトなのか?」が定義されていないとわからないので、
やっぱりコンセプト設計は大事です*5




追記

そもそもPC/タブレットを想定していたとはいえ、
それ以外のデバイスで画面がめちゃくちゃってのも気分が悪いので、
閲覧機能だけ暫定対応しました

「タッチで操作する」という前提なので、
スマフォの縦長画面だと操作しづらいのは見えているのですが、
どうしたものですかね・・・(´-ω-)

それにしても、classを指定するだけで、
ここまでさくっと表示/非表示やデザインを変更できるあたり、
やはりBootstrapはすばらしい・・・

追記2

どうでもいい話ですが、開発中はハッシュタグを「#ccpt」で考えていたところ、
Twitter検索してみたら海外で何かに使われていたので、「#ccpts」に変更しました

こういう名前空間の調査を適当にやっちゃうと、
いろいろあとで面倒ですからね・・・(´-ω-)

*1: というより、すでに2本書いていて、一方が滞っているのに、さらに増やしても・・・という(´-ω-)

*2: 個人的に想定しているのはiPad mini

*3: うちのチームは全員チェンクロをやっていて、専用のメーリングリストまであったりΣ(・ω・ノ)ノ

*4: おそらくどちらもtouchstart/touchendで何かするという処理のはず・・・ちゃんと見てませんが

*5: アジャイルサムライの「インセプションデッキ」がわかりやすいと思います

広告を非表示にする