iOS 16 & Safari 16

iOS 16、Safari 16 が9月13日(日本時間)にリリースされました。

iOS 16 Release Notes

https://developer.apple.com/documentation/ios-ipados-release-notes/ios-16-release-notes

Safari 16 Release Notes

https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes

Safari 16から新たな認証機能として「Passkeys」が利用可能になります。

また、Safariでは未対応だったCSSプロパティのサポートや、フォームに関する不具合修正も多く含まれます。

パスキーの概要 - Apple Developer

https://developer.apple.com/jp/passkeys/

パスワードレス認証に対応したサーバに対して、指紋などの生体認証のみでログインが可能となります。まだ対応しているサービスは少ないですが、パスワードレス認証を加速させる要因となりそうです。

WebClassに関係のある変更

WebClass に影響のある変更はありませんでした。

最後に その他ブラウザのリリース情報はこちらにまとめています。

Safari 15.5, 15.6

Safari 15.5, safari 15.6 が更新されていました。

15.5, 15.6 ともにセキュリティ周りの修正や、CSS の不具合の修正が中心となっています。

WebClassに関係のある変更

WebCalss に影響のある変更はありませんでした。

今月中旬に ios 16 がリリースされるため、例年通りであれば同時期に safari 16 もリリースされると予想しています。リリースノートが更新され次第、確認する予定です。

最後に その他ブラウザのリリース情報はこちらにまとめています。

Chrome 105

Chrome 105 が 8 月 30 日にリリースされました。

Chrome 105 release note

以下のリンクに主な変更点の情報が記載されています。

https://developer.chrome.com/blog/new-in-chrome-105/

https://chromestatus.com/features#milestone%3D105

Pickup for WebClass

WebClass に影響ある変更はありませんでした。

気になる変更点

気になる変更点を挙げます。

CSS Container Query

CSS Container Query に対応しました。

https://developer.chrome.com/blog/has-with-cq-m105/

レスポンシブデザインを実現するために @media を使いますが、コンテナクエリーを使うことで親要素のサイズを参照することが出来ます。ただし、まだChromeとSafari Technology preview だけしか対応していないようです。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Sanitize API

Chrome 102 のリリースノートでも案内があったのですが、Sanitize API が Stable として取り込まれたようです。102で入ったと思ったのですが、まだ段階が1つ違っていたのでしょうか。

https://webclass.jp/blog/2022/05/27/chrome-102-release-note/

ブラウザ対応状況をMozillaのページでみると、Chrome は 105 からの対応となっていますが、Safari と Firefox は未対応のようです。

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API

そういえば、どんどんシェアを落としている Firefox 大丈夫ですかね。こういう資料のサイトも便利で頑張ってほしいですが。

今後の Chrome リリースについて

次回のリリースは 2022 年 9 月 27 日に予定されています。

https://developer.chrome.com/blog/deps-rems-106/

Chrome 106 では Cookie の domain attribute では non-ASCII 文字を受け付けなくなるようです。

その他ブラウザのリリースはこちらにまとめています。

Firefox 104

Firefox 104 が 8月23日にリリースされました。

Firefox 103 release note

以下のリンクに主な変更点の情報が記載されています。

Pickup for WebClass

WebClass に関係する変更はありませんでした。

今後の Firefox リリースについて

次回のリリースは 9月 20 日に予定されています。

Firefox Release Calendar

その他ブラウザのリリースはこちらにまとめています。

AsciiDoc と Antora でマニュアルサイトを構築しました

弊社 LMS WebClass には、学生の学習履歴を可視化する「学習記録ビューア」という機能があります。学習記録ビューアを使い始めるために必要な権限設定、プラグインによる機能拡張もあり、ユーザーの方に使っていただくためにはドキュメントの充実が必須です。学習記録ビューア専用のマニュアルサイトを以前から公開していたのですが、先日プチリニューアル(内部的にはなかなか大きな更新)しました。その際、サイト構築にドキュメントサイトジェネレータ Antora を使用することになりました。Antora 使用事例として興味を持つ人もいるかなと思い、構築プロセスを公開します。

今回リニューアルしたマニュアルサイトはこちらです。

Antora とは

  • Antora は、AsciiDoc からドキュメントサイトを生成するツール
  • デモサイト
  • Antora のドキュメントサイト 自体も Antora で生成されている
  • 複数のリポジトリにコミットされている AsciiDoc から一つのサイトを生成できる
  • Git ブランチやタグからドキュメントの「バージョン」を規定できる
    • 例えば “v1”, “v2” のようなタグまたはブランチを作り、バージョン毎にドキュメントを管理する
    • サイトにアクセスした人は見たいバージョンを切り替えることができるようになる

リニューアル前の状況

  • マニュアル本文は全て AsciiDoc で書いている
    • 1 ページ 1 adoc ファイル
  • サイトの外殻は Pug で書いていた。Pug を HTML に変換する際、AsciiDoc を Asciidoctor (Asciidoctor.js) で HTML に変換し埋め込んでいた
  • Asciidoctor PDF を使って、AsciiDoc を PDF に変換し、サイトからダウンロードできるようにしている
  • 社内でセルフホストしている GitLab でバージョン管理

課題

  • マニュアル本文は AsciiDoc を編集するので楽だが、ナビゲーションメニューを更新するために Pug を編集する必要があり、面倒くささは拭いきれなかった
    • ドキュメントの充実のためには更新のしやすさは必須
  • 検索機能がなかった
  • 目次がページのタイトル下に表示されるが、下にスクロールすると見えなくなるので、文の多いページだと全体が俯瞰しづらかった

リニューアル後

構成

  • マニュアルリポジトリには、複数ある製品のマニュアル AsciiDoc ファイルが全て登録されている
  • マニュアルサイトリポジトリには、antora-playbook.yml という設定ファイルが登録されている
    • antora-playbook.yml に AsciiDoc が登録されているリポジトリやバージョン情報を記述することで、Antora のコマンド一発でサイトが生成できるようになる
  • CI/CD
    1. マニュアルリポジトリで AsciiDoc ファイルを変更しコミットする
    2. GitLab CI の Multi-project pipelines によりマニュアルサイトリポジトリのパイプラインが起動
    3. マニュアルサイトリポジトリのパイプライン内でサイト生成ジョブ実行
    4. サイト生成完了後、Manual Job でデプロイ可能となる

リニューアル前の課題は解決したか

  • ナビゲーションメニュー等の高頻度で更新される部分は全て、 Antora の設定ファイル及び AsciiDoc を編集することで変更できるため、マニュアル更新が楽になった
  • 検索機能を簡単に付けることができた
    • 実装の詳細は後述
  • ページをスクロールしても常に目次が表示されるようになった

多言語化

こちらを参考に、バージョン切り替えの仕組みを使って言語切り替えを実現しました。

antora-playbook.yml:

content:
  sources:
  - url: https://git.lan.datapacific.co.jp/webclass/manual-integrated-portfolio.git
    start_paths:
      - integrated-portfolio/admin/ja
      - integrated-portfolio/admin/en

この方法だと、逆に通常のバージョン切り替えができなくなります。言語毎に別サイトを生成してもよかったかもしれません。

検索機能

  • Antora Lunr Extension を使っている
  • Antora コマンドによるサイト生成時に検索用インデックスも生成される
    • サイト表示後はオフライン検索できる

antora-playbook.yml:

antora:
  extensions:
    - require: '@antora/lunr-extension'
      languages: [ja]

まとめ

マニュアルサイトに必要な機能は全て揃い、マニュアル更新のハードルはかなり下がりました。これから一番大切なコンテンツ改善を進めていきます。