ブログにPDFスライドを追加した話

κeenです。最近気が向いたときにInkscapeでスライドを作るようにしてるんですが、できあがったPDFの置き場に困ってたのでPDFをインラインで表示できるようにしたお話です。

発想は私が自力で思い付いたものではなく、画力・博士号・油田氏のブログに導入されていたものです。

スライドのPDFをWebページ内で左右に送って読めるようにしたのえらくない？（えらい！）https://t.co/hNCttRujqg

— 画力・博士号・油田 (@bd_gfngfn) May 11, 2022

それを真似して私もやってみることにしました。今のところ以下のスライドがPDFで作られています。

DropとFutureとDropのfuture | κeenのHappy Hacκing Blog

ボタンとキーボードでページ送りができますし、最悪PDFをダウンロードすることもできるので、読むだけならそこまで困らないでしょう。一応ページ数指定なんかもあります。 発表のときは手元でPDFビュワーを使えばいいので主に聴衆への資料公開のためにPDFへの直リンクを置くだけよりはマシな方法として割り切って実装しました。ブラウザ互換性とかは知りません。

使ったのはMozillaの開発しているPDF.jsです。exampleからコードスニペットをもってきて、keydown イベントでページ送りするように実装しました

https://mozilla.github.io/pdf.js/examples/

実装はこのあたりとこのあたりで、ベタッとそのままJSを書いてます。 まあ、他にコードを入れることもないですし破綻はしないでしょう。

スマホ対応は全然やってないのでスマホからだと操作しづらいと思います。 reveal.jsのコードを読んで実装イメージは浮かんでるのですが、デバッグが大変そうなので腰が上がらず…。

ということで今後はマークダウンから生成した箇条書きスライド以外も作っていけたらなと思います。