📺

今更だけどMarkdownでPowerPointが作成できるMarpに入門してみる

2024/07/28に公開

PowerPoint

Marp

tech

はじめに

Marpを使用してMarkdownからPower Pointのスライドをハンズオン形式で作成したい！

ハンズオンで作成していく

環境構築から始めましょう。

プロジェクトディレクトリの作成

新しいディレクトリを作成し、そこに移動します。

mkdir marp-presentation
cd marp-presentation

プロジェクトの初期化

pnpmを使用してプロジェクトを初期化します。

pnpm init

Marpのインストール

Marp CLIをインストールします。

pnpm add -D @marp-team/marp-cli

package.jsonの設定

scriptsセクションに以下の行を追加します。

  "scripts": {
    "dev": "npx @marp-team/marp-cli -s ./src",
    "build": "npx @marp-team/marp-cli ./src --pptx --theme-set ./src/styles/*.css --allow-local-files"
  }

Markdownファイルの作成

プロジェクトのsrc配下にpresentation.mdという名前のファイルを作成し、Power Point化したい内容を記述します。

ここでは一例として太平洋戦争の開始から終了までの流れを簡単にまとめたものを記述します。

---
marp: true
theme: "base"
size: 16:9
---

# 太平洋戦争の始まりから終わりまで

---

# ⚠はじめに

このスライドは`Marp`で作成しており、PowerPoint化したものは直接編集することができなくなります。
編集する場合は`presentation.md`から編集したあと`pnpm run build`してください。

---

# 序章

太平洋戦争（1941年-1945年）は、第二次世界大戦の一部として行われた戦争であり、日本と連合国（主にアメリカ、イギリス、中国、オーストラリアなど）との間で戦われました。

この戦争は、アジア太平洋地域における覇権を巡る戦いであり、最終的には日本の敗北に終わりました。

---

# 背景

- 1930年代、日本は中国への侵略を開始
- 満州事変（1931年）や日中戦争（1937年）を経て、アジアにおける勢力を拡大
- 西側諸国との緊張が高まる

---

# 真珠湾攻撃

- 1941年12月7日（日本時間12月8日）
- 日本がハワイの真珠湾にあるアメリカ海軍基地を奇襲攻撃
- アメリカの太平洋戦争参戦のきっかけに
- 短期的には日本の成功だが、長期的には逆効果

---

# 初期の日本の勝利

- フィリピン、マレー半島、シンガポール、インドネシアなどを占領
- 資源の確保と戦略的な拠点を築く

---

# ミッドウェー海戦

- 1942年6月
- 太平洋戦争の転換点
- アメリカが日本に対して決定的な勝利
- 日本は空母4隻を喪失

---

# ガダルカナル島の戦い

- 1942年8月から1943年2月
- アメリカがガダルカナル島を奪還
- 日本の南進作戦を阻止

---

# レイテ沖海戦

- 1944年10月
- フィリピンのレイテ沖で行われた海戦
- アメリカが再び日本に対して大規模な勝利
- 日本の海軍力に壊滅的な打撃

---

# 沖縄戦

- 1945年4月から6月
- アメリカ軍が沖縄島を占領
- 非常に激しい戦闘で多くの犠牲者
- 本土決戦を予感させる戦い

---

# 広島・長崎への原子爆弾投下

- 1945年8月6日：広島に原子爆弾投下
- 1945年8月9日：長崎に原子爆弾投下
- 数十万人の市民が犠牲に
- 日本の降伏決断のきっかけに

---

# 終戦

- 1945年8月15日：日本がポツダム宣言を受諾し、無条件降伏を発表
- 1945年9月2日：東京湾の戦艦ミズーリ上で正式な降伏文書に調印
- 太平洋戦争の終結

---

# 結論

- 日本の侵略政策と連合国の抵抗が引き起こした戦争
- 多くの犠牲を伴った
- 戦争の悲惨さと平和の重要性を再認識
- 現在の国際関係にも多くの影響

---

# 参考文献

[「太平洋戦争」Wikipedia](https://ja.wikipedia.org/wiki/太平洋戦争)

プレゼンテーションのビルド

以下のコマンドを実行して、MarkdownファイルをPowerPointファイルに変換します。

これによりsrc配下にpresentation.pptxファイルが生成されます。

pnpm run build

プレゼンテーションの表示

生成されたPowerPointファイルを開いて、スライドを確認します。
確認すると問題なく生成できていることが確認できます。

作成してみたけど…

編集ができない！

pptx形式で出力した場合、PowerPointで編集することはできないです。

各スライドがそれぞれ1枚の画像のようになってしまい、文字の移動や誤字脱字等の修正、位置の調整など個々の要素は直接編集することができなくなります。

スライドがシンプルすぎる！

これはCSSを当てることで解消することができます。
ということでCSSをあてて最低限のCSSを設定していきます。

CSSの設定

今回は3つに絞って設定していきます。

フォントの変更
背景色の変更
文字色の変更

src/stylesにbase.cssを作成します。

作成後に以下を入力します。

/* @theme base */
@import "gaia";

marpではCSSにファイル名と同じtheme名を設定する必要があります。

例: base.cssなら/* @theme base */を入力する。

デフォルトのテーマ(gaia)をインポートとします。
このインポートは雛形のようなもので、全て1から設定せず部分的に調整したいためです。

フォントはNotoSansJP、背景色は好みの色(自作)で設定し、文字色は黒にします。

/* @theme base */
@import 'gaia';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

:root {
  --background: linear-gradient(to bottom right, #9bd4ff, #fffa9b);
  --color: #333333;
  --font-family: 'Noto Sans JP', sans-serif;
  --margin: 32px;
  --border-radius: 16px;
}

section {
  background: var(--background);
  color: var(--color);
  font-family: var(--font-family);
}

section::before {
  background: white;
  content: '';
  position: absolute;
  top: var(--margin);
  left: var(--margin);
  right: var(--margin);
  bottom: var(--margin);
  border-radius: var(--border-radius);
  z-index: 0;
}

section > * {
  position: relative;
  z-index: 1;
}

設定後、presentation.mdでtheme部分を変更します。

 ---
 marp: true
-theme: "gaia"
+theme: "base"
 size: 16:9
 ---

pnpm run buildすると、pptxファイルが作成されます。

作成後開いてみるとcssを設定したPower Pointができていることが確認できます。

おわりに

Power Pointを出力したあとに編集できないのが少しネックですが、ベースのCSSさえ定義してしまえばあとは自分好みのスライドをMarkdown形式で書いていけるのがとても良いですね！

私はスライドを作成するとき、必ずOneNoteなどで文字に書き下ろしてからスライドに着手しています。
使いこなせばOneNoteからPower Pointに書き写す工程がなくなり、そのままスライドになるのはとても魅力的でした。
気になるトピックなのでもう少し深ぼってみようと思います👍️

今回はこのあたりで終わりたいと思います。
作成に使ったリポジトリはこちらです。

参考

https://marpit.marp.app/