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

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

まずは運だめし!

まずは運だめし!http://goo.gl/VZrbd

・WebKit系でお願いします・ニックネームを入力してください

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

そこで、問題です

まゆまろは？1 2

3 4

まゆまろは？1 2

3 4

まゆまろの特徴で正しくないものは？1 2

3 4

3歳 まんまるおめめ

乱暴者が苦手

階段が苦手

まゆまろの特徴で正しくないものは？1 2

3 4

3歳 まんまるおめめ

乱暴者が苦手

階段が苦手

100万円が欲しい1 2

3 4

欲しい! 欲しくない!

100万円が欲しい1 2

3 4

欲しい! 欲しくない!

原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.

@herablog

HTML/CSS/JavaScript

@herablog

@herablog

スマートフォン

0

50

100

150

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

133

120

109103104

9991

85

76

6761

4745

353028

21201713119975332

PV数 (億PV)

0

50

100

150

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

133

120

109103104

9991

85

76

6761

4745

353028

21201713119975332

PV数 (億PV)

役割の変化

Designer FrontEngineer

ServerEngineer

役割の変化

Designer FrontEngineer

ServerEngineer

役割の変化

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

Designer

役割の変化

Designer FrontEngineer

ServerEngineer

役割の変化

Front Engineer

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

役割の変化

Designer FrontEngineer

ServerEngineer

役割の変化

・プログラム、サーバー知識・API作成知識 (REST, Status Code)・最適なインフラ構成構築・JavaScriptなどHTML5関連

Server Engineer

役割の変化

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

スマホ時代には

スマートフォン

スマートフォン

HTML5/CSS3

JavaScript

パフォーマンス

スマートフォン

HTML5/CSS3

JavaScript

パフォーマンス

node.js

スケーラブル

非同期

JavaScriptである

node.js

スケーラブル

非同期

JavaScriptである

役割の変化

Designer FrontEngineer

ServerEngineer

node.js

スケーラブル

非同期

JavaScriptである

アーキテクチャ

Ameba

アーキテクチャ

アーキテクチャ

ServerEngineer

FrontEngineer

アーキテクチャ

ServerEngineer

FrontEngineer

アーキテクチャ

ServerEngineer

FrontEngineer

jade

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

jade

!!! 5

html

head

block title

title Event 20130212

body

block header

block contents

//- load scripts

block scripts

script(src='/js/main.js')

base.jade index.jadeextends ./base

block contents

div#contents

block append scripts

script(src=‘js/core.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

heroku login

heroku create

git push heroku master

・gitと連携・デフォルトは無料・Add-onで課金・多くの言語に対応Ruby/Node/Python/Scalaなど

JSライブラリ

JSライブラリ

軽量

MVCフレームワーク

JSライブラリ

chikuwa.jschikuwa-view.jschikuwa-dispatcher.js

JS独自ライブラリ

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

chikuwa.js

0

10

20

30

40

chikuwa zepto jQuery

10KB7KB

32KB

テンプレートエンジン

var notiCount = getNotiCount();tag(‘header’).tag(‘button.menu’).gat().tag(‘h1’).text(‘Ameba’).gat().tag(‘button.noti’).tag(‘span.counter’).text(notiCount).gat()

.gat();

<header><button class=”menu”></button><h1>Ameba</h1><button class=”noti”><span class=”counter”>1</span>

</button></header>

Chikuwa HTML

View & Routing

$.views({‘group.top’ : {init: function(data) {this.data = data || {};

},render: function() {return tag(‘div’);

}}

});

$.routes(‘group’, {‘/’: {name: ‘top’, action: ‘top’},‘/:groupId/info’: {name: ‘info’, action: ‘info’}

});

View Routing

function top(vars) {var view = $.view(‘group.top’);page.replace(view);

}

Action

モジュール別開発

メッセージmessage.jsmessage.css

サークルcircle.jscircle.css

プロフィールprofile.jsprofile.css

掲示板board.jsboard.css

スマートフォン

HTML5/CSS3

JavaScript

パフォーマンス

Canvas

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

HTML

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

JavaScript

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>

Audio

Web Font

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

http://www.slideshare.net/herablog

Selectors API / Canvas / CSS TransformAudio / Local Storage / Web Font

パフォーマンス改善