Submit Search
Upload
WebIDLを見てみる
•
6 likes
•
4,410 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
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
そろそろ知っておきたい!!コンテナ技術とDockerのキホン
そろそろ知っておきたい!!コンテナ技術とDockerのキホン
Naoki Nagazumi
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Hiro H.
Go 製リアルタイムサーバーの Kubernetes での運用について
Go 製リアルタイムサーバーの Kubernetes での運用について
KairiOkumura
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理
Tadashi Miyazato
もうひとつのアンチパターン OTLT、あるいは如何にして私はオレオレフレームワークを忌み嫌うようになったか
もうひとつのアンチパターン OTLT、あるいは如何にして私はオレオレフレームワークを忌み嫌うようになったか
suno88
ruby-ffiについてざっくり解説
ruby-ffiについてざっくり解説
ota42y
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
Recommended
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
そろそろ知っておきたい!!コンテナ技術とDockerのキホン
そろそろ知っておきたい!!コンテナ技術とDockerのキホン
Naoki Nagazumi
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Hiro H.
Go 製リアルタイムサーバーの Kubernetes での運用について
Go 製リアルタイムサーバーの Kubernetes での運用について
KairiOkumura
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理
Tadashi Miyazato
もうひとつのアンチパターン OTLT、あるいは如何にして私はオレオレフレームワークを忌み嫌うようになったか
もうひとつのアンチパターン OTLT、あるいは如何にして私はオレオレフレームワークを忌み嫌うようになったか
suno88
ruby-ffiについてざっくり解説
ruby-ffiについてざっくり解説
ota42y
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
RSA鍵生成脆弱性ROCAの紹介
RSA鍵生成脆弱性ROCAの紹介
MITSUNARI Shigeo
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
Fujio Kojima
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
uedayou
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
Fumiya Sakai
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
株式会社クライム
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
NTT DATA Technology & Innovation
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
REST API のコツ
REST API のコツ
pospome
TDD のこころ @ OSH2014
TDD のこころ @ OSH2014
Takuto Wada
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
Unity Technologies Japan K.K.
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
TRICK 2022 Results
TRICK 2022 Results
mametter
エラーハンドリング
エラーハンドリング
道化師 堂華
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
Genya Murakami
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
KnowledgeGraph
Azure App Service Overview
Azure App Service Overview
Takeshi Fukuhara
暗号技術の実装と数学
暗号技術の実装と数学
MITSUNARI Shigeo
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
RSA鍵生成脆弱性ROCAの紹介
RSA鍵生成脆弱性ROCAの紹介
MITSUNARI Shigeo
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
Fujio Kojima
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
uedayou
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
Fumiya Sakai
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
株式会社クライム
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
NTT DATA Technology & Innovation
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
REST API のコツ
REST API のコツ
pospome
TDD のこころ @ OSH2014
TDD のこころ @ OSH2014
Takuto Wada
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
Unity Technologies Japan K.K.
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
TRICK 2022 Results
TRICK 2022 Results
mametter
エラーハンドリング
エラーハンドリング
道化師 堂華
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
Genya Murakami
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
KnowledgeGraph
Azure App Service Overview
Azure App Service Overview
Takeshi Fukuhara
暗号技術の実装と数学
暗号技術の実装と数学
MITSUNARI Shigeo
What's hot
(20)
RSA鍵生成脆弱性ROCAの紹介
RSA鍵生成脆弱性ROCAの紹介
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
C# 式木 (Expression Tree) ~ LINQをより深く理解するために ~
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
SPARQLを利用した逆マッシュアップ-プログラミングを必要としないアプリ作成方法-
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Docker Tokyo
Docker Tokyo
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
オンプレ回帰も簡単実現!自由自在なデータベース運用とは
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
REST API のコツ
REST API のコツ
TDD のこころ @ OSH2014
TDD のこころ @ OSH2014
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
【Unite Tokyo 2018】さては非同期だなオメー!async/await完全に理解しよう
Redisの特徴と活用方法について
Redisの特徴と活用方法について
TRICK 2022 Results
TRICK 2022 Results
エラーハンドリング
エラーハンドリング
すごい constexpr たのしくレイトレ!
すごい constexpr たのしくレイトレ!
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
Linked Open Data勉強会2020 後編:SPARQLの簡単な使い方、SPARQLを使った簡単なアプリ開発
Azure App Service Overview
Azure App Service Overview
暗号技術の実装と数学
暗号技術の実装と数学
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