業務用のプレゼンテーションスライドをMarpを使って作成できないかやってみました。
きっかけ：RAGを見据えたアプローチ
私がMarpを使ってスライドを作ろうと思ったきっかけは、将来的なRAG（Retrieval-Augmented Generation）の導入を見据えてのことです。テキストデータとしてのMarkdownは、将来的にRAGシステムに統合しやすいのではないかと考えました。
プレゼンテーションスライドも例外ではありません。従来のパワーポイントなどのバイナリ形式よりも、Markdownベースのスライドの方が、将来的に情報の検索や再利用がしやすくなるのではないかと考えたのです。
テンプレートデザイン設定
最初に直面した課題は、スライドデザインをスライドに組み込むことでした。フッターにロゴを表示する方法を探っていましたが、なかなか良い解決策が見つかりませんでした。
しかし、調査を進めるうちにMarpで背景画像を設定できることがわかりました。そこで、ロゴを含む背景画像を作成し、それをスライドの背景として使用することにしました。
以下が、背景画像を設定するためのCSSです：
section {
background-image: url('img/sample.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
サンプル画像として下記を作成し使用しました。
背景として設定して表示したものが下記になります。
AIの活用
コードの書き方に関しては、AIアシスタントを活用しました。
※サンプルコード
---
marp: true
---
<!-- _class: two-column -->
# 2列レイアウト
<div class="column">
## 左列
- 項目1
- 項目2
- 項目3
</div>
<div class="column">
## 右列
1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3
</div>
<style>
.two-column {
display: grid;
grid-template-columns: 50% 50%;
}
.column {
padding: 0 10px;
}
</style>
苦労した点：左右分割レイアウトの課題
最も苦労したのは、スライドを左右に分割して表示する方法を見つけることでした。この点については、AIに相談してもHTML形式での記述方法しか提案されませんでした。
※サンプルコード
<div style="display: flex;">
<div style="flex: 1;">
<!-- 左側のコンテンツ -->
</div>
<div style="flex: 1;">
<!-- 右側のコンテンツ -->
</div>
</div>
ちなみに上下分割はできるみたいです
これに関してはそもそもhtmlはサポートされていないのか、marpではタグがそのまま表示されました。
また、Markdownの簡潔さを損ない、作成・編集時に特別な慣れが必要になります。
これは、チーム全体でテンプレートを使用する際の障害になる可能性があるのでできるとしてもなしかなという印象です。