1. localstorage.enchant.js
ymrl

2. ymrl
1
TweetShooting Web

3. http://tweetshooting.appspot.com/

4. enchant.js

5. touch
➡enchant.js
iOS 1

6. localstorage.enchant.js
3G
HTML5 localStorage
Data URI Scheme

7. localStorage
key-value
iOS 5MB
localStorage['key-name']

8. Data URI Scheme
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
URL
<img src=”data:image/png;base64;,...”>
Base64
Canvas toDataURI

9. Data URI Scheme
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAA
AKAAAABgCAYAAACaJ3mZAAAUE0lEQVR4Ae1
dX4hdxRmflNJCQbhBmmKocCUQq5h2oZDiw
+JCYEOhSTYvC7YvW4SIoHTbSMsKQkEwWNSs
KAh5Wh9aISAm20IxNLB2S4WFwhbFlkDwQov
BlbIXLIX6ks5v7v2dfHfuzDkz58yZu1vvwN
35//2+75vffGfOuSe5B27fvq2maeoBnwcOH
jxYEGR3d/
eAb5xsj5nzZTlxWp56QHoARFo82lGPnjhqm
lEnCSXJ5ByUV2YfME03P7ml5Bx7HOpTArq8
Mm0b8cCFN6+Z+ttPzBtCoQKSHX/
orpFxWx98pkA6fEJTJQEl08n
+KuF15lTJnPZPzgPdQ90C3EU8doKQ

10. Data URI Scheme
var img = new Image();
img.src = 'foo.png';
img.addEventListener('load',function( ){
var cvs = document.createElement('canvas');
cvs.height = this.naturalHeight;
cvs.width = this.naturalWidth;
var ctx = cvs.getContext('2d');
ctx.drawImage(this,0,0);
console.log(cvs.toDataURL());
});

11. localstorage.enchant.js
enchant.js Game#preload
URL localStorage
localStorage preload

12. game.preload('foo.png');
game.preloadToLocalStorage('foo.png');

13. enchant( );
window.addEventListener('load',function(){
var game = new Game(400,400);
game.preloadToLocalStorage('/img/Lenna.jpg');
// localStorage['/img/Lenna.jpg'] に画像が保存され、
// 次回からは localStorageから読み出されるようになる
game.addEventListener('load',function(){
var lenna = new Sprite(400,400);
lenna.image = game.assets['/img/Lenna.jpg'];
game.rootScene.addChild(lenna);
});
game.start( );
});

14. URL
URL
localStorage

15. 'foo.png#20111021'
#

16. Data URI Scheme
iOS Simulator Local Server
30ms localStorage 81ms
3G
Cache > localStorage >

17. localStorage
Base64

18. Thank you.
geishatokyo’s enchant.js repository:
https://github.com/geishatokyo/enchant.js