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

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Visual Studio Codeで作るLT資料 〜 脱パワーポイント

はじめに

SoftwareDesign 11月号のVisual Studio Code快適生活という記事の中で、VS Codeでプレゼンテーションを考えてみるという話があり、面白そうだったので試してみました。

LT資料をサクッと作ってしまいたい、発表時にはソースコードを交えながら話したいという思いを実現します。

本記事で使用したファイルは、GitHubにアップロードしております。

環境

  • VS Code 1.38
    VS Codeをインストールしていない人は公式ページからインストールしましょう

本記事で登場するVS Codeプラグイン

  • Marp for VS Code
  • vscode-reveal
  • Presentation Mode

VS CodeでのLT資料作成

パワーポイントを使わずに、マークダウンでLT資料を作成します。
ここでは2つのプラグインを紹介します。

Marp for VS Code

Markdown形式のファイルをプレゼンテーション用のスライドに変換してくれます。PDFに書き出す事もできます。

インストールする

スクリーンショット 2019-11-03 17.24.57.png

スライド(.md)を作成する

先頭にYAMLヘッダを記述するだけです。
細かな設定を知りたい方は、Marp公式ページをご覧ください。

---
marp: true
header: 'header text'
footer: 'footer text'
---
<!-- $theme: gaia -->
<!-- $size: 16:9 -->
<!-- page_number: true -->
<!-- paginate: true -->

今回は以下のファイルを作成しました。

slide.md
---
marp: true
header: 'header text'
footer: 'footer text'
---
<!-- $theme: gaia -->
<!-- $size: 16:9 -->
<!-- page_number: true -->
<!-- paginate: true -->

# Marp for VS Code スライドサンプル

***@gonkunkun***

--- 

## もくじ

1. Marp for VS Codeとは
2. 使い方
3. ユースケース

---

## 1. Marp for VS Codeとは

- VS Codeの拡張機能
  マークダウンでスライドが作れる

---

## 2. 使い方

1. リスト
2. 背景画像

---

## 2.1 リスト

- One
- Two
- Three

---

## 2.2 背景画像

![bg right](https://picsum.photos/720?image=29)

---

## 3. ユースケース

- ほげほげ

プレビューを表示する

VS Code上からmdファイルを右クリックしてOpen Previewを選択
スクリーンショット 2019-11-03 17.37.14.png

こんな感じでスライドが作成できます。
スクリーンショット 2019-11-03 17.37.33.png

作ったスライドをPDFで出力

青い三角のアイコンをクリックして、Export slide deck...を選択
スクリーンショット 2019-11-03 17.42.54.png

vscode-reveal

Marp for VS Codeを使用してスライドを作成することはできました。しかし、Marpでは作成したスライドをVS Code上に投影することができません。そこで、vscode-reveal(プラグイン)を使用します。
(私が知らないだけですが・・・ VS Code上に投影する良い方法知っている方がいれば、コメントで教えていただければ幸いです)

インストールする

スクリーンショット 2019-11-03 17.55.39.png

スライド(.md)を作成する

先頭にYAMLヘッダに以下を追記します。ファイル自体はYAMLヘッダを変更しただけです。気になる方はGithubリポジトリのslide-reveal.mdをご確認ください。
細かな設定を知りたい方は、こちらをご覧ください。

---
theme: "black"
transition: "none"
---
VS Code上でプレゼンテーションを実施する

コマンドパレットを表示して、Revealjs: Show Presentation by sideを選択します。
コマンドパレットはCtrl + Shift + pで表示できます。
スクリーンショット 2019-11-03 18.03.54.png

こんな感じで、VS Code上でスライドを表示できるようになります。
スクリーンショット 2019-11-03 18.05.22.png

Presentation Mode

VS Code上でスライドを表示できるようになると、このスライドを全画面表示できるようにならないのかな…と考えます。そこで使用するのがPresentation Mode(プラグイン)です。
VS Codeをプレゼンテーション用に全画面に表示することができます。

インストールする

スクリーンショット 2019-11-03 18.12.16.png

プレゼンテーション用に表示してみる

先程のスライドを全画面で表示してみます。
コマンドパレットを表示して、Presentation Modeを選択

全画面表示になりました
スクリーンショット 2019-11-03 18.16.38.png

全画面表示から戻す場合には、再度コマンドパレットを表示して、Presentation Modeを選択します。

ソースコードの共有

同じ要領で、ソースコードを全画面表示にすることで、発表中にコードを見せながら解説する際にも活用できます。
スクリーンショット 2019-11-03 18.23.11.png

終わりに

LT資料をサクッと作って、サクッと発表するために、以下のVS Codeを使用しました。

  • Marp for VS Code:スライド作成 + PDFで出力
  • vscode-reveal:VS Code上でプレゼンテーション
  • Presentation Mode:VS Codeで全画面表示 + プレゼン, ソースコード共有

パワーポイントを使わずともマークダウンでスライドを作成できるのはとても便利だなと思いました。複雑な図表の作成、図表の細かな位置の調整等が必要な場合には不向きですが、LTのようにメッセージをスライドに並べてサクッと発表する場合には使えるのではないかと思います。

皆さんもVS CodeでLT資料の作成・発表をしてみてはいかがでしょうか。

gogogonkun
毎日分からないことだらけの駆け出しSEです。
perches
東京を拠点とした初心者向けのプログラミングサークルです。年6回ほどハッカソンを主催しています。
https://perches.github.io
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