Local blog for Japanese speaking developers
Android で広がるウェブ テクノロジー
2016年10月7日金曜日
この記事は ゲスト投稿者 Active Theory による Android Developers Blog の記事 "
Extending Web Technology with Android | Android Developers Blog
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Paper Planes
は、「画面から画面に紙飛行機を飛ばすことができたら」というシンプルなアイデアから生まれました。
その中心にあるのは、お互いを瞬時に接続するウェブの力を借りて世界中の人々をつなぐという考え方です。画面上でできることは、特に JavaScript や WebGL といった最新のウェブ技術が登場したことによって広がりつつあります。
Paper Planes
は、もともと Google I/O 2016 の基調講演の 30 分前に、参加者と外部からの視聴者をつないで実施されたものです。2016 年の世界平和の日の一般リリースに向けて、
Google Play
でも公開されている
Android Experiment
を作成し、既存のウェブ テクノロジーを Android Nougat ネイティブの機能で拡張しました。それによって、たとえば、世界のどこかで飛行機がキャッチされた場合に通知されるようになっています。
はじめに
ユーザーは自分の紙飛行機を作って、スタンプを追加します。スタンプには、自分の所在地があらかじめ設定されています。紙飛行機を飛ばすジェスチャーを行うと、飛行機は仮想世界に向かって飛び立ちます。PC からウェブサイトを開いたユーザーは、紙飛行機が画面上を飛び回っている様子を見ることができます。
その後、ユーザーは紙飛行機が世界のどこでキャッチされたかを確認することができます。紙飛行機のスタンプはパスポートのように読むことができ、3D で表示された地球に飛行経路や飛行距離が表示されます。
自分の飛行機を作れるだけでなく、ユーザーはスマートフォンを使って網で飛んできた飛行機をキャッチするジェスチャーをすることができます。ピンチ操作して飛行機を開くと、その飛行機がどこから飛んできたかがわかります。そして、自分のスタンプを追加してもう一度飛ばすことができます。
WebView
Paper Planes は、Google I/O の舞台上に設置された 50 インチ スクリーンから、最新のウェブ テクノロジーを使った PC やモバイル端末まで、さまざまな端末で動作するように開発されています。
WebGL
定型化されたローポリゴンの地球の表現から大量の紙飛行機まで、さまざまな 3D 要素のレンダリングに WebGL が使用されており、この体験をすばらしいものにしています。地球を照らす部分や、ユーザーがピンチ操作して飛行機を開いたり閉じたりする変形アニメーション部分は、カスタムの GLSL シェーダーを記述しています。
WebSocket
ユーザーが飛行機を「飛ばす」と、WebSocket 経由でメッセージがバックエンド サーバーに送信され、すべてのデスクトップ パソコンにリレーされて飛行機が飛び立つ様子が表示されます。
WebWorker
大量の飛行機の計算シミュレーションには、それぞれの飛行機の位置を計算し、その情報をメインスレッドに戻す WebWorker を使ってマルチスレッドで計算しています。メインスレッドでは、WebGL を使ってレンダリングを行います。
プラットフォームによらないエクスペリエンスを提供するために、ウェブをネイティブ Android コードで拡張しています。Android と密接に統合されている Chromium を活用することで、既存のウェブ コードを使ってアプリの表示レイヤーを作ることができました。同時に、豊富な通知機能やバックグラウンド サービスなど、OS との密接な統合による機能も追加できました。
WebView と Java コードの連携について詳しく知りたい方は、
チュートリアルとしてこちらの GitHub レポジトリ
をご覧ください。
通知
Android アプリへのプッシュ通知の送信には、Firebase Cloud Messaging（FCM）を使用しています。誰かが飛行機をキャッチして飛ばしなおすと、いくつの都市を経たか、何マイル飛んだかといった情報が飛行機を作ったユーザーの端末に FCM 経由で通知されます。通知の送信の際には、端末に頻繁に通知がいかないような制御を行っています。
バックグラウンド サービス
1 日に 1 回実行され、ローカルのストレージを確認してユーザーが最後にアプリを開いた時間を判断するバックグラウンド サービスが実装されています。ユーザーが 2 週間以上アプリを開いていない場合、アプリを開いて新しい飛行機を作ることをうながす通知を送信します。
通信ネットワーク
このアプリは、Google Cloud Platform 上のサーバー ネットワークで実行されています。スタンプ用に大まかな地理的位置を取得するために、ビルトインのジオコーディング ヘッダーを利用し、WebSocket 経由ですべての端末と接続するために Socket.IO を利用しています。
ユーザーは最寄りのサーバーに接続します。サーバーはメッセージを単一のメインサーバーにリレーするとともに、その地域でアプリを参照しているすべてのデスクトップ パソコンにもリレーします。
さらなる進化
このアプローチは大成功で、プラットフォームやフォーム ファクタによらないスムーズで魅力的な体験を提供し、世界中の人々をつなぐことができています。ウェブをネイティブ機能で拡張することは、高品質な体験を進化させる貴重な手法であることがわかりました。
Android Experiments
ウェブサイトの詳細もご覧ください。
Posted by
Yuichi Araki - Developer Relations Team
ラベル
.app
1
.dev
1
#DevFest16
1
#DevFest17
1
#DevFest18
1
#hack4jp
3
A/B Testing
1
A4A
4
Actions on Google
15
Activation Atlas
1
Addy Osmani
1
ADK
2
AdMob
31
Ads
35
Ads API
28
AdWords API
10
Agency
1
AI
9
AIY
3
AIY Vision Kit
2
ALPN
1
AMP
73
AMP Cache
5
AMP for Email
2
AMP Story
2
amp-bind
1
AMPHTML Ads
1
Analytics
9
Andorid
12
Android
329
Android Auto
1
Android Design Support Library
1
Android Developer Story
4
Android Developers
4
Android Go
1
Android Jetpack
3
Android N
18
Android O
13
Android P
7
Android Pay
1
Android Q
6
Android Security Year in Review
1
Android Studio
37
Android Support Library
5
Android Things
15
Android TV
10
Android Vitals
3
Android Wear
29
androidmarket
3
AndroidX
2
Angular
2
Angular 2
2
AngularJS
2
API
25
APIExpert
45
apk
2
app
3
App Action
1
app engine
23
App Indexing
7
App Invites
6
App Maker
2
AppCompat
2
Apps Script
11
aprilfool
4
AR
2
Architecture Components
6
ARCore
1
ArtTech
1
Associate Android Developer Certificate
1
Audio
6
Auth Code
1
Authentication
8
AuthSub
2
AutoML
1
Autotrack
2
award
1
Awareness API
1
Beacons
6
Better Ads Standards
1
BigQuery
9
Billing
1
BLE
4
Blink
1
Blockly
1
blogger
1
BodyPix
1
Brillo
1
Brotli
2
Budou
1
Calendar
3
Cardboard
4
Career
1
Case Study
1
Certificate
2
chrome
112
Chrome Custom Tab
2
Chrome Dev Summit
2
chrome extension
6
Chrome for Android
2
Chrome for iOS
2
Chrome OS
5
Chrome Tech Talk Night
3
Chromebook
3
Chromecast
7
chromewebstore
6
Chromium
5
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
20
Cloud Firestore
4
Cloud Functions
9
Cloud IoT Device SDK
1
Cloud Next
7
Cloud OnBoard
3
Cloud PubSub
1
Cloud Storage
1
Cloud Study Jams
3
Cloud Test Lab
2
Coalition for Better Ads
1
CocoaPods
1
codejam
5
codelab
4
Colaboratory
1
Community
1
compute engine
3
Context
1
Cookie
1
Coral
2
Crash Reporting
2
Crashlytics
2
Dart
2
DataCenter
1
Daydream
4
Deep Learning
4
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
6
Developer Relations
2
DevFest
7
DevFestX
3
DevOps
1
devtools
4
Dialogflow
1
DirectShare
1
Domain
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
3
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
Encryption
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Featured
2
Firebase
115
Firebase Admin SDK
6
Firebase Analytics
10
Firebase Auth
4
Firebase Cloud Messaging
10
Firebase Crashlytics
2
Firebase Database
5
Firebase Libraries
1
Firebase Notifications
1
Firebase Performance
3
Firebase Remote Config
5
Flash
1
Flutter
6
font
3
fraud
1
G Suite
18
game
38
Game Developers Conference 2018
1
Game Developers Conference 2019
1
Gboard
1
GCP
9
GCPUG
1
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
15
GDG Cloud
1
Geo
51
Gingerbread
1
GLIDE
5
Gmail
4
Gmail API
2
Go
1
golang
5
goo.gl
1
Google
5
Google Analytics
3
Google API
1
Google Apps
14
Google Apps Script
4
Google Assistant
8
Google Assistant SDK
1
Google Cast
8
Google Cloud
22
Google Cloud INSIDE Games & Apps
6
Google Cloud Messaging
11
Google Cloud Platform
11
Google Code-in
1
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
2
Google Drive
6
Google Fit
2
Google for Mobile
2
Google for Work
1
Google I/O
17
Google Impact Challenge
1
Google Maps
55
Google Maps Platform
4
Google Pay
1
Google Photo
1
Google Play
105
Google Play Console
8
Google Play Game Services
9
Google Play Instant
1
Google Play Services
22
Google Plus
14
Google Search
7
Google Sheets API
3
Google Sign-In
12
Google Slides API
5
Google Summer of Code
1
Google Tag Manager
1
Google Trust Services
1
Google マップ
4
Google+
2
Googleapps
10
GoogleGames
1
GoogleI/O
28
GoogleLabs
1
GooglePlay
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
7
Hangouts Chat
2
Hosting
3
HTML5
17
HTML5Rocks
1
HTTP/2
5
HTTPS
11
I/O Extended
4
ID Token
1
Identity
14
Identity Toolkit
1
Ignite
4
IME
11
Indie Games Festival 2018
2
Indie Games Festival 2019
12
Inevitable ja Night
21
Instagram
1
Instant Apps
6
intern
2
Invites
1
IO19
3
iOS
20
IoT
6
IPv6
1
Issue Tracker
2
Japanese Input
1
JavaScript
7
Jetpack
1
K-12
1
Key Transparency
1
Knowledge Graph
1
Kotlin
6
l10n
8
LaunchPad
1
Lighthouse
1
LINE
1
Local AI
1
Lollipop
10
Machine Learning
20
Marshmallow
10
Material
1
Material Design
30
MDL
1
MDN
1
MIDI
2
ML Kit
10
Mobile
13
Mobile Bootcamp
4
Mobile Sites certification
1
Mobile Vision
4
mod_pagespeed
1
monetize
3
Mozc
15
Music
1
NativeDriver
2
NativeScript
1
NBU
1
ndk
3
Nearby
5
Next Extended
1
Next Tokyo
2
Nexus
2
Nexus S
1
NFC
1
Node.js
3
Noto CJK
1
NPAPI
2
NPN
1
oauth
11
OpenAI
1
OpenGL
4
OpenID
3
OpenID Connect
4
OpenSocial
1
opensource
17
Optimization
1
Payment
4
PEM
33
People API
2
Performance
12
Performance budget
1
PersonFinder
1
Physical Web
3
Pi
1
Place Picker
1
Play Billing Library
1
Player Analytics
4
Playtime 2017
1
Policy
4
Polymer
7
privacy
1
Progressive Web Apps
13
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
PRPL
1
publicdata
1
Push API
1
Push Notification
3
PWA
2
Python
2
QUIC
1
QWIKLABS
3
RAIL
1
React
1
React Native
2
Realtime Database
9
Recap Live Japan 2019
3
reCaptcha
1
Redux
1
Remote Config
3
Remote Display API
1
Resonance Audio
1
Rewarded Video Ads
2
Runtime Permission
1
Safe Browsing
1
Sample Code
2
Santa Tracker
1
schema.org
1
secur
1
security
46
Service Worker
4
SHA-1
1
sketchup
1
SmartLock for Passwords
4
social
4
Social Good
1
Social Media
1
SPDY
3
speak2tweet
1
Spreadsheet
3
startup
5
Storage
2
story
1
streetview
3
Study Jams
5
Swift
2
SwiftShader
1
Symantec
1
Task
4
Team Drive
1
techtalk
12
TensorFlow
24
TensorFlow Federated
1
TensorFlow Lite
3
TensorFlow Object Detection API
1
TensorFlow Probability
2
TensorFlow.js
1
test
4
Test Lab
6
ToS
1
Transliteration
1
Twitter
1
Udacity
20
Unity
3
UX
4
V8
2
VP9
1
VR
11
Vulkan
2
Watch Face
2
wave
2
Wear OS
2
Weave
1
Web
20
Web Animations
1
Web Components
6
Web Manifest
1
Web Packaging
2
WebAssembly
3
WebGL
1
WebMusic
5
WebView
1
Women Techmakers Scholars Program
1
WTM
5
Xcode
1
YouTube
16
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
41
ブログ アーカイブ
2019
6
5
4
3
2
1
2018
12
11
10
9
8
7
6
5
4
3
2
1
2017
12
11
10
9
8
7
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
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"
