飽き性の頭の中

今は福岡でWeb開発をしている26歳。単なる文字の記録。

marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を効率化。

f:id:tawachan39:20200103214904j:plain

こんにちは、たわです。今回はmarkdownからスライドを作成し、それを自分でスライド用のウェブサイトとして公開するまでの話です。

スライド共有というと、

あたりが有名かと思います。

僕は、エンジニアの勉強会での登壇資料は、speakerdeckに公開しています。

Yusuke Otawa (@tawachan) on Speaker Deck

ですが、スライドを作るのはなかなかにめんどくさいし、デザインとかで時間を使うのもったいないものです。

なので、いつも使っているmarkdownからいい感じに作れて、そのまま公開もする流れを作ってみました。

f:id:tawachan39:20200105130555g:plain
スライドの例

活用したツール

この流れを実現するために使ったツールを紹介します。

marp-cli

f:id:tawachan39:20200103203951j:plain
marp

markdownからスライドを作るツールは色々ありますが、今回はmarp-cliを使用しました。

GitHub - marp-team/marp-cli: A CLI interface for Marp and Marpit based converters

marpはスライドを作るためのツール群でcli以外もあるのでそちらもチェックしてみると面白いと思います。

Firebase

f:id:tawachan39:20200103203959j:plain
Firebase

買収されて現在はGoogle配下にあるSaaSです。無料で静的ファイルをデプロイできるのでとても簡単なサイトを置くにはおすすめです。

実装

実装したものはテンプレートとしてGitHubにも公開しているので良かったら活用してください。

GitHub - tawachan/slides-template: marpを使用したスライドのウェブ公開用のテンプレート

あと実際に公開しているページはこちらになります。イメージが湧くと思います。

たわのスライド | slides.tawa.me

mark-cliを導入

まずmarp-cliをインストール。

yarn add -D @marp-team/marp-cli

markdownを用意

ディレクトリ構成

今回はbaseディレクトリ配下にmarkdownを置くことにしました。

./base
├── 404.md
├── index.md
└── new-page
    └── index.md

このディレクトリ構成がそのまま公開サイトのパスになるようにしました。

なので、

  • https://hoge.com -> ./base/index.md
  • https://hoge.com/new-page -> ./base/new-page/index.md

という対応になります。

該当ファイルがない場合、Firebaseはルートの404.htmlを表示する仕様なのでそれに対応する404.mdも用意しました。

markdownを書く

あとは、marpに記法に習ってmarkdownを書いていきましょう。

GitHubのテンプレートではこのようになっています。

---
title: タイトルを設定
description: 説明を設定
image: https://[domain]/[path]/index.jpg # OGPになります
# ↑ページごとに設定
marp: true
theme: base
# style: [define your style]
---
# page 1
---
# page 2

marpの記法では最初に設定を書くことができます。

titledescriptionimageは出力されるhtmlのメタデータになるので必要であれば設定してください。

またスライドのデザインや、themestyleでカスタマイズしてください。詳細はmarpの公式サイトを参照してください。

htmlを出力する

次に作成したmarkdownを基にhtmlを生成します。生成されたファイルは、./publishedディレクトリに配置されるようにします。

yarn marp -o published -I base

こうすることで、以下のようにhtmlが生成されるはずです。

published
├── 404.html
├── index.html
└── new-page
   └── index.html

画像を出力する(任意)

次にスライドの一枚目を画像として出力します。僕は個人的にスライドの一枚目をOGPの画像として使いたかったのでこれをしていますが、メタデータにこだわらない人はスキップしても問題ありません。

yarn marp --image jpeg ./base

こうすることで、./baseディレクトリ配下に画像が生成されます。

そして、それを./published配下にコピーします(かなり雑な書き方です)。

rsync -av --include='.jpg' --include='/' --exclude='*' ./base/ ./published

これで、デプロイするためのファイルは完成です。

デプロイ

Firebase Hostingを使います。

Firebase初期化

まずはインストール。

yarn add firebase-tools

次に、初期化をします。

yarn firebase init

firebase.jsonを編集

次にfirebase.jsonを編集して、./published配下をデプロイするように設定します。

{
  "hosting": {
    "public": "published",
    "ignore": [
      "firebase.json",
      "/.*",
      "/node_modules/**"
    ],
    "cleanUrls": true
  }
}

このとき、cleanUrlstrueにするのを忘れないでください。

こうすることで、hoge.htmlではなくhogeだけでもアクセスできるようになります。どちらでもよくはあるのですが、URLに.htmlは最近見ないしダサいので入れました。

デプロイ

あとはFirebaseに任せてデプロイするだけです。

yarn firebase deploy

すると1分弱待てば勝手にデプロイされていくはずです。

最後に

実際の流れはこのような形です。しかし、実際にすべての手順をやるのはめんどくさいので、package.jsonのscriptをいい感じにして、一発で変換からデプロイまでできるようにしました(GitHub参照)。

こうすることで、

  1. markdownを編集
  2. deployスクリプト実行

とするだけですぐにサイト上のスライドをすべて更新することができます。

やはりスライドを作るときは、

  • デザイン
  • 文字の配置

など内容とは関係ないことに気を使うことが多くめんどくさいですが、こうしたワークフローを整えると

  • 発表内容を構造化してmarkdownで記述

することのみに集中できるのでかなり効率よくスライドができる用になったと思っています。

これからスライドを使う発表のときにはこの環境を活用してやっていきます。よかったら参考にしてみてください。