プレゼン作成を手軽に！Markdown をプレゼン用の形式に変換する無料ツール3選
以前の記事「ドキュメントを変える！Markdownの様々な活用法とおすすめツール」でも取り上げましたように、 Markdown 形式でドキュメントを書くことが増えてきており、記事で取り上げて以降さらにエンジニアの間で広がっているようにも感じます。
そうなると「 Markdown を HTML 以外のいろいろな形式に変換したい」考えたくなります。特に、プレゼンテーションを行うのに適した形式に変換したいという需要が多いように感じます。その需要に応えるための変換ツール、ライブラリも数多くありますが、今回はそのうち3つをピックアップしてそれぞれの特徴を分析いたします。
なお、今回サンプルとして以下の Markdown 文書を変換いたします。
# Markdownサンプル
## その1
* 吾輩は猫である。
* 名前はまだ無い。
* どこで生れたかとんと見当がつかぬ。
* 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
* 吾輩はここで始めて人間というものを見た。
## その2
### 冒頭
* メロスは激怒した。
* 必ず、かの邪智暴虐の王を除かなければならぬと決意した。
### その次
* メロスには政治がわからぬ。
* メロスは、村の牧人である。
* 笛を吹き、羊と遊んで暮して来た。
* けれども邪悪に対しては、人一倍に敏感であった。
## その3
```
document.write("Hello world!");
```Marp
株式会社 Speee の服部さんが開発された日本製のアプリです。Atom や VisualStudio Code と同じ Electron をベースに開発されたもので、各ニュースメディアでも紹介されました。Windows、Mac、Linux で使用することができます。
サイトからアプリケーションをダウンロード、インストールして起動すると、左側に Markdown 入力画面、右側に変換後のプレゼンテーション出力画面が表示されます。
プレゼンテーションの改ページを行いたい部分は、Markdown の文書中に「—」を入れることで改ページが行われます。
作成されたプレゼンテーションはメニューから簡単に PDF へ変換することができます。
作成したプレゼンテーションサンプル( PDF )
使用してみての所感
アプリを起動し、Markdown を入力すればその場で出力結果を確認できるので非常に簡単に始めることができます。その反面、実際にプレゼンテーションを行うにはPDFへの変換が必要であること、テーマが2種類しかなくデザインの自由度が少ないことなどの短所も挙げられますが、デザインにこだわらずシンプルに文書をプレゼンテーションに変換するだけで良いのであれば Marp は十分利用価値があると言って良いでしょう。
作者の服部さんは Electron の勉強を兼ねて作られたそうですが、完成度はかなり高いです。
reveal.js
https://github.com/hakimel/reveal.js/
スウェーデンの Hakim El Hattab さんが開発したフレームワークです。HTML を CSS や JavaScript によってプレゼンテーションとして適した表示形式に変換するためのものですが、プレゼンテーションの本文を Markdown で記述することも可能です。変換したプレゼンテーション( HTML 形式)はブラウザで表示することも PDF に変換することも可能です。
link タグや script タグであらかじめ所定の CSS や JavaScript ファイルを設定する必要がありますが、わからない場合は GitHub のサイトから zip でダウンロードし、解凍した中にある index.html を利用して編集するのが一番手っ取り早いでしょう。
HTMLファイルの <div class=”slides”> タグ内にある各 section タグに各ページの内容を記述していきます。 Markdown で記述する場合は、 section タグに data-markdown 属性を設定し、その内部の data-template 属性を付加した textarea タグ内に Marddown 文書を記載していきます。
section タグに data-separator 属性を設定することにより、Marp 同様に改ページを設定することが可能となります。
サンプルコード(抜粋)
<div class="reveal">
<div class="slides">
<section data-markdown data-separator="^\n---$">
<textarea data-template>
# Markdownサンプル
---
## その1
：
</textarea>
</section>
</div>
</div>作成したプレゼンテーションサンプル( PDF )
使用してみての所感
テンプレート、および記述方法に慣れれば意外と簡単にプレゼンテーションを作成することができます。作成の簡単さや編集時の反映確認の手軽さでは Marp の方が勝りますが、オプションが豊富でプレゼンテーションを行うためのさまざまな設定が可能です。さらに、テーマファイルも豊富で CSS をカスタマイズすれば自分好みのデザインにすることも可能なので自由度が非常に高いです。
また、HTML 形式のプレゼンテーションをブラウザで表示した時はページ移動時のアニメーションもデフォルトで設定されており、これだけでもプレゼンテーションとしての視覚的なインパクトがあります。
難点を挙げるとすれば CSS や JavaScript ファイルのダウンロードや設定が必要な点でしょうか。ただ、これは一度設定すればあとはほぼ不要なので気にならないかと思います。
remark
https://github.com/gnab/remark
ノルウェーの Ole Petter Bang さんが開発されたフレームワーク。先ほどの reveal.js 同様に HTML ファイル内にプレゼンテーション本文を記載していくのですが、こちらは本文の記述について Markdown 形式に特化したものとなっています。
body タグ内に <textarea id=”source”> タグを設定し、textarea タグ内は冒頭に class 設定を、その後は Markdown を書いていくだけです。改ページは Marp 同様に「—」です。
サンプルコード(抜粋)
<body>
&ht;textarea id="source">
class: center, middle
# Markdownサンプル
---
## その1
：
&ht;/textarea>
：
(スクリプト設定部)
：
</body>使用してみての所感
scriptタグの src 属性で読み込む JavaScript は remarkjs.com から読み込むことも可能なので、その場合はあらかじめ JavaScript ファイルを用意する必要がありません。そのため、心理的なハードルは reveal.js より少し低いでしょう。
もちろん起動時のオプションもあり、CSS の独自設定も可能です。ただ、オプションの豊富さ、自由度としては reveal.js の方が若干高い印象があります。
なお、PDF 形式でのエクスポートは別途 DeckTape をインストールする必要がありますので注意が必要です。
まとめ
今回は Markdown でプレゼンテーションを行うための変換ツールを3つ紹介しましたが、導入のしやすさでは Marp 、設定の自由度の高さでは reveal.js、それぞれのいいとこ取りをした remark といった印象を受けました。
もちろん今回紹介した3つ以外にもさまざまな変換ツールがあります。用途に応じて自分に合ったツールを使って業務に役立てていきましょう！
記事を検索
-
お問い合わせ
SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。 -
コンサルティング
ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。
今すぐお気軽に
ご相談ください。
（平日 10:00~19:00）
今すぐお気軽に
ご相談ください。
0120-315-465
（平日 10:00~19:00）
グラッドキューブは
「ISMS認証」を取得しています。
認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業
「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。