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

  • 2,460 views
Uploaded on

http://atnd.org/events/35844 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,460
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. スマートフォン時代のWeb制作術 Vol.1 2013年2月6日 WAVE新宿本校 原 一成 @herablog
  • 2. スマートフォン
  • 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. @herablog
  • 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. 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. @herablogHTML/CSS/JavaScript
  • 8. @herablog@herablog
  • 9. スマートフォン
  • 10. 役割の変化 Front ServerDesigner Engineer Engineer
  • 11. 役割の変化 Front ServerDesigner Engineer Engineer
  • 12. 役割の変化 Front ServerDesigner Engineer Engineer
  • 13. 役割の変化Front Engineer ・プログラム知識 ・サーバー知識 ・モジュール/コンポーネント化 ・コマンドライン操作
  • 14. スマートフォン
  • 15. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  • 16. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  • 17. Selectors API・セレクタで楽に要素を取得・意外と知られていない・普段はライブラリで吸収
  • 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. Canvas・比較的高い互換性・JSから操作可能・複雑な動作は一択か
  • 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. 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. AudioHTML<audio id=”audio”> <source src=”audio”></audio>JavaScriptvar audio = document.getElementById(‘audio’);audio.loop = false;audio.play();
  • 27. Audio
  • 28. Local Storage・JSから簡単にアクセス・Cookieと違いサーバに送られない・実際にはstringしか入れられない・容量オーバーに注意・非対応端末(UIWebview含)あり・超一時的なものはメモリで
  • 29. Local StorageJavaScriptvar 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. 大規模化javascriptsmain.jscore.jsapplication.jstop.js
  • 36. JSライブラリ
  • 37. JSライブラリ
  • 38. JSライブラリ 軽量 MVCフレームワーク
  • 39. JS独自ライブラリ chikuwa.js chikuwa-view.js chikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  • 40. chikuwa.js40 32KB3020 7KB 10KB10 0 chikuwa zepto jQuery
  • 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. 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. モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  • 44. node.js スケーラブル 非同期 JavaScriptである
  • 45. node.js スケーラブル 非同期 JavaScriptである
  • 46. 役割の変化 Front ServerDesigner Engineer Engineer
  • 47. Ameba
  • 48. アーキテクチャ
  • 49. アーキテクチャ Front ServerEngineer Engineer
  • 50. アーキテクチャ Front ServerEngineer Engineer
  • 51. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  • 52. パフォーマンス・スマートフォンのネックは回線・リクエスト数と転送量を減らす
  • 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. 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. 結合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. gzip転送約70%削減
  • 57. 注意容量注意
  • 58. Google Speedhttps://developers.google.com/speed/pagespeed/insights Google Chrome, Firefox
  • 59. Chrome Developer ToolsDeveloper Toolsを制すものはDebugを制す!
  • 60. スマートフォン時代のWeb制作術 Vol.1