Marp というVS Codeでスライドを書けるツールの紹介。 in 小江戸らぐ 2020年7月のオフな集まり

1. Marp for VS Codeで作るPowerPoint スライド
in ⼩江⼾らぐ2020年7⽉のオフな集まり
Иосиф Такакура (Iosif Takakura)
@huideyeren
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 1

2. はじめに
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 2

3. お前誰よ
1981年⽣まれの就職氷河期世代。
普段は横浜でWindowsでC#とSQLを書いているエンジニア
社会⼈になってプログラミングを始めた
こだわりの強いうっかりさんな
どこかカウボーイエンジニアの気がある
いわゆる発達障害(ADHD & ⾃閉スペクトラム障害)当事者
でも「やさしさ」は忘れたくない
いろいろと「オタク」
評論サークル「恢徳堂」主筆
TRPG のようなWeb ゲームでシナリオを書いていたりもします
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 3

4. 近況報告
仕事：プロジェクトが⼤詰めなう
Windows PC ⾃作予定です
もちろんWSL2 使います
テレワークできていません
シンクライアントシステム提案したいです
PyCon JP 2020 のスタッフもやってたり……
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 4

5. Marp
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 5

6. Marpとは
"Markdown Presentation Ecosystem"
MIT ライセンス
以下の4つのツールがある
Marp for VS Code
Marp CLI
Marp Core
Marpit framework
どこかReveal.js と似ている
Header とFooter を付けられる
CSS でテーマを作ることができる
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 6

7. Marp for VS Code
Visual Studio Code で書ける
PDF のみならずPowerPoint にも出⼒可能
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 7

8. 使い⽅
ほぼReveal.js そのまま
⾒出しを付けて、区切り線で区切って……
ノートは作れなさそう
背景画像も設定可能
右半分や左半分に画像を表⽰させることもできる
ただしヘッダーやフッターを設定すると画像で切れる
詳しくは公式ドキュメントを⾒てみるとよい
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 8

9. Markdown を書いている画⾯
こんな感じ！
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 9

10. PDF やPowerPoint にインポートしてみる
1. Markdown を書く
2. Marp のアイコン をクリック
3. "Export slide deck..." を選択
4. 保存場所と形式を選択
5. PDF やPowerPoint が開かれる
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 10

11. ただし画像である
エクスポートされた資料は……画像！
再編集できないことが判明。
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 11

12. ご清聴ありがとうございました
Marp for VS Codeで作るPowerPoint スライドby Iosif Takakura
この作品はクリエイティブ・コモンズ表⽰4.0 国際ライセンスの下に提供されています。 12