速くなければスマフォじゃない - インターンバージョン-

40
速くなければスマフォじゃない 2012年8月22日 インターン 原 一成 @herablog

Transcript of 速くなければスマフォじゃない - インターンバージョン-

Page 1: 速くなければスマフォじゃない - インターンバージョン-

速くなければスマフォじゃない

2012年8月22日 インターン原 一成 @herablog

Page 2: 速くなければスマフォじゃない - インターンバージョン-

違い

Page 3: 速くなければスマフォじゃない - インターンバージョン-

違い

・画面サイズ ・容量

・JavaScript ・Flash

・電池 ・キーボード

・PCサイト

Page 4: 速くなければスマフォじゃない - インターンバージョン-

変わらないもの

回線速度

Page 5: 速くなければスマフォじゃない - インターンバージョン-
Page 6: 速くなければスマフォじゃない - インターンバージョン-

@herablog

Page 7: 速くなければスマフォじゃない - インターンバージョン-

@herablog

@herablog

Page 8: 速くなければスマフォじゃない - インターンバージョン-

@herablog

Page 9: 速くなければスマフォじゃない - インターンバージョン-

@herablog

Page 10: 速くなければスマフォじゃない - インターンバージョン-

@herablog

HTML/CSS/JavaScript

Page 11: 速くなければスマフォじゃない - インターンバージョン-
Page 12: 速くなければスマフォじゃない - インターンバージョン-

@herablog

「手触りを決める仕事」

Page 13: 速くなければスマフォじゃない - インターンバージョン-

デカグラフ

Page 14: 速くなければスマフォじゃない - インターンバージョン-

ソースを見る

HTML  

以上。

Page 15: 速くなければスマフォじゃない - インターンバージョン-

JavaScriptで制御

Page 16: 速くなければスマフォじゃない - インターンバージョン-

JavaScriptで制御

・ファイルサイズ減少 → 重複しない

・量産しやすい → 共通化して値だけ変えるとか

Page 17: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 18: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 19: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 20: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 21: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 22: 速くなければスマフォじゃない - インターンバージョン-

ライブラリ

Page 23: 速くなければスマフォじゃない - インターンバージョン-

chikuwa.js

・軽量

・テンプレートエンジン

・View & Routing

・モジュール別開発

https://github.com/suguru/chikuwa.js

Page 24: 速くなければスマフォじゃない - インターンバージョン-

軽量

0

10

20

30

40

jqMobi Chikuwa jQuery

6KB5KB

31KB

Page 25: 速くなければスマフォじゃない - インターンバージョン-

テンプレートエンジン

var notiCount = getNotiCount();tag(‘header’).tag(‘button.menu’).gat().tag(‘h1’).text(‘Ameba’).gat().tag(‘button.noti’).tag(‘span.counter’).text(notiCount).gat()

.gat();

<header><button class=”menu”></button><h1>Ameba</h1><button class=”noti”><span class=”counter”>1</span>

</button></header>

Chikuwa HTML

Page 26: 速くなければスマフォじゃない - インターンバージョン-

タグ コンバータ

https://s.amebame.com/#tagconvert

Page 27: 速くなければスマフォじゃない - インターンバージョン-

View & Routing

$.views({‘group.top’ : {init: function(data) {this.data = data || {};

},render: function() {return tag(‘div’);

}}

});

$.routes(‘group’, {‘/’: {name: ‘top’, action: ‘top’},‘/:groupId/info’: {name: ‘info’, action: ‘info’}

});

View Routing

function top(vars) {var view = $.view(‘group.top’);page.replace(view);

}

Action

Page 28: 速くなければスマフォじゃない - インターンバージョン-

モジュール別開発

メッセージmessage.jsmessage.css

サークルcircle.jscircle.css

プロフィールprofile.jsprofile.css

掲示板board.jsboard.css

Page 29: 速くなければスマフォじゃない - インターンバージョン-

アーキテクチャ

Page 30: 速くなければスマフォじゃない - インターンバージョン-

AJAX

・Asynchronous JavaScript + XML・XMLHttpRequestを利用

・非同期通信で必要なデータのみ取得できる

Page 31: 速くなければスマフォじゃない - インターンバージョン-

AJAX

・Asynchronous JavaScript + XML・XMLHttpRequestを利用

・非同期通信で必要なデータのみ取得できる

Page 32: 速くなければスマフォじゃない - インターンバージョン-

JSON

・JavaScript Object Notation・{ “key”: “value” }

・XMLより比較的軽量・JavaScriptとの相性◎

Page 33: 速くなければスマフォじゃない - インターンバージョン-

node.js

・V8エンジン・非同期I/O

・JavaScripterとの相性◎

Page 34: 速くなければスマフォじゃない - インターンバージョン-

Web Font

Page 35: 速くなければスマフォじゃない - インターンバージョン-

Web Font

@font-face {

font-family: "AmebaSymbols"; src:url("../font/ameba_symbols.eot");

src:url("../font/ameba_symbols.woff") format('woff'),

url("../font/ameba_symbols.ttf") format('truetype'), url("../font/ameba_symbols.svg#webfont")

format('svg')}

.icon { font-family: "AmebaSymbols"; }

.icon.M::before { content: "M" }

Page 36: 速くなければスマフォじゃない - インターンバージョン-

Minify

/**

* chikuwa.js

* Copyright (c) 2011 CyberAgent, Inc. * License: MIT (http://www.opensource.org/licenses/mit-license)

* GitHub: https://github.com/suguru/chikuwa.js */

(function(w) {

var doc = w.document, root = w.document.documentElement,

cssnum = {'column-count':1,columns:1,'font-weight': 1,'line-height':1,opacity:1,'z-index':1,zoom:1}, slice = Array.prototype.slice;

// is string function isString(o) { return typeof o === 'string' || o instanceof String; }

// is function function isFunction(o) { return typeof o === 'function' || o instanceof Function; }

// is number

function isNumber(o) { return typeof o === 'number' || o instanceof Number; } // is chikuwa object

function isChikuwa(o) { return o instanceof chikuwa; } // is object

function isObject(o) { return o instanceof Object; }

Before

Page 37: 速くなければスマフォじゃない - インターンバージョン-

Minify

(function(e){function s(e){return typeof e=="string"||e instanceof String}function o(e){return typeof

e=="function"||e instanceof Function}function u(e){return typeof e=="number"||e instanceof Number}

function a(e){return e instanceof T}function f(e){return e instanceof Object}function l(e){return e instanceof Array}function c(e){return e===undefined||e===null}function h(e){for(var t in e)return!

1;return!0}function p(e){return c(e)?"":e}function d(e){return e.replace(/-([a-z])/g,function(e){return e.toUpperCase().replace("-","")})}function v(e){return e.replace(/([A-Z])/g,function(e)

{return"-"+e.toLowerCase()})}function m(e,t){return u(t)&&c(r[e])?t+"px":t}function g(e){var t={};for(var

n=0;n<e.length;n++)t[e[n]]=1;return t}function y(e){return e?e.replace(/^¥s+|¥s+$/g,""):""}function b(e){return tag("span").text(e).inner()}function w(e,t,n){if(!n)return;["-webkit-"+t,"-moz-"+t,"-ms-"+t,"-

o-"+t,t].forEach(function(t){e[t]=n})}function S(e){return e._cid||(e._cid=++E)}function x(e,t,n){try{var r=new Event(e);r.target=t;return r}catch(i){var s=t instanceof T?

t.get(0):null;return{type:e,target:t,currentTarget:s,custom:!0,source:n,stopPropagation:function()

{n&&n.stopPropagation()},preventDefault:function(){n&&n.preventDefault()}}}}function T(e,t){s(e)?this.c=t.querySelectorAll(e):l(e)?this.c=e:this.c=[e]}function N(e){return c(e)?null:e instanceof T?e:new

T(e,t)}function k(e){return e in C?C[e]:e}function M(e,t,n){this.count=0;this.loop=t||0;this.interval=e||0;this.delay=n||0;this.timerId=0}function D(e,t){var n=(new Error).stack;if(n){var r=n.split(/

¥n/),i=r[3];if(i){var s=_.exec(i);if(s){var o=s[1];t.push("("+o+")")}}}t.unshift("["+e+"]");N.os.ios||

N.os.android?console.log(t.join(" ")):console.log.apply(console,t)}function H(){}var t=e.document,n=e.document.documentElement,r={"column-count":1,columns:1,"font-weight":1,"line-

height":1,opacity:1,"z-index":1,zoom:1},i=Array.prototype.slice,E=0,C={added:"DOMNodeInsertedIntoDocument",removed:"DOMNodeRemo

vedFromDocument"};T.prototype={constructor:T,length:function(){return this.c.length},exist:function(e)

{var t=this.c;return e>=0&&e<t.length&&(l(t)?!c(t[e]):!c(t.item(e)))},get:function(e){return l(this.c)?this.c[e]:this.c.item(e)},each:function(e){var t=this.c instanceof Array;for(var n=0;n<this.c.length;n++)t?

e.call(this.c[n]):e.call(this.c.item(n));return this},find:function(e){var t=[];this.each(function(){var n=this.querySelectorAll(e),r=n.length;for(var i=0;i<r;i++)t.push(n.item(i))});return N(t)},bound:function(e)

{var n=this.get(0).getBoundingClientRect(),r=e&&e.screen?0:t.body.scrollLeft,i=e&&e.screen?

0:t.body.scrollTop;return{left:Math.floor(n.left+r),right:Math.floor(n.right+r),top:Math.floor(n.top+i),bottom:Math.floor(n.bottom

+i),width:Math.floor(n.width),height:Math.floor(n.height)}},width:function(e){if(e===undefined)return this.bound().width;typeof e=="number"&&(e+="px");return this.css({width:e})},height:function(e)

{if(e===undefined)return this.bound().height;typeof e=="number"&&(e+="px");return

this.css({height:e})},position:function(e){if(!e){var t=this.bound();return{x:t.left,y:t.top}}this.css({left:e.x,top:e.y});return this},css:function(e){var t;if(s(e))return this.get(0).style[d(e)]||

getComputedStyle(this.get(0),"").getPropertyValue(e);if(arguments.length===0){t={};this.get(0).style.cssText.split(";").forEach(function(e){var n=e.match(/¥s*(.+)¥s*:¥s*(.+)

¥s*/);n&&(t[n[1]]=n[2])});return t}t="";var n=e.reset;delete e.reset;for(var r in e){var i=v(r);t+=i

+":"+m(r,e[r])+";"}this.each(function(){n?this.style.cssText=t:this.style.cssText+=t});return this},hasClass:function(e){if(!this.exist(0))return undefined;var t=!1;this.each(function(){var

n=this.className;t=(" "+p(n)+" ").indexOf(" "+e+" ")>=0;return t});return t},cls:function(e){if(c(e)){var t={};this.each(function(){N.merge(t,g(this.className.split(/¥s+/g)))});return t}var n=[],r=[],i=0;s(e)?

n=[e]:l(e)?n=g(e):N.map(e,function(e,t){t===1?n.push(e):r.push(e)});this.each(function(){var

e=g(this.className.split(/¥s+/g));for(i=0;i<n.length;i++){var t=n[i];t&&(e[t]=1)}for(i=0;i<r.length;i++)delete e[r[i]];var s="";N.map(e,function(e){s.length===0?s+=e:s+=" "+e});this.className=s});return

this},on:function(e,t,n){e=k(e);this.each(function(){function r(e){var n=e.currentTarget,r=t.call(n,e);return r}r._cb=t;r._uc=n;this.addEventListener(e,r,n);var i=this._handlers||

(this._handlers={}),s=i[e]||(i[e]=[]);s.indexOf(r)<0?s.push(r):alert(t)});return this},trigger:function(e,t)

{e=k(e);var n=this,r=x(e,n,t);this.each(function(){if(r.custom){var t=this._handlers;if(t&&e in t){var i=t[e];i.forEach(function(e){return e.call(n,r)})}}else this.dispatchEvent(r)})},once:function(e,t,n)

{e=k(e);this.each(function(){var r=this;r.addEventListener(e,function(i){r.removeEventListener(e,arguments.callee,n);return t.call(r,i)},n)});return this},off:function(e,t)

{e=k(e);this.each(function(){var n=this._handlers;if(n&&e in n){var r,i=n[e];if(t){for(r=0;r<i.length;r+

+)if(i[r]._cb===t){this.removeEventListener(e,i[r],i[r]._uc);i.splice(r,1);i.length===0&&delete n[e];break}}else{for(r=0;r<i.length;r++)this.removeEventListener(e,i[r],i[r]._uc);delete n[e]}}});return

this},text:function(e){var t=arguments.length;if(t===0){var n="";this.each(function(){n+=this.textContent});return n}t>1&&(e=N.format.apply(N,arguments));e=e||"";return

this.each(function(){this.textContent=e})},value:function(e){var t=this.get(0);if(e!==null&&e!

==undefined){t&&(t.value=e);return this}return t?t.value||"":""},checked:function(){var e=this.get(0);return e.checked||!1},parent:function(){var e=this.get(0);return e?

N(e.parentNode):null},append:function(e){if(c(e))return this;var t=N(e),n=this.get(0);n&&t.each(function(){n.appendChild(this)});return this},prepend:function(e)

{if(c(e))return this;var t=N(e),n=this.get(0);n&&t.each(function(){n.childNodes.length>0&&n.firstChild?

n.insertBefore(this,n.firstChild):n.appendChild(this)});return this},replace:function(e,t){if(c(e))return this;var n=N(e),r=this.get(0),i=t.get(0);r&&n.each(function()

{r.childNodes.length>0&&i&&i.parentNode==r?r.insertBefore(this,i):r.appendChild(this);r.removeChild(i)});return this},remove:function()

{this.each(function(){this.parentNode&&this.parentNode.removeChild(this)});return

this},empty:function(){return this.inner("")},html:function(){var e=i.apply(arguments);if(e.length===0){var t="";this.each(function(){this.outerHTML&&(t+=this.outerHTML)});return t}return

this.each(function(){this.outerHTML=e[0]})},inner:function(){var e=i.apply(arguments);if(e.length===0){var t="";this.each(function(){this.innerHTML&&(t+=this.innerHTML)});return t}return

this.each(function(){this.innerHTML=e[0]})},tag:function(e,t){var n=N.tag(e,t);n._p=this;return

n},gat:function(){var e=this._p;delete this._p;return e.append(this)},appendText:function(e){this.append(t.createTextNode(e));return this},exec:function(e){e.call(this);return this},attr:function(e,t)

{var n=this,r;if(e===undefined&&t===undefined){if(arguments.length===1)return this;r=n.get(0);var i={};if(r&&r.attributes){var o=r.attributes.length;for(var u=0;u<o;u++){var

a=r.attributes[u];i[a.name]=a.value}}return i}if(t===undefined&&f(e))for(var l in

e)n.attr(l,e[l]);else{if(s(e)&&t===undefined){r=n.get(0);return r.hasAttribute(e)?r.getAttribute(e):undefined}this.each(function(){c(t)?this.removeAttribute(e):e==="cls"?

n.cls(t):this.setAttribute(e,t)})}return this},data:function(e,t){var n=this,r;if(arguments.length===0){var i=this.attr(),o={};for(r in i)r.indexOf("data-")===0&&(o[r.substring(5)]=i[r]);return o}

if(arguments.length===1){if(s(e))return this.attr("data-"+e);var u={};for(r in

e)u["data-"+r]=e[r];this.attr(u)}else this.attr("data-"+e,t);return this},tap:function(e){var n=this;if(e){n.on("tap",function(t){return e.call(this,t)});if(N.os.touch){var r=null;n.on("touchstart",function(e)

{r=N(this);r.__tap={};var n=e.changedTouches[0];r.__tap.x=n.clientX;r.__tap.y=n.pageY+t.body.scrollTop}).on("touchmove",function(e){var

n=e.changedTouches[0];r.__tap.toX=n.clientX;r.__tap.toY=n.pageY+t.body.scrollTop;var i=r.__tap;if(!

(Math.abs((i.toX||i.x)-i.x)<=10&&Math.abs((i.toY||i.y)-i.y)<=10)){r.trigger("tapout",e);return!1}}).on("touchend",function(e){e.preventDefault();e.stopPropagation();var

t=r.bound(),n=e.changedTouches[0],i=n.clientX-t.left,s=n.pageY-t.top,o=r.__tap;i>=0&&Math.abs((o.toX||o.x)-o.x)<=5&&Math.abs((o.toY||o.y)-

o.y)<=5&&i<=t.width&&s>=0&&s<=t.height&&!r.attr("disabled")&&r.trigger("tap",e);delete

r.__tap;r=null})}else n.click(function(e){N(this).trigger("tap",e)})}else n.trigger("tap");return n},over:function(e){function n(e){N(this).trigger("over",e)}var t=this;t.on("over",function(t){var

n=this;n.__over=!0;e.call(n,t)});N.os.touch?e?t.on("touchstart",n):n():t.mouseover(n);return t},tapout:function(e){var t=this;t.on("tapout",function(t){var n=this;e.call(n,t)});return t},out:function(e)

{function n(e){N(this).trigger("out",e)}var t=this;t.on("out",function(t){var n=this;if(n.__over){delete

n.__over;e.call(n,t)}});N.os.touch?e?t.on("touchend",n):n():t.mouseout(n);return t},transform:function(e,t){var n={},r=t||{};w(n,"transform",e||"none");w(n,"transform-origin",r.origin);return

this.css(n)},transition:function(e,t){var n=this,r=e||{},i="duration"in r?r.duration:.5,s={};w(s,"transform-style","preserve-3d");w(s,"transition","all "+i+"s "+(r.ease||""));n.css(s);typeof e=="function"&&(t=e);var

o=function(){t&&t.apply(n)};o&&(N.os.webkit?

n.once("webkitTransitionEnd",o):setTimeout(o,i*1e3));return this},rotate:function(e,t,n){return this.transform("rotate("+e+"deg)",t,n)},translate:function(e,t,n,r){return this.transform("translate("+e

+"px,"+t+"px)",n,r)},scale:function(e,t,n){return this.transform("scale("+e+","+e+")",t,n)},visible:function(e){return this.css({visibility:e?"visible":"hidden"})},disable:function(){function t(e)

{e.stopPropagation();e.preventDefault()}var e=this;

["touchstart","touchend","touchmove","mouseover","mouseout","mousedown","mouseup","click"].forEach(function(n){e.on(n,t)});return e}};

["click","blur","change","error","focus","keydown","keyup","keypress","keyup","load","unload","mousedown","mouseup","mousemove","mouseout","mouseover","resize","scroll","select","submit","touchstart","touch

move","touchend"].forEach(function(e){T.prototype[e]=function(t){t?this.on(e,t):this.trigger(e);return

this}});N.win=N(e);N.doc=N(t);N.root=N(n);var L=navigator.userAgent;N.os={ua:L,touch:"ontouchstart"in document.documentElement,ios:/ip(hone|od|ad)/i.test(L),iphone:/iphone/i.test(L),ipad:/ipad/

i.test(L),android:/android/i.test(L),mobile:/android.+mobile|ip(hone|od|ad)/i.test(L),webkit:/webkit/i.test(L)};N.ready=function(e){var n=t.readyState;(n==="complete"||

n==="loaded")&&e();N.doc.once("DOMContentLoaded",function(){N.body=N(t.body);e.call(N.doc)})};var

A={},O={};N.image=function(){var e=[],t=i.apply(arguments),n=t.pop(),r=t.length;r===0&&n();t.forEach(function(t){var i=new Image;A[t]=i;

["load","error"].forEach(function(s){i.addEventListener(s,function(){delete A[t];--r===0&&n(s,e)})});i.src=t;e.push(i)})};N.load=function(){function o(e){var

i=document.styleSheets;for(var u=0;u<i.length;u++){var

a=i[u];if(a.ownerNode.getAttribute("href")===e){P.info("loaded stylesheet",e);O[e]=1;--n===0&&t&&s();return}}if(++r>200){--n===0&&t&&s();return}setTimeout(function(){o(e)},50)}var

e=i.apply(arguments),t=e.pop(),n=e.length,r=0,s=function(){t.apply(this,arguments)};e.forEach(function(e){if(O[e]){--n===0&&t&&s("load");return}var

i=null,u=e.indexOf(".js")>=0,a=e.indexOf(".css")>=0;if(u){i=tag("script",{type:"text/

javascript",src:e,async:"async"});["load","error"].forEach(function(r){i.on(r,function(){i.off("load").off("error").remove();if(r==="load"){O[e]=1;P.info("loaded script",e)}--n===0&&t&&s(r)})})}

else if(a){i=N.tag("link",{rel:"stylesheet",type:"text/css",href:e});r=0;setTimeout(function(){o(e)},10)}N("head").append(i)})};N.loaded=function(){var e=i.apply(arguments);for(var t=0;t<e.length;t++)if(!

O[e[t]])return!1;return!0};N.tag=function(e,n){n=n||{};var r=e.indexOf("#"),i=e.indexOf(".");r>0&&(i>0?

n.id=e.substring(r+1,i):n.id=e.substring(r+1));if(i>0){var s=e.substring(i+1).split(".");for(var o=0;o<s.length;o++){var u=s[o];n.cls?n.cls+=" "+u:n.cls=u}}e=r>0?e.substring(0,r):i>0?

e.substring(0,i):e;var a=t.createElement(e),f=N(a).attr(n);return f};N.fragment=function(){return N(document.createDocumentFragment())};N.extend=function(e){N.map(e,function(e,t)

{T.prototype[e]=t})};N.map=function(e,t){if(!e)return;for(var n in

e)e.hasOwnProperty(n)&&t.call(e,n,e[n])};N.merge=function(e,t){if(!t)return e;if(!e)return t;N.map(t,function(t,n){n!==undefined&&(e[t]=n)});return e};N.filter=function(e,t){var

n=[],r=e.length;for(var i=0;i<r;i++){var s=e[i];t(s)&&n.push(s)}return n};N.viewport=function(){return{window:{width:e.innerWidth,height:e.innerHeight,offset:

{x:e.pageXOffset,y:e.pageYOffset}},screen:

{width:screen.width,height:screen.height},zoom:screen.width/e.innerWidth}};N.cookie=function(e,t,n){var r;if(arguments.length===1){var i=document.cookie.split(";");for(var s=0;s<i.length;s++){r=i[s];var

o=r.indexOf("="),u=y(r.substring(0,o));if(e===u)return y(r.substring(o+1))}return undefined}r=e+"="+escape(t?t:"");var a=null;if(n){a=new Date;a.setDate(a.getDate()+n)}else t||(a=new Date(0));a&&(r

+="; expires="+a.toUTCString());document.cookie=r};N.storage=function(e,t){if(arguments.length===1)

{var n=localStorage.getItem(e);return n?JSON.parse(n):null}localStorage.removeItem(e);c(t)||localStorage.setItem(e,JSON.stringify(t));return this};N.session=function(e,t){if(arguments.length===1)

{var n=sessionStorage.getItem(e);return n?JSON.parse(n):null}sessionStorage.removeItem(e);c(t)||sessionStorage.setItem(e,JSON.stringify(t));return this};N.format=function(){var e=arguments;return

e[0]?e[0].replace(/¥{(¥d+)¥}/g,function(){return e[arguments[1]]}):null};N.listenize=function(e)

{e.prototype.on=function(t,n){P.info("listening",e.name,t);if(f(t))for(var r in t)this.on(r,t[r]);else{this._events||(this._events={});var i=this._events[t];i?i.push(n):this._events[t]=[n]}

return this};e.prototype.off=function(t,n){P.info("listening off",e.name,t);var r=this;if(arguments.length===1)delete this._events[t];else if(typeof handler=="function"){var

s=this._events[t];if(s){var o=s.indexOf(n);if(o>=0){s.splice(o,1);s.length===0&&delete this._events[t]}}}

else{var u=i.apply(arguments);u.forEach(function(e){r.off(e)})}return this};e.prototype.trigger=function(){if(!this._events)return;var

t=i.apply(arguments),n=t.shift();P.debug("triggering",e.name,n,t);var r=this._events[n];if(r)for(var s=0;s<r.length;s++){var o=r[s].apply(this,t);if(o===!1||o===1)return!1}return!

0}};M.prototype={lastTap:null,paused:!1,executedTime:0,pastFromPrev:0,start:function(){var

e=this;e.paused=!1;e.end=!1;e.delay>0?e.timerId=setTimeout(function(){e.next()},e.delay):e.next();return e},next:function(){var e=this;if(e.end)return;if(e.paused)return;e.count

++;e.executedTime=(new Date).getTime();e.trigger("timer");if(e.loop>0&&--e.loop===0)return;e.timerId=setTimeout(function(){e.next()},e.interval)},pause:function(){this.paused=!

0;this.pastFromPrev=(new Date).getTime()-

this.executedTime;clearTimeout(this.timerId)},resume:function(){var e=this;this.paused=!1;this.timerId=setTimeout(function(){e.next()},e.interval-e.pastFromPrev)},stop:function(){var

e=this;e.end=!0;clearTimeout(e.timerId);return e}};N.listenize(M);N.timer=function(e,t,n){return new M(e,t,n)},N.now=function(){return(new Date).getTime()},N.makeclass=function(e){function t()

{this.init&&this.init.apply(this,arguments)}e.constructor=t;t.prototype=e;return

t};N.parseQuery=function(e){if(e===null)return!1;var e=e||location.search;if(!e){var t=location.href,n=t.indexOf("?");e=t.substring(n+1)}e.charAt(0)==="?"&&(e=e.substring(1));var

r={},i=e.split("&");for(var s=0;s<i.length;s++){var o=i[s],n=o.indexOf("="),u=[o.substring(0,n),o.substring(n

+1)];u.length===2&&(r[decodeURIComponent(u[0])]=decodeURIComponent(u[1]))}return

r};N.createQuery=function(e){var t="";for(var n in e)t+=encodeURI(n)+"="+encodeURI(e[n])+"&";return t.slice(0,-1)};N.hideAddressBar=function(){var e=N.os.android?window.outerHeight/

window.devicePixelRatio:window.outerHeight;if(document.height-60<e){var e=N.os.android?window.outerHeight/

window.devicePixelRatio:window.outerHeight;document.body.style.minHeight=e-60+"px"}

setTimeout(function(){window.scrollTo(0,1)},50)};e.addEventListener("orientationchange",N.hideAddressBar);e.

$=N;N.isString=s;N.isChikuwa=a;N.isObject=f;N.isEmptyObject=h;N.isFunction=o;N.isNumber=u;N.isArray=l;N.escapeHtml=b;var _=new RegExp("/([^/]+?:[0-9]+):"),P={debug:function()

{D("DEBUG",i.apply(arguments))},info:function(){D("INFO",i.apply(arguments))},warn:function()

{D("WARN",i.apply(arguments))},error:function(){D("ERROR",i.apply(arguments))},fatal:function(){D("FATAL",i.apply(arguments))}};N.log=P;N.setLogLevel=function(e){switch(e)

{case"FATAL":P.error=H;case"ERROR":P.warn=H;case"WARN":P.info=H;case"INFO":P.debug=H;default:}}})(window);

After

Page 38: 速くなければスマフォじゃない - インターンバージョン-

結合

chikuwa.js(function(e){function s(e){return typeof e=="string"||e

instanceof String}function o(e){return typeof

e=="function"||e instanceof Function}function u(e){return typeof e=="number"||e instanceof Number}

all.js(function(e){function s(e){return typeof e=="string"||e

instanceof String}function o(e){return typeof

e=="function"||e instanceof Function}function u(e){return typeof e=="number"||e instanceof Number}

chikuwa-view.js(function(e){function u(e){}function l(e,t){n.info("define

view class",e,t);var i=t.extend?r[t.extend]:u,s=function()

{};s.prototype=i.prototype;var o=function(t){this.__name=e;this.__init(t)};o.prototype=new s;o.proto

main.js(function(e){function s(e){return typeof e=="string"||e

instanceof String}function o(e){return typeof

e=="function"||e instanceof Function}function u(e){return typeof e=="number"||e instanceof Number}

chikuwa-dispatcher.js(function(e){function u(e){}function l(e,t){n.info("define

view class",e,t);var i=t.extend?r[t.extend]:u,s=function()

{};s.prototype=i.prototype;var o=function(t){this.__name=e;this.__init(t)};o.prototype=new s;o.proto

Page 39: 速くなければスマフォじゃない - インターンバージョン-

Google Speed

https://developers.google.com/speed/pagespeed/insights Google Chrome, Firefox

Page 40: 速くなければスマフォじゃない - インターンバージョン-

速くなければスマフォじゃない

2012年8月22日 インターン原 一成 @herablog