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

「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 

Recently uploaded (9)

「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 

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

  • 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