outline/outline

⭐ 33,974 🍴 2,748 TypeScript📄 BSL 1.1 (Business Source License) GitHubで見る →

主な特徴

  • 📝 **リアルタイムコラボレーション**: 複数ユーザーによる同時編集とリアルタイム同期
  • 🔍 **高速な全文検索**: PostgreSQLの全文検索とファジー検索による強力な検索機能
  • 📱 **レスポンシブデザイン**: デスクトップ、タブレット、モバイルに最適化されたUI
  • 🔒 **細かなアクセス制御**: コレクション、ドキュメント、ユーザーレベルでの権限管理
  • 🎨 **リッチテキストエディタ**: ProseMirrorベースの高機能エディタ（表、画像、動画、数式対応）
  • 🌐 **多言語対応**: 20以上の言語をサポート
  • 🔌 **豊富な統合**: Slack、GitHub、Google、Azure AD、SAML、OIDC認証
  • 📊 **API対応**: RESTful APIとWebhooksによる外部システム連携
  • 💾 **柔軟なストレージ**: AWS S3、Google Cloud Storage、ローカルストレージ対応
  • 🚀 **高パフォーマンス**: Bull/Redisによるジョブキューとキャッシング

リポジトリ解析: outline/outline

基本情報

  • リポジトリ名: outline/outline
  • 主要言語: TypeScript
  • スター数: 33,974
  • フォーク数: 2,748
  • 最終更新: 活発に更新中（v0.85.0）
  • ライセンス: BSL 1.1 (Business Source License)
  • トピックス: Knowledge Base, Collaboration, Documentation, Wiki, Markdown, Real-time, React, Node.js, Self-hosted

概要

一言で言うと

Outlineは、ReactとNode.jsで構築された高速でコラボレーティブなナレッジベースアプリケーションで、チーム向けの美しくリアルタイムな文書作成・共有プラットフォームです。

詳細説明

Outlineは、チームの知識管理を効率化するために設計された、モダンでオープンソースのナレッジベースソフトウェアです。リアルタイムコラボレーション、強力な検索機能、Markdown互換性、美しいUIを特徴とし、セルフホスティングとクラウドサービスの両方で利用可能です。Slack、Google、GitHubなどの認証プロバイダーとの統合、豊富なAPIサポート、多言語対応により、あらゆる規模のチームに適応します。エンタープライズグレードのセキュリティと、ProseMirrorベースの高度なリッチテキストエディタを提供し、ドキュメント中心のワークフローを強力にサポートします。

主な特徴

  • 📝 リアルタイムコラボレーション: 複数ユーザーによる同時編集とリアルタイム同期
  • 🔍 高速な全文検索: PostgreSQLの全文検索とファジー検索による強力な検索機能
  • 📱 レスポンシブデザイン: デスクトップ、タブレット、モバイルに最適化されたUI
  • 🔒 細かなアクセス制御: コレクション、ドキュメント、ユーザーレベルでの権限管理
  • 🎨 リッチテキストエディタ: ProseMirrorベースの高機能エディタ（表、画像、動画、数式対応）
  • 🌐 多言語対応: 20以上の言語をサポート
  • 🔌 豊富な統合: Slack、GitHub、Google、Azure AD、SAML、OIDC認証
  • 📊 API対応: RESTful APIとWebhooksによる外部システム連携
  • 💾 柔軟なストレージ: AWS S3、Google Cloud Storage、ローカルストレージ対応
  • 🚀 高パフォーマンス: Bull/Redisによるジョブキューとキャッシング

使用方法

インストール

前提条件

  • Node.js 20または22
  • PostgreSQL 12以上
  • Redis 6以上
  • S3互換ストレージ（オプション）

インストール手順

# 方法1: Dockerを使用（推奨）
git clone https://github.com/outline/outline.git
cd outline
docker-compose up -d

# 方法2: ソースからビルド
git clone https://github.com/outline/outline.git
cd outline
yarn install
yarn build
yarn start

# 方法3: クラウドサービスを利用
# https://www.getoutline.com でサインアップ

基本的な使い方

Hello World相当の例（最初のドキュメント作成）

// APIを使用したドキュメント作成例
const createDocument = async () => {
  const response = await fetch('https://your-outline-instance.com/api/documents.create', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      collection: 'COLLECTION_ID',
      title: 'Hello World',
      text: '# Hello World\n\nこれは最初のドキュメントです。',
      publish: true
    })
  });
  
  const document = await response.json();
  console.log('Created document:', document);
};

実践的な使用例

// React componentでのドキュメントエディタ実装例
import { Editor } from '@outline/editor';
import { useStores } from '~/stores';

const DocumentEditor = ({ documentId }) => {
  const { documents } = useStores();
  const document = documents.get(documentId);
  
  const handleChange = async (value) => {
    await document.save({ text: value });
  };
  
  return (
    <Editor
      defaultValue={document.text}
      onChange={handleChange}
      placeholder="ドキュメントを書き始める..."
      embeds={['youtube', 'vimeo', 'gist']}
      uploadImage={async (file) => {
        const url = await uploadFile(file);
        return url;
      }}
    />
  );
};

高度な使い方

// WebSocketを使用したリアルタイムコラボレーション
import { HocuspocusProvider } from '@hocuspocus/provider';
import * as Y from 'yjs';

const setupCollaboration = (documentId: string) => {
  const ydoc = new Y.Doc();
  
  const provider = new HocuspocusProvider({
    url: 'wss://your-outline-instance.com/collaboration',
    name: documentId,
    document: ydoc,
    token: 'YOUR_AUTH_TOKEN',
    
    onSynced: () => {
      console.log('Document synced');
    },
    
    onAwarenessUpdate: ({ states }) => {
      // 他のユーザーのカーソル位置を表示
      states.forEach((state, clientId) => {
        console.log(`User ${clientId}:`, state);
      });
    }
  });
  
  return { ydoc, provider };
};

// プラグインシステムの実装
class CustomPlugin {
  name = 'custom-plugin';
  
  async initialize() {
    // プラグインの初期化
  }
  
  async documentCreate(document) {
    // ドキュメント作成時のフック
    console.log('Document created:', document.title);
  }
  
  async documentUpdate(document) {
    // ドキュメント更新時のフック
  }
}

ドキュメント・リソース

公式ドキュメント

  • README.md: プロジェクト概要とクイックスタート
  • docs/ARCHITECTURE.md: システムアーキテクチャの詳細説明
  • Documentation site: https://docs.getoutline.com - 完全なドキュメント

サンプル・デモ

  • Live demo: https://www.getoutline.com/create - 無料トライアル
  • app/scenes/: UIコンポーネントの実装例
  • server/routes/api/: APIエンドポイントの実装

チュートリアル・ガイド

  • セルフホスティングガイド
  • API開発者ドキュメント
  • 翻訳ガイド

技術的詳細

アーキテクチャ

全体構造

Outlineはモノレポ構造を採用し、フロントエンドとバックエンドが同じリポジトリで管理される。フロントエンドはReact + MobX、バックエンドはKoa + Sequelizeで構築。リアルタイム機能はHocuspocus（Yjs）とSocket.ioで実現。

ディレクトリ構成

outline/
├── app/                    # フロントエンドアプリケーション
│   ├── actions/           # 再利用可能なアクション
│   ├── components/        # Reactコンポーネント
│   ├── editor/            # エディタ関連コンポーネント
│   ├── hooks/             # カスタムReact hooks
│   ├── models/            # MobX状態モデル
│   ├── routes/            # ルート定義（遅延読み込み）
│   ├── scenes/            # フルページビュー
│   ├── stores/            # MobXストア
│   └── utils/             # ユーティリティ関数
├── server/                # バックエンドアプリケーション
│   ├── routes/            # APIルート
│   │   ├── api/          # REST APIエンドポイント
│   │   └── auth/         # 認証ルート
│   ├── commands/          # 複雑なビジネスロジック
│   ├── emails/            # メールテンプレート
│   ├── models/            # Sequelizeモデル
│   ├── policies/          # 認可ロジック（cancan）
│   ├── presenters/        # JSONシリアライザ
│   ├── queues/            # 非同期ジョブ処理
│   └── services/          # アプリケーションサービス
├── shared/                # 共有コード
│   ├── editor/            # ProseMirrorエディタ
│   ├── i18n/              # 国際化設定
│   └── styles/            # グローバルスタイル
└── plugins/               # プラグインシステム

主要コンポーネント

  • Editor: ProseMirrorベースのリッチテキストエディタ

    • 場所: shared/editor/
    • 依存: ProseMirror、Y.js（協調編集）
    • インターフェース: カスタムノード、マーク、拡張機能

  • API Server: Koaベースの RESTful API

    • 場所: server/routes/api/
    • 依存: Sequelize、Redis、Bull
    • インターフェース: REST endpoints、WebSocket

  • Collaboration Service: リアルタイム同期サービス

    • 場所: server/services/collaboration.ts
    • 依存: Hocuspocus、Y.js、Redis
    • インターフェース: WebSocket接続

技術スタック

コア技術

  • 言語: TypeScript (フロントエンド/バックエンド共通)
  • フロントエンド: React 17、MobX 4、Styled Components 5
  • バックエンド: Koa 3、Sequelize 6、Bull 4
  • 主要ライブラリ:
    • ProseMirror: リッチテキストエディタ
    • Y.js + Hocuspocus: リアルタイムコラボレーション
    • Socket.io: WebSocket通信
    • i18next: 国際化

開発・運用ツール

  • ビルドツール: Vite（最新のRolldown版）、Babel 7
  • テスト: Jest 29、React Testing Library
  • CI/CD: CircleCI、GitHub Actions
  • 監視: Sentry、DataDog
  • デプロイ: Docker、Kubernetes対応

設計パターン・手法

  • MVC/MVVMパターン（フロントエンド：MobX、バックエンド：Koa）
  • Command パターン（複雑なビジネスロジック）
  • Policy パターン（認可ロジック）
  • Repository パターン（データアクセス層）
  • Event-driven architecture（Bull によるジョブキュー）

データフロー・処理フロー

  1. ユーザーがエディタでドキュメントを編集
  2. 変更がY.jsドキュメントに反映
  3. HocuspocusプロバイダーがWebSocket経由で同期
  4. サーバーがRedisとPostgreSQLに永続化
  5. 他のクライアントに変更をブロードキャスト

API・インターフェース

公開API

Documents API

  • 目的: ドキュメントの作成、読み取り、更新、削除
  • 使用例:
# ドキュメント一覧取得
curl -X GET https://your-instance.com/api/documents.list \
  -H "Authorization: Bearer YOUR_TOKEN"

# ドキュメント作成
curl -X POST https://your-instance.com/api/documents.create \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "collectionId": "xxx",
    "title": "新しいドキュメント",
    "text": "# 内容\n\nMarkdownテキスト"
  }'

設定・カスタマイズ

設定ファイル

# .env - 環境変数設定
DATABASE_URL=postgres://user:pass@localhost:5432/outline
REDIS_URL=redis://localhost:6379
SECRET_KEY=your-secret-key
URL=https://your-outline-instance.com
FILE_STORAGE=s3
AWS_ACCESS_KEY_ID=xxx
AWS_SECRET_ACCESS_KEY=xxx
AWS_S3_BUCKET_NAME=outline-uploads
SLACK_CLIENT_ID=xxx
SLACK_CLIENT_SECRET=xxx

拡張・プラグイン開発

プラグインシステムによりカスタム機能の追加が可能。認証プロバイダー、ストレージバックエンド、通知システムなどを拡張可能

パフォーマンス・スケーラビリティ

パフォーマンス特性

  • PostgreSQL全文検索による高速検索
  • Redisキャッシング層
  • 画像の遅延読み込みとCDN配信
  • WebSocketによる効率的なリアルタイム同期

スケーラビリティ

  • 水平スケーリング対応（複数のWebサーバーインスタンス）
  • Redisクラスターによるセッション共有
  • S3互換ストレージによる無制限のファイルストレージ

制限事項

  • ファイルアップロードサイズ：デフォルト100MB
  • WebSocket接続数：サーバーリソースに依存
  • 同時編集ユーザー数：実装により数十人まで

評価・所感

技術的評価

強み

  • 完全なTypeScript実装による型安全性
  • 優れたユーザーエクスペリエンスとモダンなUI
  • 豊富な統合オプションとAPIサポート
  • 活発な開発コミュニティ（33,000+スター）
  • エンタープライズ対応（SAML、監査ログ、高度な権限管理）

改善の余地

  • セルフホスティングの複雑さ（多くの依存関係）
  • BSLライセンスによる商用利用の制限
  • 大規模データセットでのパフォーマンス最適化

向いている用途

  • チーム向けの内部ナレッジベース
  • 技術ドキュメントの管理
  • プロジェクトWiki
  • 社内情報共有プラットフォーム

向いていない用途

  • 公開Wikiサイト（プライベート前提の設計）
  • 個人用ノートアプリ（チーム機能が過剰）
  • 静的サイトジェネレーター用途

総評

Outlineは、モダンなチーム向けナレッジベースとして、優れたユーザーエクスペリエンスと豊富な機能を提供する成熟したプロダクトです。特にリアルタイムコラボレーション、美しいUI、強力な検索機能は、競合製品と比較しても際立っています。セルフホスティングの選択肢があることで、データ主権を重視する組織にも適しています。BSLライセンスは小規模利用には問題ありませんが、大規模商用利用時には注意が必要です。総じて、中規模以上のチームにとって、NotionやConfluenceの優れた代替選択肢となります。