QR コードの実験

QR コードの実験

Marp で作成したスライドで QR コードを表示する。

QR コードの実験

背景

スライド内のリンク(URL) を共有する場合について。

PDF を開いた場合

  • リンクをクリックすればよい

印刷物、プロジェクター

  • 紙 / 画面を通して URL 等を共有したい

QR コードも併記したくなる。

QR コードの実験

構成案(理想)

とりあえず mardock(このサイトをビルドしているウェブアプリ)で作成する場合について考える。

  • qrcode パッケージは利用が容易
  • Marp を実行する前に unified で Markdown を処理している

「画像のアドレスが qrcode: で始まっていたら DataURL へ変換」するようなmarkdown-it か unified のプラグイン作成で対応可能なはず。

QR コードの実験

問題点(現実)

予想に反して以下の問題があった。

  • qrcode パッケージは主に async(promise) ベース
  • markdown-it、unified(mdast) は sync ベース

⇒ 独自に async(promise) 対応が必要。

QR コードの実験

実装

今回は以下のように実装した。

  1. mdast-util-from-markdown でパース
  2. Image Node の url 属性が qrcode: 始まっていたら変換
  3. mdast-util-to-markdown で markdown として出力
export async function qrcodeToDataUrl(markdown: string): Promise<string> {
  const tree = fromMarkdown(markdown);
  await transformer(tree);
  return toMarkdown(tree, { rule: '-' });
}

QR コードの実験

実行サンプル

ソース

![qrcode to web page](qrcode:https://hankei6km.github.io/mardock)
https://hankei6km.github.io/mardock

結果

qrcode to web page
https://hankei6km.github.io/mardock

QR コードの実験

課題

  • 効率が悪い

    • QR コード処理のためだけにパースと文字列化を行っている

  • markdown の内容が変化する

    • リストなどが一括で * へ変更される

    • marp では記号に意味が付与されている

      • オプションで変更できるが* - 混在については要調査

  • その他

    • スライド一覧などで縮小表示させるとリーダーで読み取れないときがある

QR コードの実験

付録

svg として書き出す場合、(qrcode モジュールの内部関数を直接実行することになるが)同期実行が可能になりプラグインとして実装可能となる。marp の Image syntax も利用できるので QR コード拡大縮小の問題も大幅に改善される。

ただし、セキュリティーの問題などもあるので今回は試作にとどめてある。また、marp の背景画像とした場合は、試作プラグインでは動作しない(md.*.ruler.after 等でルールを挿入する必要があるもよう)。

mardock src/markdown-it-qrcode.ts