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

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

2013年2月12日
DeNA渋谷
原一成 @herablog

まずは運だめし!
http://goo.gl/VZrbd
・WebKit系でお願いします
・ニックネームを入力してください

プレゼントがあります！
おめでとうございます。

まゆまろは？
1 2

3 4

まゆまろの特徴で正しくないものは？
1 2
まんまる
3歳
おめめ

3 4
乱暴者階段
が苦手が苦手

100万円が欲しい
1 2
欲しく
欲しい!
ない!

3 4

原一成 Hara Kazunari
Web Developer
CyberAgent, Inc.

@herablog

HTML/CSS/JavaScript

PV数 (億PV)
150

133

120
109
104103
99
100
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

役割の変化

Front Server
Designer
Engineer Engineer

役割の変化

Designer
・レイアウト
・高度なWebデザイン
・イラストレーションが専門化
・インタラクションに関与

役割の変化

Front Engineer

・HTML/CSS + JavaScript
・プログラム知識(モジュール化)
・サーバー知識
・コマンドライン操作

役割の変化

Server Engineer
・プログラム、サーバー知識
・API作成知識 (REST, Status Code)

・最適なインフラ構成構築
・JavaScriptなどHTML5関連

役割の変化

スマホ時代には

・Front/Severをつなぐ必要あり
・デザイン, インフラはより専門化

スマートフォン

HTML5/CSS3

JavaScript

パフォーマンス

node.js

スケーラブル

非同期

JavaScriptである

アーキテクチャ

Front Server
Engineer Engineer

jade

・テンプレートエンジン
・インデント形式で閉じタグいらず
・変数や分岐、include
・テンプレート継承が便利

jade

base.jade index.jade
!!! 5 extends ./base
html
head block contents
block title div#contents
title Event 20130212
body block append scripts
block header script(src=‘js/core.js’)
block contents
//- load scripts
block scripts
script(src='/js/main.js')

express

・よく使われているフレームワーク
・Connectというミドルウェアを
使っている
・簡単にWebアプリを作れる

express

// create web server
var express = require('express');
var app = express();
app.configure(function() {
// jade setting
app.set('view engine','jade');
app.set('views', path.join(basedir, '/template/
jade'));
// static server setting
app.use(express['static'](path.join(basedir, '/
public')));
});

express

// routing
app.get('/', function(req, res){
res.render('index');
});

// start server
var server = http.createServer(app).listen(port,
function(){
console.log('server started port on ' + port);
});

socket.io

・リアルタイム通信を実現
・ブラウザごとに最適な方式を選択
WebSocket/XHR Polling/Flashなど

・もうすぐ1.0リリース

クラウド

・システム運用をアウトソース
・思い立ったらすぐリリースできる
・大体最初は無料
・たくさんのサービスから選択できる
AWS/Google App Engine/dotCloudなど

Heroku

・gitと連携

heroku login ・デフォルトは無料
heroku create
git push heroku master ・Add-onで課金
・多くの言語に対応
Ruby/Node/Python/Scalaなど

JSライブラリ

軽量

MVCフレームワーク

JS独自ライブラリ

chikuwa.js
chikuwa-view.js
chikuwa-dispatcher.js

https://github.com/ameba-proteus/chikuwa.js

chikuwa.js

40

32KB
30

20

7KB 10KB
10

0
chikuwa zepto 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();

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

プロフィール掲示板
proﬁle.js board.js
proﬁle.css board.css

Canvas

HTML
<canvas id=”canvas”></canvas>

JavaScript
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.closePath();

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>

スマートフォン時代のWeb制作術 Vol.1
Selectors API / Canvas / CSS Transform
Audio / Local Storage / Web Font
パフォーマンス改善

http://www.slideshare.net/herablog

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

Recomendados

Recomendados

Más contenido relacionado

Último

Último (7)

Destacado

Destacado (20)

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