ameba pigg for smartphone 新規作成のつくりかた
TRANSCRIPT
Ameba Pigg
for Smartphone
CyberAgent, Inc.
Ameba
Kazunari Hara @herablog
Goal
Faster
Goal
No LagQuick response
for Desktop for Android
with Adobe Flash
for iOS and Android
with HTML5
etc...
with HTML5
HTML5 Markup
CSS3 / Sass(SCSS)
Canvas / Ai→Canvas
hashchange
gzip
YUI Compressor
css sprites
OptiPNG
Custom Data Attribute
Data URI scheme
viewport
Full screen mode ...etc...
Problem
？
Too many parts
4 ways to draw avatar
Image css sprites
SVG Canvas
4 ways to draw avatar
Image css sprites
SVG Canvas
time lag(mobile network) huge file size
Android, unsupported
Ai→Canvas
http://visitmix.com/work/ai2canvas/
Ai→Canvas
convert JS to JSON
JSON file size
0 250 500 750 1000
Image Json
53 % Down
Data size(KB)
gzip compression
0 250 500 750 1000
Image Json
88 % Down
Data size(KB)
Unobtrusive JavaScript
HTML
CSS
JavaScript
Structure
Presentation
Functionality
“Unobtrusive JavaScript”
one HTML file
No Lag
window.onhashchange
<div id=”face”> <div id=”eyebrow”>
<a href=”#eyebrow”></a>
http://***.jp/create#face http://***.jp/create#eyebrow
Custom Data Attribute
<ul data-parts=”face”>
<li data-item=”0”></li>
<li data-item=”1”></li>
<li data-item=”2”></li>
・ ・ ・</ul>
var parts = e.target.parentNode.getAttribute(‘data-parts’); //facevar item = e.target.getAttribute(‘data-item’); //0
Data URI Scheme
<img src=”http://s.pigg.ameba.jp/img/loading.gif”>
<img src=”data:image/gif;base64,
R0lGODlhTgBOANUAAP////f39+/
v7+bm5t7e3tbW1s7OzsXFxb29vbW1ta2traWlpZyc
nJSUlIyMjISEhHt7e3Nzc2tra2NjY1paWlJSUkpKSkJ
CQjo6OjExMSkpKSEhIRkZGRAQEAgICAAAAP///
wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAACH/
C05FVFNDQVBFMi4wAwEAAAAh
+QQFFAAgACwAAAAATgBOAAAG・・・”>
Sass(SCSS)
Sass(SCSS)
//Mixin@mixin border-radius($radius: 4px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
//Variables$thumbWidth : 58;
//Function@function removePx($v){ @if $v == 0{ @return $v; } @else { @return #{$v}px; }}
//For@for $i from 0 through 6 { ul[data-parts="face"] li[data-item="#{$i}"] { background-position: removePx((-11 + -$i) * $thumbWidth) removePx(-10 * $thumbWidth); }}
UI
touch points
One page One role
NextBack
High performance
CSS Sprites
Optimizes images
Minify
Combine files
gzip compression
Only 7 files
top.html
sp.pigg.create.css
sp.pigg.create.jqueries.js
sp.pigg.create.js
sp.pigg.create.data.json
sprite01.png
sprite_thumbs.png
Images
top.html
sp.pigg.create.css
sp.pigg.create.jqueries.js
sp.pigg.create.js
sp.pigg.create.data.json
sprite01.png
sprite_thumbs.png
CSS Sprites
Optimizes images
http://imageoptim.pornel.net/
Optimizes images
0 19.75 39.5 59.25 79
Before After
3 % Down
Data size(KB)
Text files
top.html
sp.pigg.create.css
sp.pigg.create.jqueries.js
sp.pigg.create.js
sp.pigg.create.data.json
sprite01.png
sprite_thumbs.png
Minify
Minify
0 71.25 142.5 213.75 285
Before After
33 % Down
Data size(KB)
gzip compression
gzip compression
0 153 306 459 612
Before After
73 % Down
Data size(KB)
Total
top.html
sp.pigg.create.css
sp.pigg.create.jqueries.js
sp.pigg.create.js
sp.pigg.create.data.json
sprite01.png
sprite_thumbs.png
Total
0 196.25 392.5 588.75 785
Before After
67 % Down
Data size(KB)
Full screen mode
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/img/common/amebatitle.png"><!-- size: 320 x 460 -->
Blog
http://ameblo.jp/ca-1pixel/entry-11009598050.html
