開発

このガイドでは、PremiAnnoの開発環境をセットアップし、プロジェクトに貢献する方法について説明します。

前提条件

始める前に、以下を確認してください：

• Node.js: v20以降
• pnpm: v10.18.3以降（ルートpackage.jsonのpackageManagerを参照）
• Adobe Premiere Pro: テスト用
• Git: バージョン管理用

セットアップ

1. リポジトリをクローン

git clone https://github.com/rmuraix/premianno.git
cd premianno

2. 依存関係をインストール

pnpm install

これにより、libパッケージとdocsパッケージの両方を含む、モノレポのすべての依存関係がインストールされます。

開発コマンド

エクステンションをビルド

# エクステンションをビルド
pnpm lib build

# ウォッチモードでビルド（ホットリロード）
pnpm lib dev

# ZXPとしてビルド・パッケージ化
pnpm lib zxp

ドキュメントを実行

# ドキュメント開発サーバーを起動
pnpm docs dev

# ドキュメントをビルド
pnpm docs build

# ビルドされたドキュメントをプレビュー
pnpm docs preview

コード品質

# リンターを実行
pnpm biome check .

# リンティングの問題を修正
pnpm biome check . --fix

CEP開発セットアップ

開発用エクステンションの読み込み

CEPエクステンションは、Adobeのエクステンションフォルダへのシンボリックリンクで開発環境に読み込めます。

1. pnpm lib buildでエクステンションをビルド
2. エクステンションが自動的にCEPエクステンションフォルダにシンボリックリンクされます
3. Adobe Premiere Proを再起動
4. ウィンドウ > エクステンション > PremiAnnoに移動

デバッグ

CEPエクステンションはChromium DevToolsを使用してデバッグします：

1. エクステンションディレクトリに.debugファイルを作成してデバッグモードを有効化
2. cep.config.tsでデバッグポートを設定（デフォルト: 8860）
3. Chromeを開きhttp://localhost:8860に移動
4. Console、Elements、Sourcesタブを使用してデバッグ

注意: 開発中により信頼性の高いホットリロードを実現するため、pnpm lib devを組み込みのWebSocketリロードシステムで使用してください。

プロジェクト構造

premianno/
├── packages/
│   ├── lib/              # メインCEPエクステンション
│   │   ├── src/
│   │   │   ├── js/       # Reactパネルアプリ + CEPブリッジ
│   │   │   ├── jsx/      # ExtendScriptホスト関数
│   │   │   └── shared/   # 共有型定義
│   │   ├── dist/         # ビルド出力
│   │   └── package.json
│   └── docs/             # VitePressドキュメント
│       ├── .vitepress/
│       ├── guide/
│       ├── api/
│       └── package.json
├── .github/
│   └── workflows/        # CI/CDワークフロー
├── biome.json           # Biome設定
├── pnpm-workspace.yaml  # pnpmワークスペース設定
└── package.json         # ルートpackage.json

アーキテクチャ

エクステンションアーキテクチャ

PremiAnnoは以下を使用して構築されています：

• React 19: UIフレームワーク
• TypeScript: 型安全な開発
• Vite: ビルドツールと開発サーバー
• vite-cep-plugin: CEP/ホスト連携とパッケージング
• Adobe Premiere Pro CEP/ExtendScript: ホスト連携

主要コンポーネント

• ReactパネルUI: スキャン/読み込み/ラベル/エクスポートの操作フロー
• ホストブリッジ: パネルからExtendScript関数を呼び出し
• アノテーション保存層: プロジェクト/シーケンス単位のローカルJSON保存
• エクスポート層: 下流処理向けTOMLシリアライズ

貢献

ワークフロー

1. リポジトリをフォーク
2. 機能ブランチを作成
3. 変更を実施
4. 徹底的にテスト
5. プルリクエストを提出

コードスタイル

• 既存のコードスタイルに従う
• 型安全性のためにTypeScriptを使用
• 意味のあるコミットメッセージを書く
• 複雑なロジックにコメントを追加

テスト

• Adobe Premiere Proで変更をテスト
• ホットリロード機能を確認
• エクスポート機能をテスト
• コンソールエラーを確認

プルリクエストガイドライン

• 変更を明確に説明
• 関連するissueを参照
• UI変更のスクリーンショットを含める
• CIチェックが通過することを確認

配布用ビルド

ZXPパッケージの作成

# ビルドとパッケージ化
pnpm lib zxp

これにより、packages/lib/dist/zxp/に配布用アーティファクトが生成されます。

リソース

• Bolt CEP

ヘルプ

• GitHub Issues
• 貢献ガイド