Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
WebIDL を見てみる
ブラウザーに実装されている API を知りたい
@Takenspc
内容
●
背景
●
WebIDL を見てみる
●
まとめ
背景
●
ブラウザーで使える API :たくさんある
– 新たな API が生まれる
– 途中で API が変わる
●
実際に使える API は何なのか、知りたい
Specifications
BrowserContent
???
???
???
???
???
例えば、こう書ける?
const url = new URL('…?foo=0&bar=1');
for (const param of url.searchParams) {
console.log(param[0], param[1]);
}
http://caniuse.com/#search=URLSearchParams
https://dev.windows.com/en-us/microsoft-edge/platform/status/urlapi
https://developer.mozilla.org/en-US/docs/Web/API/URL
実際のところ…
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...
現状
●
ブラウザーの実装とドキュメントが分離
– 粒度や作成・更新頻度がニーズと異なる場合も
ブラウザーの実装は…?
●
ブラウザーも誰かが書いてるはず
Specifications
BrowserContent
???
???
???
???
???
結論から言うと
●
主なブラウザーの開発では WebIDL からイン
タフェースを機械生成
●
WebIDL は各仕様が定義
Specifications
BrowserContent
WebIDL
WebIDL
Specifications
BrowserContent
Available
Behind a flag
Not compiled
Not implemented
WebIDL
WebIDL
WebIDL
●
Web 技術向け IDL
– ECMAScript に特化
https://heycam.github.io/webidl/
WebIDL
●
仕様とブラウザーの共通言語の 1 つ
– 共通言語なので比較可能
WebIDL を見てみる
●
仕様( URL Standard )
●
Web Platform Tests
●
Gecko
●
Chromium
●
WebKit
https://url.spec.whatwg.org/#api
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToAS...
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToAS...
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToAS...
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToAS...
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToAS...
https://github.com/w3c/web-platform-tests/blob/master/url/interfaces.html
https://dxr.mozilla.org/mozilla-central/source/dom/webidl/URL.webidl
[…]
interface URL {
…
[…] attribute USVString search;
readonly attribute URLSearchParams searchParams;
…
};
Gecko
https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URL.idl
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker),
…]
interface URL {
…
[…] static DOMString? ...
[Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker),
…]
interface URL {
…
[…] static DOMString? ...
https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URLUtils.idl
[…]
interface URLUtils {
…
attribute USVString search;
// Not yet implemented.
// attribute URLSearchParams searchParams;
...
http://trac.webkit.org/browser/trunk/Source/WebCore/html/DOMURL.idl
http://trac.webkit.org/browser/trunk/Source/WebCore/html/URLUtils.idl
WebIDL を比較するには
●
継承などの解決
●
Extended attributes ( [ と ] の間)
URL Standard
Gecko
Chromium
WebKit
まとめ
●
WebIDL は仕様とブラウザーの共通言語の 1
つ
●
API の実装状況が知りたい:
WebIDL も参考になるかも
ご清聴ありがとうございました
おまけ
●
URL 関連 API の変化
●
WebIDL である必然性
●
WebIDL の仕様と実際の WebIDL
●
実際にコンパイルされる WebIDL の推定
URL 関連 API の変化
●
仕様( URL Standard )
– 2015 年夏頃まで: URL.href や
HTMLAnchor.href 、 Location.href などを
URLUtils にまとめる
– 2015 年夏以...
URLUtils
URLUtilsSearchParams
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
仕様( 2015 年夏ごろま...
HTMLHyperlinkElementUtils
WorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
仕様( 2016 年 1 月)
URL 関連 API の変化
●
ブラウザーの実装
– Gecko : 45 で仕様に合わせて更新
( Bug 121385)
– Chromium :今後仕様に合わせて更新?
( dff906e)
– WebKit :?
HTMLHyperlinkElementUtils
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
Gecko
URLUtils
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
Chromium
URLUtils
WorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
WebKit
WebIDL である必然性
●
WebIDL の構文は ECMAScript とは別物
– WebIDL でインタフェースを定義する必然性はない
●
Ecmarkup を使っている仕様
https://streams.spec.whatwg.o...
WebIDL の仕様と実際の WebIDL
●
仕様に書かれている WebIDL
– 古い WebIDL 仕様をもとに書かれている
●
ブラウザーの開発に使われている WebIDL
– 古い WebIDL 仕様をもとに書かれている
– 独自拡張...
Foo[] → FronzenArray<Foo>
●
https://lists.w3.org/Archives/Public/pu
blic-webapps/2015JulSep/0165.html
– WebIDL の仕様が変わったよ
–...
ブラウザーの WebIDL
●
MDN: Information contained in a WebIDL f
fle
●
WebIDL in Blink
●
WebKitIDL
ビルドされる WebIDL の推定
●
どの機能がビルドされるかの推定が面倒
– 実際にビルドするのも面倒…
●
( Gecko )ランタイムフラグの推定が面倒
– Worker.webidl
– mozilla::dom::workers::...
Próxima SlideShare
Cargando en…5
×

WebIDLを見てみる

2.548 visualizaciones

Publicado el

JSer.info 5周年記念イベント
http://jser.connpass.com/event/24202/

Publicado en: Ingeniería
  • Sé el primero en comentar

WebIDLを見てみる

  1. 1. WebIDL を見てみる ブラウザーに実装されている API を知りたい @Takenspc
  2. 2. 内容 ● 背景 ● WebIDL を見てみる ● まとめ
  3. 3. 背景 ● ブラウザーで使える API :たくさんある – 新たな API が生まれる – 途中で API が変わる ● 実際に使える API は何なのか、知りたい
  4. 4. Specifications BrowserContent ??? ??? ??? ??? ???
  5. 5. 例えば、こう書ける? const url = new URL('…?foo=0&bar=1'); for (const param of url.searchParams) { console.log(param[0], param[1]); }
  6. 6. http://caniuse.com/#search=URLSearchParams
  7. 7. https://dev.windows.com/en-us/microsoft-edge/platform/status/urlapi
  8. 8. https://developer.mozilla.org/en-US/docs/Web/API/URL
  9. 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. 10. 現状 ● ブラウザーの実装とドキュメントが分離 – 粒度や作成・更新頻度がニーズと異なる場合も
  11. 11. ブラウザーの実装は…? ● ブラウザーも誰かが書いてるはず
  12. 12. Specifications BrowserContent ??? ??? ??? ??? ???
  13. 13. 結論から言うと ● 主なブラウザーの開発では WebIDL からイン タフェースを機械生成 ● WebIDL は各仕様が定義
  14. 14. Specifications BrowserContent WebIDL WebIDL
  15. 15. Specifications BrowserContent Available Behind a flag Not compiled Not implemented WebIDL WebIDL
  16. 16. WebIDL ● Web 技術向け IDL – ECMAScript に特化
  17. 17. https://heycam.github.io/webidl/
  18. 18. WebIDL ● 仕様とブラウザーの共通言語の 1 つ – 共通言語なので比較可能
  19. 19. WebIDL を見てみる ● 仕様( URL Standard ) ● Web Platform Tests ● Gecko ● Chromium ● WebKit
  20. 20. https://url.spec.whatwg.org/#api
  21. 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. 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. 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. 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. 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. 26. https://github.com/w3c/web-platform-tests/blob/master/url/interfaces.html
  27. 27. https://dxr.mozilla.org/mozilla-central/source/dom/webidl/URL.webidl
  28. 28. […] interface URL { … […] attribute USVString search; readonly attribute URLSearchParams searchParams; … }; Gecko
  29. 29. https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URL.idl
  30. 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. 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. 32. https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URLUtils.idl
  33. 33. […] interface URLUtils { … attribute USVString search; // Not yet implemented. // attribute URLSearchParams searchParams; … }; Chromium
  34. 34. http://trac.webkit.org/browser/trunk/Source/WebCore/html/DOMURL.idl
  35. 35. http://trac.webkit.org/browser/trunk/Source/WebCore/html/URLUtils.idl
  36. 36. WebIDL を比較するには ● 継承などの解決 ● Extended attributes ( [ と ] の間)
  37. 37. URL Standard
  38. 38. Gecko
  39. 39. Chromium
  40. 40. WebKit
  41. 41. まとめ ● WebIDL は仕様とブラウザーの共通言語の 1 つ ● API の実装状況が知りたい: WebIDL も参考になるかも
  42. 42. ご清聴ありがとうございました
  43. 43. おまけ ● URL 関連 API の変化 ● WebIDL である必然性 ● WebIDL の仕様と実際の WebIDL ● 実際にコンパイルされる WebIDL の推定
  44. 44. URL 関連 API の変化 ● 仕様( URL Standard ) – 2015 年夏頃まで: URL.href や HTMLAnchor.href 、 Location.href などを URLUtils にまとめる – 2015 年夏以降: URLUtils などにまとめることを 断念
  45. 45. URLUtils URLUtilsSearchParams URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL 仕様( 2015 年夏ごろまで)
  46. 46. HTMLHyperlinkElementUtils WorkerLocation HTMLAnchorElement HTMLAreaElement Location URL 仕様( 2016 年 1 月)
  47. 47. URL 関連 API の変化 ● ブラウザーの実装 – Gecko : 45 で仕様に合わせて更新 ( Bug 121385) – Chromium :今後仕様に合わせて更新? ( dff906e) – WebKit :?
  48. 48. HTMLHyperlinkElementUtils URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL Gecko
  49. 49. URLUtils URLUtilsReadOnlyWorkerLocation HTMLAnchorElement HTMLAreaElement Location URL Chromium
  50. 50. URLUtils WorkerLocation HTMLAnchorElement HTMLAreaElement Location URL WebKit
  51. 51. WebIDL である必然性 ● WebIDL の構文は ECMAScript とは別物 – WebIDL でインタフェースを定義する必然性はない ● Ecmarkup を使っている仕様 https://streams.spec.whatwg.org/
  52. 52. WebIDL の仕様と実際の WebIDL ● 仕様に書かれている WebIDL – 古い WebIDL 仕様をもとに書かれている ● ブラウザーの開発に使われている WebIDL – 古い WebIDL 仕様をもとに書かれている – 独自拡張が施されている
  53. 53. Foo[] → FronzenArray<Foo> ● https://lists.w3.org/Archives/Public/pu blic-webapps/2015JulSep/0165.html – WebIDL の仕様が変わったよ – それぞれの仕様に書かれている WebIDL も更新し よう ● まだ終わっていない
  54. 54. ブラウザーの WebIDL ● MDN: Information contained in a WebIDL f fle ● WebIDL in Blink ● WebKitIDL
  55. 55. ビルドされる WebIDL の推定 ● どの機能がビルドされるかの推定が面倒 – 実際にビルドするのも面倒… ● ( Gecko )ランタイムフラグの推定が面倒 – Worker.webidl – mozilla::dom::workers::WorkerPrivate::Work erAvailable

×