みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsでプレゼンテーションの資料をつくる 🧑‍🏫

blog.kimizuka.org

前回、静的なウェブサイト、動的なウェブサイト、デスクトップアプリをNext.jsで作成しているという話をしましたが、実は今年からプレゼンテーションの資料もNext.jsでつくっています。

もともとは、Keynoteで資料を作成していたのですが、

  • そもそも、テキスト、写真、動画をバンっと表示していただけなので簡単に再現できる
  • 紹介する事例はNext.jsで作成していることが多いので、組み込めばすんなりデモに移行できる

という2点から、Next.jsで制作することを決意した次第です。

一応、テストサイトをVercelにアップしています。

https://kimizuka.vercel.app/

が。実際のプレゼンテーションでは、yarn devでローカルサーバを立ち上げ、フルスクリーンで表示したものを使っています。(リソースファイルの読み込みを安定させるため)

テストサイトでは、キーボードの「←」と「→」でページを進めたり戻せたりできるようにしています。
必要に応じて、プレゼン中に顔認識を使ったり、WebARを使ったり、Bluetoothデバイスと連携させたり、GPS情報を使ったりとブラウザでできる範囲でやりたい放題なので、非常に便利です。

今後、機能を拡張したものもブランチを切ってプッシュしていこうと思います。

リポジトリ

github.com