CCCMKホールディングス TECH LABの Tech Blog

TECH LABのエンジニアが技術情報を発信しています

ブログタイトル

トップ > AI > Marpで実現する、AIコーディングからプレゼンまでのシームレスなドキュメント作成

Marpで実現する、AIコーディングからプレゼンまでのシームレスなドキュメント作成

AI 開発環境

こんにちは、CCCMKホールディングスAIエンジニアの三浦です。

最近では、技術調査からコーディングに至るまで、AIの活用が欠かせなくなってきました。 AIといっしょにタスクを進める際には、AIに与える指示からAIが作成する成果物まで、Markdownファイルを使うことがとても多くなっています。

Markdownファイルは AIが扱いやすく、人にとっても読みやすい形式ですが、ミーティングやプレゼンテーションの場では、個人的にはスライド資料のほうが説明しやすいと感じています。 そのため、AIと作成したMarkdownファイルの成果物をスライド資料に起こして、ミーティングに臨む、といったことを最近はよく行っていました。

この進め方の問題点は、Markdownファイルとスライド資料が独立して存在してしまう点にあります。 Markdownファイルの内容に変更があった場合、その都度、人の手でスライドにも反映し続けなければなりません。そうしないと、同じ内容を扱っている 2 つのドキュメントの間に不整合が生まれてしまいます。

今後さらに AI の活用が進んでいく中で、この進め方はいずれ限界が来そうだな……と感じ始めています。 以下の図のように、AIと作成したMarkdownファイルを唯一のソースとして扱い、AIへの別タスクのコンテキストとして利用したり、各自が読み込む際にはMarkdownのまま参照し、ミーティングで説明する場合にはMarkdownファイルからプレゼン資料が自動的に生成される——そんな仕組みが作れたらいいな、と考えるようになりました。

Markdownファイルを単一ソースにしてAIコーディングからプレゼンまでシームレスにしたい。

Markdownファイルをスライド資料に変換できるツールとして、"Marp"があります。 Markdownにわずかな追記をするだけでスライド化でき、PDFやPPTX形式への変換にも対応しています。さらに、CLIアプリとしても利用できるため、Markdownからスライドへの自動変換を CI/CDパイプラインに組み込むことも可能です。

今回は Marpを導入し、さらにスライドのデザインを、普段自分が作っているスライド資料をベースにカスタマイズするまでの手順をまとめていきたいと思います。

Marpとは

"Marp"は、Markdownを使ってスライド資料を作成できるオープンソースのツールです。CLIアプリとして利用できるほか、VS Codeの拡張機能として使うこともできます。

marp.app

Marpのセットアップ

VS Code

VS CodeでMarpを使う場合は拡張機能"Marp for VS Code"を導入します。

marketplace.visualstudio.com

スライドをPDFやPPTXに変換したい場合、Google Chrome,Chromium,Microsoft Edge,Firefoxのいずれかがインストールされている必要があります。

github.com

私はUbuntuで作業をしていたため、以下のコマンドでChromiumをインストールしました。

sudo apt install -y chromium-browser

また、日本語フォントが入っていないとファイル出力したときに日本語部分が表示されないため、以下のコマンドで日本語フォントをインストールしました。

sudo apt update
sudo apt install -y fonts-noto-cjk

CLI

以下のコマンドでMarp CLIのUbuntuへのインストールを行いました。

sudo apt update
sudo apt install -y nodejs npm
sudo npm install -g @marp-team/marp-cli

使ってみる

ではVS Codeの拡張機能のMarpでMarkdownファイルをスライドに変換してみます。といってもMarkdownファイルのフロントマターに"marp: true"と書くことと、ページの区切りの箇所に"---"を差し込むだけです。具体的には以下のようになります。

---
marp: true
---

# MarpでAIコーディングからプレゼンまでシームレスなドキュメントの作成

CCCMKホールディングス株式会社
三浦

---

## はじめに

私はこんなことをやってみたいです。

![flow](./images/flow.jpg)

---

## Marpとは

"Marp"は、Markdownを使ってスライド資料を作成できるオープンソースのツールです。CLIアプリとして利用できるほか、VSCodeの拡張機能として使うこともできます。

### VS Code

VS CodeでMarpを使う場合は拡張機能**Marp for VS Code**を導入します。

- Marp for VS Code
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

### CLI

次のコマンドで**Marp CLI**のUbuntuへのインストールを行いました。

```bash
sudo apt update
sudo apt install -y nodejs npm
sudo npm install -g @marp-team/marp-cli
```

---

## 使う方法

私はVS Codeの拡張機能とCLIで利用しています。

| ツール | 特徴 |
| --- | --- |
| VS Code拡張機能 | VS Codeで使える |
| Marp CLI | コマンドで使える |

---

## まとめ

1. Marpを使うとMarkdownをスライド資料にシームレスに変換可能
2. CSSを使って独自のテーマを作ることが出来る
3. CI/CDパイプラインにも組み込んでみたい

VS CodeのMarkdownプレビューを開くと次のようにスライド形式の資料が表示されます。

MarpでMarkdownファイルをスライド資料に変換

ファイルに出力する場合はVS Codeのコマンドパレットで"Marp: Export Slide Deck..."を選択します。

独自のテーマを作って普段のスライド資料っぽくする

Marpを使うと簡単にMarkdownファイルをスライド資料にすることが出来ます。さらにCSSを書くことでデザインを細かく設定した独自のテーマを作ることが出来ます。

私の普段のスライド資料は大体このようなスタイルです。

普段作っているスライド

このデザインや構成をベースに独自のテーマを作って先ほどのMarkdownファイルに適用すると、以下のようなスライドに変換されました。プレゼンなどで「印象的に見せたい！」という場合ではちょっとまとまりすぎな印象がありますが、普段のミーティングでの情報共有用途ではこのままでもかなり使えそうな感じに仕上がりました。

カスタムテーマを適用してMarpで作成したスライド

カスタムテーマの作り方と適用方法

先ほどのようなカスタムテーマはCSSで定義することが出来ます。たとえば以下のような形式です。

/* @theme <theme-name> */

/* ==============================
   Base (all slides)
   ============================== */
section {
  background-image: url("./marp-theme/images/presentation-bg-image.png");
  background-size: cover;
  background-position: center;

  /* reserve space for normal h2 */
  padding: 90px 60px 0 60px;
}

/* Typography */
section p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 0.4em 0;
}
...

CSSの先頭に/* @theme <theme-name> */と記述すると、このCSSは<theme-name>という名前のMarpテーマとして認識されます。 その後、Markdownのフロントマターでtheme: <theme-name>を指定することで、このCSSで定義したスタイルをスライド全体に適用できます。

さらにスライドの中でこのページは独自のスタイルを適用したい(たとえばタイトルページなど)、というケースも出てくると思います。その場合は対象のMarkdownの該当のページの先頭に<!-- _class: title-slide-->のようにクラス名を付与し、CSSの中でこのクラスにだけ適用するスタイルを定義することで実現することが出来ます。

たとえばタイトルページだけ個別にスタイルを適用したい場合は、Markdownのタイトルページの先頭に以下を追記しておきます。

<!-- _class: title-slide -->
# MarpでAIコーディングからプレゼンまでシームレスなドキュメントの作成

CCCMKホールディングス株式会社
三浦

そしてタイトルページに対応するクラスに適用させるスタイルをCSS側に定義するという流れです。

/* ==============================
   Title slide
   ============================== */
section.title-slide h1 {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);

  font-size: 36px;
  font-weight: 700;
  color: var(--navy);

  text-align: center;
  line-height: 1.4;
  margin: 0;
}
...

また、VS CodeのMarpで読ませるCSSを指定するにはプロジェクトのVS Codeの設定ファイル.vscode/settings.jsonに以下のようにCSSファイルのパスを書いておきます。

{
  "markdown.marp.themes": [
    "./marp-themes/miura-theme.css"
  ]
}

この時のパスはプロジェクトのルート基準です。(上の例だとプロジェクトフォルダ直下にあるmarp-themeというフォルダの中のmiura-theme.cssを見に行きます)

Marp CLIでCSSを適用して出力したい場合、次のようなコマンドを実行します。

marp --theme ./marp-themes/miura-theme.css doc.md -o doc.pdf

--themeオプションで適用したいテーマが定義されたCSSファイルのパスを指定します。ちなみにMarp CLIでは画像ファイルなどMarkdownファイルの中でローカルにある別のファイルを参照している場合にPDFやPPTXに変換するとその部分だけ落ちてしまいます。これは変換時に内部で呼ばれるブラウザがセキュリティの観点からデフォルトでローカルファイルにアクセスできないようになっているためです。Marp CLIではオンラインにアップロードして参照させることを推奨していますが、自身が作成した完全に信頼できるMarkdownファイルにおいては以下のように--allow-local-filesオプションを指定することで回避することが出来ます。

marp --theme ./marp-themes/miura-theme.css --allow-local-files doc.md -o doc.pdf

さて、肝心のCSSですが私は普段CSSを書く機会がほとんどなくノウハウもないため、今回のカスタムテーマのCSSはM365 Copilotをフル活用して作る、というアプローチを取ってみました。自分が作ったスライドサンプルのスクリーンショットをCopilotに与え、「このデザインを再現するためのMarpのカスタムCSSを作りたい」といったやり取りを繰り返してCSSファイルを作成しました。

まとめ

この記事では、Marpを使ってMarkdownファイルからスライド資料を作成する手順をまとめました。 Marpを導入することで、AIコーディングで生成されたMarkdownファイルをベースに、プレゼン資料の作成までをシームレスに行えるようになります。

今回作成したカスタムテーマはリポジトリにアップし、今後は新しいプロジェクトが立ち上がるたびにgit submoduleとして参照する形で運用してみようと考えています。