What's new in WebView Google Developers English Japanese

What's new in WebViewYouTube↗ IA↗(long shot)
Science & Technology 19.8K views 121 likes 6 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

MATT GAUNT: Hi.

マット・ゴーント:こんにちは。

I'm Matt Gaunt, a developer advocate here at Google.

マット・ゴーントです。developer advocateをしています。

And in this video, we'll catch a glimpse of an undulating

このビデオでは、波打つサルをちらっと

monkey, have some crazy robot talk,

見たり、愉快なロボットトークを

and I even get to take a trip to Hawaii, all thanks

試したり、ハワイにも行きます。これらはすべて

to the latest web view in Android.

Androidの最新の WebViewで実現できます。

When we released KitKat, the WebView

KitKatのリリース時に、 WebViewのベースが

changed from being based on WebKit to being Chromium based.

WebKitからChromiumに変更されました。

Initially, this was version M30 of Chrome.

当初、この機能は Chrome バージョンM30でした。

And the big win with this release

このリリースで大成功したのは

was support for DevTools.

DevToolsのサポートでした。

In KitKat MR2, we updated the WebView from M30 to M33,

KitKat MR2では、WebViewを M30からM33にアップデート、

meaning it came with all the usual security and bug fixes

Chromeの新バージョンで入手できる標準セキュリティや

that you'd get in a new version of Chrome.

バグの修正がすべて付属するようになりました。

The WebView team also worked on improving the canvas

WebViewチームはキャンバスのパフォーマンス改善も実行し

performance and added support for screencasting and DevTools.

DevToolsとスクリーンキャストのサポートを追加しました。

Now with the developer preview of L,

現在、Lの開発者プレビューで、

we're updating the WebView to M36

WebViewをM36に更新しており、

and enabling some additional web platform features.

Webプラットフォーム機能をいくつか追加しています。

If you haven't already tried using DevTools

DevToolsを使った WebViewのデバッグを

to debug you WebViews, you need to go and add this line of code

お試しでない場合は、すぐにこのコードをアプリに追加して

into your app right now, calling setWebContentsDebuggingEnabled

setWebContentsDebuggingEnabled をtrueに設定する

to true, you'll actually enable DevTools debugging,

必要があります。これで DevToolsデバッグ機能を

and I admit that is quite a mouthful.

使えます。これは口で言うとかなり長いですね。

You can enable this just for debug builds

この機能はデバッグビルドのみでも、リリースビルド

or for release builds.

でも有効にできます。

It's entirely up to you.

それは皆さんが選択できますが、

But once you've enabled it, plug your phone

有効にしたら、 USBケーブルで

into your computer with a USB cable,

電話をコンピューターに接続し、

open up Chrome on your computer, and go to Chrome inspect.

Chromeを開いて Chrome inspectにアクセスします。

Here, you'll see entries for every single web view

ここには、アプリ内のすべての WebViewのエントリが

inside of your app, and clicking on inspect

表示されていて、 Inspectをクリックすると、

will open up DevTools.

DevToolsが開きます。

Now, it's worth mentioning that you

ここで重要なのは、 WebViewバージョンと同等

should have a desktop version of Chrome equal to or newer

またはそれ以上のChromeのデスクトップバージョンが

than the WebView version.

必要だということです。

So for the developer preview of L,

Lの開発者プレビューの場合は Chrome Betaか

you're going to need to use Chrome Beta or Chrome Canary.

Chrome Canaryを使う必要があります。

With DevTools open, you'll have access to DOM

開かれたDevToolsでは、 WebView内のDOMおよび

and the CSS inside of your WebViews.

CSSにアクセスすることができます。

Here, you can make changes and you'll

ここで変更を加えることができ、変更内容が

see them immediately take effect inside of your app.

アプリに反映されているかすぐに確認できます。

The JavaScript console is useful for viewing console.log

JavaScriptコンソールは、 console.logメッセージ表示や

messages, as well as manually executing

WebView内で手動で JavaScriptを実行する

JavaScript inside your WebViews.

場合に便利です。

Now, one crazy useful trick I realized

ここで１つ、非常に便利な機能を紹介します。

is if you've got a JavaScript interface that you're

JavaScriptからネイティブへ通信できるよう

adding into the WebView just so that you can communicate

WebViewに追加している JavaScriptインターフェースを

from JavaScript to native, you can actually

取得した場合、それらのネイティブ

call those native methods directly

メソッドをDevToolsから直接手動で呼び出すことができ

from the DevTools console, which makes debugging this bridge

このブリッジロジックのデバッグをほんの少し

logic just a tiny bit easier.

簡単に実行できます。

The Network tab enables you to view whatever network requests

Networkタブではページ内で発生しているネットワーク

are happening inside of your page.

リクエストをすべて表示できます。

Now, this is useful for anyone who's

これは、リモートサーバーでページ、

loading a page on a remote server, so a normal URL.

つまり通常のURLを読み込む場合に便利です。

But it's also useful for anyone loading a static web app

また、APKから静的な Webアプリを読み込む場合にも

from the APK, because if they're making XHR calls,

便利です。XHRの呼び出しを行っている場合、

you can actually view the requests and the responses,

リクエストとレスポンスを実際に確認できるからです。

as they'll all show up in the Network tab.

それらはすべて Networkタブに表示されます。

And it's just a little bit easier than logging everything.

すべてをロギングするよりもほんの少し簡単です。

Then there's a timeline.

次はTimelineについてです。

If you ever notice any jank inside of your web app,

Webアプリ内の問題に気づいた場合は、

this is the place you should go to get an insight into what

ここで、Chromeが各フレームのどの処理に時間を

Chrome is spending its time doing for each frame.

費やしているかを見抜く必要があります。

Generally, you want to look out for long running

通常は、長時間実行されているタスクや

tasks or tasks that are happening repeatedly

繰返し行われているタスクを見つけ出し、

and see if there's anything you can do to alleviate the issue.

問題を軽減する方法があるかを確認します。

The last thing I wanted to mention on DevTools

DevToolsについて最後に紹介するのは、

is screencasting.

スクリーンキャストです。

Screencasting was enabled in KitKat MR2 and above,

スクリーンキャストは KitKat MR2以降で利用でき、

and it allows you to interact with your web app

DevToolsから直接Webアプリを

directly from DevTools.

操作できます。

It means you don't need to switch from your computer

つまり、コンピューターからデバイスに切り替える

to your device.

必要がありません。

You can just do everything from your computer.

すべての処理をコンピューターから実行できます。

Now, a nice side effect of this is

それで、この機能の優れた副作用として、

let's say you have a WebView that's currently off screen.

現在画面に表示されていない WebViewがあります。

And we can animate it in later on.

これは後からアニメートできます。

You can actually use the screencasting feature

実際にスクリーンキャスト機能を使い、表示されない

to see what the WebView is rendering, even though it's not

画面でもWebViewがどのようにレンダリング

visible screen.

されるか確認できます。

I mentioned that the WebView team

前にお話ししましたが、 WebViewチームは

have been working to improve canvas performance.

キャンバスのパフォーマンス改善にも取り組んでいます。

Here, we have some stats from the Vellamo Benchmark Suite.

Vellamo Benchmark Suite による統計がこれです。

And you can see improvements of around 200 to 350%

これらのタスクについては 200～350%の改善が

for these tasks.

見られます。

Now let's take a look at some of the new web

それでは次に、 [聞き取り不可]することが

features we've been able to [INAUDIBLE], starting

できた新しいWeb機能をいくつか紹介します。

with the undulating monkey I promised you at the start.

まずは最初にお約束した波打つ猿です。

In the developer preview of L, we've added support for WebGL.

WebGLサポートをLの開発者プレビューで追加しました。

Here, you can see a demo from Paul Lewis

これはPaul Lewisが作ったデモですが、

and quite frankly, I love this monkey.

私はこのサルが本当に好きなんです。

Next up is the web audio.

次は、Webオーディオです。

Web audio API is an important part for any web based game.

WebオーディオAPI はWeb ベースゲームの重要部分です。

But it also enables you to manipulate sounds, create

他にも、音の操作や、シンセの作成、マイク入力

synths, or play with the microphone input, which

による再生が可能です。こんなふうにおかしな

is why I have a crazy robot voice.

ロボットの声を出すこともできます。

The final new web feature enabled is WebRTC.

最後に紹介するWeb新機能は WebRTCです。

You can now use data channels for sharing data

データチャネルを使ってデータを共有したり、ユーザー

or get user media to access the camera.

メディアでカメラにアクセスすることができます。

All of this means I can now do things like this.

つまり、こんなことができてしまいます。

こんにちはサム。

サム:やあマット。

How's it going?

You're in Hawaii?

今ハワイにいるの?

MATT GAUNT: There we go.

マット・ゴーント:そういうことにしましょう。

We've looked at DevTools, seen a WebGL undulating monkey.

DevToolsの概要、WebGLの波打つ猿、ロボットみたいな

I've got to talk like a robot and take a green screen

声を出す機能、グリーンのスクリーンをハワイにする

trip to Hawaii.

機能を紹介しました。

For guides and additional info on the Chrome based WebView,

ChromeベースのWebView のガイドと詳細は、

check out this link.

こちらのリンクをご覧ください。

ありがとうございました。

Similar videos:

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201475% match

Building a quality app from start to finish
Google for Developers
16.3K views 147 likes 6 dislikes 25 Jun 201464% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201456% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201445% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201442% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201441% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201441% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201439% match

Designing for Android Wear
Google for Developers
26K views 115 likes 5 dislikes 25 Jun 201437% match

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201436% match

Faster Loading Images with WebP
Google for Developers
24.6K views 133 likes 13 dislikes 25 Jun 201436% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201435% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201434% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201433% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201432% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201432% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201432% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201432% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201432% match

Google I/O 2014 - What's new in Android
Google for Developers
112.7K views 1K likes 20 dislikes 25 Jun 201431% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201431% match

Google I/O 2014 - What's new in Android development tools
Google for Developers
42.1K views 311 likes 11 dislikes 26 Jun 201431% match

Material design
Google for Developers
4.4M views 16.5K likes 885 dislikes 25 Jun 201431% match

DevBytes: What's new in Android 5.0 Lollipop
Google for Developers
129.1K views 1.5K likes 37 dislikes 17 Oct 201431% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201430% match

WebRTC tutorial
Google for Developers
134.5K views 649 likes 23 dislikes 30 Jun 201429% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201429% match

Google I/O 2015 - What's new in Android
Google for Developers
115K views 785 likes 31 dislikes 28 May 201529% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201429% match

DevBytes: Android L Developer Preview
Google for Developers
46.3K views 801 likes 13 dislikes 18 Jul 201428% match

Settings Privacy About Contact Donate