Marpでローカルの画像を貼っちゃおう

皆さん、こんばんは。Marpを使ったことはありますか？

最近、私はPowerPoint資料を作る際にMarpの便利さに気づき、よく活用しています。

資料作成ツールって、今やAIを使ったものがたくさんあり、どれを選べばいいのか迷うことも多いですよね。

「結局どれを選んだらええねん！！情報多いしうざいむかついてきた！！」と悩んでしまう方も少なくないのではないでしょうか。

そんな方に朗報です。Marp一択です。

なぜなら、ターミナルでシンプルなコマンドを使うだけで、たとえば「marp slide.md --pdf」でPDFに変換できたり、「marp slide.md --pptx」でPowerPointファイルを作成できるからです。

しかも、デザインは洗練されていて、内容の変更も非常に素早く行えます。

確かに最初は少しだけ知識が必要ですが、YouTubeやChatGPTなどの無料リソースを使えば、誰でも簡単に使いこなせるようになります。

コードに不慣れな方でも、すぐに実践できるでしょう。

それでは、次にMarpの魅力をさらに掘り下げていきましょう。

Marpとは

Marpは、Markdownをベースにしたプレゼンテーション作成ツールです。スライドに画像やスタイルを簡単に追加できる利便性があります。しかし、ローカルファイルを指定する場合、正しいディレクトリ構成を取らなければ、期待通りの結果が得られません。特に、MarpでPPTXやPDFなどの出力を作成する際、Markdownファイル、画像ファイル、および出力ファイルがすべて適切な場所に配置します。この記事ではMarpでローカルファイルを扱う際の推奨ディレクトリ構成と実装方法を解説します。

ディレクトリ構成

Marpを使う場合、すべてのリソースファイル（Markdownファイル、画像ファイル、フォントなど）が正しく参照できるように、ディレクトリ構成を整えることが第一歩です。特にローカル画像を指定する場合、ファイルの相対パスが正確であることが求められます。「相対パス」とは、今の位置から見てどこにパスの先があるのかを示します。「ドット（.）」が現在地です。

理想のディレクトリ構成

以下のようなディレクトリ構成が理想です。

/your-project-directory/
│
├── slide.md                    # マークダウンファイル
├── your-background-image.png    # 背景画像ファイル
├── logo.png                     # ロゴ画像ファイル
└── output/                      # 出力ファイル用のディレクトリ（任意）

この構成では、Markdownファイルとすべてのリソースファイルが同じディレクトリ内に存在しているため、相対パスが非常にシンプルに指定できます。このような構成は、プロジェクトの一貫性を保ちつつ、管理を容易にします。

Markdownファイルでのローカル画像指定方法

上記のディレクトリ構成に基づき、Markdownファイルでローカル画像を指定するコード例は以下の通りです。

---
theme: gaia
paginate: true
backgroundColor: #f0f4f8
backgroundImage: url('./your-background-image.png')  # 同じディレクトリ内の背景画像
color: #333
header: 'ハラスメント研修'
footer: '© 2024 [あなたの企業名] | ハラスメント防止研修'
font-family: 'Noto Sans JP', sans-serif
---

![bg left:40% 80%](./logo.png)  # 同じディレクトリ内のロゴ画像

# **ハラスメント研修**

職場におけるハラスメントの理解と防止策

この設定の利点

相対パスのシンプルさ
`./` で同じディレクトリ内のファイルを参照できるため、Markdownファイルを別の場所に移動する際も管理が容易。

移植性
同じディレクトリにまとめることで、他の環境に移動しても相対パスを修正する手間がかかりません。

画像ファイルを別ディレクトリに配置する場合

場合によっては、画像ファイルをプロジェクト内の別ディレクトリに整理しておきたいことがあります。特に大規模なプロジェクトでは、すべての画像ファイルを `images/` などのサブディレクトリにまとめて管理するといいです。

画像を別フォルダに置くディレクトリ構成例

/your-project-directory/
│
├── slide.md                    # マークダウンファイル
├── images/                     # 画像ファイルを保存するディレクトリ
│   ├── your-background-image.png  # 背景画像
│   └── logo.png                # ロゴ画像
└── output/                     # 出力ファイル用のディレクトリ（任意）

この構成を使用する場合、Markdownファイル内での画像ファイルの指定は以下のようになります。

---
theme: gaia
paginate: true
backgroundColor: #f0f4f8
backgroundImage: url('./images/your-background-image.png')  # 画像フォルダの背景画像
color: #333
header: 'ハラスメント研修'
footer: '© 2024 [あなたの企業名] | ハラスメント防止研修'
font-family: 'Noto Sans JP', sans-serif
---

![bg left:40% 80%](./images/logo.png)  # 画像フォルダのロゴ画像

# **ハラスメント研修**

職場におけるハラスメントの理解と防止策

この方法の利点

ファイル整理
画像ファイルがすべて専用ディレクトリに格納されているため、プロジェクト全体の整理整頓が容易。

スケーラビリティ
プロジェクトが大規模になるほど、リソースを専用フォルダに分けることで管理がシンプルになります。

出力ファイルの管理

Marpを使ってMarkdownファイルをPPTXやPDF形式で出力する場合、出力先ディレクトリを指定することが可能です。

たとえば、`output/` ディレクトリにPPTXファイルを出力する場合、以下のコマンドで実行できます。

marp slide.md --pptx --output ./output/slide.pptx

このコマンドの内、以下のコマンド部分が、指定のフォルダに「入れるよ」と言う意味です。

--output ./output/slide.pptx

指定せずにシンプルに「marp slide.md --pptx」のみでも出力は問題なくできますのでご安心を。

ポイント

ディレクトリ指定
`--output` オプションを使うことで、出力ファイルをプロジェクトのルートディレクトリとは別の場所に保存できます。これにより、出力ファイルとソースファイルが混在しないため、管理がしやすくなります。

結論

Marpでローカルファイルを指定できます。
パスの指定だけ留意しましょう。
これであなたの好きなカスタムデザインをMarpに適用できます。

ありがとうございました。