tadsan's slide deckとは何か

作ったわけですよ。

tadsan's slide deckzonuexe.github.iotadsan's slide deck

このあたりの話はPHP勉強会でも話しました。

スライドをシェアできるサービスを作るzonuexe.github.iotadsan's slide deck

つまりどういうことか

• スライドサービスのサ終つらい… もう自前でやるしかない
• JSer.infoのazuさんの成果物をいい感じに利用させてもらった
• onkさんがむかしやってたやつは既に動いてないことは知ってたので静的にこだわった

どういう構造になっているか

• PDF.js - Home
  • Mozillaが開発しているJavaScriptでPDF表示するライブラリ
  • Firefoxに内蔵されてるPDF表示はこれ
• npm: pdf.js-controller
  • azuさんが作ったPDF.jsのラッパー
  • [pdf.js] テキスト選択出来るスライド表示ライブラリを書いた | Web Scratch
    • onkさんの スライド共有サービス hellshake を作りました - onk.ninjaが影響している
    • ↓のPDF表示コントローラを分離したもの
• slide-pdf.js
  • azuさんが作ったプレゼン表示用のSPA
  • pdf.jsを使いブラウザで見られるPDFスライド表示ツールを作った | Web Scratch
  • クエリパラメータでPDFのURLを指定して、<iframe>で埋め込んで使う
• azu/pdf-slide-html: Generator cli for azu/slide-pdf.js.
  • PDFを埋め込むHTMLジェネレータ (今回は使ってない)
• https://github.com/zonuexe/slides
  • tadsanのスライドPDFを置いてあるリポジトリ

やったこと

1. pdf.js-controllerをfork
   • コードとツールセットを近代化改修・TypeScript化
   • 最新のPDF.jsにアップデート
   • Retinaディスプレイ対応
2. slide-pdf.jsをfork
   • コードとツールセットを近代化改修・TypeScript化
   • fork版の@zonuexe/pdf.js-controllerに置き換え
   • Speakerウィンドウを追加
   • Rabbit風タイマーを追加
3. https://github.com/zonuexe/slides にPDFビューアーを実装
   • YAMLに書いたメタデータからページを一覧
   • スライドごとのページで <iframe> でslide-pdf.jsを埋め込む
   • PDFに含まれるテキストをすべて抽出して全文検索
     • Fuse.jsでフロントエンドだけで完結している
   • 最初はHonoを使っていたが、いろいろあって今はVitePressを使っている

一度はPHPでファイルシステムベースのルーターを自分で書いて置き換えようと思ってたんですが、いろいろ試している間にViteの手触りがいいなということに気付いてしまい、VitePressに書き換えちゃったのでした。これが俺たちが欲しかったやつなんだよ…

実際に勉強会やカンファレンスで使うかはともかく、全画面表示やら別ウィンドウのスピーカービュー、そしてRabbitモードも用意したので、末長く育てていければと思っております。