概要
所属会社のTech meet up #1で、開発者向けプレゼンテーションツール「Slidev」について発表しました。Markdownでスライドを作成できるこのツールの基本機能から高度な機能まで、実際のデモを交えながら紹介しました。
カバーしたトピック
- Slidevの基本概念: Markdownでスライドを作成するメリット
- 主要機能: プレゼンターモード、リアルタイムプレビュー、テーマシステム
- 基本構文: Markdown記法、レイアウト、コードハイライト
- 高度な機能: アニメーション、トランジション、Vueコンポーネントの統合
- 実装例: LaTeX数式、Mermaid図表、ドラッグ可能要素
デモ内容
基本機能のデモ
- Markdown記法によるスライド作成
- 各種レイアウト（center、cover、two-cols、image、iframeなど）の実演
- Monaco Editorを使ったライブコーディング
- コードハイライト機能の紹介
高度な機能のデモ
- CSS/Tailwindによるスタイリングのカスタマイズ
- Vue.jsのmotionライブラリを使用したアニメーション
- ドラッグ＆ドロップ可能な要素の実装
- Twitterウィジェットなどの外部コンポーネント統合
技術的な詳細
Slidevの特徴
- Vue.jsベースの設計
- Viteによる高速な開発体験
- WindiCSS（Tailwind CSS互換）による柔軟なスタイリング
- KaTeXによるLaTeX数式サポート
- Mermaid.jsとPlantUMLによる図表作成
実装のポイント
- リアルタイムプレビューによる効率的な作業フロー
- プレゼンターモードでの発表者ノート機能
- スライドのインポート/エクスポート機能
- GitHub ActionsによるGitHub Pagesへの自動デプロイ
フィードバック
参加者から以下のような反応をいただきました：
- 「GoogleスライドやCanvaと比べて、エンジニアにとって使いやすそう」
- 「コードブロックやアニメーションの実装が簡単で驚いた」
- 「社内の技術共有会でも使ってみたい」
- 「CSSを書ける人にとっては自由度が高くて良い」
リソース
- Slidev公式サイト
- SlideCollection - 複数スライド管理のサンプルリポジトリ
- Anthony Fu - Slidev開発者のGitHub
この発表を通じて、開発者にとって馴染みやすいMarkdownを使ったスライド作成の新しい選択肢を提示できました。特に、コードを書くようにスライドを作成できる点が好評で、多くの参加者から「早速試してみたい」という声をいただきました。