テキストデータからプレゼン資料を爆速作成する方法

テキストデータからプレゼン資料を爆速作成する方法

StockSnap via Pixabay

◆テキストデータからプレゼン資料を爆速作成

 マークダウン(Markdown)という文書の記法がある。シンプルなテキストデータに、簡単な記号を付けることで、HTMLファイルに手軽に変換できるというものだ。プログラマーがよく利用する記法で、ソースコードのホスティングサービス GitHub や、プログラミング情報系ブログサイトなどでよく利用されている。

 記法は非常にシンプルで、行頭に「# 」と書くと大見出しに、「## 」と書くと中見出し、「### 」で小見出しといった感じだ。強調は「*」や「_」で囲む。強い強調は「**」や「__」で囲む。

 リスト表示したいときは、各行の頭に「* 」や「- 」を書く。タブや半角スペースでインデントすることで、階層構造になったリストを作ることもできる。リンクは「[タイトル](URL)」と書く。

 他にも記号はあるが、マークダウンはこうした簡単な記法で、きれいなHTMLファイルに変換できるので生産性が高い。

 変換するためのプログラムも、各種プログラミング言語に存在している。そのためプログラマーは、自分が使い慣れたプログラミング言語で、整形されたHTMLファイルを出力できる。

 また、こうしたプログラムを使い、独自の拡張をおこなうことも可能だ。私も商業出版される技術書の原本や、同人誌の原稿は、マークダウンで書いている。そして拡張した自作ツールで、HTMLファイルやPDFファイルを出力している。

 2月に出る『JavaScript[完全]入門』という本の原稿は、マークダウンで全て書いた。去年出た『Web小説のための NovelSupporterで超効率的に文章推敲する本』も、同じ手法で書いた。

 原稿をテキストエディタでどんどん書けるので高速に執筆できる。Microsoft Word のように、痒いところに手が届かないということはない。用途に応じて、自分でプログラムを書いて拡張できるので非常に便利だ。

 私の場合、HTMLファイルから、ePubやKindle用のファイルに変換するプログラムも自前で用意している。そのためマークダウンから、ノンストップで電子書籍を作ることができる。

 このように、仕事に趣味に、マークダウンを活用している私だが、最近、素敵なプログラムに出会った。Marp というプログラムだ。副題に Markdown Presentation Ecosystem とあるように、マークダウンのファイルから、PDF や パワーポイントといった、プレゼン用のファイルを生成してくれる。

 今回は、この Marp を紹介したいと思う。

◆テキストを書くだけで、PDFやパワーポイントのファイルを生成

 それでは Marp を紹介しよう。Marp のWebサイトは英語だが、開発しているのは日本の会社の日本の人だ。そのため、この手のソフトによくある「日本語が上手く出力されない」といった不具合はない。

 たとえば、2ページのプレゼン資料を作りたいとする。

 その場合は、以下のように書くだけでよい。短いテキストを書くだけで、見栄えが整ったPDFやパワーポイントのデータを作ることができる。

---

theme: gaia

_class: lead

paginate: true

backgroundColor: #fff

backgroundImage: url('https://marp.app/assets/hero-background.jpg')

---

![bg left:40% 80%](./img/logo_color.png)

# るてんのお部屋

**同人技術書**と**同人ゲーム**のサークル

crocro.com/shop/group/circle.html

---

# サークル紹介

こんな本やゲームを作っています。もっとたくさんありますよ!

* 同人技術書

* HTML5とJavaScriptで作る タワーディフェンス 全コード

* HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード

* レトロ風RPG フルスクラッチ開発 全コード

* 同人ゲーム

* TinyWar high-speed(高速RTS)

* 無限世界SRPG(ローグライクSRPG)

 少し解説しよう。「---」がページの区切り記号だ。最初の「---」区切りのブロックは、Marpの設定を書いている。

 「![bg left:40% 80%](./img/logo_color.png)」は、画像を左40%の位置に、80%のサイズで表示という意味だ。画像の表示は Marp ではマークダウンから拡張されている。

 あとは基本的に、通常のマークダウンと変わらない(Marpit Markdown)。

 仕事先から「急ぎでプレゼン資料を作ってくれ」と言われたときに、とりあえずテキストの原稿を書いて、PDFやパワーポイントとして出力する。そうした時に、Marp は非常に有用だ。文字の原稿だけ書けばよいので、時間がない時にでもどうにかなる。利用環境さえ整っていれば、非常に短時間で仕事をこなすことができる。

◆Marp を使ってみる

 Marp は、2種類のソフトが用意されている。1つは、Marp for VS Code という、プログラマー向けのコードエディタ Visual Studio Code 向けの拡張機能だ。

 Visual Studio Marketplace からインストールすると、マークダウンを開いたときに、ファイルの右肩にツールのボタンが表示される。

 左端のボタンをクリックすると、プレビュー表示をしてくれる。Marpのロゴマークになっている真ん中のボタンを押して、[Export slide deck...]を選ぶと、PDFやパワーポイントのデータとして出力できる。

 操作はたったこれだけだ。

 もう1つは、Marp CLI だ。こちらは、ある程度以上パソコンに慣れた人向けの、コマンドラインで使うツールだ。Release ページから、ソフトをZIPでダウンロードして解凍する。Windows 版なら、marp.exe という実行ファイルが入っている。マークダウンで書いたファイルを、この実行ファイルにドロップすると、HTMLファイルに変換してくれる。

 PDFなどに出力したい場合は、コマンドラインから marp.exe を実行する必要がある。Windows なら、[Win]+[R]で「ファイル名を指定して実行」ダイアログを出したあと、「cmd」と入力して実行すると、コマンド プロンプトが現れる。

 「"marp.exeのパス" --pdf --allow-local-files "マークダウンのファイルのパス"」と書いて実行すれば、PDFを出力可能だ。--allow-local-files を付けないと、ローカルの画像を読み込めないので注意が必要だ。ヘルプを読みたいときは、「marp ?」のコマンドで実行時のオプションが表示される。

 使い方自体は単純なので、暇なときに少し触ってみれば、すぐに使いこなせるようになるだろう。私としては、プレビューを見ながら編集できる Marp for VS Code が使いやすいと思う。

◆MarpのTIPS

 「使い方は単純」と書いたのだが、実はすぐに困ることが一点だけある。文章が少ないと、ページに対してスカスカになり、文章が多いと、ページをはみ出してしまうのだ。自動調整して欲しいのだが、そのオプションの有無を筆者は見付けられなかった(おそらくない)。

 その昔、高橋メソッドというプレゼン手法があり、文字サイズを自動調整して、ページをテキストが覆うように巨大に表示してくれた。そうしたものを期待すると途方にくれる。

 ただ内部的には、HTMLを生成して、そこからPDFやパワーポイントのファイルを出力している。そのため、Web開発の知識があれば細かな調整ができる。Marp には、カスタムテーマとして、独自のCSSファイルを読み込むための設定も用意されている。

 とはいえ、Web開発の知識があり、マニュアルを読み込んでカスタムテーマを作れる人は少ないだろう。そこで、Marp for VS Code で、ページごとに簡単に文字サイズを調整する方法を示しておこう。

 まず、ページ右肩の真ん中のボタン(Marp のマークのボタン)を押して、[Open extension settings]を選ぶ。そして、「Enable HTML」(HTMLを有効)のチェックボックスにチェックを入れる。

 次に、文字サイズを変更したいページの冒頭に、以下の内容を入れる(<>は実際は半角)。これで、文字サイズは4倍になる。style scoped を設定すると、その領域だけにWebページのスタイルが適用になる。

<style scoped>

section { font-size: 400%; }

</style>

 縦横の中央に文字を表示したいときは、ページ内に以下の行を入れる。Marp の設定は、頭に「_」を付けると、ページ内だけで有効になる。以下の設定を加えると、冒頭で設定した「gaia」テーマの場合は、中央表示になる。

<!-- _class: lead -->

 また、CSSで指定したい場合は、以下のように書くとよい。

<style scoped>

section {

display: flex;

flex-direction: column;

flex-wrap: nowrap;

justify-content: center;

text-align: center;

}

</style>

 こうした設定をおこなえば、文字を大きくして、ページの中央に表示できる。

 まとめると、以下のようになる。

 ビジネスの場では、とりあえず短時間で、それっぽい資料を作りたいという時がよくある。ある程度パソコンに慣れている人は、こうしたツールを使って、メールを書くぐらいの感覚で、プレゼン資料を作ってみてはどうだろうか。

<文/柳井政和>

【柳井政和】

やない まさかず。クロノス・クラウン合同会社の代表社員。ゲームやアプリの開発、プログラミング系技術書や記事、マンガの執筆をおこなう。2001年オンラインソフト大賞に入賞した『めもりーくりーなー』は、累計500万ダウンロード以上。2016年、第23回松本清張賞応募作『バックドア』が最終候補となり、改題した『裏切りのプログラム ハッカー探偵 鹿敷堂桂馬』にて文藝春秋から小説家デビュー。近著は新潮社『レトロゲームファクトリー』。2019年12月に Nintendo Switch で、個人で開発した『Little Bit War(リトルビットウォー)』を出した。

関連記事(外部サイト)