見出し画像

[MARP] noteのタイトル画像をCLIで作ってみた

#つくってみた

こんにちは、キン担ラボの本橋です。

本橋です

Marpを使ってnote用の画像タイトルを作成する手順を紹介したいと思います。このnote記事のタイトル自体もそうですが、最近はnoteやYoutubeなどもだいたいMarpを使ってタイトル画像を作成しています。

Marpについて一言で説明すると、Markdownを書くだけでスライドや画像を作成できるマークアップ言語です。そこにgithubで公開しているボイラープレートを適用すると、ちょっとしたMarkdownと簡単なコマンドを叩くだけでタイトル画像を生成できます。

この記事では、ボイラープレートを活用したクイックスタートガイドとして、VS Codeの拡張機能とMarp CLIを使う2つの方法をお伝えします。

ボイラープレートというのは大きめのスニペットだと思ってください。


クイックスタートガイド

手順1. Marp CLIをインストール

まずコマンドラインから画像を作成できるMarp CLIをインストールしてください。コマンド一つで画像が生成できるため、とにかくお手軽にタイトル画像を作りたい方におすすめです。

僕の場合はあちこちのプロジェクトでMarpを使っているのでグローバルインストールしてしまっています。(もちろんローカルでも動作します)

npm install -g @marp-team/marp-cli

手順2. githubのボイラープレートをセットアップ

初期設定済みのボイラープレートを使うと手軽に体験できます。

まずgithubのリポジトリからボイラープレートをクローンしましょう。Marp用のCSSはサブモジュールに分けているので、--recurse-submodules オプションも付けておいてください。

git clone --recurse-submodules https://github.com/motohasystem/marp_boilerplate_titleimage.git

cloneしたディレクトリに移動して、画像生成のmarp cliを以下のコマンドで呼び出してください。

cd marp_boilerplate_titleimage
marp index.md --image png  --theme themes\title_image.css --allow-local-files

# ↓ローカルインストールしたときはこちら
npx marp index.md --image png  --theme themes\title_image.css --allow-local-files

これでPNG形式の画像が出力されます。

簡単でしたね! あとはindex.mdを開いて自由にページを追加してみてください。Marpで画像を出力する場合は最初の1ページだけ保存されます。

なので、あたらしくタイトル画像を作りたいときは冒頭に追加していってください。

---
marp: true
theme: title_doubleline
---

<!--
headingDivider: 1
-->

<!-- class - white / black / kintone / normal  -->

# <!-- class: normal -->
※AI画像にMarpでテロップを追加

![bg fit 100%](./img/marp_titleimage.webp)


# <!-- class: white -->
※AI画像にMarpでテロップを追加

![bg fit 100%](./img/marp_titleimage.webp)


# <!-- class: black -->
※AI画像にMarpでテロップを追加

![bg fit 100%](./img/marp_titleimage.webp)


# <!-- class: kintone -->
※AI画像にMarpでテロップを追加

![bg fit 100%](./img/marp_titleimage.webp)

テーマには僕が使っているスタイルをいくつか含めています。class指定でお好みの色に切り替えてみてください。

手順3. VSCodeでプレビュー

画像出力する前にプレビューで確認したくなったらVS Codeの拡張機能を使うとよいかと思います。Markdown Previewとかでプレビューできるはずです。

プレビューしようとした際に、themeが見つからないよ、と言われることがあります。

見つからない線

その場合は、VSCode設定からMarp: Themesを探してcssファイルのパスを指定してあげてください。

git clone したフォルダをVSCodeで開いている場合は、以下のように ./themes/title_image.css を追加します。

相対パスでファイルを指定して、ファイルの中で更にテーマ名を指定して、と入れ子になっていて分かりにくいかも知れません。

まとめ

この環境を作っておくと本当に便利で、生成AIで画像を作ったり、スマホで取った写真だったりにささっと文字を入れることができます。毎回凝った画像を作れるひとはともかく、僕のようなモノグサにはもう欠かせないツールとなりました。

さらにCSSやJavaScriptが書ける人はデザインを変えたり動きをつけたりもできます。やりたいことを色々と盛り込んでみてください。


いいなと思ったら応援しよう!

この記事が参加している募集