Skip to content

README_ja.md

Latest commit

 

History

History
235 lines (169 loc) · 9.86 KB

README_ja.md

File metadata and controls

235 lines (169 loc) · 9.86 KB
Raw

MarkFlow Lite

ピュアフロントエンドのオンラインMarkdownエディター

License: MIT GitHub last commit GitHub issues GitHub pull requests GitHub stars GitHub forks

中文 • English • Español • Português • Deutsch

MarkFlow Liteは、ブラウザ内で完全に動作するピュアフロントエンドのMarkdownエディターで、サーバーを必要とせず、すぐに使用できるリアルタイム編集、デュアルプレビュー、ローカル保存、コンテンツ共有をサポートしています。

🌟 特徴

  • ✍️ リアルタイム編集 - 標準のMarkdown構文をサポート（表、コードブロック、リストなどを含む）
  • 👁️ リアルタイムプレビュー - 書きながら表示、数式とフローチャートのレンダリングをサポート
  • 💾 ローカルストレージ - ブラウザのローカルストレージに下書きを自動保存
  • 📄 ファイルエクスポート - PDF、HTML、Markdown形式へのエクスポートをサポート
  • 📂 ファイル管理 - 新規ドキュメントの作成、ローカルMarkdownファイルのオープンをサポート
  • 🔗 コンテンツ共有 - 固有のリンクを生成、URLパラメータ経由でコンテンツを共有可能
  • 🎨 テーマ切替 - ダーク/ライトテーマを提供、異なる読書環境に適応
  • ⌨️ ショートカット操作 - 一般的なショートカットをサポート（太字、斜体、タイトル挿入など）
  • 📱 レスポンシブデザイン - デスクトップ、タブレット、モバイル端末をサポート

📸 インターフェースプレビュー

MarkFlow Lite エディターインターフェース

MarkFlow Lite エディターインターフェース - リアルタイム編集とプレビュー機能

MarkFlow Lite プレビューインターフェース

MarkFlow Lite プレビューインターフェース - 数式とフローチャートレンダリングをサポート

MarkFlow Lite ダークテーマ

MarkFlow Lite ダークテーマ - 快適な夜間編集体験

🚀 クイックスタート

Node.js NPM

オンライン使用

MarkFlow Liteに直接アクセスして使用を開始してください。

ローカル開発

# プロジェクトをクローン
git clone https://github.com/blankzsh/markflow-lite.git

# プロジェクトディレクトリに移動
cd markflow-lite

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run dev

# 本番ビルド
npm run build

# 本番ビルドをプレビュー
npm run preview

🛠️ 技術スタック

React TypeScript Vite TailwindCSS Markdown

  • 開発フレームワーク: React + TypeScript + Vite
  • Markdown解析: markdown-it
  • コードハイライト: Highlight.js
  • スタイル設計: Tailwind CSS + @tailwindcss/typography
  • 数式: MathJax (markdown-it-mathjax3経由)
  • フローチャートサポート: Mermaid
  • ビルドツール: Vite
  • デプロイプラットフォーム: GitHub Pages / Vercel / Netlify

📖 使用ガイド

基本操作

  1. 編集モード - 左側の編集エリアにMarkdownコンテンツを記述
  2. プレビューモード - レンダリング効果をリアルタイムで表示
  3. 分割モード - 編集エリアとプレビューエリアを同時に表示

ショートカット

  • Ctrl + B - 太字
  • Ctrl + I - 斜体
  • Ctrl + K - リンク挿入

クラウドストレージ統合

MarkFlow Liteは複数のクラウドストレージバックエンドをサポート：

  1. AWS S3 - S3ストレージバケットに接続してファイル管理
  2. WebDAV - WebDAV対応サーバーに接続
  3. ローカルストレージ - ブラウザローカルストレージ（デフォルト）

ファイルエクスプローラーを通じて以下の操作が可能：

  • クラウドストレージサービスの接続と切断
  • リモートフォルダ構造の閲覧
  • リモートファイルの作成、編集、削除
  • ローカルとリモートファイルの同期

サポート構文

  • 見出し (#, ##, ###, ...)
  • テキストスタイル（太字、斜体、取り消し線）
  • リスト（順序付き、順序なし、タスクリスト）
  • リンクと画像
  • コードブロックとインラインコード
  • 引用ブロック
  • 表
  • 水平線
  • 数式（LaTeX）
  • フローチャート（Mermaid）

Mermaidフローチャート使用法

複数のMermaidチャートタイプをサポート：

```mermaid
graph TD
  A[開始] --> B[処理]
  B --> C[終了]

サポートチャートタイプ：
- フローチャート（Flowchart）
- シーケンス図（Sequence Diagram）
- ガント図（Gantt Diagram）
- クラス図（Class Diagram）
- 状態図（State Diagram）

## 📤 エクスポート機能

- **PDFエクスポート** - ドキュメントをPDF形式でエクスポート
- **HTMLエクスポート** - 独立したHTMLファイルにエクスポート
- **Markdownエクスポート** - 元のMarkdownファイルをエクスポート

## 🐛 修正事項

### 最近の修正事項

- フローチャートレンダリングが大きすぎる問題を修正、チャートサイズ制御を最適化
- コードブロックが表に隠れる問題を解決
- フローチャートレンダリング後のページ下部に大きな空白が現れる問題を修正
- 同一レイヤー上のすべてのコンテンツの表示順序を最適化
- PWA機能と関連設定を削除、ビルド問題を解決

## 🔧 デプロイ

### Vercelにデプロイ

[![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/)

```bash
npm run build
vercel --prod

Netlifyにデプロイ

Netlify

npm run build
# distディレクトリをNetlifyにアップロード

GitHub Pagesにデプロイ

GitHub Pages

npm run build
# distディレクトリをgh-pagesブランチにプッシュ

🤝 貢献

MarkFlow Liteの改善にIssueとPull Requestを提出してください。

開発プロセス

  1. プロジェクトをフォーク
  2. 機能ブランチを作成（git checkout -b feature/AmazingFeature）
  3. 変更をコミット（git commit -m 'Add some AmazingFeature'）
  4. ブランチにプッシュ（git push origin feature/AmazingFeature）
  5. Pull Requestを開く

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細はLICENSEファイルを参照

🙏 謝辞

📞 連絡先

プロジェクトURL: https://github.com/blankzsh/markflow-lite

メールフィードバック: shell7@petalmail.com

ご質問やご提案がある場合は、Issueを提出するか、プロジェクトメンテナーにメールで連絡してください。私たちはすべてのユーザーのフィードバックを大切にしています！