Marple
Web ベースの Marp スライドエディタ
ローカル環境不要でブラウザ上から直感的に Marp スライドを作成できる GUI エディタ。AI アシスタントと Git スタイルのバージョン管理を搭載。
Overview
プロジェクト概要
Marple は、Markdown でスライドを作成できる Marp を、誰でもブラウザ上から使えるようにした Web アプリケーションです。従来の Marp は VSCode 拡張機能や CLI のセットアップが必要で、非エンジニアには敷居が高いという課題がありました。Marple ではそのセットアップを完全に排除し、ブラウザを開くだけで高品質なスライドを作成できる環境を提供しています。
開発背景
「スライドを Markdown で書きたいが、ローカル環境を用意するのが面倒」という声を受けて開発を開始しました。特にチームでの利用や、エンジニア以外のメンバーがプレゼン資料を作成するシーンで、ツールの導入コストが障壁になっていました。
Features
主な機能
リアルタイムプレビュー
スプリットスクリーンの編集インターフェースにより、Markdown を入力すると即座にスライドのプレビューが更新されます。コンパイルや手動更新は不要です。
AI アシスタント
OpenAI API を活用した AI が、スライド構成の提案・コンテンツの自動生成・コミットメッセージの作成をサポート。アイデアを素早く形にできます。
Git スタイルのバージョン管理
変更履歴が自動で記録され、いつでも以前のバージョンに安全にロールバックできます。破壊的な変更を恐れず、試行錯誤しながら制作できます。
ワンクリックエクスポート
完成したスライドを PDF または PPTX 形式でワンクリックでエクスポート。そのまま発表やシェアに使える状態で出力されます。
Tech
技術スタック
Frontend
- Next.js
- TypeScript
- Tailwind CSS
Slide Engine
- Marp Core
AI
- OpenAI API (GPT-4o)
Infrastructure
- Cloudflare Pages
Challenges
工夫した点・課題
最大の課題は、ブラウザ上でリアルタイムに Marp のレンダリングを行いながら、AI との連携やバージョン管理のステートを整合性を保って管理することでした。特にバージョン管理の差分計算とロールバック処理のロジックを独自に設計・実装する部分に多くの時間を費やしました。
Outcome
成果
HackUniv のプロジェクトとして開発・公開し、ローカル環境なしでブラウザ上から Marp を扱える環境の提供に成功しました。AI 機能とバージョン管理の組み合わせにより、スライド制作のワークフローを大幅に効率化しています。