enchant.jsをRails上で動かした話

by ryonext

Slide 1

Slide 1 text

enchant.jsΛRails্Ͱ ಈ͔ͨ͠࿩ @ryonext 13೥5݄15೔ਫ༵೔

Slide 2

Slide 2 text

ࣗݾ঺հ • Twitter ID: ryonext • ࢓ࣄͰRails΍ͬͯ·͢ɻ 13೥5݄15೔ਫ༵೔

Slide 3

Slide 3 text

͜Εʹ͍ͭͯ࿩͠·͢ http://bearsheaven.herokuapp.com/ 13೥5݄15೔ਫ༵೔

Slide 4

Slide 4 text

enchant.js • ήʔϜ࡞Γʹ޲͍ͨjsϑϨʔϜϫʔΫ • http://enchantjs.com/ja/ 13೥5݄15೔ਫ༵೔

Slide 5

Slide 5 text

jsdo.it http://jsdo.it/ 13೥5݄15೔ਫ༵೔

Slide 6

Slide 6 text

ڈ೥࡞ͬͨήʔϜ 13೥5݄15೔ਫ༵೔

Slide 7

Slide 7 text

Rails্Ͱಈ͔ͯ͠είΞอ ଘͱ͔ͯ͠ΈΑ͏ͱࢥͬͨ 13೥5݄15೔ਫ༵೔

Slide 8

Slide 8 text

• enchant.jsͷίʔυ͔Βී௨ͷjs΍DOMཁૉ ͷૢ࡞͕Ͱ͖ΔͷͰՄೳ ࣮ࡍͰ͖Δͷ͔ʁ 13೥5݄15೔ਫ༵೔

Slide 9

Slide 9 text

109 # ήʔϜຖϑϨʔϜͷॲཧ 110 game.rootScene.addEventListener Event.ENTER_FRAME, -> 111 #ϠϥϨνϟολʁ 112 if player.status is STATUS_CRY 113 if player.y > CHARACTER_Y && gameOver is false 114 gameOver = true 115 sendScore(game.score, difficult.text, game.max_magnification) ࢮΜͩͱ͖ͷॲཧ͜ͷลͰɺ enchant.jsͱؔ܎ͳ͍jsॲཧ͕ී௨ʹͰ͖Δ 13೥5݄15೔ਫ༵೔

Slide 10

Slide 10 text

• είΞొ࿥ͷControllerͱModelΛ࡞ͬͯɺjs ͔ΒݺΜͰ͋͛Ε͹OK 13೥5݄15೔ਫ༵೔

Slide 11

Slide 11 text

JSଆ 13 postScore = (score, difficulty, name, magnification) -> 14 $.ajax 15 url: "/games", 16 type: 'POST', 17 dataType: 'json', 18 timeout: 1000, 19 data: { 20 score: { 21 name: name, 22 point: score, 23 difficulty: difficulty, 24 magnification: magnification 25 } 26 } 27 success: -> 28 $.notifyBar 29 html: "success!", 30 delay: 2000, 31 animationSpeed: "normal" 13೥5݄15೔ਫ༵೔

Slide 12

Slide 12 text

Railsଆ 1 class GamesController < ApplicationController 2 def new 3 render :layout => false 4 end 5 6 def create 7 score = Score.new(params[:score]) 8 score.save! 9 render json: {status: true} 10 end 11 12 def index 13 @scores = Score.order("point desc").limit(10) 14 end 15 end ͜ΕݺΜͰΔ 13೥5݄15೔ਫ༵೔

Slide 13

Slide 13 text

ଞʹ΍ͬͨ͜ͱ • CoﬀeeScriptԽ • assets pipelineରԠ 13೥5݄15೔ਫ༵೔

Slide 14

Slide 14 text

CoffeeScriptԽ • js ⇔ coffeeͷ૬ޓม׵αΠτΛར༻ • http://js2coffee.org/ • ͨͩ͠ɺ෼ذͷҰ෦Λਖ਼͘͠ม׵ͯ͘͠Εͳ ͔ͬͨͨΊॻ͖ͳ͓͢ඞཁ͕͋ͬͨɻ 13೥5݄15೔ਫ༵೔

Slide 15

Slide 15 text

assets pipelineରԠ • enchant.jsͱui.enchantjsΛϓϩδΣΫτʹೖ Εͯɺapplication.jsʹهೖ • //= require enchant //= require ui.enchant 13೥5݄15೔ਫ༵೔

Slide 16

Slide 16 text

assets pipelineམͱ݀͠ • ui.enchant.jsͷը૾͕ ʹ ͋Δ͜ͱΛظ଴͍ͯ͠ΔͨΊɺBTTFUT ʹը૾Λ഑ஔ͢Δassets pipelineͰ͸ಈ͔ͳ͔ ͬͨ • ͱΓ͋͑ͣpublic/ ʹը૾Λஔ͍ͯରॲ • CSSͷURLࢦఆΛimage-urlʹ͠ͳ͍ͱ͍͚ ͳ͍࿩ɺ͔ͳɾɾɾʢʁʣ 13೥5݄15೔ਫ༵೔

Slide 17

Slide 17 text

assets pipelineམͱ݀͠2 • enchant.js͸ಡΈࠐΉͱήʔϜ͕࢝Ίͬͯ͠ ·͏ͨΊɺήʔϜΛݟ͍ͤͨϖʔδͰͷΈಡ ΈࠐΈ͍ͨ(assets piplineΛ෼͚Δʣ • conﬁg/environments/production.rb • config.assets.precompile += %w( games.js ) 13೥5݄15೔ਫ༵೔

Slide 18

Slide 18 text

ͦͷ΄͔ • tutorialϖʔδͷ࡞੒ • ੩తཁૉ͔͠ͳ͍͚Ͳͦͷ··RailsͰ࡞ ੒ • ೔ຊޠ࢖Θͳ͍Α͏ʹͯ͠Έͨ 13೥5݄15೔ਫ༵೔

Slide 19

Slide 19 text

੩తϖʔδ • ࢓ࣄͷίʔυ͕haml࢖͚ͬͨͲ naoya ͞Μ ͷهࣄͰslim࢖ͬͯΔࣄ͕ॻ͍ͯ͋ͬͨΜ ͰझຯͷίʔυͳΒ΍ͬͺΓslimͰ͍͍͔ ͳɺͱࢥͬͨΓɻ • ࡢࠓͷࣗ෼༻WebΞϓϦέʔγϣϯͻͳܗ - naoyaͷ͸ͯͳμΠΞϦʔ http:// d.hatena.ne.jp/naoya/20130503/1367581629 13೥5݄15೔ਫ༵೔

Slide 20

Slide 20 text

webfont • είΞͷϑΥϯτɺWebϑΥϯτͰ͜ͷϑΝ ϛίϯͬΆ͍ϑΥϯτ↓࢖͍͔͚ͨͬͨͲ WebͰ࢖͏ʹ͸ॏ͍(1M over)ͷͰஅ೦ • 8×8υοτ೔ຊޠϑΥϯτʮඒ࡙ϑΥϯτʯ http://www.geocities.jp/littlimi/misaki.htm 13೥5݄15೔ਫ༵೔

Slide 21

Slide 21 text

jQueryϥΠϒϥϦ • είΞૹ৴ͷμΠΞϩά • jQuery UI ͷdialog • είΞૹ৴ޙͷ௨஌ • jQuery-Notify-bar • https://github.com/dknight/jQuery-Notify- bar 13೥5݄15೔ਫ༵೔

Slide 22

Slide 22 text

΍Εͯͳ͍͜ͱ • ηΩϡϦςΟपΓͳʹ΋ͯ͠ͳ͍ͷͰ࣮͸ε ίΞͷPOSTͷURLʹ௚઀͋Ε͢Ε͹ɾɾɾ • ςετॻ͍ͯͳ͍ • jsͰॻ͍ͨίʔυ͕ͦ΋ͦ΋ςετॻ͚Δ Α͏ͳઃܭʹͳͬͯͳ͍ • WiiUରԠ 13೥5݄15೔ਫ༵೔

Slide 23

Slide 23 text

Ҏ্ 13೥5݄15೔ਫ༵೔