SlideShare una empresa de Scribd logo
1 de 23
Descargar para leer sin conexión
楽天の e コマースと
HTML5 活用事例	
Jan. 23rd 2014
Tsutomu Ogasawara
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/

@ html5j eコマース部第1回勉強会
Self Introduction

Tsutomu Ogasawara
@ogaoga
HTML5 Project Team / Rakuten, Inc.

2
Self Introduction

HTML5を駆使したRakuten Technology Conference 2013サイト制作の内側
http://html5experts.jp/ogaoga/3370/

3
Agenda

§  楽天の紹介
§  楽天での HTML5 技術の活用事例

4
5
Rakuten Services

楽天グループ サービス一覧
http://www.rakuten.co.jp/sitemap/
楽天株式会社: Rakuten Worldwide
http://corp.rakuten.co.jp/worldwide/global.html
http://corp.rakuten.co.jp/worldwide/americas.html
http://corp.rakuten.co.jp/worldwide/europe.html
http://corp.rakuten.co.jp/worldwide/asia_oceania.html

6
Rakuten Services

楽天株式会社: ビジネスモデル | 楽天の強み
http://corp.rakuten.co.jp/about/strength/business_model.html
7
Rakuten ICHIBA

8
9
Shopping is Entertainment!

楽天 - Google 検索
https://www.google.co.jp/search?q=%E6%A5%BD%E5%A4%A9
10
Market Place

by David Morris *

* This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license. http://en.wikipedia.org/wiki/User:PCHS-NJROTC
11
Long Page

【楽天市場】【好評につき感謝価格!さらにポイント3倍中!!】三木谷社長も
絶賛♪楽天で5年連続1位受賞のかに[5年連続グルメ大賞]カット済みズワイ
蟹1.2kg(総重量1.4kg)[送料無料](2-4人前)[かに/カニ/蟹/ポーション/かに
しゃぶ/カニしゃぶ/かに鍋/カニ鍋]【楽ギフ_のし】:越前かに問屋「ますよね」
http://item.rakuten.co.jp/masuyone/130007/
12
B2B2C

楽天株式会社: ビジネスモデル | 楽天の強み
http://corp.rakuten.co.jp/about/strength/business_model.html

13
Smartphone

楽天 スマートフォンアプリ一覧
http://www.rakuten.co.jp/sitemap/spapp/

14
Native vs HTML5 ?

Native

•  自由度が少ない。

•  Push Notification

•  既存ユーザー

Web (HTML5)

コンテンツ

ユーザーの流入元

ユーザー

•  自由度が高く、容易に
作成可能。
•  メールマガジン
•  ソーシャルメディア
•  検索
•  新規ユーザー

15
ex. Rakuten gateway
Native

HTML5

16
×
17
あす楽

【楽天市場】翌日配送あす楽
http://www.rakuten.co.jp/sitemap/spapp/
18
はじめての楽天市場

【楽天市場】翌日配送あす楽
http://event.rakuten.co.jp/beginner/
19
Rakuten Malaysia

Rakuten Malaysia : Welcoming the new year ahead with deals you cannot miss!
http://www.rakuten.com.my/event/chinesenewyearsale2014/

20
more...

HTML5 Form

Geo Location API

Web Fonts for icons

21
issues

§ Compatibility
§ Performance
§ Framework

22
Thank you!

23

Más contenido relacionado

Similar a 楽天の e コマースと HTML5 活用事例

HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説You_Kinjoh
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen DataをやってみるMasakazu Muraoka
 
Mattermost Plugin Bounty Programについて
Mattermost Plugin Bounty ProgramについてMattermost Plugin Bounty Programについて
Mattermost Plugin Bounty ProgramについてNemoto Yusuke
 
オープニング 吉田彩奈/楽天株式会社
オープニング 吉田彩奈/楽天株式会社オープニング 吉田彩奈/楽天株式会社
オープニング 吉田彩奈/楽天株式会社Rakuten Group, Inc.
 
いますぐできる!AdminのためのPardot導入準備
いますぐできる!AdminのためのPardot導入準備いますぐできる!AdminのためのPardot導入準備
いますぐできる!AdminのためのPardot導入準備Sayaka Chiba
 
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナーMonaca
 
kintone Café 大阪 Vol.2 LT
kintone Café 大阪 Vol.2 LTkintone Café 大阪 Vol.2 LT
kintone Café 大阪 Vol.2 LTKoji Asaga
 
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのか
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのかなぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのか
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのかdgcircus
 
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!Kazuya Sugimoto
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSKensaku Komatsu
 
大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術bash0C7
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要yoshikawa_t
 
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会Kazuya Sugimoto
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
SwaggerのさわりだけMasakazu Muraoka
 
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」softlayerjp
 
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったかSIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったかYou_Kinjoh
 
クルマ情報を扱うREST APIの仕様と課題について
クルマ情報を扱うREST APIの仕様と課題についてクルマ情報を扱うREST APIの仕様と課題について
クルマ情報を扱うREST APIの仕様と課題についてAPI Meetup
 

Similar a 楽天の e コマースと HTML5 活用事例 (20)

Go + Pulsar WebSocket APIの利用事例 #pulsarjp
Go + Pulsar WebSocket APIの利用事例 #pulsarjpGo + Pulsar WebSocket APIの利用事例 #pulsarjp
Go + Pulsar WebSocket APIの利用事例 #pulsarjp
 
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
 
Mattermost Plugin Bounty Programについて
Mattermost Plugin Bounty ProgramについてMattermost Plugin Bounty Programについて
Mattermost Plugin Bounty Programについて
 
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
 
オープニング 吉田彩奈/楽天株式会社
オープニング 吉田彩奈/楽天株式会社オープニング 吉田彩奈/楽天株式会社
オープニング 吉田彩奈/楽天株式会社
 
いますぐできる!AdminのためのPardot導入準備
いますぐできる!AdminのためのPardot導入準備いますぐできる!AdminのためのPardot導入準備
いますぐできる!AdminのためのPardot導入準備
 
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
 
kintone Café 大阪 Vol.2 LT
kintone Café 大阪 Vol.2 LTkintone Café 大阪 Vol.2 LT
kintone Café 大阪 Vol.2 LT
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
 
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのか
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのかなぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのか
なぜDrupalは世界中のグローバル企業のデジタルマーケティングプラットフォームとして採用されるのか
 
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!
Mulesoft meetup #02 Anypointで日本のクラウドサービスを繋いでみた!
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
 
大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
 
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会
解明! Dynamics 365 Web API 全体像! 第7回JDUC勉強会
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
Swaggerのさわりだけ
 
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」
SoftLayerのAPIを活用した􀀁 ポータルサービス「SETTA」
 
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったかSIerは如何にしてGitHub Enterpriseを導入するにようになったか
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
 
クルマ情報を扱うREST APIの仕様と課題について
クルマ情報を扱うREST APIの仕様と課題についてクルマ情報を扱うREST APIの仕様と課題について
クルマ情報を扱うREST APIの仕様と課題について
 

Más de Tsutomu Ogasawara

オープンソースを活用したフロントエンド開発の取り組み
オープンソースを活用したフロントエンド開発の取り組みオープンソースを活用したフロントエンド開発の取り組み
オープンソースを活用したフロントエンド開発の取り組みTsutomu Ogasawara
 
Cutting edge of web technology
Cutting edge of web technologyCutting edge of web technology
Cutting edge of web technologyTsutomu Ogasawara
 
Html5 in Rakuten (at HTML5 Experts Night#1) #html5exp
Html5 in Rakuten (at HTML5 Experts Night#1) #html5expHtml5 in Rakuten (at HTML5 Experts Night#1) #html5exp
Html5 in Rakuten (at HTML5 Experts Night#1) #html5expTsutomu Ogasawara
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
CakePHP 事例紹介 @ogaoga
CakePHP 事例紹介 @ogaogaCakePHP 事例紹介 @ogaoga
CakePHP 事例紹介 @ogaogaTsutomu Ogasawara
 

Más de Tsutomu Ogasawara (7)

オープンソースを活用したフロントエンド開発の取り組み
オープンソースを活用したフロントエンド開発の取り組みオープンソースを活用したフロントエンド開発の取り組み
オープンソースを活用したフロントエンド開発の取り組み
 
Cutting edge of web technology
Cutting edge of web technologyCutting edge of web technology
Cutting edge of web technology
 
Html5 in Rakuten (at HTML5 Experts Night#1) #html5exp
Html5 in Rakuten (at HTML5 Experts Night#1) #html5expHtml5 in Rakuten (at HTML5 Experts Night#1) #html5exp
Html5 in Rakuten (at HTML5 Experts Night#1) #html5exp
 
空室検索 Map
空室検索 Map空室検索 Map
空室検索 Map
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
What's Parse
What's ParseWhat's Parse
What's Parse
 
CakePHP 事例紹介 @ogaoga
CakePHP 事例紹介 @ogaogaCakePHP 事例紹介 @ogaoga
CakePHP 事例紹介 @ogaoga
 

Último

論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 

Último (9)

論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 

楽天の e コマースと HTML5 活用事例