Backboneのモデルについて&スマホ用CSSのメモ
相変わらず勉強のためゲーム製作中です。(前回:Ruby on Rails + Backbone.js でゲーム製作中 - nullnull7の日記)
進捗は
- backboneの土台の部分は書き終わり。あとはゴリゴリとイベント書いていく
- jsのアニメーションのライブラリを調査した
- tmlib.js辺りがお手頃そう。
- enchant.jsはtmlibより学習サイト充実してるが若干遅かったりな印象
- create.jsやpixi.jsは性能良いがちょっと高機能すぎる印象
- smart.jsはお手軽で使ってみたいがさすがにシンプルすぎる印象
- デザイン見直した
- デザイン決まらず死ぬほど時間かかっている。。。
- デザインも頑張りたいところだけど、時間かけてできるものでもないので、見切りをつける必要。といつも思う(ができない
- 開発環境を整えたりいろいろ。
- 今はhtml/cssを書いてる途中
今日はbackboneの感想とcssのメモ晒しておきます。
Backbone.js使ってみた
- Backbone.js入門 – 初学者の為のロードマップ | mawatari.jp これの4までさらっと勉強して、開発入った。coffee scriptも初なのでちょい勉強。
- フロント側をMVCにするの楽しい。
- Viewとのデータバインディングも何書けばいいか分かりやすい
- わかりやすいが色々コード書く必要はある。書きたくないならAngular使おう。
- 総じて今の所幸せ
BackboneのModelについて
- Backboneは「APIとやりとりしてデータを取得/永続化」を、urlRootさえ決めておけば、
model.save()
,model.fetch()
だけで実現できて非常に便利 - が、今回はそのメリットを全く享受していない。なぜなら、クライアント側がモデルを更新することがないから。
- 作ってるのはRPG風のゲーム。クライアント側がリクエストするのは「攻撃」とかのコマンド、レスポンスは更新されたモデルのデータ。
- そんな時にどうモデルを書くべきか?参考になる例があまりなく、とりあえず以下のように書いた。
- 以下では
communicator.battle_attack
すると、APIにrequestしてモデルがupdateされる。
- 以下では
class Mahoroba.Models.Communicator extends Backbone.Model request: (url) -> $.ajax(url, type: "GET" dataType: 'json' data: {} ) update: (data) -> @user.update(data.user) @cell.update(data.cell) @battle.update(data.battle) request_and_update: (url) -> @request(url).done (data) => @update(data) battle_attack: (target_id) -> url = "/api/battle/attack/" + target_id @request_and_update(url).done => return true
- あまり綺麗ではないし、もっとベストプラクティスありそう。
- 特に並列処理する必要今の所ないのでやらなかったが、ハンドラ定義してupdate終わったら呼び出す、とかやっても良いと思う
- …これ書いてて、requestが失敗したときのこと考えてなかったことに気づいた(
- 後で書く……
スマホ用のCSSメモ
html { height: 100%; // これで縦幅最大にできる。 } body { height: 100%; font: 100% $font-stack; color: $primary-color; font-size: 15px; margin: 0 auto; //デフォルトで少し設定されてしまっているので。 } #myapp { word-wrap:break-word; width: 600px; max-width: 100%; height: 900px; max-height: 100%; margin: 0 auto; position: relative; } //ヘッダは適当に // 固定フッター .footer-fixed { position: absolute; //単に画面下部固定にするならfixedでOK。PCを考えてabsoluteに bottom: 0px; left: 0px; width: 100%; height: 100px; }
- あとはhtmlに以下を記述。これにより、スマホブラウザが自分のデバイスのwidthを100%として設定してくれる。
- ちなみにdevice-heightは、あくまでdevice-heightであり、ブラウザのアドレスバーなどを考慮していないので基本使えない。
- ここで若干はまった。。heightの場合は単純にhtmlで100%指定すればOK。
- ちなみにdevice-heightは、あくまでdevice-heightであり、ブラウザのアドレスバーなどを考慮していないので基本使えない。
<meta name="viewport" content="width=device-width, ">
- ※minimal-uiを使えばブラウザのアドレスバー隠してフルスクリーンで使えると噂で聞いていたのだけど、いつのまにか仕様なくなってて鬱orz
- 読み込み時にjsのscrollToで動かしてやって隠すという技もあるそうだが、実機でうまくいかなかった。(参考:iPhone の Safari でアドレスバーを隠すときにやってはいけないこと - メモ用紙)
開発は次のアニメーションあたりが鬼門。しかし順調に新しい技術に触れられてて楽しいね。