Your SlideShare is downloading. ×
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
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

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

836

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
836
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
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. 速くなければスマフォじゃない 2012年8月22日 インターン 原 一成 @herablog
  • 2. 違い
  • 3. 違い・画面サイズ ・容量・JavaScript ・Flash・電池 ・キーボード・PCサイト
  • 4. 変わらないもの 回線速度
  • 5. @herablog
  • 6. @herablog@herablog
  • 7. @herablog
  • 8. @herablog
  • 9. @herablogHTML/CSS/JavaScript
  • 10. @herablog「手触りを決める仕事」
  • 11. デカグラフ
  • 12. ソースを見るHTML  以上。
  • 13. JavaScriptで制御
  • 14. JavaScriptで制御・ファイルサイズ減少 → 重複しない・量産しやすい → 共通化して値だけ変えるとか
  • 15. ライブラリ
  • 16. ライブラリ
  • 17. ライブラリ
  • 18. ライブラリ
  • 19. ライブラリ
  • 20. ライブラリ
  • 21. chikuwa.js・軽量・テンプレートエンジン・View & Routing・モジュール別開発 https://github.com/suguru/chikuwa.js
  • 22. 軽量40 31KB3020 5KB 6KB10 0 jqMobi Chikuwa jQuery
  • 23. テンプレートエンジン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();
  • 24. タグ コンバータhttps://s.amebame.com/#tagconvert
  • 25. 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);}); }
  • 26. モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  • 27. アーキテクチャ
  • 28. AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
  • 29. AJAX・Asynchronous JavaScript + XML・XMLHttpRequestを利用・非同期通信で必要なデータのみ取得できる
  • 30. JSON・JavaScript Object Notation・{ key : value }・XMLより比較的軽量・JavaScriptとの相性◎
  • 31. node.js・V8エンジン・非同期I/O・JavaScripterとの相性◎
  • 32. Web Font
  • 33. 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" }
  • 34. 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; }
  • 35. 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)?
  • 36. 結合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}
  • 37. Google Speedhttps://developers.google.com/speed/pagespeed/insights Google Chrome, Firefox
  • 38. 速くなければスマフォじゃない 2012年8月22日 インターン 原 一成 @herablog

×