http://atnd.org/events/35844 こちらのイベントの内容(抜粋)です。

1. スマートフォン時代のWeb制作術 Vol.1
2013年2月6日
WAVE新宿本校
原 一成 @herablog

2. スマートフォン

3. PV数 (億PV)
150
133
120
109
104103
99
100
91
85
76
67
61
50 45 47
35
28 30
20 21
17
13
7 9 9 11
3 3 5
2
0
10.1011 12 11.1 2 3 4 5 6 7 8 9 10 11 12 12.1 2 3 4 5 6 7 8 9 10 11 12 13.1

4. @herablog

5. PV数 (億PV)
150
133
120
109
104103
99
100
91
85
76
67
61
50 45 47
35
28 30
20 21
17
13
7 9 9 11
3 3 5
2
0
10.1011 12 11.1 2 3 4 5 6 7 8 9 10 11 12 12.1 2 3 4 5 6 7 8 9 10 11 12 13.1

6. PV数 (億PV)
150
133
120
109
104103
99
100
91
85
76
67
61
50 45 47
35
28 30
20 21
17
13
7 9 9 11
3 3 5
2
0
10.1011 12 11.1 2 3 4 5 6 7 8 9 10 11 12 12.1 2 3 4 5 6 7 8 9 10 11 12 13.1

7. @herablog
HTML/CSS/JavaScript

8. @herablog
@herablog

9. スマートフォン

10. 役割の変化
Front Server
Designer
Engineer Engineer

11. 役割の変化
Front Server
Designer
Engineer Engineer

12. 役割の変化
Front Server
Designer
Engineer Engineer

13. 役割の変化
Front Engineer
・プログラム知識
・サーバー知識
・モジュール/コンポーネント化
・コマンドライン操作

14. スマートフォン

15. スマートフォン
HTML5/CSS3
JavaScript
パフォーマンス

16. スマートフォン
HTML5/CSS3
JavaScript
パフォーマンス

17. Selectors API
・セレクタで楽に要素を取得
・意外と知られていない
・普段はライブラリで吸収

18. Selectors API
HTML
<div id=”main” data-id=”1”>
<p class=”title”>Title</p>
</div>
JavaScript
document.getElementById(‘main’);
$(‘#main’);
document.querySelector(‘#main’);
document.querySelectorAll(‘[data-id]’);
document.querySelectorAll(‘.title’);

19. Canvas
・比較的高い互換性
・JSから操作可能
・複雑な動作は一択か

20. Canvas
HTML
<canvas id=”canvas”></canvas>
JavaScript
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.closePath();

21. Canvas

22. Canvas

23. CSS: transform
・CSSによる変形処理
・回転、拡大、マトリックスなど多様
・JSと組み合わせアニメーションも

24. CSS: transform
<div data-parts=”f_body” style=”-webkit-
transform: matrix(0.1, 0, 0, 0.1, 1.8,
-43.7);”>
<img src=”data:~~”>
</div>
<div data-parts=”f_body” style=”-webkit-
transform: matrix(0.99, 0, 0, 0.99, 0.75,
-40.5);”>
<img src=”data:~~”>
</div>

25. Audio
・ブラウザ単体で音が出せる
・スマートフォンと相性がいい
・ユーザーのアクション時のみ再生
・同時に鳴らせるのは1ファイルだけ

26. Audio
HTML
<audio id=”audio”>
<source src=”audio”>
</audio>
JavaScript
var audio = document.getElementById(‘audio’);
audio.loop = false;
audio.play();

27. Audio

28. Local Storage
・JSから簡単にアクセス
・Cookieと違いサーバに送られない
・実際にはstringしか入れられない
・容量オーバーに注意
・非対応端末(UIWebview含)あり
・超一時的なものはメモリで

29. Local Storage
JavaScript
var obj = {‘name’:‘val”};
localStorage.setItem(‘key’, JSON.stringify(obj));
var data = JSON.parse(localStorage.getItem(‘key’));

30. Web Font
・デザイン性が増す
・ベクターなのでマルチデバイス◎
・複数の種類に対応する必要あり
・アイコンに使うこともできる

31. Web Font

32. 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" }

33. Can I use...
http://caniuse.com/

34. スマートフォン
HTML5/CSS3
JavaScript
パフォーマンス

35. 大規模化
javascripts
main.js
core.js
application.js
top.js

36. JSライブラリ

37. JSライブラリ

38. JSライブラリ
軽量
MVCフレームワーク

39. JS独自ライブラリ
chikuwa.js
chikuwa-view.js
chikuwa-dispatcher.js
https://github.com/ameba-proteus/chikuwa.js

40. chikuwa.js
40
32KB
30
20
7KB 10KB
10
0
chikuwa zepto jQuery

41. テンプレートエンジン
Chikuwa HTML
var notiCount = getNotiCount(); <header>
tag( header ) <button class= menu ></button>
.tag( button.menu ).gat() <h1>Ameba</h1>
.tag( h1 ).text( Ameba ).gat() <button class= noti >
.tag( button.noti ) <span class= counter >1</span>
.tag( span.counter ) </button>
.text(notiCount).gat() </header>
.gat();

42. View & Routing
View Routing
$.views({ $.routes( group , {
group.top : { /: {name: top , action: top },
init: function(data) { /:groupId/info : {name: info , action: info }
this.data = data ¦¦ {}; });
},
render: function() { Action
return tag( div ); function top(vars) {
} var view = $.view( group.top );
} page.replace(view);
}); }

43. モジュール別開発
メッセージ サークル
message.js circle.js
message.css circle.css
プロフィール 掲示板
profile.js board.js
profile.css board.css

44. node.js
スケーラブル
非同期
JavaScriptである

45. node.js
スケーラブル
非同期
JavaScriptである

46. 役割の変化
Front Server
Designer
Engineer Engineer

47. Ameba

48. アーキテクチャ

49. アーキテクチャ
Front Server
Engineer Engineer

50. アーキテクチャ
Front Server
Engineer Engineer

51. スマートフォン
HTML5/CSS3
JavaScript
パフォーマンス

52. パフォーマンス
・スマートフォンのネックは回線
・リクエスト数と転送量を減らす

53. Minify
Before
/**
* 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; }

54. Minify
After
(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)?

55. 結合
chikuwa.js chikuwa-view.js
(function(e){function s(e){return typeof e=="string"¦¦e (function(e){function u(e){}function l(e,t){n.info("define
instanceof String}function o(e){return typeof view class",e,t);var i=t.extend?r[t.extend]:u,s=function()
e=="function"¦¦e instanceof Function}function u(e) {};s.prototype=i.prototype;var o=function(t)
{return typeof e=="number"¦¦e instanceof Number} {this.__name=e;this.__init(t)};o.prototype=new s;o.proto
main.js chikuwa-dispatcher.js
(function(e){function s(e){return typeof e=="string"¦¦e (function(e){function u(e){}function l(e,t){n.info("define
instanceof String}function o(e){return typeof view class",e,t);var i=t.extend?r[t.extend]:u,s=function()
e=="function"¦¦e instanceof Function}function u(e) {};s.prototype=i.prototype;var o=function(t)
{return typeof e=="number"¦¦e instanceof Number} {this.__name=e;this.__init(t)};o.prototype=new s;o.proto
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}

56. gzip転送
約70%削減

57. 注意
容量注意

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

59. Chrome Developer Tools
Developer Toolsを制すものはDebugを制す！

60. スマートフォン時代のWeb制作術 Vol.1