TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
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.
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. 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
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. HTML5 Evangelization
Jose Manuel Segura Alvarez
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/
15. Table of contents
1 About myself
2 HTML5 in Rakuten
3 HTML5 Project Team Activity
15
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
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. HTML5 Implementation Guide example
• Video codecs compatibility, how to
implement Drag & Drop, CSS3 features...
34
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
69. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
69
70. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
70
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. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
72
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. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
74
75. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
75
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. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
77
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. 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
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
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
121. Technology Conference Site
tools & Development Flow
Tsutomu Ogasawara
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/
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. What’s PhantomJS?
$ phantomjs phantom_config.js common.html#index > index.html
Command
Script
Template
Page
Generated HTML
• Output merged HTML
138
143. As a result...
✓ Frequently update
✓ SEO friendly
✓ Without server-side script
We could develop efficiently
with Front-end technologies
143
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
Hello everyone.My name is Tsutomu Ogasawara from the Creative & 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 & Web Design Department.
We call the Development Unit, “DU” DU is responsible for the overall development,from infrastructure to smartphone app development.
And theCreative & 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&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 & CSS3 features.私たちは今回、Modernizrを使いこの問題を解決しました。Modernizrはブラウザが使用可能なHTML5&CSS3の機能を検出することができます。
This is an example code. Modernizr adds classes to <html> depending on the browser’s features.If the browser does not support SVG, no-svg class is added to <html>. So, we can easily show an alternative image using the classes.こちらはModernizrを使用した例です。Modernizrはブラウザがどの機能に対応しているかどうかのクラス名を<html>に追加してくれます。もし、svgに対応していない場合は、no-svgクラスが追加されるので、このようなコードで代わりにpngを表示することができます。非常に簡単に代替画像を表示することができます。----- Meeting Notes (10/24/13 10:56) -----分解
Next, I'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'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?