Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
57
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@ta9star

LTのスライド作成に時間をかけたくない

きっかけ

いつもLTを行うとき
メモ帳でスライドに書くべき内容をまとめたうえで、パワーポイントを作成していた。
これを"もっと楽にしたい"という思いから本記事に手法をまとめた。
プレゼンテーション1.jpg

今回の目標

.md形式でかいたらスライドが自動で作成される。
qiita_marp.md-Visual-Studio-Code-2019-12-23-15-42-26.gif

解決策

調べてみるとツールはたくさん存在した。

  • reveal.js
  • remark.js
  • Marp
  • Swipe
  • Qiita

etc...
参考:[ Markdownでスライド作成 ] 5種類くらいツールを試してみた結果


今回はMarpを採用した
採用理由は以下

  • デザイン性
  • 拡張性
  • VSCode上でできる

Marpでなにができるのか

  • md記法でスライドがかける
  • 独自のディレクティブを記述できる
    • ページ番号表示
    • スライドの高さ・幅・縦横比の指定
    • テーマの変更
    • 背景色/文字色等の変更
    • ヘッダー/フッターの表示
    • 背景画像や画像の表示比率等の指定
    • 数式の表示
    • CSSによるカスタマイズ

など

Marpってなに?

yhattさんが作成されているツール。
GitHubにソースコードが公開されている。

インストール

今回はVSCodeのプラグインであるMarp for VS Codeを使用した。

アプリケーション等も用意されているので、VSCode上でやりたくない人は各自で。

使い方

スライドの確認

.mdファイルを作成→プレビュー表示
qiita_marp.md-Visual-Studio-Code-2019-12-23-16-04-38.gif

スライドに変換したい

対応フォーマット

  • PDF
  • HTML
  • PowerPoint
  • PNG (First slide only)
  • JPEG (First slide only)

Marp Commandをクリック
qiita_marp.md-Visual-Studio-Code-2019-12-23-16-07-29.gif

テンプレート

---
marp: true

---
<!-- 
theme: default
size: 16:9
paginate: true
style: |
  section {
    background-color: #FFFFFF;
  }
-->
# 1st page

---

## 2nd page

### The content of 2nd page

---

# 3rd page

Directives

MarpはDirectivesを使用することで、スライドの作成をサポートできる。

Global directives

スライド全体の設定値。
同じGlobal directivesを何度も記述した場合、最後の値のみを認識する。

  • テーマの指定
  • テーマスタイルの調整
  • スライドの分割オプション

テーマの切替

テーマは2種類が選択できる。
カスタマイズすることも可能。

Default
<!-- theme: default -->
Gaia
<!-- theme: gaia -->

テーマスタイルの調整

CSSでテーマの調整ができる。

Style
<!-- 
style: |
  section {
    background-color: #111111;
  }
-->

スライドの分割オプション (HeadingDivider)

見出しの前にスライドページを自動的に分割するように指示できる。

RegularSyntax
# 1st page

---

## 2nd page
### The content of 2nd page

---

# 3rd page
HeadingDivider
<!-- headingDivider: 2 -->
# 1st page

## 2nd page

### The content of 2nd page

# 3rd page

Local directives

スライドページごとの設定値。定義されたページ及び後続のページに適用される。

  • ページ数の表示
  • ヘッダーの表示
  • フッターの表示
  • 背景色の指定
  • 文字色の指定

etc...

単一のページに適用させる

現在のページにのみLocal Directivesを適用する場合は、
directivesの名前の前に_(アンダーバー)をつける。

<!-- _backgroundColor: black -->

ページ数の表示

trueに設定すると、スライド右下にページ番号が表示される。

Paginate
<!-- paginate: true -->

ヘッダーの表示

スライド左上に任意のヘッダー文字を表示できる。

Header
<!-- header: This is a header -->

フッターの表示

スライド左下に任意のフッター文字を表示できる。

Footer
<!-- footer: This is a footer -->

背景色の変更

任意の背景色に変更することができる。

BackgroundColor
<!-- backgroundColor: black -->

文字色の変更

任意の文字色に変更することができる。

Color
<!-- color: white -->

その他の機能

画像表示

参考:Image syntax

* 背景画像に設定する
![bg](picture.png)

* 画像サイズの比率を設定する
![60%](picture.png)

*サイズを自動調整する
![fit](picture.png)

* 空白区切りで複数指定
![bg 60%](picture.png)

数式の表示

KaTeX形式で数式を記載することができる。
\$でインライン表示、\$$でブロック表示する。

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

スライドのアスペクト比・サイズの指定

スライドのサイズを変更できる。
デフォルトはsize: 4:3で設定されている。

<!-- size: 16:9 -->

<!-- width: 12in -->
<!-- height: 6in -->

終わりに

LTのスライド作成に時間をかけたくない!!
という思いから本記事を書かせていただきました。
これを使用するようになってから
快適なLTライフを行えるようになったと感じています。
皆様も是非お試しください。


アドベントカレンダーについて

CA Tech Dojo/Challenge/JOB Advent Calendar 2019の24日目は
@ta9starが書かせていただきました。
CATechDojoからはじまり、現在はCATechJobをさせていただいています。
インターンシップ期間中はずっとGolangを使った開発ができていて楽しいです。
明日はCATechDojo仲間の@yawn_yawn_yawn_
面白い記事で締めてくれると思います。
是非見てみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
57
Help us understand the problem. What are the problem?