プラグイン開発ツール(@at-pocket/create-plugin)
概要
@at-pocket/create-plugin は、@pocket 開発者向けにプラグインの雛形開発環境を構築し、ビルド時に自動アップロードを行うツールです。本ツールを使用することで、迅速にプラグイン開発を開始し、効率的にデプロイできます。
プラグイン開発ツールを使用するとプラグイン開発に必要なUUIDの生成や、JS-SDKによる開発補助機能が自動的に設定されます。
前提条件
@at-pocket/create-plugin を使用するには、Node.js が必要です。最低限 ESModule をサポートするバージョン（v12.0.0 以降）をインストールしてください。
node -v
最新の Node.js は公式サイト（https://nodejs.org/）からダウンロードできます。
インストール
@at-pocket/create-plugin をグローバルにインストールします。
npm install -g @at-pocket/create-plugin
プロジェクトの作成
対話形式でプラグイン開発環境をセットアップするには、以下のコマンドを実行します。
create-@pocket-plugin
コマンドを実行すると、対話式で質問が表示されます。必要な情報を入力すると環境ファイルの作成と必要なライブラリが自動インストールされて、開発環境が構築されます。
? テンプレートの種類を選択してください: (Use arrow keys)
❯ Basic
Minimal
? プラグインの名前を入力してください (半角英数、ハイフン、アンダーバーのみ可):
? プラグインタイトルを入力してください (日本語可):
? プラグインの説明を入力してください (任意):
? ベンダー名を入力してください (任意):
? サイトURLを入力してください (任意):
? APIキーを入力してください (任意):
? 使用する言語を選択してください: (Use arrow keys)
❯ JavaScript
TypeScript
? スタイルシートの種類を選択してください: (Use arrow keys)
❯ CSS
SCSS
? この内容でプラグインを作成しますか？ (Y/n)
開発の進め方
セットアップ後、作成されたプロジェクトフォルダに移動し、開発を開始します。
cd my-plugin
開発時は src/ ディレクトリ内のコードを編集します。
Visual Studio Codeを使用している場合は、atPocket. と入力すると使用できる関数の候補が表示され、補完が利用できます。
ビルドとアップロード
開発が完了したら、以下のコマンドでプラグインをビルドし、自動でアップロードします。
npm run publish
このプロセスでは、以下の内容が自動的に実施されます。
- 必要なファイルのバンドル
- アップロード処理
ビルドのみ実施したい場合は、以下のコマンドでdistフォルダにビルドされたファイルが出力されます。
npm run build
manifest.json
追加したJavaScriptやスタイルシートファイルはmanifest.jsonにパスを追加が必要になります。
追加可能なファイル形式は、js、css、html、png、jpg、svgになります。
設定ファイル
@at-pocket/create-plugin は、プロジェクトのルートに .env という設定ファイルを作成します。このファイルで、アップロード先やAPIキーなどの情報を管理できます。
SITE_URL=https://exmple.at-pocket.com
API_KEY=your-api-key
デバッグとトラブルシューティング
よくあるエラー
npm run build 実行時にアップロードエラーが発生する
.envの設定を確認してください。- APIキーが有効かどうかチェックしてください。
create-@pocket-plugin 実行後にファイルが正しく生成されない
- Node.js のバージョンが
v12以上であることを確認してください。 npm installを実行し、依存関係を解決してください。