Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
モバイルウェブ最前線:State of the Union
2017年6月2日金曜日
この記事は Chrome プロダクト マネージメント担当副社長、Rahul Roy-chowdhury による Google Developers Blog の記事 "
The Modern Mobile Web: State of the Union
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
この 1 年の変化を振り返りましょう。昨年の Google I/O で、モバイルウェブが企業向けに公開されたことを
紹介しました
。AMP や Progressive Web App(PWA)などの新しいテクノロジーにより、新しい機能が提供され、パフォーマンスが向上し、モバイルウェブへのワークフローが効率化されました。
そして 1 年が経ち、20 億を超える AMP ページが作成され、「PWA」が流行語をはるかに超えた存在になり、今では世界中の多くの企業がモバイル端末向けの開発にこの方式を採用しています。詳細については、最新の
モバイルウェブの状況
について、Google I/O で配信された動画をご覧ください。また、これらのテクノロジーが最新のモバイルウェブの主流となりつつある現状を、以下でご説明します。
動向
世界中の優れた
成功事例
をすべて 1 つの投稿にまとめるのは難しいので、ここではいくつか注目すべき事例を取り上げます。
Wego は自社のモバイルサイトのパフォーマンスを改善するため、
amp-install-serviceworker
で AMP ページを構築し、PWA の高速環境に移行しました。ページ読み込みの平均時間が 12 秒から 1 秒未満に短縮され、コンバージョン率が 95% 増加しました。
Forbes がモバイルサイトを PWA として再構築するとき、スマートフォンの操作環境に似たサイトになるように考え直すことから始めました。Forbes は、基盤となるサイトのアップデートを最小限に抑える代わりに、PWA テクノロジーを統合し、没入型のアプリ風操作環境を実現しました。改善はすぐに数字となって現れ、リリース以降のエンゲージメント率が 2 倍以上になりました。
インドの代表的な配車アプリである
Ola
は、PWA を構築し、この PWA で予約したユーザーの 20% が、以前このアプリをアンインストールしたことがあることに気付きました。必要なストレージ スペースの量を減らすことで、PWA によってユーザーのリピート率を効率的に高めることに成功しました。
次の成功事例として、
Twitter Lite
の例を見てみましょう。データ使用量をできるだけ押さえた PWA によって、信頼性の低いモバイル ネットワークにも柔軟に対応し、端末上のスペースは 1MB 未満で十分になりました。Twitter の新しいモバイル操作環境はスピード面についても最適化されており、サイト中のナビゲーションが高速になっただけでなく、起動時間も最大 30% 短縮されました。ユーザーがサイトに滞在する時間が 2.7 倍に増加し、その結果、新しい PWA では、以前のモバイルサイトよりもツイート数が 76% も多くなりました。Android のホーム画面に設置されたアイコンから開始されるセッションが 1 日で 100 万にものぼり、驚くべきリピート率を達成しています。
磨き上げられた操作性
ユーザーはモバイル端末にたくさんのことを期待しています。この 1 年、その要望に応えるべく多くの API を追加してきました。モバイルウェブはより多くのユースケースに対応し、今まで以上に多くのことができるようになりました。代表的な例を示します。
ホーム画面に追加の改善:
今年の前半に、
ホーム画面に追加の改善
を行ったことを発表しました。これで、PWA が Android オペレーティング システムにより深く統合されました。PWA は、ホーム画面に表示されるだけでなく、ネイティブ アプリと一緒にアプリ ランチャーや Android 設定にも表示されるようになりました。さらに、Chrome や他のアプリでもリンクをクリックすれば起動します。
支払い:
支払いを行う処理は複雑なものになる可能性があります。ウェブ上の支払いフローを改善するため、
Payment Request
と呼ばれるワンタップの支払い API を公開しました。この API を利用すると、ウェブアプリがクレジット カードや Android Pay などの Google の支払い方式に対応できるようになります。この API を
追加可能な支払いアプリ
と統合できるようになったこともお知らせします。
メディア消費量:
インターネット トラフィックの 70% 以上を占めるのは動画です。優れたモバイルウェブ メディア エクスペリエンスを実現するため、ユーザーが Media Session API による再生を詳細にコントロールできるようにし、Screen Orientation API でフルスクリーンでの再生を改善しました。さらに、Background Fetch を利用したオフライン機能を追加しています。詳細については、
モバイルウェブ メディアのベスト プラクティス
をご覧ください。また、
PWA for Media デモ
で、API のどのように提供されるかをご確認ください。
ツール
私たちは、ウェブで魅力的なエクスペリエンスを構築する一連のツールの改善と拡張にも取り組んできました。
Lighthouse
は、ウェブ エクスペリエンスの品質を測定できる新しい自動化ツールです。ウェブアプリに対して、およそ 100 個の監査を実行し、ページ パフォーマンスからバイト効率、アクセシビリティに至るまですべてを検査し、集計したスコアを提供します。Chrome の DevTools との新たな統合により、ブラウザを離れずに Lighthouse 監査を実行できるようになります。
Polymer 2.0
は、基礎から再構築された、Polymer ライブラリの次期メジャー リリースで、最新のウェブ プラットフォームの新機能を最大限に活用できます。このリリースでは、Chrome と Safari で利用できるようになった、新しい Web Components の API を使用します。完全なモジュール型で、スピードが 10% アップし、80% 軽量化されています。
Chrome は、デベロッパーの皆様が開発を容易に進め、ユーザーと交流し、ウェブで成功し続けるビジネスを構築できるよう、サポートいたします。最新のニュースについては、YouTube チャンネルに
登録
して、Twitter
@ChromiumDev
をフォローしてください。
Posted by
Eiji Kitamura - Developer Relations Team
コメントを投稿
ラベル
#DevFest16
1
#hack4jp
3
A4A
2
Action on Google
1
Addy Osmani
1
ADK
2
AdMob
28
Ads
10
Agency
1
ALPN
1
AMP
33
AMP Cache
3
Analytics
9
Andorid
10
Android
218
Android Auto
1
Android Design Support Library
1
Android Developer Story
3
Android Go
1
Android N
18
Android O
3
Android Pay
1
Android Studio
20
Android Support Library
4
Android Things
4
Android TV
9
Android Wear
23
androidmarket
3
Angular 2
2
AngularJS
2
API
23
APIExpert
45
apk
2
app engine
21
App Indexing
7
App Invites
6
AppCompat
2
Apps Script
8
aprilfool
3
Architecture Components
1
ArtTech
1
Associate Android Developer Certificate
1
Audio
3
Auth Code
1
Authentication
7
AuthSub
2
Autotrack
2
Awareness API
1
Beacons
6
BigQuery
9
Billing
1
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Budou
1
Calendar
1
Cardboard
4
Career
1
Case Study
1
chrome
78
Chrome Custom Tab
1
Chrome Dev Summit
1
chrome extension
4
Chrome for Android
2
Chrome for iOS
2
Chrome OS
2
Chromebook
2
Chromecast
7
chromewebstore
6
Chromium
5
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
8
Cloud Functions
2
Cloud Next
1
Cloud PubSub
1
Cloud Storage
1
Cloud Test Lab
2
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Context
1
Crash Reporting
1
Dart
2
DataCenter
1
Daydream
4
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
4
Developer Relations
2
DevFest
7
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
68
Firebase Admin SDK
2
Firebase Analytics
9
Firebase Auth
1
Firebase Cloud Messaging
6
Firebase Database
5
Firebase Libraries
1
Firebase Notifications
1
Firebase Remote Config
4
Flash
1
font
3
G Suite
9
game
17
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
13
GDG Cloud
1
Geo
39
Gingerbread
1
GLIDE
5
Gmail
2
Gmail API
2
Go
1
golang
4
goo.gl
1
Google
5
Google Analytics
1
Google Apps
9
Google Apps Script
3
Google Assistant
1
Google Cast
8
Google Cloud
2
Google Cloud Messaging
10
Google Cloud Platform
6
Google Code-in
1
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
4
Google Fit
2
Google for Mobile
1
Google for Work
1
Google I/O
4
Google Maps
45
Google Play
43
Google Play Console
1
Google Play Game Services
9
Google Play Services
19
Google Plus
14
Google Search
6
Google Sheets API
3
Google Sign-In
12
Google Slides API
4
Google Summer of Code
1
Google Tag Manager
1
Google Trust Services
1
Google+
2
Googleapps
10
GoogleGames
1
GoogleI/O
28
GoogleLabs
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
Hosting
2
HTML5
17
HTML5Rocks
1
HTTP/2
5
HTTPS
8
ID Token
1
Identity
14
Identity Toolkit
1
Ignite
4
IME
10
Instant Apps
1
intern
2
Invites
1
iOS
15
IoT
4
IPv6
1
Issue Tracker
2
Japanese Input
1
JavaScript
5
K-12
1
Key Transparency
1
Knowledge Graph
1
l10n
8
LINE
1
Lollipop
10
Machine Learning
5
Marshmallow
10
Material
1
Material Design
21
MDL
1
MIDI
2
Mobile
12
Mobile Bootcamp
4
Mobile Sites certification
1
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
NativeScript
1
ndk
2
Nearby
4
Nexus
2
Nexus S
1
NFC
1
Node.js
2
Noto CJK
1
NPAPI
2
NPN
1
oauth
11
OpenGL
4
OpenID
3
OpenID Connect
4
OpenSocial
1
opensource
16
Optimization
1
Payment
3
People API
1
Performance
8
PersonFinder
1
Physical Web
3
Place Picker
1
Player Analytics
4
Policy
3
Polymer
7
Progressive Web Apps
12
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
PRPL
1
publicdata
1
Push API
1
Push Notification
3
Python
1
QUIC
1
RAIL
1
React
1
React Native
2
Realtime Database
3
Redux
1
Remote Config
3
Remote Display API
1
Rewarded Video Ads
2
Runtime Permission
1
Sample Code
2
Santa Tracker
1
schema.org
1
secur
1
security
26
Service Worker
3
SHA-1
1
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
Spreadsheet
3
startup
3
Storage
2
streetview
3
Study Jams
3
Swift
1
SwiftShader
1
Task
4
techtalk
12
TensorFlow
4
TensorFlow Lite
1
test
3
Test Lab
3
ToS
1
Transliteration
1
Twitter
1
Udacity
19
Unity
3
UX
1
V8
2
VP9
1
VR
8
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
9
Web Animations
1
Web Components
5
Web Manifest
1
WebAssembly
1
WebGL
1
WebMusic
4
WTM
3
Xcode
1
YouTube
15
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2017
6
5
4
3
2
1
2016
12
11
10
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Google
on
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"