Safari13 on iPadOS

こんにちは。福岡です。

9月20日に Safari13 のリリースノートをチェックした結果をこちらに書きました。

https://webclass.jp/blog/2019/09/20/safari13/

Safari と iOS のアップデートが同時にありましたが、その後、9月25日ころに改めて iOS 13.1 +iPadOS 13.1 がリリースされたときにApple のiOS/iPadOS リリースノートページが修正されていました。

Safari13 自体には大きな追加修正は入っていないようですが、iPad がどうなったのかレビューします。

iPad OS 13.1

iOS 13.1 + iPad OS 13.1 Release Note

日本語のリリースノート

アップデートできる機種

iPadOS になって、画面のでかいiOSだったのが、画面を活かしてより高度な使い方ができるように進化していくのだと思います。

iPadOS 上の Safari は Mac のSafari 同様に表示するようになります。

Safari on iPadOS

iPad で WebClass を開くと、画面サイズがそれなりにあるので WebClass のデスクトップ用の表示になります。これは以前からです。

アップデートされて教材一覧などは特に使用感に変化はありませんが、Safari13 on iPadOS になってフレームの表示に変更があります。WebClass ではテストや資料の教材を実行した時の表示に変化があります。

Safari on iOS 12.4

もともと Safari on iOS では、フレームの中身はスクロールで隠さないで、全部展開して表示していました。その結果、ページ全体が完全にフラットな1枚のイメージとして表示されていました。

テストの画面を表示してみると、問題表示の部分が全展開されています。

Safari on iPad OS 13.1

Safari on iPadOSではフレームもMacと同じように表示しますので、フレーム単位でスクロールが入ります。

フレーム箇所を一本指で動かすと、そのフレームのスクロールができます。

全体的に

今回のアップデートで Safari on iPadOS は基本的には Safari on Mac に近い感じで利用できるようになっています。

WebClass に関しては、特に利用に問題が出るような変更はなさそうです。

Safari13

こんにちは。福岡です。

macOS と iOS&iPad で Safari13 がリリースされました。iOS & iPadOS については、ver. 13がリリースされていて、それに Safari13が組み込まれています。

Safari のリリースサイクル

決まったサイクルがあるのかどうかわかりません。

iOS & iPadOS のSafariについては、ブラウザ単体でアップデートは提供されていませんので、OS のアップデートに含まれて新しいバージョンが提供されます。

何れにせよ、次のリリースバージョンは先行してベータ版が提供されているようです。

これら、一通りのリリース情報は developper.apple.com のdocumentationで確認できます。

https://developer.apple.com/documentation

このページの下の方に、OSおよびソフトウェアレベルのリリースノートのリンクがあります。

Safari13

リリースノートは以下になります。

Safari13 リリースノート
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

iOS & iPadOS 13 リリースノート
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes

いずれも、機能レベルから開発者向けの SDK/API レベルの変更、またiOSについては既知の問題まで書いてあります。

色々ありますが、iPad では macOS 用のSafariと同じ表示モードが実装された都合で、横スクロールが発生するようなページのデフォルト表示や iframe の動きに変更があったのに注意がいるかもしれません。

Pickup for webclass

Safari13の、WebClassの利用に影響しそうなところのピックアップです。

追加

  • iPad では、mac OS Safari と同じ表示をする機能が追加されました。

セキュリティ

  • iframeによるページナビゲーション処理の扱いが変わりました。

表示

  • iPad では、横方向スクロールが発生するようなページのデフォルトのレスポンシブメタタグ解釈が変わりました。

削除された機能

  • iPad では -webkit-overflow-scrolling: touch のCSS指定が無効化
  • iOS 全般で、iframe を展開表示する機能がなくなり、デスクトップブラウザと同等の表示のされ方になります。

「セキュリティ > iframe」 の変更点ですが、リリースノートにはサラっと次のように書いてあります。

Changed the behavior for third party iframes to prevent them automatically navigating the page.

具体的にどこがどうなるのか、調査中です。

Chrome77

こんにちは。福岡です。

Chrome for Desktop 77 が9月10日にリリースされましたので、その変更内容とWebClassへの影響についてピックアップして説明します。

2019/10/23 テスト・資料ページの印刷の問題について、ページ最後に追記しました。

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

ブラウザの Chrome も Firefoxと同様に、だいたい1ヶ月半くらいのサイクルでバージョンが上がります。安定板とベータ版が常に並行して動いていて、次のリリースがいつ頃来るかはこちらで確認できます。

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

Chrome77

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

https://chromereleases.googleblog.com/

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

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

基本的には主な内容がまとまっていて、ページの下の方に全変更一覧のリンクがあります。

Chrome77に関する開発者向け情報は以下です。

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

Pickup for webclass

WebClass の操作に影響のありそうな変更は特に見当たりません。

メモ

Chromeのリリースノート等を詳細にチェックしたのは初めてだったのですが、拡張された点として以下のを見つけました。

Partition the HTTP Cache

https://www.chromestatus.com/feature/5730772021411840

セキュリティ対策のようです。リンク切れですが脅威モデルの資料と、修正に関するドキュメント(このリンクは生きています)が添えられています。

'formdata' event

https://www.chromestatus.com/feature/5662230242656256

'formdata' eventについては、上記ページに以下のドキュメントがリンクされています。
https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit

タイトルは API Proposal となっていて、どういう検討をしてこのAPIが仕上がっているか書いてあります。

Enter Key Hint

https://www.chromestatus.com/feature/5654529808793600

タグに付与する属性の拡張のようです。デモのページや使用のページが添えられています。

仕様は以下にあります。
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

HTML5と一言に行っても、いろんな仕様があって、上記URLのページ等でまとめられているようです。

Overscroll Behavior logical longhands

https://www.chromestatus.com/feature/5729982653399040

こちらはCSSの以下のDRAFT仕様の実装のようです。
https://drafts.csswg.org/css-overscroll-1/#overscroll-behavior-longhands-logical

これらを見渡してみて

Chromeはこれまて積極的に仕様の拡張・切り替えをしてきた印象ですが、こうしてみると変更の1つ1つは根拠資料などまとめられていて、それらがこうしてひとつひとつ公開されているのは、すごいなと思いました。

速いからといって適当なわけではない、その実現のためにはいろんな道具やルール、そして人の技術があるんだと思います。

もちろん他のオープンソースプロジェクトでも、バグトラッキングシステムが動いていたり、変更は申請・許可制を敷いていたりと、開発プロセスが整えられ公開されています。いろんな人が関わるからこそ、標準化と公開が重要なのだと思います。

WebClassでも開発の管理はオープンソースの世界で用いられているものを参考にさせてもらっています。規模の問題もあるので最後は私たちにあったものに調整して取り入れています。実際、Chromeのこうした情報についても、ついていける人がどれだけいるんだろうという疑問もあります。私たちも、どうやって利用者を含めた関係者と協力関係をつくって進めていくか、まだまだ勉強することがあるなと思いました。

フレームページの印刷について

WebClass のテストや資料をPC用の画面で開くと、問題・ページ一覧と、設問・ページとをフレームで区切って表示する画面になります。

このページをブラウザの印刷機能で印刷しようとすると、以前はフレームで区切られた様子が印刷できたのですが、最近の Chrome では真っ白で印刷される問題が起きています。

おそらく、Chrome で管理している Issue で対応するものはこちらと思います。

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

2019/10/22 に Chrome78がリリースされましたが、状況は変わっていないようです。

Firefox69

こんにちは。福岡です。

Firefox Desktop Browser 69 (以下 Firefox69)が9月3日にリリースされていますので、その変更内容とWebClassへの影響についてピックアップして説明します。

2019/9/17 追記しました。

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

公式情報として以下のようなものがあります

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

Firefox ESR のリリース周期は、以下に日本語で説明があります。
https://www.mozilla.jp/business/

Firefox 68 のリリースより、Firefox ESR も68ベースに切り替わっています。

Firefox69

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

Firefox 69 release note
https://www.mozilla.org/en-US/firefox/69.0/releasenotes/

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

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

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

Pickup for webclass

WebClassおよび教材に関して、サービスおよび教材の提供側として注意しておいた方が良さそうなポイントをピックアップしました。

  • Enhanced Tracking Protection 機能がデフォルトで有効になります。
    • https://blog.mozilla.org/blog/2019/09/03/todays-firefox-blocks-third-party-tracking-cookies-and-cryptomining-by-default/
    • このサイトでもGoogle Analytics によるアクセスの調査を行なっています。このように、Webサイトの意図で外部サイトクッキーを使った追跡があるとき、ユーザの意思で追跡をブロックすることができます。
    • WebClass は自サイトのクッキーで動作しており、外部の利用者追跡は組み込まれていません。ただし、教材や連携するシステムが外部リソースを利用するとき、ユーザの意図でブロックされると思ったように動かないことがあるかもしれません。
  • Block Autoplay 機能が拡張されました。
    • https://support.mozilla.org/en-US/kb/block-autoplay
    • 動画等の音声を含んだ全てのメディアについて、デフォルトでは自動再生がブロックされます。設定変更することで自動再生できるようになります。
    • 教材などで動画を使用している場合に、利用者の利用環境の想定が変わる可能性があります。
  • Flash コンテンツは、毎回必ずFlash有効化の確認をするようになります。
  • 対象の要素でユーザーがテキストを選択できるかを指定する CSS の user-select プロパティの接頭辞を Firefox 69 で外しました

Block Autoplay について(2019/9/17追記)

Firefox69になって、ユーザがページを開いたときに予期せず音が再生されてしまうのを防ぐようになりました。

具体的には、<video>タグと<audio>タグに autoplay 属性が設定されていても、自動再生されなくなります。例外として、muted 属性が付与されて音が出なくなっている場合と、一度ページを開いて自分で再生した後でリロード等により開き直したときは、自動再生されます。

WebClass では資料教材のページとテスト教材の設問・解説に動画または音声を取り込んでいる場合、上記の通りautoplay 属性をつけて自動再生させています。Firefox69以降では、これらページで自動再生されなくなり、ユーザが再生ボタンを押す必要があります。