コンテンツにスキップ

プラグインの追加または更新

Capacitor プラグインを Capgo ウェブサイトに追加したり既存のプラグイン ドキュメントを更新したりする方法を説明します。このガイドは、コントリビューター、メンテナー、ドキュメントの維持に協力するAIエージェントにとって役立ちます。

Capgo エコシステムに新しいプラグインを追加する際には、ウェブサイトのさまざまな場所とファイルを更新する必要があります。これにより、プラグインがすべての関連する場所で正しく表示されるようにします。

  1. プラグイン リストの構成 - マスター リストにプラグイン メタデータを追加する
  2. プラグイン インデックス ページ - カテゴリー化されたプラグイン リスト ページにプラグインを追加する
  3. サイドバー ナビゲーション - ドキュメント サイドバーにプラグインを追加する
  4. プラグイン ドキュメント - オーバービューとスタートガイド ページを作成する
  5. プラグイン チュートリアル - 統合的なチュートリアルを作成する
ファイル目的
/src/config/plugins.tsプラグインリストとメタデータ
/src/content/docs/docs/plugins/index.mdxカテゴリごとのプラグインインデックスページ
/astro.config.mjsサイドバーのナビゲーション設定
/src/content/docs/docs/plugins/[plugin-name]/プラグインドキュメントディレクトリ
/src/content/plugins-tutorials/en/英語のチュートリアルファイル
  1. マスターリストにプラグインを追加

    「マスターリストにプラグインを追加」のセクション

    開く /src/config/plugins.ts ここにプラグインを追加してください actions 配列:

    // First, import an appropriate Heroicon
    import YourIconName from 'astro-heroicons/mini/IconName.astro'
    // Then add to the actions array
    {
    name: '@capgo/your-plugin-name',
    author: 'github.com/Cap-go',
    description: 'Brief description of what the plugin does',
    href: 'https://github.com/Cap-go/your-plugin-name/',
    title: 'Display Name',
    icon: YourIconName,
    }

    利用可能なアイコン: 利用可能なアイコンを確認 /node_modules/astro-heroicons/mini/ 利用可能なアイコンを確認するには

  2. インデックスページにプラグインを追加

    「インデックスページにプラグインを追加」セクション

    開いて、適切なカテゴリの下でプラグインを追加してください /src/content/docs/docs/plugins/index.mdx クリップボードにコピー

    <LinkCard
    title="Your Plugin Name"
    description="Brief description of what the plugin does"
    href="/docs/plugins/your-plugin-name/"
    />

    ⭐ 人気のプラグイン:

    • 📱 デバイス & システム プラグイン
    • クリップボードにコピー
    • 🎥 メディア & カメラ プラグイン
    • 🛠️ ユーティリティ プラグイン
    • 🤖 AI & アドバンスド メディア
    • 📍 ロケーション & バックグラウンド サービス
    • 📞 通信 & アナリティクス
    • 🔐 セキュリティ & システム
    • 📊 Android固有の機能
    • 📥 ダウンロード & ナビゲーション
  3. サイドバー ナビゲーションに追加

    サイドバー ナビゲーションに追加

    Open /astro.config.mjs プラグインをサイドバー設定に追加してください (約540行目)

    {
    label: 'Your Plugin Name',
    items: [
    { label: 'Overview', link: '/docs/plugins/your-plugin-name/' },
    { label: 'Getting started', link: '/docs/plugins/your-plugin-name/getting-started' },
    ],
    collapsed: true,
    }

    __CAPGO_KEEP_1__

  4. __CAPGO_KEEP_2__

    __CAPGO_KEEP_3__

    __CAPGO_KEEP_4__

    __CAPGO_KEEP_5__
    mkdir -p /src/content/docs/docs/plugins/your-plugin-name/
  5. __CAPGO_KEEP_7__

    __CAPGO_KEEP_8__

    __CAPGO_KEEP_9__ /src/content/docs/docs/plugins/your-plugin-name/index.mdx:

    ---
    title: "@capgo/your-plugin-name"
    description: Brief description of the plugin's purpose
    tableOfContents: false
    next: false
    prev: false
    sidebar:
    order: 1
    label: "Introduction"
    hero:
    tagline: Detailed tagline explaining what the plugin does
    image:
    file: ~public/your-plugin-icon.svg
    actions:
    - text: Get started
    link: /docs/plugins/your-plugin-name/getting-started/
    icon: right-arrow
    variant: primary
    - text: Github
    link: https://github.com/Cap-go/your-plugin-name/
    icon: external
    variant: minimal
    ---
    import { Card, CardGrid } from '@astrojs/starlight/components';
    <CardGrid stagger>
    <Card title="Feature 1" icon="puzzle">
    Description of first key feature
    </Card>
    <Card title="Feature 2" icon="rocket">
    Description of second key feature
    </Card>
    <Card title="Cross-platform" icon="puzzle">
    Works on both iOS and Android 📱
    </Card>
    <Card title="Comprehensive Documentation" icon="open-book">
    Check the [Documentation](/docs/plugins/your-plugin-name/getting-started/) to master the plugin.
    </Card>
    </CardGrid>
  6. 作成 /src/content/docs/docs/plugins/your-plugin-name/getting-started.mdx:

    ---
    title: Getting Started
    description: Learn how to install and use the plugin in your Capacitor app.
    sidebar:
    order: 2
    ---
    import { Steps } from '@astrojs/starlight/components';
    import { PackageManagers } from 'starlight-package-managers'
    <Steps>
    1. **Install the package**
    <PackageManagers pkg="@capgo/your-plugin-name" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />
    2. **Sync with native projects**
    <PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />
    </Steps>
    ## Configuration
    ### iOS Configuration
    [iOS-specific setup instructions]
    ### Android Configuration
    [Android-specific setup instructions]
    ## Usage
    [Basic usage examples]
    ## API Reference
    [Detailed API documentation]
    ## Complete Example
    [Full working example]
    ## Best Practices
    [Recommended practices and tips]
    ## Platform Notes
    [Platform-specific notes and limitations]
  7. チュートリアルファイルを作成

    「チュートリアルファイルを作成」を作成する

    作成 /src/content/plugins-tutorials/en/your-plugin-name.md:

    ---
    locale: en
    ---
    # Using @capgo/your-plugin-name Package
    The `@capgo/your-plugin-name` package [brief description]. In this tutorial, we will guide you through the installation, configuration, and usage of this package in your Ionic Capacitor app.
    ## Installation
    [Installation steps]
    ## Configuration
    [Configuration steps for iOS and Android]
    ## API Usage
    [Detailed API usage examples]
    ## Complete Example
    [Full working example]
    ## Best Practices
    [Tips and best practices]
    ## Troubleshooting
    [Common issues and solutions]
    ## Conclusion
    [Summary and links to additional resources]
src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx # Overview page with hero and feature cards
└── getting-started.mdx # Installation and usage guide
src/content/plugins-tutorials/en/
└── your-plugin-name.md # Comprehensive tutorial

For complex plugins, you may add additional documentation pages:

src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx
├── getting-started.mdx
├── api-reference.mdx # Detailed API documentation
├── examples.mdx # Additional examples
├── troubleshooting.mdx # Troubleshooting guide
└── migrations.mdx # Migration guides
  • Be Concise: Keep descriptions under 100 characters
  • Be Specific: Explain what the plugin does, not what it is
  • アクションワードを使用する: 動詞で始めるようにしてください(例:「Control」、「Integrate」、「Enable」)

良い例:

  • 「デバイスのフラッシュライトとターチを単純なオン/オフのスイッチで制御する」
  • 「アプリにライブチャットと顧客サポートをCrispと統合する」
  • 「Face IDとTouch IDを使用した安全な認証を有効にする」

悪い例:

  • 「フラッシュ用のプラグイン」
  • 「このはCrisp用のプラグイン」
  • 「バイオメトリック用のプラグイン」
  1. インストールから始めましょう:明確なインストール手順から始めること
  2. 設定を提供する:プラットフォーム固有のセットアップ要件を含める
  3. 使用例を表示する:実行可能なcodeの例を提供する
  4. APIのリファレンスを含める:すべてのメソッドとパラメータをドキュメントする
  5. 完全な例を追加する:現実世界の使用パターンを示す
  6. ベストプラクティスをリストする:最適な使用方法を共有する
  7. ドキュメントプラットフォームの差異: iOS と Android の動作を明確にする
  8. トラブルシューティングを追加する: 一般的な問題を解決する
  • code の例では TypeScript を使用する
  • トップに import を含める
  • 重要なステップの説明をコメントで追加する
  • エラー処理を示す
  • 基本的な使用法と高度な使用法の両方を示す

新しいプラグインを追加するときは、このチェックリストを使用してください。

  • __CAPGO_KEEP_0__ プラグインを追加しました。 /src/config/plugins.ts
  • Heroicons から適切なアイコンを選択しました。
  • __CAPGO_KEEP_0__ プラグインを追加しました。 /src/content/docs/docs/plugins/index.mdx 正しいカテゴリの下にプラグインを追加しました。
  • __CAPGO_KEEP_0__ サイドバーのエントリを作成しました。 /astro.config.mjs
  • __CAPGO_KEEP_0__ ドキュメントディレクトリを作成しました。
  • __CAPGO_KEEP_0__ オーバービューページを作成しました。 index.mdx __CAPGO_KEEP_0__ ガイドを作成しました。
  • __CAPGO_KEEP_0__ getting-started.mdx __CAPGO_KEEP_0__
  • Created tutorial in /src/content/plugins-tutorials/en/
  • Included installation instructions
  • Documented iOS configuration
  • Documented Android configuration
  • Provided usage examples
  • Added API reference
  • Included complete working example
  • Listed best practices
  • Added platform-specific notes
  • Tested all links work correctly

プラグインで使用される共通のアイコン ( astro-heroicons/mini/):

__CAPGO_KEEP_0__使用シナリオ
BoltIconフラッシュ、電力、エネルギー
CameraIconカメラ、写真、ビデオ
ChatBubbleLeftIconチャット、メッセージング、コミュニケーション
FingerPrintIconバイオメトリクス、セキュリティ、認証
MapPinIcon位置、地理情報、地図
SpeakerWaveIconオーディオ、サウンド、音楽
VideoCameraIconビデオ、レコーディング、ストリーミング
CreditCardIcon支払い、購入
PlayCircleIconメディア プレーヤー、ビデオ プレーヤー
SignalIcon接続性、ネットワーク、ビーコン
RadioIconビーコン、ブロードキャスト、無線
ChatBubbleOvalLeftIconSNS、WeChat

既存のプラグインを更新する場合:

  1. バージョン番号を更新する ドキュメント内
  2. マイグレーションガイドを追加する 変更点が存在する場合
  3. API の参照を更新する 新しいメソッドとともに
  4. 新しい例を追加する 新機能のために
  5. プラットフォームの要件を更新する 変更があった場合
  6. 新機能に基づいてベストプラクティスを改訂する 最新の機能に基づいて
  7. チュートリアルを最新の__CAPGO_KEEP_0__で維持する 最新のAPIで

英語でプラグインドキュメントを書き、レビューする。ローカライズされたパスはサイトメタデータによって生成され、エッジで翻訳ワーカーによって翻訳される。

プラグインドキュメントを追加または更新した後:

  1. サイトをローカルでビルドする:

    ターミナル画面
    bun run build
  2. エラーを確認する:

    • すべてのリンクが正常に動作することを確認する
    • 画像が正しく表示されることを確認する
    • 「code」の例が有効であることを確認する
    • ナビゲーションが正常に動作することを確認する
  3. サイトをプレビューする:

    ターミナル画面
    bun run dev
  4. プラグインが表示されることを確認してください:

    • プラグインのリストページを確認してください
    • サイドバーのナビゲーションを確認してください
    • すべてのドキュメントページをテストしてください
    • チュートリアルページが正常に動作することを確認してください

プラグインの追加または更新のドキュメントを追加する必要がある場合、

参考として、以下のドキュメント化されたプラグインを確認してください:

  • アップデーター: /src/content/docs/docs/plugins/updater/ (複雑なプラグイン、複数のページ)
  • フラッシュ: /src/content/docs/docs/plugins/flash/ (シンプルなプラグイン、スターター例)
  • ソーシャルログイン: /src/content/docs/docs/plugins/social-login/ (プラグイン、サブページ)

Capgoのドキュメントにプラグインを追加するには:

  1. __CAPGO_KEEP_0__のマスター設定にメタデータを追加する
  2. __CAPGO_KEEP_0__のカテゴリ化されたインデックスページにプラグインを追加する
  3. サイドバーのナビゲーションを設定する
  4. 包括的なドキュメントページを作成する
  5. 詳細なチュートリアルを書く
  6. すべての変更をローカルでテストする

このガイドを遵守することで、プラグインはユーザーが容易に発見できるように、統一されたドキュメントで提供されます。

__CAPGO_KEEP_0__のプラグインを追加または更新する

Section titled “__CAPGO_KEEP_0__のプラグインを追加または更新する”

あなたがCloudflareを使用している場合 プラグインの追加または更新 ネイティブ プラグインの作業を計画するには、接続する Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフロー Capacitor プラグイン: Capgo Capacitor プラグイン: Capgo の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー Capacitor プラグイン: ご参考まで Capacitor プラグイン: ご参考までの実用的な文脈