Top Banner
localstorage.enchant.js ymrl 芸者東京エンターテイメント インターン
18

localstorage.enchant.js (enchant.js meetup! 発表資料)

Apr 16, 2017

Download

Technology

Rei Yamamoto
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: localstorage.enchant.js (enchant.js meetup! 発表資料)

localstorage.enchant.jsymrl 芸者東京エンターテイメント インターン

Page 2: localstorage.enchant.js (enchant.js meetup! 発表資料)

自己紹介

名前:ymrl(やまある と読みます)

芸者東京エンターテイメント インターン

慶應義塾大学 政策・メディア研究科 修士課程1年

趣味として「このまま眠りつづけて死ぬ」「TweetShooting」などのWebサービスを製作

Page 4: localstorage.enchant.js (enchant.js meetup! 発表資料)

芸者東京とenchant.js

スマートホン用ブラウザゲーム開発に使用

Page 5: localstorage.enchant.js (enchant.js meetup! 発表資料)

スマートホン用ゲームの難しさ

touchイベントなど独自イベントの処理・デバッグ

➡enchant.jsが解決

サウンド関係(iOSでは1音のみ再生可能)

描画処理などのパフォーマンス

回線帯域の細さ・不安定さ

Page 6: localstorage.enchant.js (enchant.js meetup! 発表資料)

localstorage.enchant.js のご紹介

画像の3G経由のロード回数を減らすために開発

ゲーム内で使用する画像データをローカルに設置することでアクセスを回避

HTML5のlocalStorageを使用

Data URI Scheme の形式で保存する

Page 7: localstorage.enchant.js (enchant.js meetup! 発表資料)

localStorage

ブラウザ側にデータを保存することができる

ただし文字列のみ

ドメインごとにkey-valueストアとして使用できる

iOSの場合、容量は5MBまで

localStorage['key-name'] のようにしてアクセス

Page 8: localstorage.enchant.js (enchant.js meetup! 発表資料)

Data URI Scheme

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

通常のURLの代わりにデータの内容を直接記述する方式

<img src=”data:image/png;base64;,...”>のように使える

データ本体はBase64にエンコードされる

画像ではCanvasのtoDataURIメソッドで生成可能

Page 9: localstorage.enchant.js (enchant.js meetup! 発表資料)

Data URI Schemedata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABgCAYAAACaJ3mZAAAUE0lEQVR4Ae1dX4hdxRmflNJCQbhBmmKocCUQq5h2oZDiw+JCYEOhSTYvC7YvW4SIoHTbSMsKQkEwWNSsKAh5Wh9aISAm20IxNLB2S4WFwhbFlkDwQovBlbIXLIX6ks5v7v2dfHfuzDkz58yZu1vvwN35//2+75vffGfOuSe5B27fvq2maeoBnwcOHjxYEGR3d/eAb5xsj5nzZTlxWp56QHoARFo82lGPnjhqmlEnCSXJ5ByUV2YfME03P7ml5Bx7HOpTArq8Mm0b8cCFN6+Z+ttPzBtCoQKSHX/orpFxWx98pkA6fEJTJQEl08n+KuF15lTJnPZPzgPdQ90C3EU8doKQ+JCwch7H2PmBsjMgiCRD8NnXtxRJKElmC5Uh+PKNfjHHHhdTl3jUoWp+nTk+mXVk1ZlD/Dpz68whni+HTHDgyDfuMUNAsLkTD5ryxvUPfdMUouGFzb9Vrn1lBAQCGd1GCPZaIDrohDbPIgJurJgbPzfemMGiAZsd+qxoAtqXXDGsdjGIgDKUpg7BMZpPeiPkxs+NV7YWknxlkY8yzPhN1vx5KQHJfoZghNWQELzy6HxwCParNt4z6Y2QGz833rjHlbnp4JHK7seRDOntJ44XXbIN8xA9y45MXypmegqYjHMcktwFnuGtNEsdcBaRG4HnERcwNsKJYw+rpufQ3Pi58Vy+y9VWGgGlEpJ8KUOwxCgrY1HaPIuUYaMvN74LL8TvMY9Aqmyu6peRj2Ndbexz5ZUR0Cz68MGiLQDhliGXfbKNIZh9KXJ7I1Qtihy/H/Fj9eeNWgpbpQxcdXwJa/7GrcNjXPCNl+2VBJSDJ1me9EbIjV+GV7UObWx8YIKEPiJeuXJlRC3fuJFBuhJ8CbYnou4Kt64219xpWz0PyCuO9DXb0WaiZsAdaIgGxVFAXAVtcoHw199/z5y37b4qjGACQrDvcgDjFxYWFHaBdEoVeKp+F6arLRWeLceF5Wqz59Wpa0KojWdOjk01eOfeUerSeN/Y4EwNIQ+ioy7BIKGP4XVDcKwvfPiQ0+QsEqpHbnyJN/e8JphILnsxXs4Rw2sXEQVBJjsh6vGDPlm2x/rqlRGw7RDsU6ysnQ52ReQcGyE3PvFUb9wrtr3jI5q34DwKKSAhLrdMeMTlSyHRD3NLvwum8JADMc8AnIM8VAk5p6xcV49UuuTGz43n8r3UARueZ01JRDmPkRKBS7b7ypUREBNdURDtIJ1MrJftDDk+Vzn1RojVOzd+KjxJPtrMsy2/JmQ788WjXVPE3BASBkVACncpxD47T+UEW65LBxLfHsuNkFKXHPjAgC2ujQ9b3/moeEnZmHzyvkGwSWmvy06AuY49Rgn9583rN1g0b8+E+D2KgJBO56QKwYXGAQViY6gP3xYT4gR7TlXdtziuebH4kM0ow8sd5MbYi+/um379KG3Etyv8Ola+nmfbC33Rj4SvTENsD7oEE0g6pywEU1nOa5oDFzK4CG2cRWJ1hHOlTq75IQvgmsc22gs5jPKMchzDnPqQAGyvmzP6cj7rvm9aeKOEtY/RIZiAckdAKXzRbycogd0CBTA+5Axgy7DrNi77GSXKNgLGkrwop9YHtvK7195ODxAmbfUHUaAuHheT8khE1ElE9jHn2Qv1VAGgjv6YY3we+CJyMAFpKJ3jOgugjQvC8W3k0IH4ro0gzyJcPEaIlPrIaHD29X7xEB74dUlQLKBWlLpLnasiIMbWIY7EKCv/+K0Z9cT9m4X/7bGxgSeIgHYUwi48/tB4BIQyuPanjoI0EnK5sIuf3PnXWuxnHnsZ4LxUOYh5+cbgXbk6MkkgRm8SkZvOlsmgwHl2f4o6dOkcOqd6h7+mfvGZ/rZl9AHIAGLmpOp+/J+oq18QAW0DeImx29uoy4gA+azL6CNxuRgkqhq+y5hqcYgPzBV156Gs1MH06Qe2sdHAlkGd7QBgjwMxoUtTPFuuXZ/vXFbXPl40zf2dSyPdICcSxlzeGekqrUQTENFvZdb/BBxoqSMQF6LUEquzzhxLhLdKEsrLOs+knGSiVaIXAigzRw4SSxzayijcv3FpeIl/QQ4z5PfdfEiZ9rpEExDR78QIdN4KjZHnQGqANpDCNpL9qXLqAIfjyOG7NKbCs+XATnMZFB249HUOzSaJgkvf7KuLn+sbuJ3BzSRg5Gaj/QLeFIurjq7JMbuH+uqnX1Fq7Z+DmzM5L/g5IAX2Z5bl/KIMBzAxPLdBBOjBswjxZA49gN8WNrCIL22WOuCcZMZtr5q8qS4hNhM/he3AIwkpt0lO8rn8EBwBMZkktJXpwNHDMwD7XGDsq5tzITAfmK7NgDs0dX975yFEvWv9gQUkmiQi2164S7+5os+BuHGC3in9Md/7pVGgOItr3x/9/FfmfbwUtnOt1zTKb+aU+v4PZtTvf7etfrihGwKSa47P/mACApeKyYU35BNKpdiBQtxY0RyE+4smCqlhhKE+WPQcj4GgFEgHspmNILTsqnPmMQWaUulCv89/3h+QbPgWytbwuAGCn6g4lwsVg4rEBPkOPr2tdl+cUWpD5xUvGUCXmDlRBKTmZncPKxeGuYk8unwh4g6I8mJzc6c1vLvFXJAAh2QuOM4iVY6KxZTjid/Rtto4WICbnU4xPKUuvmeAJAtBbZ3YXidH5AP5kIemmDnBZ0AJDiez3qbxxJA5sW0nsx1j7T45v2mZOGUYHJNaFyk3tWyfXyRmmc1yfsycWgSUYNPy1ANNPBD1Sn4ToOncqQdcHpgS0OWVaVs2D1TehMRcz6l1nTmcO82/WB4oJSCItLS0pJaXl41XUOdBVJLMdtna2ppp2tjYSPYMTOJRBxvXrteZY8tgvY6sOnMmhUfc3HkpAanMU089ZYrb29vFVywg2ZkzZzjE5FevXlUgHT4pExZykhshN35uvJRrFSsriIBHjhwp5LqIx04QEp/Tp0+bJjmPY5rkk94IufFz4zVZm7pzSwmISx1349zcnEIEtKOeC3h9fV0hGiJqhV4uXXLsNknoSWyE3Pi58Wx/Z6nj/4iu+nQ6ndv6H0DrYYOEOj6nTp1iU5Gjjf3IdaqUHzIGsvRZ1OghdSmAPQWMTaFHbvwyvKE9IxazTR9/ktgbsiYpxgSRg8ZJiyXR2I5x+JCYw3lBGCHGQJ4kn41HPZBL/VLpkRvfxoNdaKN/UWeivainsleLSrZ2PlmVADAGu6pOSr0bh44dUYWOl30o48OFGvZV2upzEtslBpVoE9/GkzYR35Wnspd2t5lXLgqM8REQfUNjCz/ItpQELNOjAPcUUuiRGz83XpskK5P9f/FNiL5RwuOhkTOzq21kQMKKC8vVlgrSJVu2PfLII6mgWpdTehcs0d99911lG6bvcIshcACSbCs6p4VkHphbG/Wx9Dv69luKioAgIT4hKXRciCw5xiUXpCfxGQlkm5zftJwbX+LtR4JV+buSgHohDywsLIzIgVOw0Mj5wQB9h2rq3JUjkxJWJGaVWIxNnXLjV+HB7zK1YbOUn7Ic9D6gJhQef4zhSmLufmtXHfz74DLMsegHgccm1mxw6QEM4kGsrNvlprrkxnfh0XWwTSbpA7Sjv6m9Un5b5aAzIAxxOYNGv/TSS0p9qv8NzuysOn/+fFu6OuVCB7kYZiMstLsRpCK58Wkr7JTpoLaZ67FfyAf9gyIgDXWRkH0goSRfW06o0mH903V1+uunW9MlBz4w4FffxqfPfXlbvvfhNWmPIiCA6BzuNhu82KEJL73EIDbqPvwcG6GKhE02ImTjO3ekmZkZk+OPz95iwLAA/+M7eHxXvh8uwVEElM7hmxq2A/AFemrjSTwuQrfbLRaHbbYek94IdfGlj3u9njELsnC8QZLkNg3DP8QD+ZBSr4ER2sKfYALCMVhsLL4vYefqbx1MdyoHEFdiSh3KNgLmQA+mFBFB6iPJf/PmTcKozc1NU66DJ+UXAkXBnLdFnUX7zRm018GnvFx50E2IVIa7UpKA/bhkkIBsayOHDsR/9dVXxyBWV1eLNpKEEaLoSFC4ePFiIUUTx7yuhgbgS+IXgwIKIA1IiKHUXU6rioAYux+IR5sqnwNioL0rfbsQY/HeIBIuBXSkaUjwB7ggEj6+yAeYuoufQEUjgv+Eoa48EAgf2ko52HSuD/s5j/X9kEdHQBjFS0wOA+FUSWTWXZEP+vAATxIyx7wU+hIfslwRihjog95NcDnXDgDEYA5SpsCjvJx5NAERhbioPkXRz8Owb0xMOxei7Tmh8klCeVkn8SkDpJimag9EExDR77HHHquW3NIIRkMsuHxMATi0gfh1CBujLnUAFkiYm2w4A/eGRx3qjQc3S/rTNOpSXq486i4YSq32+07d4ACmteF/ztMGEeDgJa3DDMGsHHoAvy1swBFf2izVoG7LifwQYjPx27Kd8lPnQTchAC1bUDpaKlc2Xo6LKXMhMMeFifYF/RiI5yHUUyd5tADRSDbisN4d6oHx0Jv9KfK3Tp1S+MAH9MNNXW/b9hS62zKiLsEgFZwpoyAdQMGt70D8I3n9mANRiNjUh4tOXdrMt7VwkI06EAt6gQhIZTcpZkDgH/qd37Xz23Ych9h3JfN38IGqVw6LIiCldeSbMXqHI80N29aGddPY1h9NQnkjBBJgsbng6GsjAhfmCHwbx0Q74Z+UuvieAZKE1M/Wie17MQ8+A0rl5SUlt/HEtp3Mduhp90ndm5aJU4bBMal1kXJTy27ql7rzaxGwLth03tQDtgeCb0LsidP61AMpPDAlYAovTmXU9kDlTYg8d/DcwzbWbXT2o903xp4zrX8xPVBKQBAJv4vB32UjsXaX/mi8xbrtOv6sU8rfyJBYJDXbWLf1YD/afWPsOb66SxbbfLLZXwffNZdtbeD57G67vZSABOfPn+L30F7h7zIMO+VvpOEnpEA6/lwC5zfN4fhJboTc+Lnxmq5Pk/lBBNzZOmowXtlS6mffnVVnV582+Vz/+Ag2fjMNH/6IdPdQd6S/aWXSGyE3fm68putTZ34pARHqsRt3l180skE8ppf/sql+ssLaaI4fkW7jhwMnvRFy4+fGG13FPLXK54AgIFRZPzL4AgjEe/sPDxrtNq5/6NUyNQHNRhiePRmBoQuSbyOgL5UeufFz48FXk0iVBIRScAYvt67FPvv6VvFz9TQCbUi+AzPHhebQAWMntRFy49fFw2U75c+Dha5P3XGVBIQjcFfr+k1ckkzeiMi2VNGHxkGXSW6E3PhVePSLnWMNUm18W3bqeukZMDVYE3l3NsK4FEl69so2bATMb7IoufHL8GijL0fAaGqvT3bq9kYElJGPirna2DfNm3uAGwuSpK/ZjjZztRocj5sDtiwhmICIIq7LMPSD8Xg1Ha9DSae0rHsh3oXpaismJC64sFxtKWB1FFcbz5wcE2Xwzukfyb403jc2eA81RH0XDBLi40p8F499vnHsr5uXycVGeOPWYbMh6sqvmpcbX+LNPa8JJpLLXoyXc8TwPVmsjIA4N/E8QgtsA3HmuP7+e+bXvO0+zkmZE8MVkXNshNz4xFO9cS/a9o6P2NstlXfBUN8moMskElD2XRj+pLxsa1KuqwcwU+iSGz83XpO1qTu3MgJCsCsKoh2kk4l130/Ly7E5yynI10Tf3Pi58Zr4JoiAAHCRsIxobTjBpQN0I/FRRmK9TL/ByLi/ufAR+aCZCw+2vfPRnX9k93M97uR9g//0IbW9cd6pNzroEixF0zl85Ur2oQziIcF5ppDwD7Eh0odvw7WxEUIujdQjFh+yeQfNRyux9uLNof3ybUhwBIQTXM453unT1yZfPNo1xo80NqyQeCQdbj64OGyzIdrcCMCifB8+xzTZiJQNrKqoTn1Avv2UgiMgdz3vPF++cEutL/96xNbTqz9S9xwfPKZJtQOJK4GoA9pIRHsj8FUw6MHUhAyUIfXhe4/AkPhb/QEJ6uBJ+cRkTpJJLPbRXtRpcx18ysuVR0VAKMVHAvPdh8d0BCFPXvm2ks4YG5SgATqQhHw7W4p9/M+D3ytGm4wickyKMt8Uf/TEYCNQF2zEzc4/akGANCAhJlN3Cprt3zu26V+78pp6/9C1gnQYux+IR5uCHkTbu5KXAwqR+Vd7x0wVlwI6UvY3KSPiIArgg7c+Pniz6xTHCODszNDo2pwxsCAQPrQVc//02387RTy58KQ6tjNv+jjPOXCPNkZHQNiBS8wpfZXZ3LzaullwqiQy67e27lLHugMdZmfPFHogIiAVJBxegjGvGNSgQHyIWFEPjEiiP75zt45Ud59v/EIAdYb9s+peg0UMCQw8deekIbv2fDmagIh+s30d5QbHnDEDsfufvXFZpTwMy4Uwi6EvRTK5FoVz5LjUZZ7JIPe5zmJq8VHy8J4kfJPD7ijFKgZHExDR77nh+e+v/6p3zqnQqbQb5yAkXuagg4kApbPSddobgHpQB+jzbP9yOkBLEn1+rTf4EkCeNeGb/UbCqLtg+AJG0umWb4oqF6CN3QgHA0hGHNdiYEyb+D4/wHbepWKzNtXBJrwkHGxkSolJmTny4AgIR3LxQxRr6ngXBvDpaJLcjNPHAbTj3+jx2wB5eXTJqtMGfBwtejs9ZV63692JxNgEIAf1gx765lg9/r37buM82tQfJB7lQ38+7mEbMaFnUzzIz5GCCQhlSMLNfvmlt03j8YgHBIDTsQB0PvTDAvDZHOptJuD+V3+epS/EmZibIJUuknyUDdu29NMAron9yKZN21PKjiIggaWxjDRsY51j28hBQt7lMgoAnwueIuKU6S3x7c2G6NPVj4uYmupC+ZAryUf5yElCtnEO63s5Dz4DSiPgDNZzG09s28lsh152H3VNkROnDINjUusi5aaWncI3dWT8D0WjFdYX54/pAAAAAElFTkSuQmCC

Page 10: localstorage.enchant.js (enchant.js meetup! 発表資料)

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());});

Page 11: localstorage.enchant.js (enchant.js meetup! 発表資料)

localstorage.enchant.jsの設計

enchant.jsのGame#preloadと互換性を持たせる

リリース直前に保存するファイルを決めるため

画像のURLをキーとしてlocalStorageに保存

画像がlocalStorageにない場合は並行してpreload

Page 12: localstorage.enchant.js (enchant.js meetup! 発表資料)

使用方法

game.preload('foo.png');

をgame.preloadToLocalStorage('foo.png');

にするだけ

Page 13: localstorage.enchant.js (enchant.js meetup! 発表資料)

使用例

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();});

Page 14: localstorage.enchant.js (enchant.js meetup! 発表資料)

問題点

画像の更新ができない

画像URLをキーとしているため、すでに保存されている場合は更新されない

画像のURLを変更した場合、以前のデータが残ってlocalStorageの容量を圧迫してしまう

Page 15: localstorage.enchant.js (enchant.js meetup! 発表資料)

画像の更新

画像ファイルの指定を'foo.png#20111021'のようにする

スクリプト側で#以降の文字列が変更されていた場合には過去のファイルを削除する

Page 16: localstorage.enchant.js (enchant.js meetup! 発表資料)

パフォーマンス

Data URI Schemeからの復元には時間がかかる

iOS Simulator↔Local Serverでは通常のロードが30msに対して、localStorageからは81ms

3G越しでは速度の差は小さくなる

ロード速度は Cache > localStorage > 通常

Page 17: localstorage.enchant.js (enchant.js meetup! 発表資料)

これからの予定

localStorageの容量が逼迫した場合の処理

古いデータを探して削除するなど

音声など画像以外のデータも保存できるようにする

Base64のエンコードを自前で実装する必要がある

Page 18: localstorage.enchant.js (enchant.js meetup! 発表資料)

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