2019/08/03 追記:
2019年現在、デスクトップアプリ版の Marp はすでに開発を中止しており、次世代版である Marp Next の開発に注力しています。デスクトップアプリはまだ使用可能ですが、すでにメンテナンスが中止されており、セキュリティに関する一部懸念も指摘されているため、デスクトップアプリ版をこれから使い始めるのは決して推奨されません。
移行先として、Marp Next の公式ツールの1つとして提供されている Visual Studio Code の拡張機能、Marp for VS Code をお勧めしています。クロスプラットフォーム・オフライン対応・ライブプレビュー・PDF出力はもちろん、新しい Marpit フレームワーク をベースとした Markdown 構文、HTML 形式や PowerPoint 形式での出力、カスタムテーマ CSS の対応など、スライド作成機能がさらに強化されています。
tech.speee.jp
こんにちは。北の双剣エンジニア 改め、エンジニアの服部 @yhatt です。
Speee のエンジニアは、様々な分野における技術スキル向上を目的として、個人で制作したプロダクトやライブラリを公開するなどの取り組みを行っています。
私 @yhatt は、そのような取り組みの1つとして、Markdown 記法でプレゼンスライドを書けるツール "Marp" をリリースいたしました。
Marpはありがたいことに、様々なメディアに取り上げていただき、非常に反響の大きなアプリとなりました。
- Marp: Markdown Presentation Writer - Hacker News
- 無料でプレゼンのスライドをマークダウン記法で作成できる「Marp」 - GIGAZINE
- Markdownだけでプレゼンテーションファイルを作成するためのエディタ『Marp』 - Macの手書き説明書
- Markdownでプレゼンテーションを作成出来る日本国産のオープンソースソフトウェア・「Marp」- かちびと.net
この場を借りて、開発の経緯などをご紹介させていただきます。
Marp - Markdown presentation writer
https://yhatt.github.io/marp/
Marp とは？
Marp は、Markdown 記法を使用して、プレゼンテーション用のスライド PDF を作成するためのアプリケーションです。
特徴
- クロスプラットフォーム (Windows, Mac, Linux)
- 3種類のライブプレビューでスライド内容を確認可能
- 作成したスライドを PDF に出力
- テーマの切り替えが可能 (Default, Gaia)
こんなスライドができます
開発の経緯
背景
『Markdown でスライドを書く』という目的のツールは意外と多く存在します。
有名どころでは、Deckset (Mac用アプリ)、reveal.js (HTML用スライドフレームワーク)、Pandoc (ドキュメント形式変換ツール)、rabbit (Rubyist向けプレゼンツール) など。社内でも Deckset を愛用する方々がちらほらと見受けられます。
一方で、Speee ではエンジニア以外にも Markdown が浸透しており、そのような方々にとっても『Markdown でスライドを書きたい』というニーズはやはり存在していました。
しかし、先ほど上げたようなツールは、言語仕様・周辺知識を理解していないと使えなかったり、開発関連ツール (TeX, Ruby など) を別途入れる必要がある など、エンジニア以外からすれば 利用の障壁が高い ツールです。
Deckset は唯一の例外ですが、エンジニア以外の社員の多くが Windows 環境という点を考慮すると、これも候補から外れ、要求を満たすツールが無くなってしまいます。
このような要求を満たすべく、以下の要件で Markdown スライド作成ツールの開発に着手しました。
- Markdown 記法 (+α) さえ知ってれば、これ1つでスライドができる
- クロスプラットフォーム（最低でも Windows, macOS に対応）
- 別途外部ツールを必要とせず PDF に変換できる
- オフラインでも使用できる（＝ネイティブアプリケーション）
Electron の採用
この開発にあたり、GitHub によりリリースされた、クロスプラットフォームなデスクトップアプリケーションを作成できるフレームワーク Electron を採用しました。
Node.js と Chromium を利用し、Web の知識 (HTML + CSS + JavaScript) のみでデスクトップ用アプリを開発できるのが大きな特徴で、今回の開発でも大きなアドバンテージとなりました。Atom、Slack、Visual Stuio Code なども Electron で作成されています。
Electron の持つ機能は、先に挙げたシステム要件を全て満たすだけでなく、
- 実務経験のある Web 技術をそのまま活用できる
- 既に多くのプロダクトで実績がある
- フロントエンドの良い勉強機会になる
といった点でも今回のプロダクトに都合が良く、Electron を選定した決め手になりました。
欲張り過ぎない
本来は、フロントエンド界隈で名の知れたツール達 (Babel, Webpack, React, etc...) を上手く使い、エレガントなアプリができればよかったのですが、あいにく私には、それらを使いこなせるだけのスキルが足りません。
そのため、まずは変化の激しい Electron と上手に付き合う事だけに集中 し、JavaScript 周りの実装は、実務経験のある CoffeeScript や、 jQuery、gulp のようなトラディショナルなライブラリで進めました。
唯一 CSS 関連については、ライブプレビューを実装するため、CSS Variables など、比較的新しめの CSS3 機能を活用しています。
反響
勉強期間
最初のリリースから3ヶ月ほどは、自身の勉強を兼ねた個人プロダクトということもあり、社内の要望等をベースにしつつ、比較的マイペースで開発していました。
開発の所感については、Qiita の記事として公開 していますので、ぜひこちらもご覧ください。
Electron で Markdownプレゼン作成ツールを作って公開するまで
http://qiita.com/yhatt/items/0bf65699a538d5508c33
突然の反響
2016年7月13日、Hacker News にて Marp が掲載された ことをきっかけに、非常に多くの反響を頂きました。
Marp: Markdown Presentation Writer | Hacker News:
https://news.ycombinator.com/item?id=12079671
社内では、朝からちょっとした騒ぎに。
Marp のリポジトリ に対する Star も 1日中止まらず、GitHub のトレンド入り を果たしました。当時は アポロ11号のソースコード が話題になってましたが、その次に Marp が！
数多くの Issue や Pull Request が Marp に寄せられ、たった1日で想像を絶する反響があったことに、誰よりも私が一番驚いています。
あまりにも突然だったため、記事を書いている時点では、これらの声に対応しきれていませんが、このような反響のおかげで、 Marp が個人の勉強の範疇を超え、 OSS として価値のあるプロジェクト であることを実感しました。
所感
英語を恐れない
オープンソースにすることは、リリースにあたっての前提条件でもあったので、日本語は原則封印 しました。
多少文法が間違ってようが、ニュアンスさえ伝われば、ちゃんとコミュニケーションできるので、『英語を恐れない』 ことが鍵であると改めて感じています。
特に Marp の場合は、README などに英語ネイティブの方々から添削 PR が来るなど、私自身も非常に勉強になりました。
ライブラリー制度
Speee には ライブラリー制度 があり、オライリー本を始めとして、技術書が豊富に揃っています。もちろん、JavaScript 関連の書籍も数多く蔵書しています。
Node.js 上の JavaScript アプリケーション作成経験が無い私にとっては、こういった社内制度で、新しい知識を学べる環境にあったことも、Marp の開発を支えた一因だったと思います。
今後の Marp について
Marp は、今後も Electron と寄り添って開発を続けていく予定です。
現在はまだ ver 0.0.8 ということもあり、まずは正式バージョンリリースに向け、ロードマップを明確にした上で、要望の多い機能を中心に実装を進めていきたいと思います。
その先の野望として、フロントエンドのモダン化 (ES2015, React, AVA など) もありますが、まずは私もそれらのスキルを身につけれなければいけないので、並行して勉強を進めていきたいと思います。
興味のある方は、 https://github.com/yhatt/marp を覗いてみて下さい。
2019/08/03 追記:
以降の内容は 2016 年当時の内容で、現在は利用を決して推奨しておりません。 新しい Marp Next で提供されているツールを利用することをお勧めします。
How to Marp
ダウンロード
Mac の場合、「開発元が未確認のため～」の表示が出て、起動できない場合があります。この場合、 Control + クリック でメニューから「開く」を選択して起動してください。参考...
使い方
GIGAZINE さんの記事 にて、図説付きで非常に分かりやすく紹介していただきましたので、こちらを是非ご一読ください。
無料でプレゼンのスライドをマークダウン記法で作成できる「Marp」
http://gigazine.net/news/20160713-marp/
