Your SlideShare is downloading. ×
0
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,556

Published on

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

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

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

No Downloads
Views
Total Views
2,556
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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

×