HTML5 in Rakuten
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/

This presen...
HTML5 x Rakuten

2
Self Introduction

Oga
Tsutomu Ogasawara
Role

HTML5 Project Team Leader
(July 1st 2012 ~)

Expertise

Software Engineer (...
HTML5 Project Team Overview

HTML5 Project Team

4
Business Unit

Business Unit

Business Unit

Business Unit

Business Unit

HTML5 Project Team Overview

・・・

5
Development Unit (DU)

Business Unit

Business Unit

Business Unit

Business Unit

Business Unit

HTML5 Project Team Overv...
HTML5 Project Team Overview

Development Unit (DU)

Infrastructure
Database
Web Service
Smart Device App
Web API
etc...

B...
Our Mission

R&D

8
Our Mission

R&D

Evangelization

9
Our Mission

R&D

Evangelization

Support

10
Our Mission

R&D

Evangelization

Support

Quality

Performance

Productivity

11
Our Mission

R&D

Evangelization

Support

Quality

Performance

Productivity

12
Today’s Agenda

HTML5 Evangelization in Rakuten
Jose Segura

Rakuten gateway Web App Development
Tomoko “Mon” Monzen

Web ...
HTML5 Evangelization
Jose Manuel Segura Alvarez
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://...
Table of contents

1 About myself
2 HTML5 in Rakuten
3 HTML5 Project Team Activity

15
Self Introduction

Jose Manuel
Segura Alvarez
Role

HTML5 Evangelist

Previous
experience

Mobile websites (dumb & smart
p...
Self Introduction

Jose

ホセ

Segura

セグラ

Role

HTML5 Evangelist

Previous
experience

Mobile websites (dumb & smart
phone...
Table of contents

1 About myself
2 HTML5 cases in Rakuten
3 HTML5 Project Team Activity

18
HTML5 cases in Rakuten

Situation of HTML5 services in Rakuten

19
HTML5 cases in Rakuten

Situation of HTML5 services in Rakuten

Let’s see some cases...
20
Technology Conference 2013

• Media Queries
• Canvas
• Web Storage

• SVG
• CSS Animations

21
Rakuten Recipe

• JavaScript menu to register recipes
• Web Storage

22
Rakuten Securities: Kabu animation

• CSS3 Animations

https://www.rakuten-sec.co.jp/web/special/brand_town/

23
Rakuten Card

• HTML5 Forms

24
Rakuten Travel

• Geolocation

25
Rakuten.com Shopping Mobile site

• Web Fonts

26
Rakuten.com Shopping Mobile site

• Web Fonts

27
Rakuten Product: Microdata

• Microdata

28
Rakuten Gateway

• Web Fonts
• CSS Animations
• Web Storage

Mon will give more
details about this
service in a few
minute...
Table of contents

1 About myself
2 HTML5 in Rakuten
3 HTML5 Project Team Activity

30
HTML5 Implementation Guide

31
HTML5 Implementation Guide

Goal: Expand the use of HTML5 in Rakuten.

32
HTML5 Implementation Guide

Know-how of HTML5 features is divided in
18 chapters.
1. Introduction
1.1 HTML5 Merits
3.1 DOC...
HTML5 Implementation Guide example

• Video codecs compatibility, how to
implement Drag & Drop, CSS3 features...

34
Team Activities

How do we promote
HTML5 in Rakuten?

35
HTML5 Evangelization

•
•
•
•

Presented at Asakai (weekly company-wide meeting)
Rakuten CTO Summit (yearly internal event...
HTML5 Evangelization

• HTML5 Knowledge Base
•
•
•
•
•
•

HTML5 Implementation Guide
HTML5 Project Team Portfolio
Reports ...
HTML5 Evangelization

• Internal Social Media

38
HTML5 Evangelization

• HTML5 EFO (Entry Form Optimization)
promotion.

39
Conclusion

HTML5 is the present and future of the
Internet.

Rakuten will be actively using HTML5, and
push its boundarie...
Thank you!

41
Gateway Web App Development
Tomoko Monzen
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.ra...
Introduction

Mon
Tomoko Monzen

Role

Web Designer & Front-end Developer

Expertise

UI/UX Web&App Design
HTML5/CSS3/Java...
Introduction

My First Challenge in HTML5 Project Team

Web App That Feels Native
44
Rakuten Gateway
Android
Native App

Windows8
Native App

Web Site

45
Renewal!!!

WebSite

Native

Native App to Web App

46
Why Web App?

Native

WEB

More users
CrossPlatform

Flexibility

47
Flat Design

48
Web Fonts

49
UI Scrolling

Swipe Horizontally

Scroll Vertically
50
51
How to make Web App

• Flat Design (iOS7)
• HTML5, CSS, jQuery, Web Fonts
• iScroll
• Effective Development
(Sass, compass...
Visit Rakuten Gateway

http://www.rakuten.co.jp/com/gateway/sp/

53
The future of Web Apps

54
THANK YOU!

55
Web Storage
~ Over the Cross Origin ~
Ryosuke Tsuji
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
htt...
Self Introduction

Ryan
Ryosuke Tsuji
Role

Front-end Engineer

Expertise

HTML5/CSS3/JavaScript/node.js/Java
/Python/PHP/...
Kobo glo

58
Rakuten insurance

59
Rakuten card

60
Rakuten security

61
other smartphone sites

62
Web Storage

63
Web Storage

rakuten.co.jp
https://rakuten.co.jp

sub.rakuten.co.
rakuten.com
64
Normal Way

Client

Server

rakuten.co.jp

sub.rakuten.co.jp

65
Over the Domain

Client
rakuten.co.jp
iframe

Server

Post Message API
other.rakuten.co.jp

sub.rakuten.co.jp
66
Web Storage ~ Over the Domain ~

rakuten.co.jp
https://rakuten.co.jp
iframe

otherdomain.com

sub.rakuten.co.
rakuten.com
...
Rakuten solar

68
Save data to iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

69
Save data to iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

70
Save data to iframe
var iframe = document.createElement(„iframe‟);
iframe.style.display = „none‟;
iframe.src = „https://ot...
Save data to iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

72
Save data to iframe
window.addEventListener(„message‟, function(e) {
var data = JSON.parse(e.data);
if(e.origin !== „http:...
Get data from iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

74
Get data from iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

75
Get data from iframe
//almost same with save case
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
iframe.contentWindow.postMessage(data, orig...
Get data from iframe

iframe
Post Message API

rakuten.co.jp

other.rakuten.co.jp

77
Save data to iframe
window.addEventListener(„message‟, function(e) {
var data = JSON.parse(e.data);
if(e.origin !== „http:...
Plugin

I created plugin as we can use it like
native Web Storage.
var crossOriginStorage = new ExtendedLocalStorage(ifram...
Thank you!
80
Technology Conference Website
Shinsuke Yamada
HTML5 Project Team
Creative & Web Design Department, Rakuten Inc.
http://www...
Self-Introduction

Marty
Shinsuke Yamada
Real Emmett “Doc” Brown
Role

Web Designer & Front-end Engineer

Expertise

UI/UX...
Have you seen
the website?

83
84
top

Speakers

Access

Timetable

Event report
85
86
Responsive web design
87
Interactive design
88
html5 technologies
89
Responsive
web design

Interactive
design

html5
technologies

90
Responsive web design
91
950px

640px

92
Media queries

93
1. Exclusive
PC

Tablet

Smartphone
94
2.Overriding
Base style(PC)

Complicated

Tablet

And
Smartphone
unmanageable

95
Syntactically Awesome Style Sheets

96
Sass‟s features
• Fully CSS3-compatible
• Language extensions such as variables, nesting,
and mixins
• Many useful functio...
3. Sass

Set variable & import file

variable

import

98
3. Sass

Coding into Condition branch
Base

PC
Tablet
Smartphone

99
Compiled code

3. Sass

Don’t forget to
the compile
100
CSS Authoring Framework

101
Compass‟s features
• Experience cleaner markup without presentational
classes.
• It‟s chock full of the web‟s best reusabl...
Image handling for Retina

Previous display

Retina display

103
SVG
Scalable Vector Graphics

104
105
SVG compatibility table

http://caniuse.com/

106
Library that detects browser‟s HTML5 & CSS3 features

107
Modernizr works

108
Interactive design
109
110
For Smartphone

Drag
111
112
<canvas>
with

113
createjs sample

Output ->
114
HTML5 technologies
115
Notification feature

Stored in Web storage
116
Bookmark

Details

For Smartphone
Filter
Add bookmark
Responsive
web design

Interactive
design

html5
technologies

118
119
120
Technology Conference Site
tools & Development Flow
Tsutomu Ogasawara
HTML5 Project Team
Creative & Web Design Department,...
Requirements

122
Requirements

 Frequent updates

123
Requirements

 Frequent updates
 SEO friendly

124
Requirements

 Frequent updates
 SEO friendly
 Without server-side script

125
Requirements

 Frequent updates
 SEO friendly
 Without server-side script
Generate static HTML files
from data and temp...
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

127
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

128
What’s Template Engine?
[{ 'name': 'Hiroshi Mikitani',
'img': 'img/micky.jpg',
'title': 'Chairman & CEO of Rakuten, Inc.'}...
What’s Template Engine?
[{ 'name': 'Hiroshi Mikitani',
'img': 'img/micky.jpg',
'title': 'Chairman & CEO of Rakuten, Inc.'}...
What’s Template Engine?
[{ 'name': 'Hiroshi Mikitani',
'img': 'img/micky.jpg',
'title': 'Chairman & CEO of Rakuten, Inc.'}...
What’s Template Engine?
[{ 'name': 'Hiroshi Mikitani',
'img': 'img/micky.jpg',
'title': 'Chairman & CEO of Rakuten, Inc.'}...
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

133
What’s PhantomJS?

134
What’s PhantomJS?

$ phantomjs phantom_config.js common.html#index > index.html

Command

Script

Template

Page

Generate...
What’s PhantomJS?

$ phantomjs phantom_config.js common.html#index > index.html

Command

Script

Template

Page

Generate...
What’s PhantomJS?

$ phantomjs phantom_config.js common.html#index > index.html

Command

Script

Template

Page

Generate...
What’s PhantomJS?

$ phantomjs phantom_config.js common.html#index > index.html

Command

Script

Template

Page

Generate...
What’s PhantomJS?
[{ 'name': ‟H
'img': ‟i
'title': ‟C
{ 'name': ‟J
'title': ‟A
'img': ‟i
]

Data
JSON

<div class="spe
<im...
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

140
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

141
Tools and flow

Template

(Server)

+

HTML
HTML
HTML

Data
(JSON)
JavaScript

(Git)
Sass

CSS

142
As a result...


✓ Frequently update

✓ SEO friendly

✓ Without server-side script

We could develop efficiently
with F...
Today’s Agenda

HTML5 Evangelization in Rakuten
Jose Segura

Rakuten gateway Web App Development
Tomoko “Mon” Monzen

Web ...
HTML5 in Rakuten

145
HTML5 in Rakuten

・・・

Rich UX
Performance
Productivity

146
147
We Are Engineers!

Contents Contents Contents Contents

・・・

148
We Are Engineers!

Contents Contents Contents Contents

Feature
part

Framework

Common
part

149
We Are Engineers!

Contents Contents Contents Contents

Framework
Tools

Improve
Productivity

150
We Are Engineers!

Contents Contents Contents Contents

Framework
Tools

Environment

Automation

151
We Are Engineers!

Contents Contents Contents Contents

Framework
Tools

Environment
Process

Maximize
Performance
152
We Are Engineers!

Contents Contents Contents Contents

Framework
Tools
Unit Test

Environment
Process

CMS/CDN
Agile
153
We Are Engineers!

154
Thank you!
Upcoming SlideShare
Loading in...5
×

[RakutenTechConf2013] [E-2] HTML5 in Rakuten

5,787

Published on

Rakuten Technology Conference 2013
"HTML5 in Rakuten"
HTML5 Project Team (Creative & Web Design Department) (Rakuten)

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,787
On Slideshare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Hello everyone.My name is Tsutomu Ogasawara from the Creative &amp; Web Design Department in Rakuten.Welcome to the technology conference and welcome to our session.Today we would like to talk about HTML5 in Rakuten.(余裕があれば)I’m surprised at so many people and I’m getting nervous.I want to know how many people there are.Please raise your hand if you are front-end engineer or designer?back-end engineer?
  • In the last few years, HTML5 began to be really used in many services.Of course, Rakuten is also introducing HTML5 technologies to our own services as a significant technology.Especially most of the smartphone sites are written in HTML5.Today we would like to introduce our cases of HTML5 and explain the inside of the Technology Conference site.
  • Before that, Please let me introduce myself.I am Tsutomu Ogasawara. a manager of the HTML5 Project Team.I joined Rakuten in July last year.Before Rakuten, I worked for a Web service company as a technical director and UI/UX designer. and worked for an electronics company as a UI designer and software engineer.
  • Next I would like to introduce our HTML5 Project Team
  • There are so many services and businesses in Rakuten such as Rakuten Ichiba, Bank, Travel, Insurance, card, and so on.They are operated by individual organizations. We usually say it “Business Unit”.And there are some horizontal organizations. Mainly, the Development Unit and the Creative &amp; Web Design Department.
  • We call the Development Unit, “DU” DU is responsible for the overall development,from infrastructure to smartphone app development.
  • And theCreative &amp; Web Design Department, which we call CWD is responsible for various areassuch as visual design, user experience design, Web analytics, SEO, Web Performance, and so on.TheHTML5 Project Team was established in CWD last year.We are working on various activities collaborating with many teams.
  • Our missions are,R&amp;DResearch latest technologies and develop prototypes,
  • EvangelizationPublish the implementation guide, propose our ideas for an improvement to business units and make presentations at meetings to share our knowledge.
  • Supportwe help business units to develop web sitesand we provide technical advice on HTML5 features.
  • Through these activities, we improve quality, performance and productivity of Rakuten service
  • As the result, we would like to provide good user experience to customers in the world.
  • OK, Let’s move on to HTML5 topics,First, Jose is going to talk about HTML5 evangelization in Rakuten.Next is Mon, Mon will talk about Rakuten gateway applicationNext, Ryan will talk about Web Storage technique.Then Marty introduce the inside of the Technology Conference site.And I will talk about the tools and development flow of the conference site.Jose, please take it away.
  • My name is Jose Manuel Segura Alvarez, but as you see, it is a really long name so...
  • ... I made it shorter, like this. 
  • I am going to talk about the current situation of HTML5 in Rakuten
  • In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
  • In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
  • Technology Conference 2013 site uses Media Queries to achieve Responsive Design. It also uses Canvas and Web Storage features.
  • Recipe site uses JavaScript to draw a nice menu and Web Storage to remember the recipes visited that day in the Memopad.
  • CSS3 animation in Rakuten Securities shows a very cute city and can be played in any kind of mobile device.
  • Rakuten Card uses new features of HTML5 Forms to improve the usability of the service, allowing the user to finish the Forms faster.
  • Rakuten Travel: HTML5 supports geolocation natively on mobile devices.
  • Rakuten.com Shopping: Web Fonts improve the look of your site without a performance hit. You can zoom in or out icons or change its color without using new resources.
  • Rakuten.com Shopping: Web Fonts improve the look of your site without a performance hit. You can zoom in or out icons or change its color without using new resources.
  • Microdata provides rich snippets information to search engines.
  • Microdata provides rich snippets information to search engines.
  • The HTML5 Implementation Guide is a website in Confluence, which is the internal wiki system we use at Rakuten.
  • Goal: Expand the use of HTML5 in Rakuten.
  • It has 18 chapters and it is basically a manual that explains how to use HTML5 features in our websites. For example...
  • we have video codecs compatibility information, all the different graphic formats, how to integrate drag and drop, how to use CSS3...
  • The HTML5 Project Team presentedthree times at ASAKAI (weekly company meeting), CTO Summit and other tech conferences. Of course, this conference, too!
  • The HTML5 Knowledge Base is a site in Confluence (Wiki service for employees) that collects all our activity and resources.
  • We also use internal Social mediato promote HTML5 and the Team’s activities inside the company.
  • We directly support each service to improve their Forms using the latest HTML5 Form features to achieve local validation.
  • HTML5 is the present and future of the Internet.I will support all Rakuten business to use HTML5, and push its boundaries even further in the future.
  • Thank you for your attention. As I mentioned before, we’ll now see how Rakuten Gateway Web App was created. Please welcome my colleague Mon.
  • Thank u Mon.She is Madonna in our Team.Hello Everyone.Now I’ll talk about HTML5 web storage.
  • My name is Ryosuke Tsuji. My Rakuten’s name is Ryan.I’m front-end engineer now.My expertise is these languages.And if you are interested in me, please feel free to contact.And as you can see, I’m a runner.My created website are following.
  • Kobo glo
  • Rakuten Insurance
  • Rakuten Card
  • Rakuten Security
  • Many smartphone sites and so on.
  • Now, I talk about HTML5 web storage.I think many developers uses this function, because it’s useful and it’s supported by even Internet Exproler8.But, it have a problem. We can’t access web storage over Cross Origin like this.
  • In this case, protocol is different. So we can’t.In this case, uses subdomain. So we can’t.In this case, domain is different. So we can’t!You may think it’s matter of course.But we often use subdomain in one service, and have http and https website in same domain.If you want to share data, you will use server like this.
  • First, save data to server on rakuten.co.jp.Second, get data from server on sub.rakuten.co.jp.It’s painful because server side program is required.So I created javascript library to solve this problem.
  • This is specification.I utilized iframe and HTML5 Post Message API.First, save data to iframe(other.rakuten.co.jp) on rakuten.co.jp with post message API.Second, get data from the iframe on sub.rakuten.co.jp with post message API.Thus We don’t need server side programming and resource.
  • Wonderful…As a result, we can share data only in client side like this.
  • And Rakuten solar use this plugin.
  • Next I’ll explain about practical source code sample.First, post message to iframe.
  • At first, the source code of main website.
  • Create iframe DOM Object.Make iframe hidden.Set source of iframe.Append iframe to HTMLAfter that, Set load event to iframe. We need setTimeout method because postMessage method specification of IE8 is different from that of other browsers.Finally we can use postMessage API like this.We need to make data change to JSON because IE8 only support string data.
  • Next, the source code of iframe.
  • Set message Event to window object.Get data from event object.Check whether message event origin is your main website origin or not.It’s so important for security. If you don’t do it, everyone can get your website’s web storage data.Don’t forget it.Set data to Web Storage of iframe.Finally, return response data if you need.
  • Next I’ll explain about practical source code sample.First, post message to iframe.
  • At first, the source code of main website.
  • Send postMessage part is almost same with save data case.In addition to it, we need to set message event to window object.Get data from event object.Check origin for security.Call callback function for getting some data.
  • Next, the source code of iframe.
  • Iframe source code is almost same with save data case too.Changing method setItem to getItem is only difference.
  • Icreate plugin as we can use it like native Web Storage.This is example.Create instance of this plugin.And we can use same method with native Web Storage.But post message method is async function. So we need callback to do something after getting, saving or removing data.If you are interested in this plugin, please ask me later.
  • Thank you!
  • Good after noon everyone.How about the conference? So fun?Today I’d like to talk about insights of the Technology Conference Website.At first, I’d like to introduce myself quickly,
  • Ladies and gentlemen, have you seen the Technology Conference website?皆さんテクノロジーカンファレンスのウェブサイトをご覧なりましたか?
  • This is the website.Of course, we created this website to publish the information about this event.こちらそのウェブサイトです。このプロジェクトの一番の目的はもちろん、イベント情報を告知するためです。
  • This website has 5 pages.★Top, ★Speakers, ★Timetable, ★Access and ★Event reportIn addition We had one more goal in this project.トップページ、スピーカー、タイムテーブル、アクセス、そしてイベントレポート全部で5ページあります。しかし、私たちにはもう一つ別の目的がありました。
  • It’s Challenging to use the latest web trends.(It’s not Back to the future)Our challenges are:それは最新webトレンドへのチャレンジです。私たちのチャレンジは、、、
  • レスポンシブwebデザイン
  • インタラクティブデザイン
  • Html5テクノロジー
  • So,Let me introduce these our challenges.では今回の挑戦についてご紹介させていただきます。
  • First is about Responsive web design. As you know, RWD is a web design approach to optimize the layout in different kind of devices. This approach is becoming very popular since the last year.まずは「レスポンシブwebデザイン」についてです。ご存知の通り「レスポンシブWebデザイン」はマルチデバイスに対応するための制作手法です。去年ぐらいから話題になっているなってきています
  • In this website, we set 2 breakpoints and designed 3 layout patterns for Desktop, Tablet and Smartphone devices.当サイトは2つのブレークポイントを設け、PC、タブレット、スマートフォンの3つのレイアウトパターンを制作しました。
  • We use Media queries in the approach.However, we can write code in a variety of ways.私たちはRWDのなかで「Media queries」を使用します。とはいっても、色々な記述方法があると思います。
  • Write code exclusively, like this[pase].スタイルを分けて各方法
  • Overriding base style, like this[pose].But, these ways are often complicated and unmanageable★ベースになるスタイルをオーバーライドする方法しかし、これらの方法は管理が大変で複雑化してしがちです。
  • So, we tried Sass, which is meta language of CSS.私たちは今回、CSSメタ言語Sassにトライしました。
  • Sass is an extension of CSS.You can use variables, nested rules and mixins in Sass. It enable us to develop CSS efficiently and conveniently.SassはCSSを拡張し、変数、ネスティング、ミックスイン等、より便利に効率よく記述することを可能にしてくれます。
  • This is an example of Sass code.★The variables are defined in each @Media section★The external files are also imported in the sections.こちらがSassで記述した場合の一例です。変数と外部ファイルの読み込みが各@mediaの中で行われています。
  • This is the external style file.As you can see, each screen size style is defined in one section.It’s more readable compared with using raw CSS.こちらが別ファイル「style」の中身です。一つのスタイル定義の中に各画面サイズのスタイルを一緒に記述しています。生のCSSと比較して格段に整理して記述することができました。
  • This is the CSS codeconverted from the Sass.We need to compile Sass to CSS.★Don’t forget it!これはSassコンパイルしてCSSに変換したものです。SassファイルはCSSへコンパイルする作業が必要です。
  • We also introduced Sass framework, Compass.合わせてSassのフレームワーク、Compassを使用しました。
  • Compass also provide lots of useful functions like this.We can develop CSS more efficiently.Compassはあらかじめ便利な機能がたくさん用意されています。より効率的なCSS開発が可能です
  • We should also consider about image handling in theResponsive web design.When using bitmap images, we need to prepare for severalimages for high resolution displays such as Retina display.レスポンシブデザインでは、画像の扱いについても考える必要があります。ビットマップ画像はRetinaディスプレイなど高解像度デバイス用に複数用意しなければなりません。
  • SVG is a vector format graphics. Vector graphics are shown beautifully in any displays.SVGを使いましょう。SVGはベクター形式のため、様々な解像度で綺麗に表示することができます。
  • This time, we created most of the icons using SVG.By using SVG, we could reduce image data weight compared with bitmap images.私たちは今回、ほぼ全てのアイコンをSVGで作成しました。SVGにすることで、ビットマップに比べてファイルサイズ軽減することもできました。
  • SVG has a lot of merits, however, we cannot use it in old browsers.So, we need to display an alternative image when the browser does not support SVG.メリットの多いSVGですが、古いブラウザでは使えません。対応していない場合は代替画像を表示する必要があります。
  • We resolved this issue by using Modernizr.It can detect browser’s HTML5 &amp; CSS3 features.私たちは今回、Modernizrを使いこの問題を解決しました。Modernizrはブラウザが使用可能なHTML5&amp;CSS3の機能を検出することができます。
  • This is an example code. Modernizr adds classes to &lt;html&gt; depending on the browser’s features.If the browser does not support SVG, no-svg class is added to &lt;html&gt;. So, we can easily show an alternative image using the classes.こちらはModernizrを使用した例です。Modernizrはブラウザがどの機能に対応しているかどうかのクラス名を&lt;html&gt;に追加してくれます。もし、svgに対応していない場合は、no-svgクラスが追加されるので、このようなコードで代わりにpngを表示することができます。非常に簡単に代替画像を表示することができます。----- Meeting Notes (10/24/13 10:56) -----分解
  • Next, I&apos;d like to introduce some interactive effects used in the website.次にこのサイトにちりばめられたインタラクティブデザインについていくつかご紹介させて頂きたいと思います。
  • This is the effect of opening message.The content spreads out while moving the other objects away.This effect is made with CSS3 transitions.トップページのオープニングメッセージの部分です。クリックすると周りのオブジェクトをどかしながらコンテンツが広がります。こちらはCSS3を使用してアニメーションさせています。
  • We created an intuitive photo gallery to introduce the last year’s event.This effects are made with JavaScript and CSS3 transforms.こちらは昨年のイベントの様子を紹介した「イベントレポート」です。このページでは写真を直感的に操作できるインターフェースを実装しました。JSとCSS3を組み合わせて動きを再現しています。
  • Please look at this carefully.The background is slightly changing by mouse movement.This is made using Canvas, that is one of the HTML5 features.ご注目ください。背景がマウスの動きよって、微妙に色が変化したりしています。これはCanvasを使用して描画しています。
  • We chose createjs which is one of the useful canvas library for creating this content.Canvasを使ったリッチコンテンツを制作するためCreateJSを使用しました。
  • This is an example code that draws a simple rectangle using createjs.It‘s very easy to understand.こちらはcreatejsを使用して簡単な四角形を描画するコードの例です。とても簡単です。
  • Besides Canvas, we also used Web Storage.Canvas以外にもhtml5のweb storageを使いました。
  • We implemented a notificationfeature using Web Storage.ノーティフィケーション機能を実装しました
  • We also used Web storage in the Timetable page.The user can bookmark the sessions like this.The bookmark date is stored in the Web storage.This filtering function allows to narrow the sessions like this.We design the layout for smart devices as well.This page was most challenging content for us in this project.「タイムテーブル」でも同じくWeb storage を使用しました。ユーザーが自分の見たいセッションをブックマークする機能を実装しました。データはWeb storageに保存されます。このフィルタリング機能はセッションを絞り込めます。
  • Conclusion.I introduced about our activities in the technology conference website.We enjoyed this project and we think we’d like to try new challenges again in this project next year.以上、今回テクノロジーカンファレンスウェブサイトでの取り組みをご紹介しました。
  • Rakuten will make use of the cutting-edge technologies actively to create more attractive contents in the future.There are lots of opportunities to challenge new things as engineer in Rakuten.Let&apos;s work together here, if you are interested in.楽天ではこれからもインターネットカンパニーとして最新トレンドを積極的に活用し、より良いサービスを構築していきます。エンジニアとしてもチャレンジできる環境がたくさんありますので、興味がある方は是非楽天で一緒に働きましょう。
  • Thank you for your attention.Please let me welcome back our super manager Oga. He is going to talk about the development flow and the tools we used for the Technology Conference website.Please Oga.ご清聴ありがとうございました。次は再びOgaです。彼はこのプロジェクトの開発環境/ツールについてお話しします。
  • Thank you Marty,Next, I would like to explain the tools and development flow of the conference site.We utilized many technologies not only for the contents but also development flowin order to improve the productivity.Let me introduce the tools and flow we used.
  • There were 3 requirements for this site.
  • Frequent updates,Information of speakers, sessions and time table wereupdated frequently until today.
  • SEO friendlyWe could not generate contents dynamically by using JavaScript to be SEO friendly.
  • Without server-side scriptWe could not use server-side script or CMS
  • Due to the reasons, we decided to generate static HTML filesfrom the information data and templates.
  • This shows the development flow and tools we used.To generate static HTML files from the templates and the information data which we received from the conference staff.
  • We used underscore.js as a template engine.
  • Template engine generates HTML, from data and templates.This is an example of how to generate HTML files.
  • This is a JSON file including speaker information.We received it from the conference staff.
  • This is a template file which defines the HTML of the page.img, name, title are variables.
  • The template engine assigns the data to variables in the templatethen an HTML file is generated like this.
  • In order to executeunderscore.js to generate HTML, we used PhantomJS.
  • PhantomJS is a headless webkit browser engine. You can run the browser engine from command line and you can control it by JavaScript.It is generally used for web site testing, screen capturing, page automation, and so on.
  • It is difficult to explain how PhantomJS worksbut let me try it.This is an example of the command.
  • You can call phantomjs to execute the control script, like this.
  • The script loads the template and data.Then execute underscorejs to merge the templates and data.
  • Finally it generates a HTML file.
  • Using this mechanism, we can update the information in several pages at the same timewithout editing HTML files directly.And the contents are SEO friendly because text data is included in the HTML files.
  • We also used Sass preprocessor to write CSS efficiently.
  • And these processes are run automatically by Grunt.
  • Our team and the conference staff exchanged files such as the JSON files and generated files by using Stash which is a Git repository like GitHub.
  • As a result, we could meet these requirements----and we could develop efficiently by using Front-end technologies.That concludes my part. thank you for listening.
  • Today, we explained our HTML5 activities.
  • As we explained, we could accumulate a lot of knowledge through these past activities.
  • And we should also expand the knowledge to all Rakuten services around the world.such as the rich user experience, high performance, productivity, and so on.Expanding HTML5 benefits to all Rakuten Services is our next challenge for the future.
  • To do so, we should not only be a creator but we should be also an engineer more.Because, as you know, front-end technology is evolving everyday.We can’t create attractive contents efficiently without various engineering skills.So we just started a new activity with an engineering approach.
  • We have created many contents independently, but it was not productive.
  • So we will develop a kind of framework like Twitter Bootstrapto focus on the feature part,and not to write same code every time.
  • And, we would like to prepare tools like HTML5 Boilerplate and Initializr which is a famous template generatorand share the configuration files such as Grunt, to improve our productivity.
  • And, we should prepare the development environment to execute build, test, deploy automatically.
  • And we should also consider our development processto maximize our performance.
  • As you can see, we should cover various areas and there are so many technologies to use We will try to develop the front-end engineering environment to improve our productivity. This is also a big challenge for us.
  • To achieve this activity, we need to be a team of people with a variety of engineering skills.So we seek for front-end engineers. Please speak to us after the session or at the bear bash if you are interested in us.----Let’s work together!!!
  • That’s all from HTML5 Project Team. Thank you for listening.Do you have any questions?
  • [RakutenTechConf2013] [E-2] HTML5 in Rakuten

    1. 1. HTML5 in Rakuten HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/ This presentation has animations and movies. This version cannot show them correctly.
    2. 2. HTML5 x Rakuten 2
    3. 3. Self Introduction Oga Tsutomu Ogasawara Role HTML5 Project Team Leader (July 1st 2012 ~) Expertise Software Engineer (HTML5 / Objective-C / PHP) / UI/UX Designer / Technical Director Contact tsutomu.ogasawara@mail.rakuten.com @ogaoga 3
    4. 4. HTML5 Project Team Overview HTML5 Project Team 4
    5. 5. Business Unit Business Unit Business Unit Business Unit Business Unit HTML5 Project Team Overview ・・・ 5
    6. 6. Development Unit (DU) Business Unit Business Unit Business Unit Business Unit Business Unit HTML5 Project Team Overview ・・・ Infrastructure Database Web Service Smart Device App Web API etc... 6
    7. 7. HTML5 Project Team Overview Development Unit (DU) Infrastructure Database Web Service Smart Device App Web API etc... Business Unit Business Unit Business Unit Business Unit Business Unit Creative & Web Design Department (CWD) ・・・ Web Creation UX Design Web Analytics SEO Web Performance HTML5 Project 7
    8. 8. Our Mission R&D 8
    9. 9. Our Mission R&D Evangelization 9
    10. 10. Our Mission R&D Evangelization Support 10
    11. 11. Our Mission R&D Evangelization Support Quality Performance Productivity 11
    12. 12. Our Mission R&D Evangelization Support Quality Performance Productivity 12
    13. 13. Today’s Agenda HTML5 Evangelization in Rakuten Jose Segura Rakuten gateway Web App Development Tomoko “Mon” Monzen Web Storage ~ Over the Origin ~ Ryosuke “Ryan” Tsuji Rakuten Technology Conference Web Site Shinsuke “Marty” Yamada Tools & Development Flow Tsutomu “Oga” Ogasawara 13
    14. 14. HTML5 Evangelization Jose Manuel Segura Alvarez HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
    15. 15. Table of contents 1 About myself 2 HTML5 in Rakuten 3 HTML5 Project Team Activity 15
    16. 16. Self Introduction Jose Manuel Segura Alvarez Role HTML5 Evangelist Previous experience Mobile websites (dumb & smart phones), desktop sites, native smartphone Apps, SEO, server administration, Wordpress. Contact jose.segura@mail.rakuten.com @ungatonipon
    17. 17. Self Introduction Jose ホセ Segura セグラ Role HTML5 Evangelist Previous experience Mobile websites (dumb & smart phones), desktop sites, native smartphone Apps, SEO, server administration, Wordpress. Contact jose.segura@mail.rakuten.com @ungatonipon
    18. 18. Table of contents 1 About myself 2 HTML5 cases in Rakuten 3 HTML5 Project Team Activity 18
    19. 19. HTML5 cases in Rakuten Situation of HTML5 services in Rakuten 19
    20. 20. HTML5 cases in Rakuten Situation of HTML5 services in Rakuten Let’s see some cases... 20
    21. 21. Technology Conference 2013 • Media Queries • Canvas • Web Storage • SVG • CSS Animations 21
    22. 22. Rakuten Recipe • JavaScript menu to register recipes • Web Storage 22
    23. 23. Rakuten Securities: Kabu animation • CSS3 Animations https://www.rakuten-sec.co.jp/web/special/brand_town/ 23
    24. 24. Rakuten Card • HTML5 Forms 24
    25. 25. Rakuten Travel • Geolocation 25
    26. 26. Rakuten.com Shopping Mobile site • Web Fonts 26
    27. 27. Rakuten.com Shopping Mobile site • Web Fonts 27
    28. 28. Rakuten Product: Microdata • Microdata 28
    29. 29. Rakuten Gateway • Web Fonts • CSS Animations • Web Storage Mon will give more details about this service in a few minutes. 29
    30. 30. Table of contents 1 About myself 2 HTML5 in Rakuten 3 HTML5 Project Team Activity 30
    31. 31. HTML5 Implementation Guide 31
    32. 32. HTML5 Implementation Guide Goal: Expand the use of HTML5 in Rakuten. 32
    33. 33. HTML5 Implementation Guide Know-how of HTML5 features is divided in 18 chapters. 1. Introduction 1.1 HTML5 Merits 3.1 DOCTYPE and <header> 1.1 Checklist 3.2 Section and Outline 3.3 Elements and Attributes 2. How to implement 3.4 Forms 3.5 Microdata 3.6 Multimedia 3. HTML 3.7 Graphics 4.1 File API 4. JavaScript API 3.8 Application Cache 4.2 Drag & Drop 4.3 Web Storage 5.1 CSS3 5. CSS 4.4 Geo Location API 5.2 Web fonts 5.3 Media Queries 33
    34. 34. HTML5 Implementation Guide example • Video codecs compatibility, how to implement Drag & Drop, CSS3 features... 34
    35. 35. Team Activities How do we promote HTML5 in Rakuten? 35
    36. 36. HTML5 Evangelization • • • • Presented at Asakai (weekly company-wide meeting) Rakuten CTO Summit (yearly internal event) Tech Talk ... this Tech Conference ;) 36
    37. 37. HTML5 Evangelization • HTML5 Knowledge Base • • • • • • HTML5 Implementation Guide HTML5 Project Team Portfolio Reports (How to, code examples etc) EFO Activity Use Cases Resources 37
    38. 38. HTML5 Evangelization • Internal Social Media 38
    39. 39. HTML5 Evangelization • HTML5 EFO (Entry Form Optimization) promotion. 39
    40. 40. Conclusion HTML5 is the present and future of the Internet. Rakuten will be actively using HTML5, and push its boundaries even further. 40
    41. 41. Thank you! 41
    42. 42. Gateway Web App Development Tomoko Monzen HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
    43. 43. Introduction Mon Tomoko Monzen Role Web Designer & Front-end Developer Expertise UI/UX Web&App Design HTML5/CSS3/JavaScript Contact tomoko.monzen@mail.rakuten.com 43
    44. 44. Introduction My First Challenge in HTML5 Project Team Web App That Feels Native 44
    45. 45. Rakuten Gateway Android Native App Windows8 Native App Web Site 45
    46. 46. Renewal!!! WebSite Native Native App to Web App 46
    47. 47. Why Web App? Native WEB More users CrossPlatform Flexibility 47
    48. 48. Flat Design 48
    49. 49. Web Fonts 49
    50. 50. UI Scrolling Swipe Horizontally Scroll Vertically 50
    51. 51. 51
    52. 52. How to make Web App • Flat Design (iOS7) • HTML5, CSS, jQuery, Web Fonts • iScroll • Effective Development (Sass, compass, grunt, script concat&uglify, git) 52
    53. 53. Visit Rakuten Gateway http://www.rakuten.co.jp/com/gateway/sp/ 53
    54. 54. The future of Web Apps 54
    55. 55. THANK YOU! 55
    56. 56. Web Storage ~ Over the Cross Origin ~ Ryosuke Tsuji HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
    57. 57. Self Introduction Ryan Ryosuke Tsuji Role Front-end Engineer Expertise HTML5/CSS3/JavaScript/node.js/Java /Python/PHP/SQL Contact ryosuke.tsuji@mail.rakuten.com @thujikun 57
    58. 58. Kobo glo 58
    59. 59. Rakuten insurance 59
    60. 60. Rakuten card 60
    61. 61. Rakuten security 61
    62. 62. other smartphone sites 62
    63. 63. Web Storage 63
    64. 64. Web Storage rakuten.co.jp https://rakuten.co.jp sub.rakuten.co. rakuten.com 64
    65. 65. Normal Way Client Server rakuten.co.jp sub.rakuten.co.jp 65
    66. 66. Over the Domain Client rakuten.co.jp iframe Server Post Message API other.rakuten.co.jp sub.rakuten.co.jp 66
    67. 67. Web Storage ~ Over the Domain ~ rakuten.co.jp https://rakuten.co.jp iframe otherdomain.com sub.rakuten.co. rakuten.com 67
    68. 68. Rakuten solar 68
    69. 69. Save data to iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 69
    70. 70. Save data to iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 70
    71. 71. Save data to iframe var iframe = document.createElement(„iframe‟); iframe.style.display = „none‟; iframe.src = „https://other.rakuten.co.jp‟; document.body.appendChild(iframe); iframe.addEventListener(„load‟, function() { setTimeout(function() { iframe.contentWindow.postMessage( JSON.stringify(data), „https://other.rakuten.co.jp‟); }, 0); }); 71
    72. 72. Save data to iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 72
    73. 73. Save data to iframe window.addEventListener(„message‟, function(e) { var data = JSON.parse(e.data); if(e.origin !== „http://rakuten.co.jp‟) { return false; } localStorage.setItem(data.key, data.value); setTimeout(function() { e.source.postMessage(response, e.origin); }, 0); }); 73
    74. 74. Get data from iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 74
    75. 75. Get data from iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 75
    76. 76. Get data from iframe //almost same with save case ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ iframe.contentWindow.postMessage(data, origin); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ window.addEventListener(„message‟, function(e) { var data = JSON.parse(e.data); if(e.origin !== „http://other.rakuten.co.jp‟) { return false; } callback(data); }); 76
    77. 77. Get data from iframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 77
    78. 78. Save data to iframe window.addEventListener(„message‟, function(e) { var data = JSON.parse(e.data); if(e.origin !== „http://rakuten.co.jp‟) { return false; } localStorage.getItem(data.key); setTimeout(function() { e.source.postMessage(response, e.origin); }, 0); }); 78
    79. 79. Plugin I created plugin as we can use it like native Web Storage. var crossOriginStorage = new ExtendedLocalStorage(iframe URL); crossOriginStorage.setItem(key, value, callback); crossOriginStorage.getItem(key, callback); crossOriginStorage.removeItem(key, callback); 79
    80. 80. Thank you! 80
    81. 81. Technology Conference Website Shinsuke Yamada HTML5 Project Team Creative & Web Design Department, Rakuten Inc. http://www.rakuten.co.jp/
    82. 82. Self-Introduction Marty Shinsuke Yamada Real Emmett “Doc” Brown Role Web Designer & Front-end Engineer Expertise UI/UX Web&App Design HTML5/CSS3/JavaScript Contact shinsuke.a.yamada@mail.rakuten.com 82
    83. 83. Have you seen the website? 83
    84. 84. 84
    85. 85. top Speakers Access Timetable Event report 85
    86. 86. 86
    87. 87. Responsive web design 87
    88. 88. Interactive design 88
    89. 89. html5 technologies 89
    90. 90. Responsive web design Interactive design html5 technologies 90
    91. 91. Responsive web design 91
    92. 92. 950px 640px 92
    93. 93. Media queries 93
    94. 94. 1. Exclusive PC Tablet Smartphone 94
    95. 95. 2.Overriding Base style(PC) Complicated Tablet And Smartphone unmanageable 95
    96. 96. Syntactically Awesome Style Sheets 96
    97. 97. Sass‟s features • Fully CSS3-compatible • Language extensions such as variables, nesting, and mixins • Many useful functions for manipulating colors and other values • Advanced features like control directives for libraries • Well-formatted, customizable output • Firebug integration 97
    98. 98. 3. Sass Set variable & import file variable import 98
    99. 99. 3. Sass Coding into Condition branch Base PC Tablet Smartphone 99
    100. 100. Compiled code 3. Sass Don’t forget to the compile 100
    101. 101. CSS Authoring Framework 101
    102. 102. Compass‟s features • Experience cleaner markup without presentational classes. • It‟s chock full of the web‟s best reusable patterns. • It makes creating sprites a breeze. • Compass mixins make CSS3 easy. • Create beautiful typographic rhythms. • Download and create extensions with ease. 102
    103. 103. Image handling for Retina Previous display Retina display 103
    104. 104. SVG Scalable Vector Graphics 104
    105. 105. 105
    106. 106. SVG compatibility table http://caniuse.com/ 106
    107. 107. Library that detects browser‟s HTML5 & CSS3 features 107
    108. 108. Modernizr works 108
    109. 109. Interactive design 109
    110. 110. 110
    111. 111. For Smartphone Drag 111
    112. 112. 112
    113. 113. <canvas> with 113
    114. 114. createjs sample Output -> 114
    115. 115. HTML5 technologies 115
    116. 116. Notification feature Stored in Web storage 116
    117. 117. Bookmark Details For Smartphone Filter Add bookmark
    118. 118. Responsive web design Interactive design html5 technologies 118
    119. 119. 119
    120. 120. 120
    121. 121. Technology Conference Site tools & Development Flow Tsutomu Ogasawara HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
    122. 122. Requirements 122
    123. 123. Requirements  Frequent updates 123
    124. 124. Requirements  Frequent updates  SEO friendly 124
    125. 125. Requirements  Frequent updates  SEO friendly  Without server-side script 125
    126. 126. Requirements  Frequent updates  SEO friendly  Without server-side script Generate static HTML files from data and templates 126
    127. 127. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 127
    128. 128. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 128
    129. 129. What’s Template Engine? [{ 'name': 'Hiroshi Mikitani', 'img': 'img/micky.jpg', 'title': 'Chairman & CEO of Rakuten, Inc.'}, { 'name': 'Jeff Patton', 'title': 'Agile Evangelist at Atlassian', <div class="speakers"> <img src="img/micky.jpg" alt="Hiroshi Mikitani" /> 'img': 'img/jeff.jpg‟}, <div class="profile"> {...} <h1 class="name">Hiroshi Mikitani</h1> ] Generated HTML Speaker information in JSON format <h2 class="title">Chairman & CEO of Rakuten, Inc.</h2> </div> </div> + <div class="speakers"> <img src="img/jeff.jpg" alt="Jeff Patton" /> <div class="profile"> <h1 class="name">Jeff Patton</h1> <h2 class="title">Agile Evangelist at Atlassian</h2> </div> </div> <div class="speakers"> <img src="<%= img %>" alt="<%= name <div class="speakers"> %>" /> <div class="profile"> ... <h1 class="name"><%= name %></h1> </div> <h2 class="title"><%= title %></h2> </div> </div> HTML Template 129
    130. 130. What’s Template Engine? [{ 'name': 'Hiroshi Mikitani', 'img': 'img/micky.jpg', 'title': 'Chairman & CEO of Rakuten, Inc.'}, { 'name': 'Jeff Patton', 'title': 'Agile Evangelist at Atlassian', <div class="speakers"> <img src="img/micky.jpg" alt="Hiroshi Mikitani" /> 'img': 'img/jeff.jpg‟}, <div class="profile"> {...} <h1 class="name">Hiroshi Mikitani</h1> ] Generated HTML Speaker information in JSON format <h2 class="title">Chairman & CEO of Rakuten, Inc.</h2> </div> </div> + <div class="speakers"> <img src="img/jeff.jpg" alt="Jeff Patton" /> <div class="profile"> <h1 class="name">Jeff Patton</h1> <h2 class="title">Agile Evangelist at Atlassian</h2> </div> </div> <div class="speakers"> <img src="<%= img %>" alt="<%= name <div class="speakers"> %>" /> <div class="profile"> ... <h1 class="name"><%= name %></h1> </div> <h2 class="title"><%= title %></h2> </div> </div> HTML Template 130
    131. 131. What’s Template Engine? [{ 'name': 'Hiroshi Mikitani', 'img': 'img/micky.jpg', 'title': 'Chairman & CEO of Rakuten, Inc.'}, { 'name': 'Jeff Patton', 'title': 'Agile Evangelist at Atlassian', <div class="speakers"> <img src="img/micky.jpg" alt="Hiroshi Mikitani" /> 'img': 'img/jeff.jpg‟}, <div class="profile"> {...} <h1 class="name">Hiroshi Mikitani</h1> ] Generated HTML Speaker information in JSON format <h2 class="title">Chairman & CEO of Rakuten, Inc.</h2> </div> </div> + <div class="speakers"> <img src="img/jeff.jpg" alt="Jeff Patton" /> <div class="profile"> <h1 class="name">Jeff Patton</h1> <h2 class="title">Agile Evangelist at Atlassian</h2> </div> </div> <div class="speakers"> <img src="<%= img %>" alt="<%= name <div class="speakers"> %>" /> <div class="profile"> ... <h1 class="name"><%= name %></h1> </div> <h2 class="title"><%= title %></h2> </div> </div> HTML Template 131
    132. 132. What’s Template Engine? [{ 'name': 'Hiroshi Mikitani', 'img': 'img/micky.jpg', 'title': 'Chairman & CEO of Rakuten, Inc.'}, { 'name': 'Jeff Patton', 'title': 'Agile Evangelist at Atlassian', <div class="speakers"> <img src="img/micky.jpg" alt="Hiroshi Mikitani" /> 'img': 'img/jeff.jpg‟}, <div class="profile"> {...} <h1 class="name">Hiroshi Mikitani</h1> ] Generated HTML Speaker information in JSON format <h2 class="title">Chairman & CEO of Rakuten, Inc.</h2> </div> </div> + <div class="speakers"> <img src="img/jeff.jpg" alt="Jeff Patton" /> <div class="profile"> <h1 class="name">Jeff Patton</h1> <h2 class="title">Agile Evangelist at Atlassian</h2> </div> </div> <div class="speakers"> <img src="<%= img %>" alt="<%= name <div class="speakers"> %>" /> <div class="profile"> ... <h1 class="name"><%= name %></h1> </div> <h2 class="title"><%= title %></h2> </div> </div> HTML Template 132
    133. 133. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 133
    134. 134. What’s PhantomJS? 134
    135. 135. What’s PhantomJS? $ phantomjs phantom_config.js common.html#index > index.html Command Script Template Page Generated HTML 135
    136. 136. What’s PhantomJS? $ phantomjs phantom_config.js common.html#index > index.html Command Script Template Page Generated HTML • Execute ”phantom_config.js” 136
    137. 137. What’s PhantomJS? $ phantomjs phantom_config.js common.html#index > index.html Command Script Template Page Generated HTML • Load ”common.html” as a common template • Load a page template • Load data • Execute underscore.js to merge the templates and the data 137
    138. 138. What’s PhantomJS? $ phantomjs phantom_config.js common.html#index > index.html Command Script Template Page Generated HTML • Output merged HTML 138
    139. 139. What’s PhantomJS? [{ 'name': ‟H 'img': ‟i 'title': ‟C { 'name': ‟J 'title': ‟A 'img': ‟i ] Data JSON <div class="spe <img src="<%= <div class=”p <h1 class=” <h2 class=” </div> </div> Index Template + index.html <div class="spe <img src="<%= <div class=”p <h1 class=” <h2 class=” </div> </div> Speakers Template     + speakers.html Speakers Sessions Places Updates <div class="spe <img src="<%= <div class=”p <h1 class=” <h2 class=” </div> </div> Timetable Template + + timetable.html 139
    140. 140. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 140
    141. 141. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 141
    142. 142. Tools and flow Template (Server) + HTML HTML HTML Data (JSON) JavaScript (Git) Sass CSS 142
    143. 143. As a result...  ✓ Frequently update  ✓ SEO friendly  ✓ Without server-side script We could develop efficiently with Front-end technologies 143
    144. 144. Today’s Agenda HTML5 Evangelization in Rakuten Jose Segura Rakuten gateway Web App Development Tomoko “Mon” Monzen Web Storage ~ Over the Origin ~ Ryosuke “Ryan” Tsuji Rakuten Technology Conference Web Site Shinsuke “Marty” Yamada Tools & Development Flow Tsutomu “Oga” Ogasawara 144
    145. 145. HTML5 in Rakuten 145
    146. 146. HTML5 in Rakuten ・・・ Rich UX Performance Productivity 146
    147. 147. 147
    148. 148. We Are Engineers! Contents Contents Contents Contents ・・・ 148
    149. 149. We Are Engineers! Contents Contents Contents Contents Feature part Framework Common part 149
    150. 150. We Are Engineers! Contents Contents Contents Contents Framework Tools Improve Productivity 150
    151. 151. We Are Engineers! Contents Contents Contents Contents Framework Tools Environment Automation 151
    152. 152. We Are Engineers! Contents Contents Contents Contents Framework Tools Environment Process Maximize Performance 152
    153. 153. We Are Engineers! Contents Contents Contents Contents Framework Tools Unit Test Environment Process CMS/CDN Agile 153
    154. 154. We Are Engineers! 154
    155. 155. Thank you!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×