Into the Horizon

programming, photography, and daily log

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の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メモ

  • 毎回cssで時間使ってしまう。。いい加減覚えるためにメモ
  • 以下、スマホのブラウザでアプリっぽい画面にするためのcss。仕様は
    • ヘッダとフッタあり。フッタは画面下部固定。スクロールなし(厳密にいうと、contents要素はスクロールできる)
    • 横幅は、スマホ:画面最大 PC:画面中央に最大700px
    • 縦幅も、スマホ:画面最大 PC:最大900px
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。
<meta name="viewport" content="width=device-width, ">



開発は次のアニメーションあたりが鬼門。しかし順調に新しい技術に触れられてて楽しいね。