スマートフォン時代のWeb制作術 Vol.1                   2013年2月6日                   WAVE新宿本校                   原 一成 @herablog
スマートフォン
PV数 (億PV)150                                                                                                              ...
@herablog
PV数 (億PV)150                                                                                                              ...
PV数 (億PV)150                                                                                                              ...
@herablogHTML/CSS/JavaScript
@herablog@herablog
スマートフォン
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化Front Engineer ・プログラム知識 ・サーバー知識 ・モジュール/コンポーネント化 ・コマンドライン操作
スマートフォン
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
Selectors API・セレクタで楽に要素を取得・意外と知られていない・普段はライブラリで吸収
Selectors APIHTML<div id=”main” data-id=”1”>  <p class=”title”>Title</p></div>JavaScriptdocument.getElementById(‘main’);$(...
Canvas・比較的高い互換性・JSから操作可能・複雑な動作は一択か
CanvasHTML<canvas id=”canvas”></canvas>JavaScriptvar canvas = document.getElementById(‘canvas’);var ctx = canvas.getContex...
Canvas
Canvas
CSS: transform・CSSによる変形処理・回転、拡大、マトリックスなど多様・JSと組み合わせアニメーションも
CSS: transform<div data-parts=”f_body” style=”-webkit-transform: matrix(0.1, 0, 0, 0.1, 1.8,-43.7);”>  <img src=”data:~~”>...
Audio・ブラウザ単体で音が出せる・スマートフォンと相性がいい・ユーザーのアクション時のみ再生・同時に鳴らせるのは1ファイルだけ
AudioHTML<audio id=”audio”>  <source src=”audio”></audio>JavaScriptvar audio = document.getElementById(‘audio’);audio.loop...
Audio
Local Storage・JSから簡単にアクセス・Cookieと違いサーバに送られない・実際にはstringしか入れられない・容量オーバーに注意・非対応端末(UIWebview含)あり・超一時的なものはメモリで
Local StorageJavaScriptvar obj = {‘name’:‘val”};localStorage.setItem(‘key’, JSON.stringify(obj));var data = JSON.parse(loc...
Web Font・デザイン性が増す・ベクターなのでマルチデバイス◎・複数の種類に対応する必要あり・アイコンに使うこともできる
Web Font
Web Font@font-face {    font-family: "AmebaSymbols";    src:url("../font/ameba_symbols.eot");    src:url("../font/ameba_sy...
Can I use...http://caniuse.com/
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
大規模化javascriptsmain.jscore.jsapplication.jstop.js
JSライブラリ
JSライブラリ
JSライブラリ  軽量  MVCフレームワーク
JS独自ライブラリ                chikuwa.js                chikuwa-view.js                chikuwa-dispatcher.jshttps://github.com/...
chikuwa.js40                            32KB3020     7KB          10KB10 0     chikuwa       zepto    jQuery
テンプレートエンジンChikuwa                            HTMLvar notiCount = getNotiCount();    <header>tag( header )                 ...
View & RoutingView                                     Routing$.views({                                $.routes( group , {...
モジュール別開発メッセージ          サークルmessage.js     circle.jsmessage.css    circle.cssプロフィール         掲示板profile.js      board.jsprofil...
node.js  スケーラブル  非同期  JavaScriptである
node.js  スケーラブル  非同期  JavaScriptである
役割の変化            Front      ServerDesigner           Engineer   Engineer
Ameba
アーキテクチャ
アーキテクチャ Front           ServerEngineer        Engineer
アーキテクチャ Front      ServerEngineer   Engineer
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
パフォーマンス・スマートフォンのネックは回線・リクエスト数と転送量を減らす
MinifyBefore/*** chikuwa.js* Copyright (c) 2011 CyberAgent, Inc.* License: MIT (http://www.opensource.org/licenses/mit-lic...
MinifyAfter(function(e){function s(e){return typeof e=="string"¦¦e instanceof String}function o(e){return typeofe=="functi...
結合chikuwa.js                                                         chikuwa-view.js(function(e){function s(e){return type...
gzip転送約70%削減
注意容量注意
Google Speedhttps://developers.google.com/speed/pagespeed/insights   Google Chrome, Firefox
Chrome Developer ToolsDeveloper Toolsを制すものはDebugを制す!
スマートフォン時代のWeb制作術 Vol.1
Upcoming SlideShare
Loading in …5
×

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

2,617
-1

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,617
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. スマートフォン時代のWeb制作術 Vol.1 2013年2月6日 WAVE新宿本校 原 一成 @herablog
  2. 2. スマートフォン
  3. 3. PV数 (億PV)150 133 120 109 104103 99100 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. 4. @herablog
  5. 5. PV数 (億PV)150 133 120 109 104103 99100 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. 6. PV数 (億PV)150 133 120 109 104103 99100 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. 7. @herablogHTML/CSS/JavaScript
  8. 8. @herablog@herablog
  9. 9. スマートフォン
  10. 10. 役割の変化 Front ServerDesigner Engineer Engineer
  11. 11. 役割の変化 Front ServerDesigner Engineer Engineer
  12. 12. 役割の変化 Front ServerDesigner Engineer Engineer
  13. 13. 役割の変化Front Engineer ・プログラム知識 ・サーバー知識 ・モジュール/コンポーネント化 ・コマンドライン操作
  14. 14. スマートフォン
  15. 15. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  16. 16. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  17. 17. Selectors API・セレクタで楽に要素を取得・意外と知られていない・普段はライブラリで吸収
  18. 18. Selectors APIHTML<div id=”main” data-id=”1”> <p class=”title”>Title</p></div>JavaScriptdocument.getElementById(‘main’);$(‘#main’);document.querySelector(‘#main’);document.querySelectorAll(‘[data-id]’);document.querySelectorAll(‘.title’);
  19. 19. Canvas・比較的高い互換性・JSから操作可能・複雑な動作は一択か
  20. 20. CanvasHTML<canvas id=”canvas”></canvas>JavaScriptvar canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(2d);ctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(100, 10);ctx.closePath();
  21. 21. Canvas
  22. 22. Canvas
  23. 23. CSS: transform・CSSによる変形処理・回転、拡大、マトリックスなど多様・JSと組み合わせアニメーションも
  24. 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. 25. Audio・ブラウザ単体で音が出せる・スマートフォンと相性がいい・ユーザーのアクション時のみ再生・同時に鳴らせるのは1ファイルだけ
  26. 26. AudioHTML<audio id=”audio”> <source src=”audio”></audio>JavaScriptvar audio = document.getElementById(‘audio’);audio.loop = false;audio.play();
  27. 27. Audio
  28. 28. Local Storage・JSから簡単にアクセス・Cookieと違いサーバに送られない・実際にはstringしか入れられない・容量オーバーに注意・非対応端末(UIWebview含)あり・超一時的なものはメモリで
  29. 29. Local StorageJavaScriptvar obj = {‘name’:‘val”};localStorage.setItem(‘key’, JSON.stringify(obj));var data = JSON.parse(localStorage.getItem(‘key’));
  30. 30. Web Font・デザイン性が増す・ベクターなのでマルチデバイス◎・複数の種類に対応する必要あり・アイコンに使うこともできる
  31. 31. Web Font
  32. 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. 33. Can I use...http://caniuse.com/
  34. 34. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  35. 35. 大規模化javascriptsmain.jscore.jsapplication.jstop.js
  36. 36. JSライブラリ
  37. 37. JSライブラリ
  38. 38. JSライブラリ 軽量 MVCフレームワーク
  39. 39. JS独自ライブラリ chikuwa.js chikuwa-view.js chikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  40. 40. chikuwa.js40 32KB3020 7KB 10KB10 0 chikuwa zepto jQuery
  41. 41. テンプレートエンジンChikuwa HTMLvar 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. 42. View & RoutingView 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. 43. モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  44. 44. node.js スケーラブル 非同期 JavaScriptである
  45. 45. node.js スケーラブル 非同期 JavaScriptである
  46. 46. 役割の変化 Front ServerDesigner Engineer Engineer
  47. 47. Ameba
  48. 48. アーキテクチャ
  49. 49. アーキテクチャ Front ServerEngineer Engineer
  50. 50. アーキテクチャ Front ServerEngineer Engineer
  51. 51. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  52. 52. パフォーマンス・スマートフォンのネックは回線・リクエスト数と転送量を減らす
  53. 53. MinifyBefore/*** 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. 54. MinifyAfter(function(e){function s(e){return typeof e=="string"¦¦e instanceof String}function o(e){return typeofe=="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 einstanceof 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){returne.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(varn=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{varr=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:newT(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(){}vart=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:"DOMNodeRemovedFromDocument"};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. 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("defineinstanceof 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.protomain.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("defineinstanceof 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. 56. gzip転送約70%削減
  57. 57. 注意容量注意
  58. 58. Google Speedhttps://developers.google.com/speed/pagespeed/insights Google Chrome, Firefox
  59. 59. Chrome Developer ToolsDeveloper Toolsを制すものはDebugを制す!
  60. 60. スマートフォン時代のWeb制作術 Vol.1
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×