飽き性の頭の中
marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を効率化。のサムネイル
IT技術メモ

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

2020-01-03
# Markdown

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

スライド共有というと、

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

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

Yusuke Otawa (@tawachan) on Speaker Deck

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

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

20200105130555.gif

活用したツール

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

marp-cli

20200103203951.jpg

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

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

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

Firebase

20200103203959.jpg

買収されて現在は 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 で記述

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

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

関連記事


タグ一覧

# 福岡:39# 東京:19# 移住:10# エナジードリンク:9# 大学院:9# Google:8# ブロックチェーン:8# Webエンジニア:7# Mac:6# Sony:6# Apple:5# Googleフォト:5# インドネシア:5# サントリー:5# 埼玉:5# 英語:5# AWS:4# Canon:4# EOS 8000D:4# Kindle:4# ZONe:4# 京都:4# 仮想通貨:4# 鴨川シーワールド:4# Docker:3# EOS8000D:3# Lightroom:3# Markdown:3# Pixel:3# React Native:3# iPad:3# iPad mini:3# アマルティア・セン:3# アメリカ:3# セブンイレブン:3# ラーメン:3# レッドブル:3# 卒業旅行:3# 紅葉:3# 長崎:3# API:2# ECR:2# ERC20:2# Expo.io:2# Firebase:2# Kindle Oasis:2# Kindle Paperwhite:2# LINE:2# MacBook Pro:2# NestJS:2# Next.js:2# Notion:2# Oculus:2# Oculus Quest:2# Pixel Buds:2# React:2# a7iii:2# iPhone:2# pandoc:2# re:Invent:2# zsh:2# かき小屋:2# カフェ:2# ギグワーカー:2# サーチコンソール:2# ジャカルタ:2# スターバックス:2# ステーキ:2# スマートウォッチ:2# ソラマチ:2# チョコレート:2# ニューヨーク:2# バリ島:2# パンとエスプレッソと:2# ヒュッゲ:2# ビーチ:2# ブックスタンド:2# マクドナルド:2# ミズマチ:2# モンスターエナジー:2# ワイヤレスイヤホン:2# 三千院:2# 両国:2# 修士論文:2# 兵庫:2# 千葉:2# 博多:2# 堀江貴文:2# 宮崎:2# 寿司:2# 嵐山:2# 川越:2# 広島:2# 新宿御苑:2# 日米学生会議:2# 有馬温泉:2# 東寺:2# 歴史:2# 江ノ島:2# 清澄白河:2# 独自ドメイン:2# 社会人:2# 神奈川:2# 神戸:2# 転職:2

©2022 tawachan All Rights Reserved.