識別しやすいデザイン

by

2019年12月12日

2:35 PM

識別しやすいデザイン はコメントを受け付けていません

開発

今の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 の翻訳も掲載されています。

クイックリファレンスを見ると、対応項目に加えて、それぞれレベル、詳細な解説などが対応づけられています。例えば「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

さらには、視力や色覚が弱い人の視界を再現させてみることができるブラウザエクステンションも Chrome にあります。

https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd

今後

いきなり WCAG2.0完全対応！とはいかないので、まずは最初に対応させる項目をピックアップした後、チェック＝＞対応の具体的なノウハウを確立して開発サイクルに組み込みたいと思います。

Chrome79

by

2019年12月11日

11:15 AM

Chrome79 はコメントを受け付けていません

ブラウザリリース

こんにちは。福岡です。

Chrome for Desktop 79 が１２月１０日にリリースされました。

今回のリリースで、フレームで区切られている資料やテストのページを印刷できなかった問題が修正されています。

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

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

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

Chrome79

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

https://chromereleases.googleblog.com/

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

https://chromereleases.googleblog.com/2019/12/stable-channel-update-for-desktop.html

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

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

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

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

https://developers.google.com/web/updates/2019/10/nic78

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

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

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

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

上記の chromestatus.com にある情報と重なりますが、今回削除もしくは非推奨となった機能の情報はこちらです。

https://developers.google.com/web/updates/2019/10/chrome-79-deps-rems

開発者向けの内容ではありますが、開発者ツールが更新されています。

https://developers.google.com/web/updates/2019/10/devtools

Pickup for webclass

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

以前あった、フレームで構成された資料ページやテストのページを印刷しても真っ白になる問題は、Chrome 78 にマージされました。

https://bugs.chromium.org/p/chromium/issues/detail?id=1016291&q=print&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Others

開発者ツールの「ネットワーク」タブの表示に改良が加わったようです。

クッキーがなぜブロックされたのか、またネットワークリソースがなぜリクエストされたのかが確認できるようになりました。試してみようと思います。

Firefox71

by

2019年12月4日

9:31 AM

Firefox71 はコメントを受け付けていません

ブラウザリリース

こんにちは。福岡です。

Firefox Desktop Browser 71 が１2月３日にリリースされました。

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

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

Firefox71

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

Firefox 71 release note
https://www.mozilla.org/en-US/firefox/71.0/releasenotes/

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

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

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

Pickup for webclass

全バージョンで実装された Lockwise などで変更がありますが、WebClassの利用する機能で特に変わるところはありません。

MP3の再生は、これまではOSの機能を利用して再生していたのが、Firefox自身のデコーダで再生する方式に変わったそうです。Mac や Windows で利用するのにそう大きな変化はないと思います。

others

Firefoxのサポートページに、動画や音声が再生されない時の確認ポイントをまとめたページがあります。

https://support.mozilla.org/ja/kb/fix-common-audio-and-video-issues

上記ページからリンクがありますが、Firefoxでの動画音声の再生についてまとめたサポートページはこちらです。

https://support.mozilla.org/ja/kb/html5-audio-and-video-firefox

WebClass の教材作成方法の解説動画

by

2019年11月19日

9:25 PM

WebClass の教材作成方法の解説動画 はコメントを受け付けていません

機能

こんにちは。福岡です。

WebClass の教材作成方法を４分半程度で解説した動画をいくつか社内で用意しましたので、紹介します。

Youtube チャンネル

日本データパシフィック では、Youtube のチャンネルを用意しています。

https://www.youtube.com/channel/UCf6TtNiaM5IBPa7_elFiTcA

まだ開始して間もないのでコンテンツは少ないのですが、WebClassの教材の作り方を簡単に解説する動画が４つと、U-Assist 教材シリーズのうち、「これならわかる！基礎統計学」の紹介動画が１つ用意してあります。

先生のための WebClass 入門

WebClass の使い方は「先生のための WebClass 入門」プレイリストに纏まっています。

https://www.youtube.com/playlist?list=PLxEC7M6jhmR8lrkwvr2dZgwQ72yfg570H

シンプルな教材を作成するための一通りの手順をそれぞれ４分半程度で紹介しています。どんな感じか気にはなるけどまだ試していなかった先生方など、最初のとっかかりとしてご利用いただければと思います。

WebClass のマニュアルの今後

利用方法をなんとか先生方に手軽な方法で知っていただきたいと、大学の情報センター等の方々などマニュアルに対してもこれまでいろんな要望をいただいてきました。WebClass では先生向けと学生向けにマニュアルを用意しており、一通りの使い方が書いてあります。ですが、なかなか目を通す時間をとっていただけないことも多いかと思います。

短時間で特定のトピックを絞って確認できるのが扱いやすいと思いますが、最近は様々なツールで動画の解説が用意されることも多く、WebClassでもチャレンジしています。動画とは別に、WebClassサポートページにあるFAQページや、こちらに掲載している管理者向けの資料も同様です。でかい１つのPDFをめくって探すのではなく、Web検索からピンポイントの記事にたどり着くことを想定したページを用意してみています。

どうしたら初めて触る先生方にもサクッと使っていただけるか、引き続き改善していきたいと思います。

Firefox70

by

2019年10月25日

3:38 PM

Firefox70 はコメントを受け付けていません

ブラウザリリース

こんにちは。福岡です。

Firefox Desktop Browser 70 が１０月２２日にリリースされました。

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

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

Firefox70

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

Firefox 70 release note
https://www.mozilla.org/en-US/firefox/70.0/releasenotes/

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

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

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

Pickup for webclass

Javascript で DOM のpopstate を操作する back(), forward(), go() メソッドが非同期関数になったようです。学習記録ビューアの関連機能で、もしかしたら影響があるかもしれません。調査します。

2019/10/29
学習記録ビューアの動きを確認しましたが、影響はありません。

others

Firefox Lockwise という機能が追加されたようです。

https://support.mozilla.org/en-US/kb/firefox-lockwise-alerts-breached-websites

簡単にいうと、漏洩しているパスワードを使ってログインしようとしているのをFirefoxが確認したら、アラートを出して知らせるというものです。

なぜFirefoxは漏洩済みパスワードを確認できるかというと、攻撃する人たちだけでなく、ホワイトハッカーによっても漏洩済み情報は追跡されていて、そのデータベースに基づいてメールアドレスやパスワードの漏洩を照合できるようになっているからです。このサービスは「Have I Been Pwned」というサイトで提供されています。

https://haveibeenpwned.com

Mozilla はこのサービスが提供する情報を元に Firefox Monitor というサービスを提供しています。こちらは日本語にも対応しています。

https://monitor.firefox.com

たとえ自分でランダム強度の高いパスワードを利用していたとしても、サービス側でデータ漏洩が起きてしまうと、メールアドレスとパスワードのセットが流出してしまうことがあり得ます。実際に世界中のサービスでデータブリーチが毎月何件も起きている状況は、このサイトのデータブリーチページで確認できます。

https://monitor.firefox.com/breaches

単に漏洩が起きたサービスでアカウント乗っ取りが起きるかもしれないだけでなく、こうして流出したデータは攻撃者のコミュニティで共有され、それが攻撃用データベースとなって他のサイトでのアカウント乗っ取りなどに使われるかもしれません。

実際に、こうした流出情報に基づいてメールアドレスを7億件以上を取りまとめた「Collection #1」と呼ばれるデータセットについての報告が１月にありました。

https://www.troyhunt.com/the-773-million-record-collection-1-data-reach/
https://blog.kaspersky.co.jp/collection-numba-one/22263/

パスワードの運用ポリシーについていくつか推奨されているものがあると思いますが、うまくツールを使って管理しないと間に合わないところもあると思います。ブラウザ側のセキュリティ対策ツールの進化もうまく活かしていきたいところです。