Submit Search
Upload
WebIDLを見てみる
•
6 likes
•
4,413 views
takenspc
Follow
JSer.info 5周年記念イベント http://jser.connpass.com/event/24202/
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 55
Download now
Download to read offline
Recommended
なぜOpenID Connectが必要となったのか、その歴史的背景
なぜOpenID Connectが必要となったのか、その歴史的背景
Tatsuo Kudo
Keycloak拡張入門
Keycloak拡張入門
Hiroyuki Wada
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
SAML / OpenID Connect / OAuth / SCIM 技術解説 - ID&IT 2014 #idit2014
SAML / OpenID Connect / OAuth / SCIM 技術解説 - ID&IT 2014 #idit2014
Nov Matake
OpenID Connect入門
OpenID Connect入門
土岐 孝平
Goの時刻に関するテスト
Goの時刻に関するテスト
Kentaro Kawano
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
DeNA
Recommended
なぜOpenID Connectが必要となったのか、その歴史的背景
なぜOpenID Connectが必要となったのか、その歴史的背景
Tatsuo Kudo
Keycloak拡張入門
Keycloak拡張入門
Hiroyuki Wada
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
SAML / OpenID Connect / OAuth / SCIM 技術解説 - ID&IT 2014 #idit2014
SAML / OpenID Connect / OAuth / SCIM 技術解説 - ID&IT 2014 #idit2014
Nov Matake
OpenID Connect入門
OpenID Connect入門
土岐 孝平
Goの時刻に関するテスト
Goの時刻に関するテスト
Kentaro Kawano
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
DeNA
The Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnion
Yoshifumi Kawai
オープンソースライセンスの基礎と実務
オープンソースライセンスの基礎と実務
Yutaka Kachi
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
認証の課題とID連携の実装 〜ハンズオン〜
認証の課題とID連携の実装 〜ハンズオン〜
Masaru Kurahayashi
OCHaCafe#5 - 避けては通れない!認証・認可
OCHaCafe#5 - 避けては通れない!認証・認可
オラクルエンジニア通信
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
A AOKI
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
Masatoshi Tada
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
Masaru Kurahayashi
フラッター開発におけるシークレット情報取扱考察
フラッター開発におけるシークレット情報取扱考察
cch-robo
暗号技術の実装と数学
暗号技術の実装と数学
MITSUNARI Shigeo
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
KeycloakのDevice Flow、CIBAについて
KeycloakのDevice Flow、CIBAについて
Hiroyuki Wada
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
Web API入門
Web API入門
Masao Takaku
REST API のコツ
REST API のコツ
pospome
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
シラサギハンズオン 1015 1016
シラサギハンズオン 1015 1016
Yu Ito
More Related Content
What's hot
The Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnion
Yoshifumi Kawai
オープンソースライセンスの基礎と実務
オープンソースライセンスの基礎と実務
Yutaka Kachi
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
認証の課題とID連携の実装 〜ハンズオン〜
認証の課題とID連携の実装 〜ハンズオン〜
Masaru Kurahayashi
OCHaCafe#5 - 避けては通れない!認証・認可
OCHaCafe#5 - 避けては通れない!認証・認可
オラクルエンジニア通信
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
A AOKI
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
Masatoshi Tada
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
Masaru Kurahayashi
フラッター開発におけるシークレット情報取扱考察
フラッター開発におけるシークレット情報取扱考察
cch-robo
暗号技術の実装と数学
暗号技術の実装と数学
MITSUNARI Shigeo
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
KeycloakのDevice Flow、CIBAについて
KeycloakのDevice Flow、CIBAについて
Hiroyuki Wada
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
Web API入門
Web API入門
Masao Takaku
REST API のコツ
REST API のコツ
pospome
What's hot
(20)
The Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnion
オープンソースライセンスの基礎と実務
オープンソースライセンスの基礎と実務
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
認証の課題とID連携の実装 〜ハンズオン〜
認証の課題とID連携の実装 〜ハンズオン〜
OCHaCafe#5 - 避けては通れない!認証・認可
OCHaCafe#5 - 避けては通れない!認証・認可
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Redisの特徴と活用方法について
Redisの特徴と活用方法について
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
OpenID Connect 入門 〜コンシューマーにおけるID連携のトレンド〜
フラッター開発におけるシークレット情報取扱考察
フラッター開発におけるシークレット情報取扱考察
暗号技術の実装と数学
暗号技術の実装と数学
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
KeycloakのDevice Flow、CIBAについて
KeycloakのDevice Flow、CIBAについて
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Web API入門
Web API入門
REST API のコツ
REST API のコツ
Similar to WebIDLを見てみる
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
シラサギハンズオン 1015 1016
シラサギハンズオン 1015 1016
Yu Ito
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
WordPress と Bootstrap
WordPress と Bootstrap
株式会社ガリレオ(開発グループ)
Apache Module
Apache Module
Tomohiro Ikebe
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築
sato165 @delab
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Tomohiro Ichimura
WebAPIではじめるphp入門
WebAPIではじめるphp入門
Hiroaki Murayama
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
Masayuki Abe
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
シラサギハンズオン 大阪
シラサギハンズオン 大阪
Yu Ito
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Shotaro Suzuki
シラサギハンズオン 東京
シラサギハンズオン 東京
Yu Ito
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
Power shell で DSL
Power shell で DSL
urasandesu
現場的!オンプレとAWSの違い
現場的!オンプレとAWSの違い
真吾 吉田
Azure Search クックブック
Azure Search クックブック
Kazuyuki Miyake
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
Hiroshi Okunushi
Similar to WebIDLを見てみる
(20)
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
シラサギハンズオン 1015 1016
シラサギハンズオン 1015 1016
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
WordPress と Bootstrap
WordPress と Bootstrap
Apache Module
Apache Module
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
WebAPIではじめるphp入門
WebAPIではじめるphp入門
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
シラサギハンズオン 大阪
シラサギハンズオン 大阪
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
シラサギハンズオン 東京
シラサギハンズオン 東京
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
Power shell で DSL
Power shell で DSL
現場的!オンプレとAWSの違い
現場的!オンプレとAWSの違い
Azure Search クックブック
Azure Search クックブック
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Mvc conf session_2_shibamura
Mvc conf session_2_shibamura
WebIDLを見てみる
1.
WebIDL を見てみる ブラウザーに実装されている API
を知りたい @Takenspc
2.
内容 ● 背景 ● WebIDL を見てみる ● まとめ
3.
背景 ● ブラウザーで使える API :たくさんある –
新たな API が生まれる – 途中で API が変わる ● 実際に使える API は何なのか、知りたい
4.
Specifications BrowserContent ??? ??? ??? ??? ???
5.
例えば、こう書ける? const url =
new URL('…?foo=0&bar=1'); for (const param of url.searchParams) { console.log(param[0], param[1]); }
6.
http://caniuse.com/#search=URLSearchParams
7.
https://dev.windows.com/en-us/microsoft-edge/platform/status/urlapi
8.
https://developer.mozilla.org/en-US/docs/Web/API/URL
9.
実際のところ… Chrome Firefox IE
Safari URL.searchParams N/A 29+ N/A N/A URLSearchParams 49+ 29+ N/A N/A @@iterator 49+ 44+ N/A N/A
10.
現状 ● ブラウザーの実装とドキュメントが分離 – 粒度や作成・更新頻度がニーズと異なる場合も
11.
ブラウザーの実装は…? ● ブラウザーも誰かが書いてるはず
12.
Specifications BrowserContent ??? ??? ??? ??? ???
13.
結論から言うと ● 主なブラウザーの開発では WebIDL からイン タフェースを機械生成 ● WebIDL
は各仕様が定義
14.
Specifications BrowserContent WebIDL WebIDL
15.
Specifications BrowserContent Available Behind a flag Not
compiled Not implemented WebIDL WebIDL
16.
WebIDL ● Web 技術向け IDL –
ECMAScript に特化
17.
https://heycam.github.io/webidl/
18.
WebIDL ● 仕様とブラウザーの共通言語の 1 つ –
共通言語なので比較可能
19.
WebIDL を見てみる ● 仕様( URL
Standard ) ● Web Platform Tests ● Gecko ● Chromium ● WebKit
20.
https://url.spec.whatwg.org/#api
21.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker)] interface URL { static USVString domainToASCII(USVString domain); static USVString domainToUnicode(USVString domain); stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; … attribute USVString search; readonly attribute URLSearchParams searchParams; attribute USVString hash; }; URL Standard
22.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker)] interface URL { static USVString domainToASCII(USVString domain); static USVString domainToUnicode(USVString domain); stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; … attribute USVString search; readonly attribute URLSearchParams searchParams; attribute USVString hash; }; コンストラクタ インタフェース名 仮引数 URL Standard
23.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker)] interface URL { static USVString domainToASCII(USVString domain); static USVString domainToUnicode(USVString domain); stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; … attribute USVString search; readonly attribute URLSearchParams searchParams; attribute USVString hash; }; 戻り値の型 メソッド名 仮引数 URL Standard
24.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker)] interface URL { static USVString domainToASCII(USVString domain); static USVString domainToUnicode(USVString domain); stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; … attribute USVString search; readonly attribute URLSearchParams searchParams; attribute USVString hash; }; 型 プロパティ名 URL Standard
25.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker)] interface URL { static USVString domainToASCII(USVString domain); static USVString domainToUnicode(USVString domain); stringifier attribute USVString href; readonly attribute USVString origin; attribute USVString protocol; … attribute USVString search; readonly attribute URLSearchParams searchParams; attribute USVString hash; }; URL Standard
26.
https://github.com/w3c/web-platform-tests/blob/master/url/interfaces.html
27.
https://dxr.mozilla.org/mozilla-central/source/dom/webidl/URL.webidl
28.
[…] interface URL { … […]
attribute USVString search; readonly attribute URLSearchParams searchParams; … }; Gecko
29.
https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URL.idl
30.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker), …] interface URL { … […] static DOMString? createObjectURL(Blob blob); […] static void revokeObjectURL(DOMString url); }; URL implements URLUtils; Chromium
31.
[Constructor(USVString url, optional
USVString base), Exposed=(Window,Worker), …] interface URL { … […] static DOMString? createObjectURL(Blob blob); […] static void revokeObjectURL(DOMString url); }; URL implements URLUtils; Chromium
32.
https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URLUtils.idl
33.
[…] interface URLUtils { … attribute
USVString search; // Not yet implemented. // attribute URLSearchParams searchParams; … }; Chromium
34.
http://trac.webkit.org/browser/trunk/Source/WebCore/html/DOMURL.idl
35.
http://trac.webkit.org/browser/trunk/Source/WebCore/html/URLUtils.idl
36.
WebIDL を比較するには ● 継承などの解決 ● Extended attributes
( [ と ] の間)
37.
URL Standard
38.
Gecko
39.
Chromium
40.
WebKit
41.
まとめ ● WebIDL は仕様とブラウザーの共通言語の 1 つ ● API
の実装状況が知りたい: WebIDL も参考になるかも
42.
ご清聴ありがとうございました
43.
おまけ ● URL 関連 API
の変化 ● WebIDL である必然性 ● WebIDL の仕様と実際の WebIDL ● 実際にコンパイルされる WebIDL の推定
44.
URL 関連 API
の変化 ● 仕様( URL Standard ) – 2015 年夏頃まで: URL.href や HTMLAnchor.href 、 Location.href などを URLUtils にまとめる – 2015 年夏以降: URLUtils などにまとめることを 断念
45.
URLUtils URLUtilsSearchParams URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL 仕様( 2015 年夏ごろまで)
46.
HTMLHyperlinkElementUtils WorkerLocation HTMLAnchorElement HTMLAreaElement Location URL 仕様( 2016 年
1 月)
47.
URL 関連 API
の変化 ● ブラウザーの実装 – Gecko : 45 で仕様に合わせて更新 ( Bug 121385) – Chromium :今後仕様に合わせて更新? ( dff906e) – WebKit :?
48.
HTMLHyperlinkElementUtils URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL Gecko
49.
URLUtils URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL Chromium
50.
URLUtils WorkerLocation HTMLAnchorElement HTMLAreaElement Location URL WebKit
51.
WebIDL である必然性 ● WebIDL の構文は
ECMAScript とは別物 – WebIDL でインタフェースを定義する必然性はない ● Ecmarkup を使っている仕様 https://streams.spec.whatwg.org/
52.
WebIDL の仕様と実際の WebIDL ● 仕様に書かれている
WebIDL – 古い WebIDL 仕様をもとに書かれている ● ブラウザーの開発に使われている WebIDL – 古い WebIDL 仕様をもとに書かれている – 独自拡張が施されている
53.
Foo[] → FronzenArray<Foo> ● https://lists.w3.org/Archives/Public/pu blic-webapps/2015JulSep/0165.html –
WebIDL の仕様が変わったよ – それぞれの仕様に書かれている WebIDL も更新し よう ● まだ終わっていない
54.
ブラウザーの WebIDL ● MDN: Information
contained in a WebIDL f fle ● WebIDL in Blink ● WebKitIDL
55.
ビルドされる WebIDL の推定 ● どの機能がビルドされるかの推定が面倒 –
実際にビルドするのも面倒… ● ( Gecko )ランタイムフラグの推定が面倒 – Worker.webidl – mozilla::dom::workers::WorkerPrivate::Work erAvailable
Download now