MarpにNext.js(shadcn/ui)で作成した静的ページを埋め込んで発表中にデモする方法についてLTした話
参加させていただいたLT会
自分はフロントエンドについて詳しくないのですがわかりやすく非常に勉強になりました。
あとLTされた方等の発表が上手で、スライドも綺麗だったので自分ももっと頑張らないとな...と思いました。
色々トラブルを起こしてしまったのですが、対応もしていただきました。本当にありがとうございました。🙇
使用したスライド
今回から以下の記事を参考にgithub × MarpでLT用のスライドを管理してみることにしました。
ありがとうございます。🙏
[github(使用スライド)リンク] リンクは置けるのですが、スライド表示をさせるにはローカルに置かなければならず...次回までに改善します。
Marpを使用するのが初めてで、発表者用スライドで文字がつぶれていたり、不要な色が付いていたり、位置がずれたり、思った挙動にならなかったり...と非常に学びになりました。
事前の挙動確認を怠ったのが個人的な大きな反省点です。(睡眠大事)
またカスタムテーマ作成やgithub actionsでの自動化などもしたかったですが手が回らなかったのでそれも含め次回までに改善しておきたいです。
概要
Marpについて簡単に説明すると、マークダウン形式でスライドを作成できるツールです。マークダウン形式はZennで記事を書いている方だとけっこう馴染みがあると思うのですが文字の大きさを変えられたり、サイトを埋め込めたりとかができます。
そのため、静的ページのリンクを埋め込んで、発表中に操作できるのではないかと思いNext.js(shadcn/ui)を使用して簡単なグラフを作成し発表中に動かしました。
成果物
発表中は自分のPCでlocalhostを立ち上げて、localhostのURLを埋め込むという方法を取ったのですが、記事を上げるにあたり、発表で使用したグラフのみgithubpagesに上げました。
このグラフをmarp内に埋め込みLT時に操作しました。
発表で使用したスライドをグラフ操作できる状態でそのまま表示させる方法があれば良いのですが上手い方法が思いつかず...marpスライドの公開をcloudflarepagesやs3で行えば良いかもしれませんが今回はこのままにしておきます。
※発表時にトラブルになった点
①グラフ操作後、スライドのページ送りボタンが非表示になりスライドを進められなくなる。
→画面上部にマウスカーソルを持っていくとなぜか解消されます。
②これが致命的だったのですが、発表者用スライド(下画像のOpenPresenterViewをクリックすると出ます)にするとグラフ操作ができませんでした。
このモードだと画像として表示されるようになるんですかね...?
発表者用スライドは使用せずに原稿は別で用意するなど対策が必要だと思いました。
手順
①MarpをVSCodeに導入する
[参考記事]
上の記事を参考に、
①marp/cliを有効にしてvscode上でmarp用のコマンドを打てるようにする。
②marpのVSCode拡張を有効にしてVSCode上でマークダウン資料作成時、見栄えをプレビューできるようにしました。
②Next.js(shadcn/ui)でグラフ作成
Next.jsとshadcn/ui導入
[参考記事]
[自分で作成したコード]
個人的には他のライブラリとは違いshadcn/uiをインストールするとコンポーネントが生えたのが驚きでした😳
あと今回時間がなくグラフ内のデータはハードコードしてしまったのですが、以下の記事のようにブラウザ上にデータを持って操作する方法もあります。(自記事ですが...)
③ビルドしてoutフォルダを作成
next.config.ts に output: "export"を指定
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
output: "export",
};
export default nextConfig;
この後、
npm run build
を行います。
④outフォルダを発表用スライドを入れる予定のフォルダにコピーしてくる。
⑤localhostを立ち上げる。(S3やgithubpagesに静的ページを置く場合不要)
今回はあくまでローカルで静的ページを表示しそれを使用するという方法を取ったのでここでlocalhostを立ち上げ、Next.jsで作成したグラフ(outフォルダ内)を表示させています。
⑥Marp用にmdに静的ページのリンクをiframeで埋め込む
[作成したmdファイル]
今回は以下のようにiframeでlocalhostのリンクを埋め込んで表示させていますが、githubpagesやS3に置いている自分の静的ページを置くことで同様のことができるのではないかと思います。
これにより、発表中に埋め込まれたlocalhost上のページを操作することでインタラクティブなグラフ操作ができるようにしています。
⑦プレゼン用のスライド(html)を出力する
npx @marp-team/marp-cli slide.md --html --template bespoke -o slide.html
スライド用のhtmlを出力します。bespoke を指定することで、発表用の矢印などを表示することが可能になります。
⑧出力したhtmlファイルをクリックしてスライド起動🙌
まとめ
[記事内容部分]
スライドにも書きましたが、ある一つのグラフを表示するためにNext.jsを作って...というと流石に腰が重いかなと思います。作成したいツールがあるので今回はこの方法を試してみました。
グラフ部分でメリットを上げるのであれば、duckdb-wasmとopfsを使用すればブラウザ上にローカルデータを持つので発表中でもBI上の操作は機敏であること&発表中にBIツールが動かなくなったり別データを読み込んだら、BIの表示がうまくいかず発表に間に合わなかった...というような事態は避けられるかもしれません。
グラフをコード管理できるという点は...どうなんでしょうか、何かメリットあるかもしれないですね。
ただグラフ抜きにしても今後自分の作成したページのデモをLTで行いたいという場合には非常に便利で需要はあるのではないかと思いました。
[LT部分]
喋り:原稿を作成して練習してからLTします。。(めちゃくちゃ「まぁ...」が発表中に出ました。)
スライドの内容:導入手順などは発表中はフローのみに留め、詳細はZenn記事にまとめた方が良い気がしました。導入手順をLT上のスライドから覚えておいて試すというのはなかなかハードルが高いのでそれならその部分は記事に集約した方が良いかもしれません。発表前にスライドと記事が完成しており、スライドに記事のリンクもつけられたらベストかなと思いました。ただ発表後に記事で補足したい...という側面もあると思うのでZennスクラップに手順をまとめてリンクするでも良いかもしれません。
なのでLTでは成果物の紹介、コードの詳細、メリットデメリットまとめなどに留める...といったようにしてみたいと思います。(だいぶ時間オーバーしたので...)
あとはスライドの見た目も結構雑になったので、次回は改善します。
Discussion