[AI前提]Marpで擬似共通コンポーネントを作る
MarpでAIを活用した擬似共通コンポーネントの実現
背景
スライドを作る時に、ヘッダーやフッターなどの共通部分は一箇所で作ったら自動で追加されてほしいです。
ヘッダーやフッターであれば、meta情報にプロパティを増やすことで追加することができます。
しかし、自分の好きなスタイルが当たったhtmlを埋め込もうと思うと自分で置換用スクリプトを書かないといけなくなっちゃうことが面倒でした。
それこそ、ナビゲーション要素を手動で各スライドに追加しようとしても、一般的なWebフレームワークのような共通コンポーネント機能のようにはできないため、複数のスライドで一貫したデザインや文言を保つのは手間がかかります。
そこでなんとか手間を省けないかと考えた方法を書いておきます。
やったこと
この問題を解決するため、AIを活用した擬似共通コンポーネントシステムを構築しました。具体的な手順は以下の通りです。
今回のユースケースとしては、アジェンダを常に右上に出して、今のスライドがどの部分について話しているかを聴衆も常に確認できるようにしたかったです。
1. 共通コンポーネントのHTMLテンプレート作成
まず、再利用したい要素をHTMLファイルとして作成します：
agenda.html
<div class="agenda-sidebar">
<ul>
<li class="item-about-me current">About me</li>
<li class="sub-item item-about-my-hobby">About my hobby</li>
<li class="item-about-company">About company</li>
<li class="item-about-technology">About technology</li>
<li class="item-about-business">About Business</li>
<li class="item-ending">終わりに</li>
</ul>
</div>
現在のスライドの部分にはcurrentなどを入れる想定です。
ちなみにスタイルは常に右上に置いておきたいので、スライドの内容に被らないように注意しながらスタイリングで右上固定にします。
sample.css
.agenda-sidebar {
position: fixed;
top: 80px;
right: 15px;
width: 150px;
background: rgba(248, 249, 250, 0.8);
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 8px;
font-size: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
z-index: 1000;
}
.agenda-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.agenda-sidebar li {
padding: 2px 0;
color: #6c757d;
line-height: 1.3;
}
.agenda-sidebar li.sub-item {
padding-left: 12px;
font-size: 9px;
}
.agenda-sidebar li.current {
color: #dc3545;
font-weight: 600;
}
HTMlファイルを作成したはいいですが、直接このファイルを使うことはしません。
2. AIプロンプトの準備
AI Agentに以下のようなプロンプトを用意し、上記で作成したHTMLファイルを利用するように指示していきます。
以下のアジェンダHTMLコンポーネントを、各スライドの適切な位置に挿入してください。
現在のスライドの内容に応じて、適切なアジェンダ項目に「current」クラスを付与してください。
指示:
1. スライドの内容を読み取り、どのアジェンダ項目に該当するかを判断
2. 該当する項目に「current」クラスを追加
3. HTMLコンポーネントをスライドの最下部（CSSの後）に挿入
4. 元のMarkdownの内容は変更しない
すると、エージェントが自動で追記してくれます。
各スライドに個別で挿入はされていますが、それらを挿入するAIベースがベースとするhtmlはagenda.htmlなので、agenda.htmlだけを変更し、それを変更の度に上記プロンプトを流すだけです。
これでAI前提の擬似コンポーネントの作成ができました。
良かったこと
一貫性の確保
全てのスライドで同じデザイン要素が適用され、ブランドガイドラインに沿ったプレゼンテーションを簡単に作成できるようになり、こういった複製作業も得意なAIに任せることで人的ミスがなくなります。
効率的な更新 / 柔軟なカスタマイズ
新しいスライドを追加したり、アジェンダが増えたとしても、プロンプトを流すだけなので非常に楽です。
注意点
最後の確認
本当にcurrentが適切かどうかについては、やはり最後は人間が行う必要があります。
とはいえ、メンテナンスは非常に楽なので普段AIが生成するコードをレビューするよりは楽だと思います。
スライドによって例外的に配置させたくないものがある場合
これも試してはないですが、一応回避策は考えていて
Marpでは、HMTLのコメントを追記することができます。
<!-- こういうやつ -->
そこに、「agenda不要」などの記号をあらかじめ決めておいて、プロンプトでその記号が記載されてるスライドには追加しないように追加するだけです。
まとめ
この手法により、Marpの制約を回避しながら、実用的な共通コンポーネントシステムを構築できました。コードほど複雑にしなくても良いスライドだからこそ、これによりAIの進歩とともにより精度の高い自動化が期待できそうです。
Discussion