福岡典幸 | WebClass R&D Team

Chrome 80

こんにちは。福岡です。

Chrome for Desktop 80 が 2月5日にリリースされました。

Chrome のリリーススケジュールについて

次のリリースがいつ頃来るかはこちらで確認できます。

https://www.chromestatus.com/features/schedule

Chrome 80

Chromeのリリースノートは以下に公開されていて、ベータチャンネルやAndroid版などが混じるのですが、「Stable Channel Update for Desktop」のタイトルがデスクトップ版のChromeブラウザの安定板リリース情報になります。

https://chromereleases.googleblog.com/

Chrome 80 の安定板リリース情報はこちらになります。

https://chromereleases.googleblog.com/2020/02/stable-channel-update-for-desktop.html

セキュリティアップデートが沢山あるのはこのページで分かりますが、機能的な変更はほとんど情報がないです。

Chrome 80に関する開発者向け情報は以下です。こちらに、主な変更点の情報へのリンクがあります。

https://developers.google.com/web/updates/tags/chrome80

追加機能については、origin trial で提供されるもののみで、こちらに説明があります。削除された機能については、今回は特に影響がありそうなものはありませんでした。

https://developers.google.com/web/updates/2020/02/nic80

JavaScript の言語レベルの変更はこちらにも情報があります。

https://v8.dev/blog/v8-release-80

CSS/JS の Chrome Platform の更新はこちらです。

https://www.chromestatus.com/features#milestone%3D80

今回削除もしくは非推奨となった機能の情報はこちらです。

https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems

今回、ブラウザウインドウを閉じようとしているときの、Javascriptの動作の一部に制限が加わったようです。ウインドウを開いたり、XMLHttpRequestの同期送信ができなくなりました。

Pickup for webclass

Release Note から辿った情報で、WebClassを利用するにあたって特に気になる変更はありません。

Microsoft Edge 79

こんにちは。福岡です。

１月１５日に、Microsoft のブラウザ Edge の新しいバージョンがリリースされました。ブラウザエンジンがオープンソースの Chromium に切り替わっていて、バージョンは 79.0 となっています。

今はまだ Windows アップデートで自動的に切り替わるわけではありませんが、４月ころに Windows アップデートで更新されるようです。

利用方法

Edge 79 は Windows１０だけでなく、Mac、Android、iOS でも使えます。

Windows 10 ではまだ自動更新されないので、以下のサイトよりダウンロードしてインストールできます。Mac も同様です。新しいバージョンの Edge ではアイコンが変わります。

https://www.microsoft.com/en-us/edge?icid=SMC-IA-4501095

Android および iPhone では、Google Play もしくは Apple Store で検索すると出てきます。

Edge の新しいバージョンのリリースについて、こちらに情報があります。

https://blogs.windows.com/msedgedev/2020/01/15/upgrading-new-microsoft-edge-79-chromium/

ver.79 は、要するに Windowsユーザに準備してもらうための先行リリースです。次のバージョンの ver.80 のころ、Windows アップデートで提供されるようになります。

その後は Chrome や Firefox と同じように、短い周期でアップデートがでてきます。これは後述します。

情報源

利用者向けの一般的な情報としては、ダウンロードできる場所として先に挙げたこちらがあります。
https://www.microsoft.com/en-us/edge

もう少し積極的にブラウザの情報を知りたい人（開発者など）に向けた情報は、「Microsfoft Edge Insider」にあります。
https://www.microsoftedgeinsider.com/ja-jp/

さらに細かな情報は、Edge Insider の「コミュニティ」ページにあります。
https://www.microsoftedgeinsider.com/ja-jp/community

特に、Edge の開発者blog には新機能のことや今後のリリースについて情報が出ているようです。
https://blogs.windows.com/msedgedev/

1) https://blogs.windows.com/msedgedev/2020/01/15/upgrading-new-microsoft-edge-79-chromium/

2) https://blogs.windows.com/msedgedev/2019/04/08/microsoft-edge-preview-channel-details/

3) https://blogs.windows.com/msedgedev/2019/07/16/microsoft-edge-enterprise-evaluation-roadmap/

何が変わるのか

Chrome や Firefox と同じように、一定の間隔でアップデートが提供され、Windowsアップデートとは別にEdgeだけアップデートされていきます。更新間隔はだいたい６週間だそうです。また、アップデートチャンネルも安定版チャンネルに加えて、６週単位で次のバージョンが提供されるベータ、週単位のDEV、毎日のCAN（Cannary)チャンネルの４つがあります。1), 2)

今回、Choromium をベースにした実装になったことで、Webのレンダリングはもちろん、HTML5 への対応やエクステンション開発も Chrome に近づくと思います。FirefoxやChromeのリリースノートを見ていると、最近はcookieによるユーザ情報の追跡をブロックする機能やパスワード管理の強化をしたり、また HTML5 のAPI対応もどんどん進化している様子が伺えます。加えて、公開されたブラウザAPI によりエクステンションなどをコミュニティベースで開発しています。それに対してこれまでの Edge は IE11 よりモダンな感じにはなったものの、アップデート周期が長くとても落ち着いた印象でした。

新しい Edge ではエンタープライズ利用での配慮もあります。3) によると、エンタープライズ向けの環境では Edge の自動アップデートを制御できるようです。また、IE11 モードを実装する（した？）ようです。つまり、IE11 と Edge とで切り替えながら使うのではなく、ブラウザは Edge 一本にして動作モードを切り替えて使うようです。

ユーザエージェント

ユーザエージェントを一通りとってみました。Windows と MacOSでは Edg、AndroidではEdgA、iOSとiPadOS では EdgiOS の３つの名前＆バージョンがあるようです。

Windows 10
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 Edg/79.0.309.71

Android
Mozilla/5.0 (Linux; Android 8.0.0; SO-04H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.0 Mobile Safari/537.36 EdgA/44.11.4.4122

MacOS
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 Edg/79.0.309.71

iOS
Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 EdgiOS/44.11.15 Mobile/15E148 Safari/605.1.15

iPad OS
Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 EdgiOS/44.11.15 Mobile/15E148 Safari/605.1.15

WebClass の利用

新しい Edge になって動かなくなるようなところは見つけていません。問題ないと思います。

Firefox72

こんにちは。福岡です。

Firefox Desktop Browser 72 が先週１月７日にリリースされました。

Firefox のリリーススケジュールについて

Firefox release calendar
https://wiki.mozilla.org/Release_Management/Calendar

Firefox72

公式の情報として、一般利用者向けのリリースノートと、開発者向けのリリースノートとが公開されています。

Firefox 72 release note
https://www.mozilla.org/en-US/firefox/72.0/releasenotes/

Firefox 72 release note for developers
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/72

開発者向け情報は、Web製作者およびプラグイン等の開発者にむけた、APIや開発環境の変更について情報があります。

これらの情報から、単純に WebClass の動きへの影響に加えて、教材への影響も確認することができます。

Pickup for webclass

WebClassの利用する機能で特に変わるところはありません。

識別しやすいデザイン

今のWebClassの画面、人によってはボタンや注意書きを認識しづらいことがあるかもしれません。例えば色覚の認識が難しい人が見たらどんな感じでしょうか。「誰でも扱いやすいように」とは考えて作っていますが、このようなアクセシビリティに対して具体的な配慮まではできていませんでしたので、調べています。

総務省みんなの公共サイト運用ガイドライン

アクセシビリティを取り扱うにあたって、１つの参考資料となるのがこちらのページです。

http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html

こちらは日本の公共機関向けにWebサイトのバリアフリー化を目指すべくまとめられたサイトになっています。具体的なガイドラインとしては「JIS X 8341-3:2016」を参照していますが、その中身は WCAG 2.0 とほぼ同じです（後述）。

国や地方の公共団体等に向けて調査報告や講習会の案内などがありますが、私たちとして興味を持ったのはそれを飛び越して最後の方、「障害者のウェブページ利用方法の紹介ビデオ」です。

どんな人を想定して作るか、とても重要なことではありますが、視覚・色覚は自分の感覚にどうしてもイメージが引きずられてしまいます。OSについているアクセシビリティ支援ツールも使ったことはなかったので、実際に使われている様子をイメージするのに助けになりました。

Web Content Accessibility Guideline

先ほどの総務省のページにもリンクがありますが、「Webアクセシビリティ基盤委員会」(https://waic.jp )というWebサイトで「JIS X 8341-3:2016」の情報がまとめられています。10月17日にはセミナーも開催されていたようですね。

こちらには JIS X 8341-3:2016 に加えて、元になっている WCAG 2.0 の翻訳も掲載されています。

クイックリファレンス
- https://waic.jp/docs/WCAG20/quickref/
クイックリファレンスの各項目の解説
- https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html
実装と検証方法の事例集
- https://waic.jp/docs/WCAG-TECHS/Overview.html#abstract

クイックリファレンスを見ると、対応項目に加えて、それぞれレベル、詳細な解説などが対応づけられています。例えば「1.4.3 コントラスト (最低限) レベル AA」を見ると、「テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。」と、具体的な基準値も示されています。

具体的な観点と基準があることは、実装して検査する上で重要と思います。

カラーユニバーサルデザイン

色に関しては、NPO 法人カラーユニバーサルデザイン機構（https://www2.cudo.jp/wp/ ）で「カラーユニバーサルデザイン推奨配色セット」というのが公開されています（http://www2.cudo.jp/wp/?page_id=1565）

これは、色のみ分けにくい人であってもある程度見分けやすい色の組み合わせをまとめたカラーパレットです。カラーパレットは塗装用、印刷用、画面用の３パターンに対応していて、利用のためのガイドブックもPDFで公開されています。

ガイドブックのFAQによると、色の識別が難しい人と一口にいっても、それぞれ見分けにくい色、もしくは同じ色に見えてしまう色はそれぞれ異なるそうです。したがって、このカラーパレットは完全なパターンというわけではなく、できるだけ多くの人にとって比較的見分けやすい色なのだそうです。

このカラーパレットを使うかどうかはともかく、カラーパレットの作成経緯を少しでも知れたのは、私たちの今後の検査でも参考になるかと思いました。

チェックツール

先ほどれにあげた、WCAG 2.0 の「テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。」という項目を満たしたか確認するには、どうしたらいいのでしょうか。コントラスト比については、こちらの Web ページで WCAG 2.0 の基準も踏まえて色の選び方が適切か確認できるようです。

https://lab.syncer.jp/Tool/Color-Contrast-Checker/

また、総務省のページにリンクがありますが、総務省は「みんなのアクセシビリティ評価ツール：miChecker」というのを提供しているようです。

http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

Firefox にも、開発者ツールにアクセシビリティチェックツールが搭載されています。開発者ツールを開き、「Accessibility」のタブを開いて有効にすると動きます。Datapacific のホームページで試しにコントラストチェックをしてみましたが、NGが出ていました。

Firefox accessibility check