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

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

2020-01-03に公開

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

スライド共有というと、

https://www.slideshare.net/
https://www.slideshare.net/

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

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

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

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

20200105130555.gif

活用したツール

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

marp-cli

20200103203951.jpg

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

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

Firebase

20200103203959.jpg

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

実装

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

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

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#React:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent: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

#歴史:2

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

©2024 tawachan All Rights Reserved.