Next-level web apps on desktopYouTube↗  IA↗(long shot)
Science & Technology  29.6K views 836 likes 241 dislikes   18 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
(upbeat music)
（明るい音楽）
- Hi everyone.
- 皆さんこんにちは
I'm PJ.
私はPJです
I'm a product manager on the Chrome Web Platform team.
Chromeウェブプラットフォームチームの プロダクトマネージャーです
This session is on next level web applications.
このセッションのテーマは 次のレベルの ウェブアプリケーションです
And while the capabilities I'm going to describe
そして 私が説明しようとしている機能は——
are most applicable to desktop screens,
デスクトップ画面に最もよく当てはまります
let me emphasize that powerful web apps work everywhere,
強力なウェブアプリは どこでも機能するもので あることを覚えておいてください
on phones and on TVs too.
電話やテレビでもです
I love the phrase "one web, many screens."
私は「1つのウェブ 多くの画面」 というフレーズが大好きです
You can build powerful applications for any device
ウェブテクノロジーを使えば どんなデバイスでも動作する——
using web technologies.
強力なアプリケーションを構築できます
With a good responsive layout,
優れたレスポンシブレイアウトを 実現すれば——
you could show the same code base amongst all of them.
すべてのデバイスで 同じコードベースを利用できます
Compare that to the alternative,
それに比べ 別の方法では——
a minimum of three, if not five or more code bases,
最低でも3つ ひどければ 5つ以上のコードベースになることもあります
and it's clear why we see more and more developers
ますます多くのデベロッパーが アプリケーションの土台として——
are choosing the web for their applications.
ウェブを選択する理由は明らかです
To understand how transformational
現在 ウェブは変革のときを向かえています
this moment is for the web,
それを理解するために——
let's start with a little internet history.
少しばかりインターネットの歴史を 振り返ってみましょう
Gmail's a market leading email client,
Gmailは 市場をリードする メールクライアントです
but when it launched in 2004,
しかし 2004年に リリースされた当時は——
there were many incumbent products.
さまざまな製品が使われていました
There were already dozens of popular clients,
すでに何十もの人気のあるクライアントが 存在していました
and virtually all internet users
そして ほとんどすべての インターネットユーザーが——
had an email account and a client.
メールアカウントとクライアントを 使っていました
If you've worked at a startup,
スタートアップ企業で 働いたことがある方なら——
you know that a new product typically has to be
新製品に求められることは よくわかっているはずです
at least 10 times better than the incumbents
既存の製品より 少なくとも10倍は 優れていなければならないのです
to win market leader status.
そうでなければ マーケットリーダーの地位は得られません
So what was Gmail's secret sauce?
では Gmailの秘伝のタレとは 何だったのでしょうか？
Well, what made Gmail different was being a web-based client
Gmailの特徴は ウェブベースの クライアントであることです
which meant reach and universal access.
つまり リーチが広く 誰でもアクセスできます
There was no software to install.
ソフトウェアをインストールする 必要はありません
All users needed was a web browser, and by 2004,
ウェブブラウザさえあればいいのです そして 2004年時点では——
most computers had one.
ほとんどのコンピュータに ブラウザが入るようになっていました
This made user acquisition trivial.
これにより ユーザーの獲得が 簡単になりました
All anyone had to do was have a link.
リンクさえあればいいからです
There was one more requirement, though,
ただし 要件はもう1つありました
and it was a critical web capability
それは ある重要なウェブの機能です
that started landing in browsers
それがブラウザに登場し始めたのは——
just a few years before Gmail launched.
Gmailがリリースされる ほんの数年前のことです
For those of you who have been developing web software
ウェブのソフトウェア開発経験が ある方なら——
for a while,
ご存じでしょう
you might remember this new capability called Ajax.
その新機能は Ajaxと呼ばれるものでした
Ajax transformed the web as an applications platform.
Ajaxはウェブを変革し アプリケーションプラットフォームに変えました
Before Ajax, server requests could only take place
Ajax以前は サーバーリクエストを 生成するために——
with a page refresh,
ページの更新が必要でした
so client interactivity without reloading the page
したがって ページをリロードせずに インタラクティブな操作を実現するのは——
was basically impossible.
基本的に不可能でした
Imagine you had to hit refresh
新しいメールをチェックするときは——
every time you wanted to check for a new email.
毎回更新ボタンを 押さなければならないのです
Gmail would never have succeeded.
そうであれば Gmailは 決して成功しなかったでしょう
Ajax was transformational.
Ajaxは変革をもたらしました
And in addition to enabling Gmail,
Gmailを実現しただけではありません
within a couple of years,
その後 数年を待たずに——
we started to see applications like Rightly
Rightlyのようなアプリケーションが 登場し始めました
that formed the foundations of G Suite.
それがG Suiteの基盤を 形成したのです
I think we're now on the cusp
私たちは今 もう一つの変革の——
of another transformational moment.
最前線にいると考えています
I broke up these APIs into three rough categories:
そのようなAPIを 3つの大まかなカテゴリに分類しました
environment access, application flow control and engagement.
環境アクセス　アプリケーションフロー制御 エンゲージメントです
With these APIs,
これらのAPIを使用すると——
web apps can load and save files from the user's file system
ウェブアプリでユーザーのファイルシステムから ファイルの読み込みや保存ができます
trivially used tabs in standalone windows,
スタンドアロンウィンドウで 簡単にタブを使うこともできます
developers can automate the focus of the user flow
これにより スタンドアロンウィンドウのタブと ブラウザの間で——
between standalone windows tabs and the browser.
ユーザーフローの重要な部分を 自動化できます
They can also place windows across multiple screens
また 複数の画面にウィンドウを 配置することもできます
and give users the option
ユーザーにオプションを提供して——
of running the software on application start-up.
アプリケーションの起動時に ソフトウェアを実行することもできます
Finally, with notification triggers,
さらに 通知トリガーを使用して——
we unlock new types of applications
新しいタイプのアプリケーションを 実現することもできるようになります
such as alarm clocks and calendars
たとえば 目覚まし時計や カレンダーなどです
that need robust assurances
こういったアプリケーションでは——
about the timing of when notifications are displayed.
通知が表示されるタイミングが 確実に保証される必要があります
Quick word of caution.
注意点があります
The timelines given here in this table are rough estimates.
この表に示されている スケジュールは想定です
You could always get the latest info on the Fugu API Tracker
最新情報は Fugu APIトラッカーから いつでも入手できます
at the URL in the center right of the slide.
スライドの中央右側にある URLをご覧ください
Before we get into the specifics of the APIs,
APIの詳しい説明に入る前に——
let's hear an example of what's now possible on the web.
ウェブで現在実現できることについて 確認してみましょう
- Hi, I'm Alex, co-founder and CEO of Clipchamp.
-こんにちは　Clipchampの 共同創設者兼CEOのAlexです
Clipchamp is the world's first and only
Clipchampは 世界初で唯一の——
completely in-browser video editing platform.
完全にブラウザだけで実現した ビデオ編集プラットフォームです
We've taken what's arguably one of the most complex
これはおそらく 最も複雑でこみ入った——
and complicated application categories
アプリケーションカテゴリの1つでしょう
and got it to work purely based on web technologies,
これを 純粋なウェブテクノロジーだけで 動作させています
including a computationally
これには 非常にたくさんの 計算が必要になる——
very intense video export process.
動画のエクスポート処理も含みます
Google Chrome's always been our platform of choice.
私たちは プラットフォームとして常に Google Chromeを選択しています
One of the features that we've adopted very early
非常に早い段階で採用した 機能の1つは——
was progressive web apps.
プログレッシブウェブアプリでした
And we can already see now
その成果は明らかです
that users who have installed our PWA retained three times
PWAをインストールしたユーザーは 維持率が3倍になります
as well as the average user.
平均的なユーザーも同様です
Some of the new features that are gonna be landing
計画しているいくつかの 新機能のリリースも——
to Chrome and progressive web apps,
Chromeとプログレッシブ ウェブアプリが対象です
such as Native File System and Font Access,
ネイティブファイルシステムや フォントアクセスなどの——
will make the app indistinguishable
新しい機能を提供します
from any other app that they might have installed
別のオペレーティングシステムに インストールしたアプリと——
on another operating system.
見分けがつかなくなることでしょう
We're incredibly excited to see these features in the wild
こういった機能が世に出ることが とても楽しみです
and our users adopting them at scale.
広くユーザーに使ってもらえることを 期待しています
- Thanks so much, Alex and Clipchamp team.
- どうもありがとう AlexとClipchampチームでした
For all the developers out there watching this,
これを見ているデベロッパーの皆さんは——
you might want to stand in front of a mirror
鏡の前に立ちたいと思うかもしれません
and say completely in-browser video editing platform
完全にブラウザだけで実現した 動画編集プラットフォームなんて——
three times to fully believe it.
3回言ってみなければ信じられません
Let's get into more details on these APIs.
では APIについて詳しく見てみましょう
Many of them aren't in stable yet,
多くのものは まだ安定版ではないので——
so you might need Canary
Canary版が必要になるでしょう
or another Dev channel version of Chrome,
または 開発チャンネル版の Chromeが必要です
and you might need to activate some flags.
さらに いくつかのフラグをアクティブにする 必要もあるかもしれません
I've specified the flags needed where appropriate.
私も 必要に応じてフラグを 指定してあります
Let's say that you want to create an application
あるアプリケーションを作成したい場合を 考えてみましょう
that opens CSV files.
CSVファイルを開くアプリです
Your manifest would look something like this.
マニフェストは このようになります
We're declaring in this section
このセクションの宣言は——
that when a user double clicks on a MIME type text CSV file
MIMEタイプがtextのCSVファイルを ダブルクリックしたときという意味です
with a dot CSV extension,
拡張子は .CSVです
you can see the accept member there,
それが acceptメンバーに 記述されています
the action is handled by the apps slash open CSV route.
このアクションは アプリの/open-csvルートで処理します
Now here's an example of receiving a file handle.
次に ファイルハンドルを 受け取る例を示します
To access launch files,
起動ファイルにアクセスするには——
the site should specify consumer
サイトでコンシューマを 指定する必要があります
for a launch queue object attached to the window.
指定する対象は windowにアタッチされた launchQueueオブジェクトです
Launches are queued until they're handled by this consumer
起動情報は このコンシューマーによって 処理されるまで キューで待機します
which is invoked exactly once for each launch.
これは 起動ごとに1回だけ呼び出されます
With this approach, you can ensure every launch is handled.
このアプローチを使えば すべての起動情報を確実に処理できます
Your application can then choose to handle these files
その後 アプリケーションは 好きなように——
however you'd like.
ファイルを処理できます
We've got so much to cover today, I better speed things up.
今日は説明することがたくさんあるので スピードを上げたほうがよさそうです
So it's time for a double whammy.
次は 「ダブルパンチ」の時間です
These two capabilities make sense to run through together
この2つの機能は 一緒に使うとよいでしょう
because display override will help us
ディスプレイオーバーライド機能は——
with tabbed application mode.
タブ付きアプリケーションモードで 役立つからです
First,
最初に——
I'm gonna show you what tabbed application mode looks like.
タブ付きアプリケーションモードが どのように見えるかをお見せします
Hey, look at that.
ご覧ください
Easy tabs in a standalone window.
スタンドアロンウィンドウに 簡単なタブが表示されています
This is groundbreaking for many productivity apps where
これは 多くの生産性アプリにとって 画期的なことです
it's common to have more than one file open at the same
同時に複数のファイルを 開くことが多いからです
but you want those all associated inside of the same window.
それらのファイルを すべて同じウィンドウに 関連付ける必要があります
Here's how you use the new display override member
新しいdisplay_override メンバーの使い方を示します
in a manifest file.
マニフェストファイルをご覧ください
Notice that we start
起動時には——
with the widely supported display mode standalone.
ディスプレイモードをスタンドアロンにします このモードは 広くサポートされています
The display override member is ignored
display_overrideメンバーを サポートしていないブラウザは——
by browsers that don't have support for it.
この設定を無視します
So the app can continue to fall back to display standalone
そのため サポートされていないブラウザでは アプリがフォールバックして——
on unsupported browsers.
スタンドアロンでの表示が継続します
Display override takes a list of display modes
display_overrideは 表示モードのリストを受け取ります
which are tried in order
これらは順番に試行されます
falling back to the next one each time
そして 利用できない場合は——
if it's not available.
次のものにフォールバックします
You might be wondering what link capturing and URL handlers
リンクキャプチャとURLハンドラとは いったい何のことだろうと——
are all about.
思う方もいらっしゃるでしょう
Link capturing and URL handlers
リンクキャプチャと URLハンドラは——
lets you control what happens
制御機能の1つです
to the user journey once your app is installed
ユーザーがアプリを インストールを終えたときや——
and in standalone or tab browsing mode.
スタンドアロンまたはタブブラウジングの モードでの動作を制御します
For example, should clicks from the browser
たとえば ウェブアプリケーションの スコープ内で——
that are inside of the scope of your web application
ブラウザがクリックされたとします
open in the browser tab or in an existing standalone window
すると ブラウザのタブを開くべきでしょうか？ それともスタンドアロンウィンドウがあれば——
if one exists?
それで開くべきでしょうか？
Maybe they should open a new standalone window
新しいスタンドアロンウィンドウを 開くことも——
or maybe they should open a tab in a tab window.
タブウィンドウでタブを 開くことも考えられます
All of these are possible.
どちらも可能です
And unfortunately,
残念ですが——
we'll only have time to scratch the surface
あまり時間がありません
on what this API can do.
このAPIについては 詳しくお話しできません
Here's a sample manifest that has link capturing in it.
こちらは リンクキャプチャの マニフェストのサンプルです
The capture links member is specified in this instance
このインスタンスでは capture_linksメンバーに——
as existing client event.
existing_client_eventを 指定しています
That is, when a link is clicked leading into this PWA scope,
つまり このPWAスコープにつながる リンクをクリックすると——
the user agent finds an existing PWA window and,
ユーザーエージェントは 既存のPWAウィンドウを探そうとします
if more than one exists, the user agent chooses arbitrarily,
複数存在する場合 ユーザーエージェントは任意に選択し——
and it fires a launch event
起動イベントを送信します
on that window's top level context
送信先は そのウィンドウの トップレベルのコンテキストです
containing the launched URL.
イベントには 起動URLが含まれます
We can see in the defined URL handlers
url_handlerの定義もご覧ください
that you can see how origins are specified for handling.
処理対象となるオリジンを指定しています
In this case with a wild card,
ここでは ワイルドカードを使っています
the permission for the app to handle URLs for these origins
アプリにそのオリジンのURLを 処理する許可を与えるかどうかは——
is verified by the browser
ブラウザが判断します
through a web app origin association file hosted
ブラウザは ウェブアプリとオリジンを 関連付けるファイルを使って検証します
at each handled origin.
このファイルは 各オリジンにホストします
The window placement API enables complex productivity apps
ウィンドウ配置APIを使うと 複雑な生産性アプリを実現できます
that require multiple window layouts
複数の画面にまたがる 複数のウィンドウレイアウトが——
across multiple screens.
必要になる場合にも対応できます
For example, apps in presentation, finance,
たとえば プレゼンテーション　財務
medical, creativity, or gaming apps.
医療　クリエイティブ そして ゲームアプリなどです
There's a lot to this API,
このAPIには お話しすることが たくさんあります
far more than we can deep dive into today,
とても今日だけで お話しすることはできません
but I'm going to show you a couple of highlights.
ここでは ポイントだけお伝えしましょう
The highlighted code here returns metadata,
ハイライトしているコードは メタデータを返します
including how many screens the user has connected
これには ユーザーが 接続している画面数や——
and the coordinate system of those screens.
その画面の座標系などが含まれています
This snippet opens a new window
このスニペットは 新しいウィンドウを開きます
on the device's internal or primary screen.
ウィンドウは デバイスの内部画面 またはプライマリ画面で開きます
Here's how you'd request full screen on an external screen,
ここに示しているのは 外部画面で全画面表示を リクエストする方法です
like a TV or projector.
テレビやプロジェクターのようにです
This is how you know if the user's screen setup has changed.
この部分は ユーザーの画面設定が 変更されたかどうかを知る方法です
For example,
たとえば——
if a new monitor was plugged in or one was removed.
新しいモニターが接続された場合や モニターが取り外された場合です
I love demoing this feature because it's so easy to use.
この機能はとても使いやすいので よくデモでお見せしています
You'll wanna be using Canary
Canary版を使って——
and enable the appropriate flag.
適切なフラグを有効にする必要があります
One way to use this
この機能を使う方法の1つは——
is to simply let users opt into the experience
ユーザーがこれを使うかどうかかを 選べるようにすることです
with the install prompt.
そのために インストール時に プロンプトを表示します
We're still working on the exact user experience for this,
この機能の厳密な操作方法は まだ検討中の段階です
so some of the UI may change before it hits stable.
そのため 安定版になったときは UIの一部が変更されている可能性があります
The other way to use this API is programmatically.
このAPIは プログラムから 使うこともできます
And you can specify the mode
その場合 ウィンドウモードか——
as being either windowed or minimized.
最小化モードを 指定することができます
For example, some types of applications
たとえば 最小化した状態で——
might want to start in a minimized state.
開始したいアプリケーションもあるでしょう
Let's take a chat app, for example.
たとえば チャットアプリなどです
Notification triggers allow notifications to be shown
通知トリガーを使うと 特定の条件が満たされたときに——
when certain conditions are being met.
通知を表示することができます
The trigger can be time-based, location-based or otherwise.
トリガーには 時間ベースや 場所ベースなどがあります
For today, we're going to focus on time-based triggers.
今日は 時間ベースのトリガーを 取りあげます
You might be asking yourself,
次のような疑問を持つ方も いるかもしれません
why not just use regular notifications for this?
なぜこれに定期的な通知を 利用しないのでしょうか？
Well, the reason is that the push API is not reliable
それは プッシュAPIでは 確実に通知できないからです
for trigger notifications that need to go off
このAPIは 厳密に指定した 時間に発信する——
at a very specific time.
トリガー通知には利用できません
So for applications like calendars, alarm clocks and so on,
したがって カレンダーや目覚まし時計などの アプリケーションでは——
you need something that has higher accuracy and timeliness.
もっと高い精度と適時性を備えた仕組みが 必要になります
Just a quick note.
1点補足です
This API is currently in origin trial,
このAPIは 現在 オリジントライアル中です
and we're welcoming developers to try it out
デベロッパーの皆さんは ぜひ試してみてください
and give us feedback.
フィードバックをお待ちしています
The APIs I showed in this presentation
このプレゼンテーションで お話ししたAPIは——
aren't the only ones to get excited about.
期待できるAPIの一部でしかありません
Check out the Digital Goods API, local fonts,
Digital Goods API ローカルフォント
the badging APIs if you want to know about
バッジAPIもご確認ください
a few more exciting capabilities coming to the web platform.
ウェブプラットフォームには まだまだエキサイティングな機能が登場します
Whew, well, that was a whirlwind.
かなり早いペースに なってしまいましたが——
Thanks so much for joining,
ご覧いただきありがとうございました
and please keep those questions coming on Twitter.
質問はツイッターでお送りください
(upbeat music)
（明るい音楽）
Similar videos:

Superpowers for next gen web apps: Machine learning
Chrome for Developers
65.1K views 1.9K likes 30 dislikes 15 Dec 202060% match

Making the web more visual with Web Stories
Chrome for Developers
9.3K views 250 likes 39 dislikes 21 Dec 202059% match

Debugging WebAssembly with modern tools
Chrome for Developers
14.3K views 244 likes 25 dislikes 17 Dec 202059% match

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202058% match

Beyond fast with new performance features
Chrome for Developers
24.2K views 1.3K likes 10 dislikes 14 Dec 202058% match

Fixing common Web Vitals issues
Chrome for Developers
9.4K views 231 likes 5 dislikes 11 Dec 202056% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202056% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202056% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201948% match

Architecting Web Apps - Lights, Camera, Action! (Chrome Dev Summit 2018)
Chrome for Developers
32.9K views 805 likes 13 dislikes 13 Nov 201848% match

UX patterns optimized for Core Web Vitals
Chrome for Developers
17.8K views 520 likes 22 dislikes 11 Dec 202047% match

Complex JS-heavy Web Apps, Avoiding the Slow (Chrome Dev Summit 2018)
Chrome for Developers
29.1K views 908 likes 16 dislikes 12 Nov 201847% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201946% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201946% match

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201946% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201945% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202044% match

Chrome Dev Summit 2017 - Livestream (Day 1)
Chrome for Developers
24.7K views 0 likes 0 dislikes 23 Oct 201744% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201944% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201944% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201944% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202044% match

Chrome Dev Summit 2017 - Livestream (Day 2)
Chrome for Developers
10.7K views 160 likes 10 dislikes 24 Oct 201744% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201943% match

The main thread is overworked & underpaid (Chrome Dev Summit 2019)
Chrome for Developers
93.4K views 2.5K likes 68 dislikes 11 Nov 201943% match

Next-generation web styling (Chrome Dev Summit 2019)
Chrome for Developers
252.7K views 7.5K likes 0 dislikes 11 Nov 201943% match

You should focus — supporting different devices on the web (Chrome Dev Summit 2019)
Chrome for Developers
4K views 206 likes 6 dislikes 19 Nov 201943% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201943% match

3D, VR and AR on the web (Chrome Dev Summit 2019)
Chrome for Developers
15.3K views 514 likes 2 dislikes 17 Nov 201943% match

Get Down to Business: Why the Web Matters (Chrome Dev Summit 2018)
Chrome for Developers
8.9K views 154 likes 10 dislikes 12 Nov 201843% match


Settings Privacy About Contact Donate