Downloaded 25 times
![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](https://image.slidesharecdn.com/techconf2013e2-131118235140-phpapp01/85/RakutenTechConf2013-E-2-HTML5-in-Rakuten-129-320.jpg)
![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](https://image.slidesharecdn.com/techconf2013e2-131118235140-phpapp01/85/RakutenTechConf2013-E-2-HTML5-in-Rakuten-130-320.jpg)
![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](https://image.slidesharecdn.com/techconf2013e2-131118235140-phpapp01/85/RakutenTechConf2013-E-2-HTML5-in-Rakuten-131-320.jpg)
![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](https://image.slidesharecdn.com/techconf2013e2-131118235140-phpapp01/85/RakutenTechConf2013-E-2-HTML5-in-Rakuten-132-320.jpg)
![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](https://image.slidesharecdn.com/techconf2013e2-131118235140-phpapp01/85/RakutenTechConf2013-E-2-HTML5-in-Rakuten-139-320.jpg)
Uploaded byRakuten Group, Inc.
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
The document outlines the activities and objectives of the HTML5 Project Team at Rakuten, led by Tsutomu Ogasawara. It covers the team's structure, mission, and several HTML5 implementations and evangelization efforts within the company. Additionally, it highlights various HTML5 applications, tools, and a detailed implementation guide aimed at expanding HTML5 usage across Rakuten's platforms.
More Related Content
Similar to [RakutenTechConf2013] [E-2] HTML5 in Rakuten
![[Rakuten TechConf2014] [E-4] Rakuten Front-end Framework Project](https://cdn.slidesharecdn.com/ss_thumbnails/e4rfffortechconf2014-141105042240-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
- 1. HTML5 in Rakuten HTML5Project 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.
- 3. Self Introduction Oga Tsutomu Ogasawara Role HTML5Project 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. HTML5 Project TeamOverview HTML5 Project Team 4
- 5. Business Unit Business Unit BusinessUnit Business Unit Business Unit HTML5 Project Team Overview ・・・ 5
- 6. Development Unit (DU) BusinessUnit 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 TeamOverview 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.
- 9.
- 10.
- 11.
- 12.
- 13. Today’s Agenda HTML5 Evangelizationin 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 ManuelSegura Alvarez HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
- 15. Table of contents 1About myself 2 HTML5 in Rakuten 3 HTML5 Project Team Activity 15
- 16. Self Introduction Jose Manuel SeguraAlvarez 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. Self Introduction Jose ホセ Segura セグラ Role HTML5 Evangelist Previous experience Mobilewebsites (dumb & smart phones), desktop sites, native smartphone Apps, SEO, server administration, Wordpress. Contact jose.segura@mail.rakuten.com @ungatonipon
- 18. Table of contents 1About myself 2 HTML5 cases in Rakuten 3 HTML5 Project Team Activity 18
- 19. HTML5 cases inRakuten Situation of HTML5 services in Rakuten 19
- 20. HTML5 cases inRakuten Situation of HTML5 services in Rakuten Let’s see some cases... 20
- 21. Technology Conference 2013 •Media Queries • Canvas • Web Storage • SVG • CSS Animations 21
- 22. Rakuten Recipe • JavaScriptmenu to register recipes • Web Storage 22
- 23. Rakuten Securities: Kabuanimation • CSS3 Animations https://www.rakuten-sec.co.jp/web/special/brand_town/ 23
- 24. Rakuten Card • HTML5Forms 24
- 25.
- 26. Rakuten.com Shopping Mobilesite • Web Fonts 26
- 27. Rakuten.com Shopping Mobilesite • Web Fonts 27
- 28. Rakuten Product: Microdata •Microdata 28
- 29. Rakuten Gateway • WebFonts • CSS Animations • Web Storage Mon will give more details about this service in a few minutes. 29
- 30. Table of contents 1About myself 2 HTML5 in Rakuten 3 HTML5 Project Team Activity 30
- 31.
- 32. HTML5 Implementation Guide Goal:Expand the use of HTML5 in Rakuten. 32
- 33. HTML5 Implementation Guide Know-howof 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 Guideexample • Video codecs compatibility, how to implement Drag & Drop, CSS3 features... 34
- 35. Team Activities How dowe promote HTML5 in Rakuten? 35
- 36. HTML5 Evangelization • • • • Presented atAsakai (weekly company-wide meeting) Rakuten CTO Summit (yearly internal event) Tech Talk ... this Tech Conference ;) 36
- 37. HTML5 Evangelization • HTML5Knowledge Base • • • • • • HTML5 Implementation Guide HTML5 Project Team Portfolio Reports (How to, code examples etc) EFO Activity Use Cases Resources 37
- 38. HTML5 Evangelization • InternalSocial Media 38
- 39. HTML5 Evangelization • HTML5EFO (Entry Form Optimization) promotion. 39
- 40. Conclusion HTML5 is thepresent and future of the Internet. Rakuten will be actively using HTML5, and push its boundaries even further. 40
- 41.
- 42. Gateway Web AppDevelopment Tomoko Monzen HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
- 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. Introduction My First Challengein HTML5 Project Team Web App That Feels Native 44
- 45. Rakuten Gateway Android Native App Windows8 NativeApp Web Site 45
- 46. Renewal!!! WebSite Native Native App toWeb App 46
- 47. Why Web App? Native WEB Moreusers CrossPlatform Flexibility 47
- 48.
- 49.
- 50. UI Scrolling Swipe Horizontally ScrollVertically 50
- 51.
- 52. How to makeWeb App • Flat Design (iOS7) • HTML5, CSS, jQuery, Web Fonts • iScroll • Effective Development (Sass, compass, grunt, script concat&uglify, git) 52
- 53.
- 54. The future ofWeb Apps 54
- 55.
- 56. Web Storage ~ Overthe Cross Origin ~ Ryosuke Tsuji HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
- 57. Self Introduction Ryan Ryosuke Tsuji Role Front-endEngineer Expertise HTML5/CSS3/JavaScript/node.js/Java /Python/PHP/SQL Contact ryosuke.tsuji@mail.rakuten.com @thujikun 57
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Over the Domain Client rakuten.co.jp iframe Server PostMessage API other.rakuten.co.jp sub.rakuten.co.jp 66
- 67. Web Storage ~Over the Domain ~ rakuten.co.jp https://rakuten.co.jp iframe otherdomain.com sub.rakuten.co. rakuten.com 67
- 68.
- 69. Save data toiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 69
- 70. Save data toiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 70
- 71. Save data toiframe 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 toiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 72
- 73. Save data toiframe 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 fromiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 74
- 75. Get data fromiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 75
- 76. Get data fromiframe //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 fromiframe iframe Post Message API rakuten.co.jp other.rakuten.co.jp 77
- 78. Save data toiframe 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 pluginas 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.
- 81. Technology Conference Website ShinsukeYamada HTML5 Project Team Creative & Web Design Department, Rakuten Inc. http://www.rakuten.co.jp/
- 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. Have you seen thewebsite? 83
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96. Syntactically Awesome StyleSheets 96
- 97. Sass‟s features • FullyCSS3-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. 3. Sass Set variable& import file variable import 98
- 99. 3. Sass Coding intoCondition branch Base PC Tablet Smartphone 99
- 100. Compiled code 3. Sass Don’tforget to the compile 100
- 101.
- 102. Compass‟s features • Experiencecleaner 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. Image handling forRetina Previous display Retina display 103
- 104.
- 105.
- 106.
- 107. Library that detectsbrowser‟s HTML5 & CSS3 features 107
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116. Notification feature Stored inWeb storage 116
- 117.
- 118.
- 119.
- 120.
- 121. Technology Conference Site tools& Development Flow Tsutomu Ogasawara HTML5 Project Team Creative & Web Design Department, Rakuten, Inc. http://www.rakuten.co.jp/
- 122.
- 123.
- 124. Requirements Frequent updates SEO friendly 124
- 125. Requirements Frequent updates SEO friendly Without server-side script 125
- 126. Requirements Frequent updates SEO friendly Without server-side script Generate static HTML files from data and templates 126
- 127.
- 128.
- 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. 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. 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. 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.
- 134.
- 135. What’s PhantomJS? $ phantomjsphantom_config.js common.html#index > index.html Command Script Template Page Generated HTML 135
- 136. What’s PhantomJS? $ phantomjsphantom_config.js common.html#index > index.html Command Script Template Page Generated HTML • Execute ”phantom_config.js” 136
- 137. What’s PhantomJS? $ phantomjsphantom_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? $ phantomjsphantom_config.js common.html#index > index.html Command Script Template Page Generated HTML • Output merged HTML 138
- 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.
- 141.
- 142.
- 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 Evangelizationin 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.
- 146. HTML5 in Rakuten ・・・ RichUX Performance Productivity 146
- 147.
- 148. We Are Engineers! ContentsContents Contents Contents ・・・ 148
- 149. We Are Engineers! ContentsContents Contents Contents Feature part Framework Common part 149
- 150. We Are Engineers! ContentsContents Contents Contents Framework Tools Improve Productivity 150
- 151. We Are Engineers! ContentsContents Contents Contents Framework Tools Environment Automation 151
- 152. We Are Engineers! ContentsContents Contents Contents Framework Tools Environment Process Maximize Performance 152
- 153. We Are Engineers! ContentsContents Contents Contents Framework Tools Unit Test Environment Process CMS/CDN Agile 153
- 154.
- 155.
Editor's Notes
- #2 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?
- #3 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.
- #4 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.
- #5 Next I would like to introduce our HTML5 Project Team
- #6 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.
- #7 We call the Development Unit, “DU” DU is responsible for the overall development,from infrastructure to smartphone app development.
- #8 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.
- #9 Our missions are,R&DResearch latest technologies and develop prototypes,
- #10 EvangelizationPublish the implementation guide, propose our ideas for an improvement to business units and make presentations at meetings to share our knowledge.
- #11 Supportwe help business units to develop web sitesand we provide technical advice on HTML5 features.
- #12 Through these activities, we improve quality, performance and productivity of Rakuten service
- #13 As the result, we would like to provide good user experience to customers in the world.
- #14 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.
- #17 My name is Jose Manuel Segura Alvarez, but as you see, it is a really long name so...
- #18 ... I made it shorter, like this.
- #19 I am going to talk about the current situation of HTML5 in Rakuten
- #20 In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
- #21 In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
- #22 Technology Conference 2013 site uses Media Queries to achieve Responsive Design. It also uses Canvas and Web Storage features.
- #23 Recipe site uses JavaScript to draw a nice menu and Web Storage to remember the recipes visited that day in the Memopad.
- #24 CSS3 animation in Rakuten Securities shows a very cute city and can be played in any kind of mobile device.
- #25 Rakuten Card uses new features of HTML5 Forms to improve the usability of the service, allowing the user to finish the Forms faster.
- #26 Rakuten Travel: HTML5 supports geolocation natively on mobile devices.
- #27 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.
- #28 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.
- #29 Microdata provides rich snippets information to search engines.
- #30 Microdata provides rich snippets information to search engines.
- #32 The HTML5 Implementation Guide is a website in Confluence, which is the internal wiki system we use at Rakuten.
- #33 Goal: Expand the use of HTML5 in Rakuten.
- #34 It has 18 chapters and it is basically a manual that explains how to use HTML5 features in our websites. For example...
- #35 we have video codecs compatibility information, all the different graphic formats, how to integrate drag and drop, how to use CSS3...
- #37 The HTML5 Project Team presentedthree times at ASAKAI (weekly company meeting), CTO Summit and other tech conferences. Of course, this conference, too!
- #38 The HTML5 Knowledge Base is a site in Confluence (Wiki service for employees) that collects all our activity and resources.
- #39 We also use internal Social mediato promote HTML5 and the Team’s activities inside the company.
- #40 We directly support each service to improve their Forms using the latest HTML5 Form features to achieve local validation.
- #41 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.
- #42 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.
- #57 Thank u Mon.She is Madonna in our Team.Hello Everyone.Now I’ll talk about HTML5 web storage.
- #58 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.
- #59 Kobo glo
- #60 Rakuten Insurance
- #61 Rakuten Card
- #62 Rakuten Security
- #63 Many smartphone sites and so on.
- #64 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.
- #65 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.
- #66 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.
- #67 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.
- #68 Wonderful…As a result, we can share data only in client side like this.
- #69 And Rakuten solar use this plugin.
- #70 Next I’ll explain about practical source code sample.First, post message to iframe.
- #71 At first, the source code of main website.
- #72 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.
- #73 Next, the source code of iframe.
- #74 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.
- #75 Next I’ll explain about practical source code sample.First, post message to iframe.
- #76 At first, the source code of main website.
- #77 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.
- #78 Next, the source code of iframe.
- #79 Iframe source code is almost same with save data case too.Changing method setItem to getItem is only difference.
- #80 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.
- #81 Thank you!
- #82 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,
- #84 Ladies and gentlemen, have you seen the Technology Conference website?皆さんテクノロジーカンファレンスのウェブサイトをご覧なりましたか？
- #85 This is the website.Of course, we created this website to publish the information about this event.こちらそのウェブサイトです。このプロジェクトの一番の目的はもちろん、イベント情報を告知するためです。
- #86 This website has 5 pages.★Top, ★Speakers, ★Timetable, ★Access and ★Event reportIn addition We had one more goal in this project.トップページ、スピーカー、タイムテーブル、アクセス、そしてイベントレポート全部で５ページあります。しかし、私たちにはもう一つ別の目的がありました。
- #87 It’s Challenging to use the latest web trends.(It’s not Back to the future)Our challenges are:それは最新webトレンドへのチャレンジです。私たちのチャレンジは、、、
- #88 レスポンシブwebデザイン
- #89 インタラクティブデザイン
- #90 Html5テクノロジー
- #91 So,Let me introduce these our challenges.では今回の挑戦についてご紹介させていただきます。
- #92 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デザイン」はマルチデバイスに対応するための制作手法です。去年ぐらいから話題になっているなってきています
- #93 In this website, we set 2 breakpoints and designed 3 layout patterns for Desktop, Tablet and Smartphone devices.当サイトは2つのブレークポイントを設け、PC、タブレット、スマートフォンの３つのレイアウトパターンを制作しました。
- #94 We use Media queries in the approach.However, we can write code in a variety of ways.私たちはRWDのなかで「Media queries」を使用します。とはいっても、色々な記述方法があると思います。
- #95 Write code exclusively, like this[pase].スタイルを分けて各方法
- #96 Overriding base style, like this[pose].But, these ways are often complicated and unmanageable★ベースになるスタイルをオーバーライドする方法しかし、これらの方法は管理が大変で複雑化してしがちです。
- #97 So, we tried Sass, which is meta language of CSS.私たちは今回、CSSメタ言語Sassにトライしました。
- #98 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を拡張し、変数、ネスティング、ミックスイン等、より便利に効率よく記述することを可能にしてくれます。
- #99 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の中で行われています。
- #100 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と比較して格段に整理して記述することができました。
- #101 This is the CSS codeconverted from the Sass.We need to compile Sass to CSS.★Don’t forget it!これはSassコンパイルしてCSSに変換したものです。SassファイルはCSSへコンパイルする作業が必要です。
- #102 We also introduced Sass framework, Compass.合わせてSassのフレームワーク、Compassを使用しました。
- #103 Compass also provide lots of useful functions like this.We can develop CSS more efficiently.Compassはあらかじめ便利な機能がたくさん用意されています。より効率的なCSS開発が可能です
- #104 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ディスプレイなど高解像度デバイス用に複数用意しなければなりません。
- #105 SVG is a vector format graphics. Vector graphics are shown beautifully in any displays.SVGを使いましょう。SVGはベクター形式のため、様々な解像度で綺麗に表示することができます。
- #106 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にすることで、ビットマップに比べてファイルサイズ軽減することもできました。
- #107 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ですが、古いブラウザでは使えません。対応していない場合は代替画像を表示する必要があります。
- #108 We resolved this issue by using Modernizr.It can detect browser’s HTML5 & CSS3 features.私たちは今回、Modernizrを使いこの問題を解決しました。Modernizrはブラウザが使用可能なHTML5&CSS3の機能を検出することができます。
- #109 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) -----分解
- #110 Next, I'd like to introduce some interactive effects used in the website.次にこのサイトにちりばめられたインタラクティブデザインについていくつかご紹介させて頂きたいと思います。
- #111 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を使用してアニメーションさせています。
- #112 We created an intuitive photo gallery to introduce the last year’s event.This effects are made with JavaScript and CSS3 transforms.こちらは昨年のイベントの様子を紹介した「イベントレポート」です。このページでは写真を直感的に操作できるインターフェースを実装しました。JSとCSS3を組み合わせて動きを再現しています。
- #113 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を使用して描画しています。
- #114 We chose createjs which is one of the useful canvas library for creating this content.Canvasを使ったリッチコンテンツを制作するためCreateJSを使用しました。
- #115 This is an example code that draws a simple rectangle using createjs.It‘s very easy to understand.こちらはcreatejsを使用して簡単な四角形を描画するコードの例です。とても簡単です。
- #116 Besides Canvas, we also used Web Storage.Canvas以外にもhtml5のweb storageを使いました。
- #117 We implemented a notificationfeature using Web Storage.ノーティフィケーション機能を実装しました
- #118 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に保存されます。このフィルタリング機能はセッションを絞り込めます。
- #119 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.以上、今回テクノロジーカンファレンスウェブサイトでの取り組みをご紹介しました。
- #120 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.楽天ではこれからもインターネットカンパニーとして最新トレンドを積極的に活用し、より良いサービスを構築していきます。エンジニアとしてもチャレンジできる環境がたくさんありますので、興味がある方は是非楽天で一緒に働きましょう。
- #121 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です。彼はこのプロジェクトの開発環境／ツールについてお話しします。
- #122 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.
- #123 There were 3 requirements for this site.
- #124 Frequent updates,Information of speakers, sessions and time table wereupdated frequently until today.
- #125 SEO friendlyWe could not generate contents dynamically by using JavaScript to be SEO friendly.
- #126 Without server-side scriptWe could not use server-side script or CMS
- #127 Due to the reasons, we decided to generate static HTML filesfrom the information data and templates.
- #128 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.
- #129 We used underscore.js as a template engine.
- #130 Template engine generates HTML, from data and templates.This is an example of how to generate HTML files.
- #131 This is a JSON file including speaker information.We received it from the conference staff.
- #132 This is a template file which defines the HTML of the page.img, name, title are variables.
- #133 The template engine assigns the data to variables in the templatethen an HTML file is generated like this.
- #134 In order to executeunderscore.js to generate HTML, we used PhantomJS.
- #135 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.
- #136 It is difficult to explain how PhantomJS worksbut let me try it.This is an example of the command.
- #137 You can call phantomjs to execute the control script, like this.
- #138 The script loads the template and data.Then execute underscorejs to merge the templates and data.
- #139 Finally it generates a HTML file.
- #140 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.
- #141 We also used Sass preprocessor to write CSS efficiently.
- #142 And these processes are run automatically by Grunt.
- #143 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.
- #144 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.
- #145 Today, we explained our HTML5 activities.
- #146 As we explained, we could accumulate a lot of knowledge through these past activities.
- #147 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.
- #148 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.
- #149 We have created many contents independently, but it was not productive.
- #150 So we will develop a kind of framework like Twitter Bootstrapto focus on the feature part,and not to write same code every time.
- #151 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.
- #152 And, we should prepare the development environment to execute build, test, deploy automatically.
- #153 And we should also consider our development processto maximize our performance.
- #154 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.
- #155 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!!!
- #156 That’s all from HTML5 Project Team. Thank you for listening.Do you have any questions?