リクルート住まいカンパニー Tech Blog

ITのちからで暮らしをよくしたい、エンジニア・デザイナーが発信するTech情報メディア

Google I/O 2016で見た最先端Webの世界

f:id:recruit-sumai:20170309104225j:plain

みなさん、こんにちは リクルート住まいカンパニー Web/App企画・開発マネージャーの柴山です。

只今、GoogleのDeveloper向けの最大のイベント Google I/O 2016に参加中でして、アメリカ・サンフランシスコのMountain Viewに来ています。

今年の会場は屋外のShoreline Amphitheatreで暑さと戦いながらのレポーティング

Google I/O 2016

昨日から始まりましたGoogle I/O 2016。今年も様々な大きな発表があり、

  • Google Assistant … 強化版Siri?とも言えるAI型アシスタントロジック。
  • Google Home … Google Assistantを利用した音声認識型、スマートホームアシスタントシステム.。Amazon Echoと類似?日本発売はアナウンスされず。
  • Allo … Googleの新しいメッセンジャー。AIボットやGoogle Assistantによるサジェストなどが特徴。感情が文字の大きさで表現できるのが面白い。
  • Duo … 低速回線でも高画質なビデオメッセンジャー。着信中のプレビューからビデオが表示。パケ代が気になります。。
  • Daydream … VRプラットフォームでスマホ+ヘッドセット+リモコンで進化したモバイルVR。
  • Firebase … モバイルアプリ開発用MBaaS。Android, iOS, Webをサポートし、バックエンドに必要な機能やAnalyticsなどの機能を全て無償提供。Analyticsは特に便利そう。
  • Android Instant Apps … アプリをインストールしていなくても、リンククリック時にアプリの一部機能を使える仕組み。コレはSNSに貼ってあるリンクを押す際に絶対に便利なはず。
  • Google search Rich Card … Googleの検索結果がビジュアルリッチな検索結果に(米国ローンチ)。まずはレシピから開始。

など非常に盛りだくさんで、現地は大盛り上がりです。

PWA

上記の機能は各種メディアも多く取り上げ、記事も豊富なことから、私からは記事になっていないであろうProgressive Web Apps(PWA)のレポートをお届けします。Google曰く、まだトラヒックの半数以上を占めるWebブラウジング。Google I/OでもVRと並び最多のセッション数となっています。 PWAとは次世代のモバイルWebを作っていこう、という考えのもと

  • 『Add to HomeScreen』 … Androidのホーム画面にアイコンを追加
  • 『Offline Cache』… Staticなページをキャッシュ化しておき、アプリ同様に超高速表示
  • 『Push Notification』 … ブラウザにPush通知を送信する仕組み
  • 『AMP HTML』 … スクリプトを極力排除し、軽量化したWebをGoogleがクローリング・キャッシュ化し、高速表示

などの機能を総称してPWAと呼ばれています。 PWA技術仕様およびSUUMOでの一部実装については、過去の記事

をご参照ください。

それでは、今回のPWAセッションの模様をお届けいたします。

The Mobile Web ~State of the Union~

Webの良いところは

気軽に発見できる・抵抗なく使いやすい・一括してリーチできる・オープンで分散している こと

プレスリリースに載るような派手な発表ではないですが、GoogleはWebを愛していますよ、とメッセージ(笑)

グーグルの使命は、Webプラットフォームをさらに前に進めていくこと!

思い出してください。昔のWebはこんな感じでした。Webも常に進化し続けていく必要がある。

次の進化のカギは優れたモバイル体験。「Accelerate」「Engage」「Convert」「Retain」4つのキーワード。要はサクサク感や簡易性、気の利いたリテンションなどで、よりWebの体験を向上させよう、ということですかね。

それらを解決するのが「Progressive Web Apps」、PWAなのです。

FPS(画面の描画レート)について。60fpsから30fpsにフレームレートを低下させると、サイトのエンゲージメントが崩壊してしまう by Facebook 画面の「ぬるぬる、サクサク」が大事。Accelerateにつがなりますね。

Accelerate:CNNを例に取って説明。AMP(Accelerated Mobile Pages)対応をしており、端末への負荷が少なく、動きがスムースです。

AMPにより、4倍早くなり10倍データ量が少ない(1/10)のため、AMPが有効に働いている事例です。

ここから「Service Worker」の説明が始まります。Service Workerはモバイルのネットワークやキャッシュを最適に処理する思想です。

Engage:オフラインでも動くためサクサクでストレスの少ない、洗練された体験が実現でき離脱が減ります。

Convert:話がService Workerからちょっと離れ、サインインの簡易化の話です。モバイルはタイピングが大変なため、サインインで離れてしまうユーザーが多い。確かに面倒ですね、ログイン作業。これらを解消するために、「Shopify」というECサービスではワンタップ購入を実現しています。

ワンタップサインインを実現する「Credential Management API」をGoogleは提供しており。

「Web Payments API」と組み合わせて先ほどの「Shopify」はワンクリック購入を実現しています。もちろん、Android Payとの連携もできます。

さて、最後にRetain

Service Workerの「Push Notification」により、ブラウザを閉じていても、Web Pushの通知ができます。 事例に挙がった「Jumia」というサービスでは、9倍以上の、コンバージョンを産み出しているとのこと。

さて、以上で次世代のWebについてはセッション終了。 かと、 かと、 思ったら。

じゃん。

じゃじゃん。

「SUUMO」はService Workerの実現にてページ速度は75%ローディングタイム削減、Web Push経由の開封率が31%ある、とのSpeed & Engagementの代表例として紹介されました!感激!!

対応サービスに、リクルートからはSUUMOに加えてタウンワークも!日本ではリクルートが進んでいる分野みたいですね。

まとめ

ということで、最後は自社の自慢になってしまいましたが(汗)、PWAはWebの進化を劇的に後押ししてくれます。Service Workerを中心に細かな仕様は「Google Developers」に載ってますので、興味のある方はぜひ御覧ください。

併せて、本日のGoogle I/Oでの発表をもとに、SUUMOの事例がGoogleより紹介されました。 https://developers.google.com/web/showcase/2016/pdfs/suumo.pdf

以上、Google I/OでのProgressive Web Appsの現地レポでした。

 

 

 

 

 

 

 

 

 

 

画:柴山大