1 QR コードの実験 QR コードの実験 Marp で作成したスライドで QR コードを表示する。 2 QR コードの実験 背景 スライド内のリンク(URL) を共有する場合について。 PDF を開いた場合 リンクをクリックすればよい 印刷物、プロジェクター 紙 / 画面を通して URL 等を共有したい QR コードも併記したくなる。 3 QR コードの実験 構成案(理想) とりあえず mardock(このサイトをビルドしているウェブアプリ)で作成する場合について考える。 qrcode パッケージは利用が容易 Marp を実行する前に unified で Markdown を処理している 「画像のアドレスが qrcode: で始まっていたら DataURL へ変換」するようなmarkdown-it か unified のプラグイン作成で対応可能なはず。 4 QR コードの実験 問題点(現実) 予想に反して以下の問題があった。 qrcode パッケージは主に async(promise) ベース markdown-it、unified(mdast) は sync ベース ⇒ 独自に async(promise) 対応が必要。 5 QR コードの実験 実装 今回は以下のように実装した。 mdast-util-from-markdown でパース Image Node の url 属性が qrcode: 始まっていたら変換 mdast-util-to-markdown で markdown として出力 export async function qrcodeToDataUrl(markdown: string): Promise<string> { const tree = fromMarkdown(markdown); await transformer(tree); return toMarkdown(tree, { rule: '-' }); } 6 QR コードの実験 実行サンプル ソース  https://hankei6km.github.io/mardock 結果 https://hankei6km.github.io/mardock 7 QR コードの実験 課題 効率が悪い QR コード処理のためだけにパースと文字列化を行っている markdown の内容が変化する リストなどが一括で * へ変更される marp では記号に意味が付与されている オプションで変更できるが* - 混在については要調査 その他 スライド一覧などで縮小表示させるとリーダーで読み取れないときがある 8 QR コードの実験 付録 svg として書き出す場合、(qrcode モジュールの内部関数を直接実行することになるが)同期実行が可能になりプラグインとして実装可能となる。marp の Image syntax も利用できるので QR コード拡大縮小の問題も大幅に改善される。 ただし、セキュリティーの問題などもあるので今回は試作にとどめてある。また、marp の背景画像とした場合は、試作プラグインでは動作しない(md.*.ruler.after 等でルールを挿入する必要があるもよう)。 mardock src/markdown-it-qrcode.ts
