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

2013/05/15 Shibuya.rbにて

Transcript

1. enchant.jsΛRails্Ͱ ಈ͔ͨ͠࿩ @ryonext 13೥5݄15೔ਫ༵೔
2. ࣗݾ঺հ • Twitter ID: ryonext • ࢓ࣄͰRails΍ͬͯ·͢ɻ 13೥5݄15೔ਫ༵೔
3. ͜Εʹ͍ͭͯ࿩͠·͢ http://bearsheaven.herokuapp.com/ 13೥5݄15೔ਫ༵೔
4. enchant.js • ήʔϜ࡞Γʹ޲͍ͨjsϑϨʔϜϫʔΫ • http://enchantjs.com/ja/ 13೥5݄15೔ਫ༵೔
5. jsdo.it http://jsdo.it/ 13೥5݄15೔ਫ༵೔
6. ڈ೥࡞ͬͨήʔϜ 13೥5݄15೔ਫ༵೔
7. Rails্Ͱಈ͔ͯ͠είΞอ ଘͱ͔ͯ͠ΈΑ͏ͱࢥͬͨ 13೥5݄15೔ਫ༵೔
8. • enchant.jsͷίʔυ͔Βී௨ͷjs΍DOMཁૉ ͷૢ࡞͕Ͱ͖ΔͷͰՄೳ ࣮ࡍͰ͖Δͷ͔ʁ 13೥5݄15೔ਫ༵೔
9. 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೔ਫ༵೔
10. • είΞొ࿥ͷControllerͱModelΛ࡞ͬͯɺjs ͔ΒݺΜͰ͋͛Ε͹OK 13೥5݄15೔ਫ༵೔
11. 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೔ਫ༵೔
12. 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೔ਫ༵೔
13. ଞʹ΍ͬͨ͜ͱ • CoffeeScriptԽ • assets pipelineରԠ 13೥5݄15೔ਫ༵೔
14. CoffeeScriptԽ • js ⇔ coffeeͷ૬ޓม׵αΠτΛར༻ • http://js2coffee.org/ • ͨͩ͠ɺ෼ذͷҰ෦Λਖ਼͘͠ม׵ͯ͘͠Εͳ ͔ͬͨͨΊॻ͖ͳ͓͢ඞཁ͕͋ͬͨɻ 13೥5݄15೔ਫ༵೔
15. assets pipelineରԠ • enchant.jsͱui.enchantjsΛϓϩδΣΫτʹೖ Εͯɺapplication.jsʹهೖ • //= require enchant //= require ui.enchant 13೥5݄15೔ਫ༵೔
16. assets pipelineམͱ݀͠ • ui.enchant.jsͷը૾͕ <IPTUOBNF><DVSSFOU@QBUI>ʹ ͋Δ͜ͱΛظ଴͍ͯ͠ΔͨΊɺ<IPTUOBNF>BTTFUT ʹը૾Λ഑ஔ͢Δassets pipelineͰ͸ಈ͔ͳ͔ ͬͨ • ͱΓ͋͑ͣpublic/ ʹը૾Λஔ͍ͯରॲ • CSSͷURLࢦఆΛimage-urlʹ͠ͳ͍ͱ͍͚ ͳ͍࿩ɺ͔ͳɾɾɾʢʁʣ 13೥5݄15೔ਫ༵೔
17. assets pipelineམͱ݀͠2 • enchant.js͸ಡΈࠐΉͱήʔϜ͕࢝Ίͬͯ͠ ·͏ͨΊɺήʔϜΛݟ͍ͤͨϖʔδͰͷΈಡ ΈࠐΈ͍ͨ(assets piplineΛ෼͚Δʣ • config/environments/production.rb • config.assets.precompile += %w( games.js ) 13೥5݄15೔ਫ༵೔
18. ͦͷ΄͔ • tutorialϖʔδͷ࡞੒ • ੩తཁૉ͔͠ͳ͍͚Ͳͦͷ··RailsͰ࡞ ੒ • ೔ຊޠ࢖Θͳ͍Α͏ʹͯ͠Έͨ 13೥5݄15೔ਫ༵೔
19. ੩తϖʔδ • ࢓ࣄͷίʔυ͕haml࢖͚ͬͨͲ naoya ͞Μ ͷهࣄͰslim࢖ͬͯΔࣄ͕ॻ͍ͯ͋ͬͨΜ ͰझຯͷίʔυͳΒ΍ͬͺΓslimͰ͍͍͔ ͳɺͱࢥͬͨΓɻ • ࡢࠓͷࣗ෼༻WebΞϓϦέʔγϣϯͻͳܗ - naoyaͷ͸ͯͳμΠΞϦʔ http:// d.hatena.ne.jp/naoya/20130503/1367581629 13೥5݄15೔ਫ༵೔
20. webfont • είΞͷϑΥϯτɺWebϑΥϯτͰ͜ͷϑΝ ϛίϯͬΆ͍ϑΥϯτ↓࢖͍͔͚ͨͬͨͲ WebͰ࢖͏ʹ͸ॏ͍(1M over)ͷͰஅ೦ • 8×8υοτ೔ຊޠϑΥϯτʮඒ࡙ϑΥϯτʯ http://www.geocities.jp/littlimi/misaki.htm 13೥5݄15೔ਫ༵೔
21. jQueryϥΠϒϥϦ • είΞૹ৴ͷμΠΞϩά • jQuery UI ͷdialog • είΞૹ৴ޙͷ௨஌ • jQuery-Notify-bar • https://github.com/dknight/jQuery-Notify- bar 13೥5݄15೔ਫ༵೔
22. ΍Εͯͳ͍͜ͱ • ηΩϡϦςΟपΓͳʹ΋ͯ͠ͳ͍ͷͰ࣮͸ε ίΞͷPOSTͷURLʹ௚઀͋Ε͢Ε͹ɾɾɾ • ςετॻ͍ͯͳ͍ • jsͰॻ͍ͨίʔυ͕ͦ΋ͦ΋ςετॻ͚Δ Α͏ͳઃܭʹͳͬͯͳ͍ • WiiUରԠ 13೥5݄15೔ਫ༵೔
23. Ҏ্ 13೥5݄15೔ਫ༵೔