SlideShare a Scribd company logo
速くなければスマフォじゃない



         2012年8月22日 インターン
         原 一成 @herablog
違い
違い




・画面サイズ ・容量

・JavaScript ・Flash

・電池        ・キーボード

・PCサイト
変わらないもの




      回線速度
@herablog
@herablog




@herablog
@herablog
@herablog
@herablog




HTML/CSS/JavaScript
@herablog




「手触りを決める仕事」
デカグラフ
ソースを見る


HTML
 
 




以上。
JavaScriptで制御
JavaScriptで制御




・ファイルサイズ減少
 → 重複しない

・量産しやすい
 → 共通化して値だけ変えるとか
ライブラリ
ライブラリ
ライブラリ
ライブラリ
ライブラリ
ライブラリ
chikuwa.js



・軽量

・テンプレートエンジン

・View & Routing

・モジュール別開発

 https://github.com/suguru/chikuwa.js
軽量



40

                        31KB
30


20

     5KB      6KB
10


 0
     jqMobi   Chikuwa   jQuery
テンプレートエンジン



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();
タグ コンバータ




https://s.amebame.com/#tagconvert
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);
});                                      }
モジュール別開発



メッセージ          サークル
message.js     circle.js
message.css    circle.css


プロフィール         掲示板
profile.js      board.js
profile.css     board.css
アーキテクチャ
AJAX


・Asynchronous JavaScript + XML
・XMLHttpRequestを利用
・非同期通信で必要なデータのみ取得できる
AJAX


・Asynchronous JavaScript + XML
・XMLHttpRequestを利用
・非同期通信で必要なデータのみ取得できる
JSON




・JavaScript Object Notation
・{ key : value }
・XMLより比較的軽量
・JavaScriptとの相性◎
node.js




・V8エンジン
・非同期I/O
・JavaScripterとの相性◎
Web Font
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" }
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; }
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)?
結合

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}
Google Speed




https://developers.google.com/speed/pagespeed/insights   Google Chrome, Firefox
速くなければスマフォじゃない



         2012年8月22日 インターン
         原 一成 @herablog

More Related Content

What's hot

3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道20123時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
Yusuke Ando
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるjamadam
 
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
leverages_event
 
swooleを試してみた
swooleを試してみたswooleを試してみた
swooleを試してみた
Yukihiro Katsumi
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
Fujio Kojima
 
実用裏方 Perl 入門
実用裏方 Perl 入門実用裏方 Perl 入門
実用裏方 Perl 入門
keroyonn
 
Teclab3
Teclab3Teclab3
あらためてPHP5.3
あらためてPHP5.3あらためてPHP5.3
あらためてPHP5.3
Masashi Shinbara
 
メタメタプログラミングRuby
メタメタプログラミングRubyメタメタプログラミングRuby
メタメタプログラミングRuby
emasaka
 
Django boodoo
Django boodooDjango boodoo
Django boodoo
泰 増田
 
Gen-Template-for-Perl
Gen-Template-for-PerlGen-Template-for-Perl
Gen-Template-for-Perlnasneg
 
PHP classの教室
PHP classの教室PHP classの教室
PHP classの教室
Yusuke Ando
 
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorpSwift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
Tomohiro Kumagai
 
C++でHello worldを書いてみた
C++でHello worldを書いてみたC++でHello worldを書いてみた
C++でHello worldを書いてみた
firewood
 
Try Jetpack
Try JetpackTry Jetpack
Try Jetpack
Hideaki Miyake
 
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
Wataru Terada
 
プロトコル指向 - 夢と現実の狭間 #cswift
プロトコル指向 - 夢と現実の狭間 #cswiftプロトコル指向 - 夢と現実の狭間 #cswift
プロトコル指向 - 夢と現実の狭間 #cswift
Tomohiro Kumagai
 

What's hot (18)

3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道20123時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてる
 
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
 
swooleを試してみた
swooleを試してみたswooleを試してみた
swooleを試してみた
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
 
実用裏方 Perl 入門
実用裏方 Perl 入門実用裏方 Perl 入門
実用裏方 Perl 入門
 
Nginx lua
Nginx luaNginx lua
Nginx lua
 
Teclab3
Teclab3Teclab3
Teclab3
 
あらためてPHP5.3
あらためてPHP5.3あらためてPHP5.3
あらためてPHP5.3
 
メタメタプログラミングRuby
メタメタプログラミングRubyメタメタプログラミングRuby
メタメタプログラミングRuby
 
Django boodoo
Django boodooDjango boodoo
Django boodoo
 
Gen-Template-for-Perl
Gen-Template-for-PerlGen-Template-for-Perl
Gen-Template-for-Perl
 
PHP classの教室
PHP classの教室PHP classの教室
PHP classの教室
 
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorpSwift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
Swift 3 で新しくなったところ - 表面から見えにくいところを中心に紹介 #ISAOcorp
 
C++でHello worldを書いてみた
C++でHello worldを書いてみたC++でHello worldを書いてみた
C++でHello worldを書いてみた
 
Try Jetpack
Try JetpackTry Jetpack
Try Jetpack
 
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
 
プロトコル指向 - 夢と現実の狭間 #cswift
プロトコル指向 - 夢と現実の狭間 #cswiftプロトコル指向 - 夢と現実の狭間 #cswift
プロトコル指向 - 夢と現実の狭間 #cswift
 

Viewers also liked

Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめKazunari Hara
 
Watch the Time
Watch the TimeWatch the Time
Watch the Time
Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
Kazunari Hara
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
Kazunari Hara
 
俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法
Kazunari Hara
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたKazunari Hara
 
俺はMETAだ!
俺はMETAだ!俺はMETAだ!
俺はMETAだ!
Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
Kazunari Hara
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
 
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみアメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
 

Viewers also liked (12)

Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめ
 
Watch the Time
Watch the TimeWatch the Time
Watch the Time
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
 
俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
 
俺はMETAだ!
俺はMETAだ!俺はMETAだ!
俺はMETAだ!
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
 
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみアメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
 

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

TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューAkira Inoue
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみたYuki Takei
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
Koji Ishimoto
 
探検!SwiftyJSON
探検!SwiftyJSON探検!SwiftyJSON
探検!SwiftyJSON
Yuka Ezura
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
サーバーサイドでの非同期処理で色々やったよ
サーバーサイドでの非同期処理で色々やったよサーバーサイドでの非同期処理で色々やったよ
サーバーサイドでの非同期処理で色々やったよ
koji lin
 
OSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニックOSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニック
庸介 高橋
 
Twitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hackTwitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hack
kimukou_26 Kimukou
 
pecl-AOPの紹介
pecl-AOPの紹介pecl-AOPの紹介
pecl-AOPの紹介
Hiraku Nakano
 
初めての Data api
初めての Data api初めての Data api
初めての Data api
Yuji Takayama
 
Swiftおさらい
SwiftおさらいSwiftおさらい
Swiftおさらい
Hidenori Takeshita
 
Project lambda
Project lambdaProject lambda
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
 
T2 - 関ジャバ1月27日
T2 - 関ジャバ1月27日T2 - 関ジャバ1月27日
T2 - 関ジャバ1月27日Go Tanaka
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
Yasuhito Yabe
 

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

TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
 
Scala on Hadoop
Scala on HadoopScala on Hadoop
Scala on Hadoop
 
Ajax 応用
Ajax 応用Ajax 応用
Ajax 応用
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
 
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
探検!SwiftyJSON
探検!SwiftyJSON探検!SwiftyJSON
探検!SwiftyJSON
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
サーバーサイドでの非同期処理で色々やったよ
サーバーサイドでの非同期処理で色々やったよサーバーサイドでの非同期処理で色々やったよ
サーバーサイドでの非同期処理で色々やったよ
 
OSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニックOSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニック
 
Pyramid入門
Pyramid入門Pyramid入門
Pyramid入門
 
Twitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hackTwitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hack
 
pecl-AOPの紹介
pecl-AOPの紹介pecl-AOPの紹介
pecl-AOPの紹介
 
初めての Data api
初めての Data api初めての Data api
初めての Data api
 
Swiftおさらい
SwiftおさらいSwiftおさらい
Swiftおさらい
 
Project lambda
Project lambdaProject lambda
Project lambda
 
Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
T2 - 関ジャバ1月27日
T2 - 関ジャバ1月27日T2 - 関ジャバ1月27日
T2 - 関ジャバ1月27日
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
 

Recently uploaded

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 

Recently uploaded (14)

FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 

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

  • 1. 速くなければスマフォじゃない 2012年8月22日 インターン 原 一成 @herablog
  • 4. 変わらないもの 回線速度
  • 5.
  • 11.
  • 24. 軽量 40 31KB 30 20 5KB 6KB 10 0 jqMobi Chikuwa jQuery
  • 25. テンプレートエンジン 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();
  • 27. 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); }); }
  • 28. モジュール別開発 メッセージ サークル message.js circle.js message.css circle.css プロフィール 掲示板 profile.js board.js profile.css board.css
  • 30. AJAX ・Asynchronous JavaScript + XML ・XMLHttpRequestを利用 ・非同期通信で必要なデータのみ取得できる
  • 31. AJAX ・Asynchronous JavaScript + XML ・XMLHttpRequestを利用 ・非同期通信で必要なデータのみ取得できる
  • 32. JSON ・JavaScript Object Notation ・{ key : value } ・XMLより比較的軽量 ・JavaScriptとの相性◎
  • 35. 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" }
  • 36. 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; }
  • 37. 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)?
  • 38. 結合 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}
  • 40. 速くなければスマフォじゃない 2012年8月22日 インターン 原 一成 @herablog