【要約】MarpのHTMLをコネコネして、biim式RTA画面で登壇した [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
発表者が、Markdownベースのスライド作成ツールであるMarpを使用する際、標準機能では実現できない高度な演出を行いたいという課題に直面した。具体的には以下の問題があった。
- ・Marpのレイアウト自由度が、PowerPoint等のツールに比べて低い。
- ・スライドの進行に同期したタイマーや実況表示などの動的なUIが必要である。
- ・スライドを修正して再エクスポートするたびに、追加したUIが消失してしまう。
// Approach
筆者は、Marpの出力HTMLに対して、CSSとJavaScript、およびPythonスクリプトを用いて外部からUIを注入するアプローチを採用した。具体的な手法は以下の通りである。
- ・CSSを用いてスライド領域を左上に縮小し、空いたスペースにオーバーレイを配置する。
- ・MutationObserverにより、スライドのクラス変化を監視して進行を検知する。
- ・Pythonスクリプトを用い、再生成時もUIが消えないようHTMLへ自動注入する。
// Result
筆者は、Markdownによる手軽なスライド作成と、高度な演出を両立させる仕組みを構築した。これにより以下の成果を得た。
- ・スライドの修正とUIの調整を、互いに干渉せず独立して行えるようになった。
- ・プレゼン中にタイマーやラップ表、実況メッセージを表示する演出を実現した。
- ・Marpの標準機能（プレゼンターモード等）を維持したまま、独自のUIを追加できた。
Senior Engineer Insight
> 既存ツールを直接改造せず、出力物を「プラットフォーム」として扱う設計は極めて合理的だ。MutationObserverを用いた実装は、ツール内部のロジックに依存しない疎結合な拡張を実現している。ただし、DOM構造への依存は、Marpのアップデートによる破壊的変更のリスクを孕む。運用面では、Pythonによる注入自動化が開発体験を支えており、実用的なワークフローと言える。