はじめに
こんにちは、AIと個人開発をテーマに活動しているK（@kdevelopk）です。
この度、私が個人開発したWebアプリケーション「Web Slide Editor」を公開しました。本記事では、このアプリの紹介と、開発で工夫した技術的なポイントについて解説します。
Web Slide Editorは、Markdown記法で手軽にスライドを作成し、MarpやReveal.jsなど、8種類の異なるスライドフレームワークのプレビューをリアルタイムで確認できるWebエディタです。
Web Slide Editorとは？
従来のプレゼンテーション作成ツールは、GUI操作が中心で、特にエンジニアにとっては「コードを書くように」スライドを作成する体験が不足していました。また、Markdownベースのスライド作成ツールはいくつかありますが、それぞれが特定のフレームワーク（例：Marp、Reveal.js）に特化しており、複数のフレームワークを比較したり、用途に応じて切り替えたりするのが面倒でした。
Web Slide Editorは、この課題を解決するために開発されました。
アプリケーション概要
| 項目 | 詳細 |
|---|---|
| アプリ名 | Web Slide Editor |
| URL | https://web-slide-editor.vercel.app/ |
| 開発者 | K (@kdevelopk) |
| 主な機能 | Markdown/HTMLによるスライド作成、リアルタイムプレビュー、8種類のフレームワーク切り替え、PDFエクスポート、テーマ切替（ダーク/ライト）、ファイル管理 |
主要な特徴と技術的な工夫
1. 8つのスライドフレームワークを統合
本アプリの最大の特徴は、8種類の主要なWebスライドフレームワーク（Marp、Reveal.js、Slidev、Remark、WebSlides、Shower、Impress、Bespoke）に対応している点です。
これは、ユーザーが同じMarkdownコードを使いながら、各フレームワークが持つ独自の表現力やトランジション効果を瞬時に比較検討できることを意味します。
技術的な工夫:
- 動的なレンダリングエンジンの切り替え: エディタに入力されたMarkdownを、選択されたフレームワークのレンダリングエンジンに動的に渡し、プレビューエリアに表示する仕組みを構築しました。
- Marpの強力なテンプレート群: 特にMarpについては、「技術発表」「スタートアップピッチ」「KPT（振り返り）」「コンサル報告」など、実用的なテンプレートを豊富に用意し、すぐにプロフェッショナルなスライド作成に取り掛かれるようにしました。
2. 快適なコーディング体験を提供するエディタ
スライドのMarkdown/HTMLを記述するエディタ部分には、Microsoft製の高機能なコードエディタであるMonaco Editorを採用しました。
- リアルタイムプレビュー: 入力と同時に右側のプレビューが更新されるため、視覚的なフィードバックを得ながら効率的に作業できます。
- ダーク/ライトテーマ対応: 開発者が好むダークテーマと、プレゼンテーションに適したライトテーマの切り替え機能を実装しました。
- Markdown補助機能: 太字、見出し、コードブロック、表作成など、Markdown記法をサポートするボタン群を配置し、入力の手間を軽減しています。
3. PDFエクスポートとファイル管理
作成したスライドは、ブラウザの印刷機能を利用してPDFとしてエクスポートできます。これにより、オフラインでの共有や印刷にも対応可能です。
また、ローカルストレージを利用した簡易的なファイル管理機能を実装しており、作成中のファイルをブラウザ内に保存・削除できます。
利用技術スタック
本アプリケーションは、モダンなWeb技術スタックで構築されています。
| カテゴリ | 技術名 | 採用理由/コメント |
|---|---|---|
| フロントエンド | Next.js / React (推測) | Vercelへのデプロイとモダンな開発体験のため。 |
| エディタ | Monaco Editor | VS Codeと同じ高機能なエディタ体験を提供するため。 |
| スライドエンジン | Marp, Reveal.js, etc. | 8種類のフレームワークを統合し、多様な表現を可能にするため。 |
| デプロイ | Vercel | 高速なデプロイとホスティングのため。 |
開発の裏側と今後の展望
開発の動機
私自身、技術的な発表資料を作成する際に、デザインに時間をかけたくない、しかし表現力は妥協したくないというジレンマを抱えていました。このアプリは、Markdownのシンプルさと、複数の強力なフレームワークの柔軟性を組み合わせることで、このジレンマを解消することを目指しました。
今後の展望
- クラウド保存機能: ローカルストレージだけでなく、GitHubやクラウドストレージへの保存・同期機能。
- 共同編集機能: 複数人でのスライド共同編集機能。
- カスタムテーマ機能: ユーザーが独自のCSSでテーマをカスタマイズできる機能。
おわりに
「Web Slide Editor」は、エンジニアや技術者がより快適に、そして表現豊かにスライドを作成するためのツールです。ぜひ一度お試しいただき、フィードバックをいただけると嬉しいです。
アプリへのアクセスはこちらから: https://web-slide-editor.vercel.app/
開発者KのXアカウントはこちらです。AIと個人開発に関する情報を発信していますので、フォローをお願いします！
謝辞
本アプリケーションは、Marp、Reveal.jsをはじめとする素晴らしいオープンソースプロジェクトの恩恵を受けています。開発者の皆様に感謝申し上げます。
参考文献
[1]: Web Slide Editor - Markdown & HTML - https://web-slide-editor.vercel.app/
[2]: K / AI x 個人開発 (@kdevelopk) / X - https://x.com/kdevelopk