Download - Ameba Pigg for Smartphone 新規作成のつくりかた
![Page 1: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/1.jpg)
Ameba Pigg
for Smartphone
CyberAgent, Inc.
Ameba
Kazunari Hara @herablog
![Page 2: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/2.jpg)
Goal
Faster
![Page 3: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/3.jpg)
Goal
No LagQuick response
![Page 4: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/4.jpg)
for Desktop for Android
with Adobe Flash
![Page 5: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/5.jpg)
for iOS and Android
![Page 6: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/6.jpg)
with HTML5
etc...
![Page 7: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/7.jpg)
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...
![Page 8: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/8.jpg)
Problem
?
![Page 9: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/9.jpg)
Too many parts
![Page 10: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/10.jpg)
4 ways to draw avatar
Image css sprites
SVG Canvas
![Page 11: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/11.jpg)
4 ways to draw avatar
Image css sprites
SVG Canvas
time lag(mobile network) huge file size
Android, unsupported
![Page 12: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/12.jpg)
Ai→Canvas
http://visitmix.com/work/ai2canvas/
![Page 13: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/13.jpg)
Ai→Canvas
![Page 14: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/14.jpg)
convert JS to JSON
![Page 15: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/15.jpg)
JSON file size
0 250 500 750 1000
Image Json
53 % Down
Data size(KB)
![Page 16: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/16.jpg)
gzip compression
0 250 500 750 1000
Image Json
88 % Down
Data size(KB)
![Page 17: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/17.jpg)
Unobtrusive JavaScript
HTML
CSS
JavaScript
Structure
Presentation
Functionality
“Unobtrusive JavaScript”
![Page 18: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/18.jpg)
one HTML file
No Lag
![Page 19: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/19.jpg)
window.onhashchange
<div id=”face”> <div id=”eyebrow”>
<a href=”#eyebrow”></a>
http://***.jp/create#face http://***.jp/create#eyebrow
![Page 20: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/20.jpg)
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
![Page 21: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/21.jpg)
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・・・”>
![Page 22: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/22.jpg)
Sass(SCSS)
![Page 23: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/23.jpg)
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); }}
![Page 24: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/24.jpg)
UI
![Page 25: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/25.jpg)
touch points
![Page 26: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/26.jpg)
One page One role
NextBack
![Page 27: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/27.jpg)
High performance
CSS Sprites
Optimizes images
Minify
Combine files
gzip compression
![Page 28: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/28.jpg)
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
![Page 29: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/29.jpg)
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
![Page 30: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/30.jpg)
CSS Sprites
![Page 31: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/31.jpg)
Optimizes images
http://imageoptim.pornel.net/
![Page 32: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/32.jpg)
Optimizes images
0 19.75 39.5 59.25 79
Before After
3 % Down
Data size(KB)
![Page 33: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/33.jpg)
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
![Page 34: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/34.jpg)
Minify
![Page 35: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/35.jpg)
Minify
0 71.25 142.5 213.75 285
Before After
33 % Down
Data size(KB)
![Page 36: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/36.jpg)
gzip compression
![Page 37: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/37.jpg)
gzip compression
0 153 306 459 612
Before After
73 % Down
Data size(KB)
![Page 38: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/38.jpg)
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
![Page 39: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/39.jpg)
Total
0 196.25 392.5 588.75 785
Before After
67 % Down
Data size(KB)
![Page 40: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/40.jpg)
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 -->
![Page 41: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/41.jpg)
Blog
http://ameblo.jp/ca-1pixel/entry-11009598050.html
![Page 42: Ameba Pigg for Smartphone 新規作成のつくりかた](https://reader033.vdocuments.pub/reader033/viewer/2022042714/55615063d8b42a8a7d8b4f20/html5/thumbnails/42.jpg)