Chrome 95

Chrome 95 が 10 月 19 日にリリースされました。

Chrome 95 release note

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

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

Pickup for WebClass

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

気になる変更点

私が気になった変更点をあげます。

URLPattern の実装

URLPatternという WebAPI を用いることで JavaScript 内で URL のパースが簡単に出来るようになりました。

簡単な例を掲載します。

const p = new URLPattern("https://example.com/:id");
const id = p.exec("https://example.com/123456").pathname.groups.id;
console.log(id);
// 123456

この変更の詳細は googleが掲載しているブログ をご覧ください。

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

次回のリリースは 2021 年 11 月 16 日に予定されています。

Chrome Platform Status

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

PDFの証明書生成

先週に ディジタルバッジの規格や今のサービスを調べた記事 を書きました。

ディジタルバッジではなくとも、一定の条件を満たした人にその証明を発行する機会はあると思います。ここでは、PDFの証明書を生成する WebClass の機能を紹介します。

使い方

WebClass では一部の学校で、施設利用の研修を終えたときの修了証のような修了証発行する機能を使っていただいています。修了証は PDF ファイルで出力します。次の画像のように、フォーマットが決まっていて、日付や終了した人の名前などが埋め込まれます。ネットワークを使うためのセキュリティ講習など、主に事務的な用途で使っていただいています。

この証明書は、PDF出力設定をした資料教材を開いたときに生成されるようになっています。

証明書のデザインは以下のようにHTMLで記述し、置き換える文字のところにマークを仕込んでいます。ですので、HTML+CSS でやりくりできる範囲でデザインやタイトル文字などは自由に変えることができます。画像も使えます。

  <div class="cert_title">{CERT_TITLE}</div>

  <div class="given_to">
    <div class="given_to_layout">
      <div class="given_to_title">
        <div class="name">{USER_NAME}</div>
        <div class="userid">{USER_ID_LABEL}:{USER_ID}</div>
      </div>
      <div class="honor_title">{HONORIFIC_TITLE}</div>
    </div>
  </div>

  <div class="subject">
    <div class="text">{SUBJECT}</div>
        <table class="detail">
          <tr>
            <td>コース名</td>
            <td>{COURSE_NAME}</td>
          </tr>
          <tr>
            <td>教材名</td>
            <td>{CONTENTS_NAME}</td>
          </tr>
        </table>
  </div>

  <div class="signature">
    <div class="date">{FIRST_EXEC_DATE.JPYMD}</div>
    <div class="given_by">{GIVEN_BY}</div>
  </div>

この証明書の発行条件は、ユニット教材の「順番に進める」設定と、テスト教材の合格点設定を組み合わせています。このユニット教材に合格点設定付きのテストの後で証明書発行の資料教材を並べると、テストに合格したときに証明書発行の資料にたどり着けるというものです。

PDFの生成

内部では、HTML+CSS のWebページソースを生成して、ヘッドレスブラウザに読み込ませてPDFに変換させています。

ヘッドレスブラウザとは、画面表示なしで動くブラウザです。コマンドラインツールから操作でき、その最中にはブラウザがどんな表示をしようとしているか表示することはできませんが、あたかも普通のブラウザで操作したかのように振る舞ってくれます。JS の処理なども対応しており、そうして表示シミュレーションした結果をスクリーンショットして保存したり、PDF に印刷させたりできます。

以前は wkhtmltopdf, PhantomJS などの専用ヘッドレスブラウザを使うことも多かったですが、いまでは Firefox も Chrome もヘッドレスモードをサポートしています。Chrome などをヘッドレスモードで使うことが増えており、wkhtmltopdf などは開発が下火になっているようです。wkhtmltopdf の歴史と現在の状況

Chrome のヘッドレスモードでの使い方はこちらに解説があります。

Linux サーバ上でヘッドレスブラウザを使ってPDFをレンダリングするため、フォントについてはサーバ上にインストールされているフォントに成約されます。

PDF 以外の証明書、認定の仕方

WebClass のユニットとテストの合格点の機能を使って、テストをPassしたら何か証明書を作るという処理を実現しています。その仕組はそのまま使って、証明書のデザインを調整できるようにしているのが PDF 証明書の発行機能です。

PDF ではなく、ディジタルバッジを発行する処理に置き換えることもできます。ですがディジタルバッジでは以下の課題があります。

  • 今実現していた実装は、OpenBadge のバージョンが古い
  • コース内で柔軟にバッジ発行するには、条件の設定の仕方が限られる

WebClass はできる限りテストの結果や掲示板の書き込みなども CSV でダウンロードして、先生が手元で自由に処理できるようにしています。そうして授業の内容や目的に応じて学生の活動をできる限り多角的に評価できるようにと考えていますが、集計も、結果を学生にどうフィードバックするか手作業になります。

このあたりをうまく仕組み化できたら面白いかもしれないと考えています。

デジタルバッジのサービスの様子

Open Badges の今の様子の調査まとめになります。

Open Badges については WikiPedia にページがありますが、英語/日本語でほぼ同じようです。翻訳になっている感じでしょうか。

規格について

本家はこちらです

Open Badges に関して IMS での動きや仕様書はこちらにまとまっています。

Open Badges の規格は 2.0 までリリースされており、2.1 が Candidate Final のステータスで評価検証されているようです。OpenBadge v2.1 ではOAuth について記載があり、やり取りのセキュリティについても整備されていくのだと思います。

Open Badges に対応している製品は以下で検索できます。

https://site.imsglobal.org/certifications?refinementList%5Bstandards_lvlx%5D%5B0%5D=Open%20Badges

サービス:Badgr

もともと Mozilla が Backupack でデジタルバッジ管理サービスを運営していました。これが本家だったのですが、Mozilla は辞めてしまい、Badgr が引き継いでいます。と言っても、アカウント情報などが引き継がれたわけではなく、新しいサービスとして稼働しています。

4つのリージョンでサーバが異なっています。どこか選んでアカウントを作る、もしくはそれぞれにアカウントを作ることができます。

ログインすると、ここで自分の獲得したバッジを集めて管理することができます。なお、アカウントのメニューには言語の切り替えがなかったので、英語だけかもしれません。

アカウントは無料で登録できますが、Badgr をホストする方法も紹介されています。サーバのプログラムが GitHub で公開されているようです。

Blockcerts (ブロックチェーン証明書) を使ったサービス

もともとの Open Badges は、基本的なバッジのデータ構造と受け渡しのプロトコルが主です。発行元(Issuer)から比較的気軽に発行ができます。バッジを集めるホストでは、Issuer の確認などをしますが、仕組みとしてそこまでかっちりと改ざんチェックをするものではありません。なので、学習のなかの細かな達成事項をどんどんバッジにしてあげて、学習が進んでいく感じを学習者に感じてもらうのには良いのですが、例えば大学や国家資格の修了証書には心もとないです。

改ざんが難しく信頼性の高い証明に使う技術として Blockchain が注目されており、それを使った証明書の技術が Blockcerts です。

日本の企業で NetLearning 社もブロックチェーン型オープンバッジの仕組みを実現しているようです。「オープンバッジとは」のセクションの *2 に Blockcerts を利用していると書かれています。

https://www.netlearning.co.jp/openbadge/index.html

デジタル・ナレッジ社でも、オープンバッジのソリューションとして OpenBadgeとBlockcerts が用意されているようです。

Open Badge 準拠なわけではないかもしれませんが、同じく Blockcerts を使ったブロックチェーン証明書発行システムのサービスが日本にもあるようで、それを運営している会社のブログ記事に解説がありました。

日本語の Wikipedia ページにもリンクがあった一般財団法人 オープンバッジ・ネットワークでも、「オープンバッジとは」のところを見るとブロックチェーン技術を取り入れているとあり、Blockcertsとは書いていませんがおそらく同様のことをしているのではないかと思います。

日本の大学でのオープンバッジ利用

中央大学でオープンバッジの実装実験を行っているそうです。

https://www.chuo-u.ac.jp/aboutus/communication/press/2021/08/55724/

具体的なことはわからないのですが、特定の科目で修了証を発行するそうです。

WebClass での状況

OpenBadge v2.1 は Final Candidate の段階ですが、OAuth について記載がありました。やり取りのセキュリティについても整備されていくのだと思います。それはそれとして、証明書自体が本当に信頼できるものかどうかより確かにするための Blockcerts もあることが分かりました。

WebClass ではこれまでに OpenBadge の初期のAPIを使ってコースや教材のバッジ発行を試していました。コースの中で達成したことを、先生が用意する教材に応じてバッジが発行できるのも面白そうです。

Firefox 93

Firefox 93 が 10 月 5 日にリリースされました。

Firefox 93 release note

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

Firefox Release Notes

Firefox 93 for developers

Pickup for WebClass

Firefox now blocks downloads that rely on insecure connections, protecting against potentially malicious or unsafe downloads.

以前より、Firefox は潜在的に不審なダウンロードをブロックしています。
今回のアップデートにより、ダウンロードブロック機能が強化されました。

今回、HTTPS で接続されたサイト内で HTTP 経由でのダウンロードが行われたときにダウンロードを拒否する機能が追加されました。

以下のリンクが詳しいです。

https://blog.mozilla.org/security/2021/10/05/firefox-93-protects-against-insecure-downloads/

手元の WebClass 開発用サーバで調査しましたが、問題はありませんでした。

気になる変更点

Firefox now supports the new AVIF image format

新たな画像フォーマットである AVIF が Firefox で使用できるようになった変更です。

AVIF はオープンソースでロイヤリティーフリーのコーデックを採用している画像フォーマットで、webP よりも圧縮効率に優れているとされています。

現在 AVIF は Chrome, Firefox, Opera で使用出来ますが、Edge, Safari での対応が進めば、AVIF は採用されるようになるのでしょうか。

MozillaによるAVIFの説明

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

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

Firefox Release Calendar

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

Chrome 94

Chrome 94 が 9 月 21 日にリリースされました。

Chrome 94 release note

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

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

Pickup for WebClass

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

気になる変更点

私が気になった変更点をあげます。

Idle Detection API の追加

Idle Detection APIの追加により、ユーザやブラウザ画面がアイドル状態になったことをトリガーにしてイベントが実行出来るようになりました。

web.dev の解説記事中ではチャットアプリケーションにおける、ユーザのアクティブ状態の判定が使用例として取り上げられています。
その他の使用例やデモなどは以下の解説記事へのリンクからどうぞ。

web.dev の解説記事

Chrome リリースノート該当ページ

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

次回のリリースは 2021 年 10 月 19 日に予定されています。

Chrome Platform Status

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