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

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

iOS & iPad OS 15

Mac では Safari 15 がリリースされていますが、iPhone と iPad ではそれぞれ iOS 15 と iPadOS 15 も同時にリリースされています。

Safari 15 での WebClass 動作状況は先日に以下で紹介しました。

https://webclass.jp/blog/2021/09/29/safari-15/

ここでは iOS と iPad OS 15 にフォーカスします。

Release notes

ユーザ向けリリースノートは以下です

開発者向けの情報は以下です

ピックアップ

WebClass はWebのシステムなため、OSの機能をフルには使いません。ですが、現実的には iCloud の機能はレポートなどファイルの準備とアップロードに関係しますし、Notes や Apple Pencil あたりはメモをとったりする使い方に影響があります。

いくつか気になる変更をピックアップしました。

集中モード

集中モードというのが追加されています。睡眠中や仕事中などのいくつかのモードを定義でき、それぞれのモードではどのアプリからの通知だけ許可するか、誰からの通知だけ許可するか、など設定できます。

Wifi とかの設定の画面にFocusモードの枠が加わっています。


DoNotDisturb は私は解除し忘れたりするので時刻設定して自動でON/OFFしてもらえる機能は助かります。Sleep モードについては 寝る時間と起きる時間を設定していると反映してくれます。仕事などの日中の集中モードも、時刻と場所(位置情報)および使っているアプリで自動的に発動するようにできます。

大学生だと、授業中にサークルのLINEグループが盛り上がってて通知うるさい、みたいなのに対応できるんでしょうか。

ウィジェット(iPadOS)

私は Android も使っていて、ホームスクリーンのウィジェットもしばらく使っていました。ウィジェットの使い勝手はアプリと自分の使い方に依存するところが多く、最近はむしろ使わなくなりました。と思ったら、iPadOS に実装されたみたいです。

マルチタスクとクイックメモ(iPadOS)

iPad OSではマルチタスクのための操作体系が拡張されたようです。

ブラウザとノートを半々に開いて、調べたメモをノートにコピーしていくことができました。分割具合を調整したりするのはどうしても指だと不器用な感じが出ますが、全画面アプリ切り替えるよりはいいかなと思いました。

クイックメモは Chrome ではうまくいきませんでしたが、Safari でテキストを選択するとクイックノートのメニューが出てきました。メモ画面は画面を区切らず浮かせて表示できます。メモをとるのは標準アプリのNotes ですが、他のアプリに差し替えたりできないですかね。

まとめ

特に iPad は、個人的に注目しています。アルバイトの学生に話を聞いてみると、授業のノートを取るのに使っている学生もでてきているようです。話を聞いた子もそうでした。ノートを分けないので「あの科目のノート持ってくるの忘れた」も起きず、板書も記号や図、数式などそのまま書き着込めます。PDF の資料も取り込んで、その上から書き込みとかもできます。研究室配属されている子も、すでに論文を上でいちいち印刷することは無くなってきているようで、iPad 等で読みながらその上に線引いたりしているようです。

私も英語の勉強をするのに iPad + Apple Pencil を使うようになりました。ノートはワープロで取りにくいのは以前からわかっていましたが、ノートアプリにペンで手書きを実際にやってみると記入位置を入れ替えたりして途中に追加で書き込むスペースを作ったりもできて、便利です。文字は自動認識させずに、手書き文字のまま書いています。

引き続き、今の学生がどんなふうに勉強しているのか、できてしまうのか、ウォッチしていきたいと思います。