#39「Interop 2022の歩き方」
Interop 2022とはWebブラウザの相互運用性を高めるための取り組みで、主要なブラウザベンダーと、その関係者が主導で進めているプロジェクトのことをいいます。今回のテックラジオでは、いったいInteropとはどういう取り組みなのか、開発者がどのようにキャッチアップすればよいのかについてお話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 古川
- みなさんこんにちは！ ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。司会は古川がつとめます。今回のゲストは佐竹さんです。よろしくお願いします！
- 佐竹
- よろしくお願いします。
- 古川
- はい、というわけで、今日のテーマなんですけど、
- 佐竹
- はい
- 古川
- 「Interop 2022の歩き方」ってことなんですが、自分あんまよく知らないのでInteropって何か教えてください。
- 佐竹
- はい。Interopは、Webブラウザの相互運用性を高めるための取り組みで、主要なブラウザベンダーとその関係者が主導で進めているプロジェクトのことをいいます。
- 古川
- 最初から結構その「相互運用性」っていう難しい単語が出てきたんですけど、いまいちわからないので、今日はいろいろ聞いていきたいと思います。
- 佐竹
- はい！
- 古川
- なんか、Interopって急に出てきた感がちょっとしちゃうんですけど、そんなことないですか？
- 佐竹
- そうですね。実は2019年頃から、この相互運用性を高める取り組みというのはあったんですけど、以前はInteropとは呼ばれていなくって、2019年から20年まではMDN Web Developers Needs Assessment略してWeb DNAと呼ばれていて、2021年からCompat、2022年でInteropという名前になったんですね。
- 古川
- んー、ということは今年からInteropっていう呼び方になったんですか？
- 佐竹
- そうなんです。2021年のCompatの由来になってる「compatibility」が、日本語で「互換性」という意味で、2022年のInteropの由来になっている「interoperability」が「相互運用性」という意味なんですね。
- 古川
- なるほど、あの「Interop 2022は、Webブラウザの相互運用性を高めるための取り組み」っていう風におっしゃっていたと思うんですけど、そもそも「Webブラウザの相互運用性」って何か教えてほしいです。
- 佐竹
- はい。例えば2021年から重点分野の1つになっているCSSの
display: gridなんですけど、2022年現在Can I Useで調べると、ChromeとかMozilla含めて2つ以上のブラウザで仕様どおりに利用できますよね。 - 古川
- はい。
- 佐竹
- はい。そんな感じでWeb標準技術が仕様通りに、複数のブラウザで問題なく動作することをInteropでは相互運用性と定義しています。
- 古川
- んーと、じゃあそのCompatからInteropに名前が変わったのも、その互換性っていうよりは、ブラウザ同士の横のつながりを意識した主旨の取り組みだからってことですかね？
- 佐竹
- そうですね。ちなみに、Web制作をしていると、このWeb標準技術がどのブラウザでも仕様どおりに使えたらいいなーみたいなことを思う事ってありませんか？
- 古川
- ありますね。やっぱ特に新しめのWeb標準の技術はやっぱ便利なものが多くて、それが使えるか使えないかで結構工数が変わったりとか、あと対応しなけきゃいけないことが増えたりすると思うんですけど、やっぱそれって開発者にとっては結構ダイレクトにコストに直結するじゃないですか。
- 佐竹
- はい。Interopではそういったニーズを調査して、調査の結果出てきた項目に対してWeb制作に大きく影響がありそうなものから優先順位付けをして、優先度の高い順から改善しようと取り組んでいるんですね。
- 古川
- つまりまとめると、この取り組みの目的は、Web開発者の体験を向上させるために、主要ブラウザが主導してやってる取り組みってことですか？
- 佐竹
- そういうことですね。ただその側面だけではなくって、他にWebプラットフォームとして、こうありたいよね、っていう姿を、みんなで実現していこうという姿勢の現れともとれるのかなと思っています。
- 古川
- んーもうちょっと詳しくお願いします。
- 佐竹
- はい。ブラウザに代表されるWebプラットフォームは、世界共通のWeb標準に従って実装されることで、誰がどれを使っても同じようにWebを自由に利用できる、いわゆる公共のリソースであり続けることができると思っています。
- 古川
- はい。
- 佐竹
- でも、Webプラットフォームを作っている人がWeb標準を誤って理解していたり、開発が追いついていないと、「誰がどのプラットフォームを利用しても同じように」ということが実現しないですよね。
- 古川
- うーん、まあしませんね。
- 佐竹
- なのでInteropはブラウザベンダーが、Web 標準について共通の理解を持って、足並みを揃えた開発をしているということを確認するための取り組みでもあるのかなと思っています。
- 古川
- そういう見方もできるんですね。今のお話を聞いてなんですけど、奥が深い取り組みだなと思いました。
- 古川
- あの、さっきInteropでは、調査結果が出てきた項目に優先付けしているっていう話があったと思うんですけど、Interop 2022でも優先度が高い課題から取り組んでるってことですか？
- 佐竹
- はい。Compat 2021から引き継いだ5つの課題と、Interop 2022で追加された10個の新しい課題、まあ重点分野と言っているようなんですけど、合計15個の重点分野があります。
- 古川
- その15個の重点分野って、具体的に何が該当するのかっていうのは、どっかで確認できたりとかするんですか？
- 佐竹
- はい。web-platform-tests dashboard、略してWPTダッシュボードというのがあります。
WPTというのは、Web標準の相互運用性をテストするプロジェクトのことで、Chrome、Edge、Firefox、SafariからWebプラットフォーム仕様のテスト結果を定期的に収集してアーカイブしてるんですけど、この中に、Interop 2022の重点分野のリストだったり、各ブラウザの相互運用性の達成率が見れるダッシュボードのページがあるんですね。 - 古川
- あーじゃあ、まあそこを見ればいいってことですね。
- 佐竹
- はい。WPTのGitHubリポジトリのREADMEには、WPTプロジェクトの情報がいろいろ記載されています。例えば、ダッシュボードの他にも、実際のテストだったり、テストの詳細なドキュメントなどがあるので、興味がある方は見てみて欲しいですね。
- 古川
- はい。Interop 2022のWPTダッシュボードのページの、上のほうに3つ並んだ数字があるんですけど、これは、Interopの重点分野について、モダンブラウザでのテストがどれくらいパスしているかの総括みたいなことでいいんですか？
- 佐竹
- そうですね。ちなみに、ダッシュボードに2021年のテスト結果の遷移グラフがあるんですけど、これが右肩あがりになってるんですよね。
- 古川
- うーん、そうなんですね。
- 佐竹
- はい。ここから、Compat 2021では、かなり広く使われている5つのWeb標準技術、具体的にいうとCSS FlexboxだったりCSS Gridなんですけど、これらの相互運用性が大きく改善されたことがわかります。
- 古川
- なるほど。Compat 2021の項目で、例えば
position: stickyがあるんですけど、これは収録時点ではChromeとSafariは100%達成してて、Firefoxは89%達成になってるんですけど、Firefoxではどんなテストが通ってないっていうのかってどう確認したらよいですか？ - 佐竹
- はい。それはですね、各重点分野のテスト結果ページを見るとわかります。
position: stickyのページだと、テスト結果がマトリクス状のテーブルで書かれています。 - そして、各テスト結果には、そのテストを達成するためにどんなことを確認したのか？などが記載されているんですけど、テストにパスしていないと赤とか黄色になっていて、パスをしていると緑色になっているんですね。
- 古川
- あー、そうなると例えば
position: stickyについては、Firefoxでは、祖先の要素がposition: fixedの時に、position: stickyがうまく動かないことがあるってことがわかるってことですかね。 - あの、テスト項目の詳細のページにこの「Run in your browser on wpt.live」っていうリンクがあるんですけど、これは何ですか？
- 佐竹
- はい。wpt.liveはテスト項目を実際にWebページに実装しているデモになっていて、誰でも見れるので、自分が好きなブラウザからアクセスして、テストを実行できます。
- 古川
- テストをこう自分の環境で、簡単に試せるのが、なんかめっちゃいいですね。
- 佐竹
- そうですよね。普段実装していると、なんか思った通りに機能しない…っていうことが起こるので、原因特定のためにここを参照してみると、ヒントが見つけられたりするかもしれないですね。
- 古川
- はい、ここまでInterop 2022の概要についてお話をしてきたんですけど、なんかInterop 2023の取り組みも始まっているって聞いたんですが、そうなんですか？
- 佐竹
- はい。WPTのGitHubリポジトリで10月末までissuesで注力エリアの提案公募がされていました。
- 古川
- となると収録時点は、まあ公募がちょうど終わった頃合いだと思うんですけど、今後はどういうスケジュールで動いていくんですか？
- 佐竹
- 今後予定されているスケジュールとしては、11月中に主要なブラウザベンダーと関係者を中心に、どの提案を受け入れるか決める期間になっていて、2023年1月に受け入れられた提案とテストの内容が公開される予定だそうです。
- 古川
- おー、来年の発表が楽しみです！
- ということで、今日の話を聞いてもっとInteropについて知りたくなったんですけど、長くなってきたので続きは次回にしたいと思います！
- 佐竹
- 今回はInteropの概要を中心にお話してきたのですが、次回はInterop 2022の重点分野を振り返りつつ、2023の提案についても少し覗いてみます。
- 古川
- 次回をお楽しみに！
- ということで、ミツエーリンクスでは、スマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接などを行っていますのでぜひチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信をしています。お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐに視聴できます！
こちらもぜひご活用ください。
最後に「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストをお待ちしております。 - それでは今日はこの辺で！
ありがとうございました！ - 佐竹
- ありがとうございました！