20250514_AI 時代に備えよ！Markdown で発表スライドを作る技術

https://moneyforward.connpass.com/event/352407

Transcript

1. AI 時代に備えよ！ Markdown で発表スライドを作る技術 マネーフォワードビジネスカンパニーERP開発本部・福岡第一開発部 Technical Lead 宮村 紅葉 / Miyamura Koyo
2. 自己紹介 2
3. 自己紹介 miyamu / 宮村紅葉 @KoyoMiyamura (X) koyo-miyamura (GitHub) 推しのプログラミング言語 Elixir 出身 熊本 経歴 2019年4月 面白法人カヤックに新卒入社 2021年9月 マネーフォワード福岡拠点ガーディアングループ(CRE) 2024年12月 クラウド経費テックリード 3
4. Markdown でスライド作りたい 4
5. 富、名声、力・・・ 世はまさに大航海AI 時代！ 5
6. AI 活用に必要なもの とは？ 6
7. テキスト！ 7
8. テキストといえば みんな大好き Markdown 8
9. マークダウンでスライドを作ろうと思った Cursor や GitHub Copilot Chat などの登場によりテキストデータの重要性が増した テキストデータ = AI が認識しやすい汎用的なデータ形式 Markdown でスライドを作る方法はいくつかある 最近流行りなのは Marp Vscode 拡張もあって便利 ( Marp for VS Code ) 弊社には Google スライドのテンプレートがある 当然だが Marp 用のテンプレートはない Google スライド + Gemini でもいいが、エディタで完結させたい シームレスに Github Copilot Chat と対話的にやり取りしたい 9
10. なければ作ろう！ 10
11. Marp とは 11
12. Marp って？ マークダウンでスライドが作れる便利ツール 実はこのスライドも Marp で作っています 12
13. Marp のテーマ theme: mf_slide_template のような形式でデザインテーマを設定できる Marp 組み込みのテーマや有志が作ったテーマなど様々なものがある テーマの実体は単なる CSS Marp は各ページが <section> タグで囲まれているのでそれを利用してスタ イルを当てる 13
14. Google スライド -> Marp 14
15. Google スライドテーマ -> Marp のテーマ① 弊社には Google スライドテーマがある AI に Marp テーマへ変換させようとしたがダメだった笑 仕方なく自作 ...むずい！ ドキュメントがあまりない テーマ作成のドキュメントが薄い https://marpit.marp.app/theme-css デフォルトの @import 'default'; を継承して作るが定義がわからない https://github.com/marp-team/marp-core/blob/main/themes/default.scss に あった 既存のテーマからレイアウトを px 単位で把握するのが難しい 地道に調べる 15
16. ページ全体の大きさ 16:9 -> 1280px × 720px 16
17. 地道な計算 25.4cm x 14.29cm が基準長さ -> 全体が 1280px × 720px --> 横幅 8cm なら 8cm/25.4cm * 1280px ~= 403.1 px --> 高さ 6cm なら 6cm/14.29 * 720px ~= 302.3 px 17
18. テーマ内の要素を全部見て計算を行う 18
19. テーマカラーはスポイトで抽出 19
20. いい感じに CSS を書く 設計方針 コンテンツのスタイルは何もクラスがついてない section 要素に記載 section:not([class]) { ... } タイトルやサブタイトルなど特殊なスタイルは Markdown にクラスを明示的に 記載してもらう Marp は <!-- _class: title --> などで特定のページだけクラスをつ けることができる ちなみにスタイルを当てたりもできる section.title {} section.title h1 {} のような形でスタイル 画像は base64 変換してテーマ内に埋め込む 適宜 position: absolute; を使う わけわからなくなったら Copilot Chat に助けを求める（笑） 20
21. なんやかんやで できた！！！！！ 21
22. 実際のスライド作成風景 デモ 22
23. まとめ 23
24. まとめ Marp を使って Markdown からスライドは作れる 既存 Google スライドテーマから気合いでテーマを作った 将来的には AI が変換してくれるといいな... ちなみに私は試してみましたがダメでした 自作テーマの CSS を書くのは結構大変 Github Copilot Chat に聞いたりはできるけど基礎的な CSS の知識は必要 細かい微調整は難しい。デザインにこだわるなら素直に Google スライド 大きくこだわらないなら既存テーマを少しアレンジするくらいでも十分かも Markdown 化したことによって対話的に AI 活用できるので便利 校正してくれたり、改善案提案してくれたり ブログを AI で Marp 形式で Markdown 変換するだけでスライドができる Marp はいいぞ！ 24