カスタマイズ開発ツール(@at-pocket/create-customize)

概要

@at-pocket/create-customize は、@pocket の動作やデザインを変更するカスタマイズ開発を便利に行えるツールです。
本ツールを使用することで、カスタマイズした内容を効率的にデプロイできます。

ヒント

カスタマイズ開発ツールを使用すると、JS-SDKによる開発補助機能が自動的に設定されます。

前提条件

@at-pocket/create-plugin を使用するには、Node.js が必要です。最低限 ESModule をサポートするバージョン（v12.0.0 以降）をインストールしてください。

node -v

最新の Node.js は公式サイト（https://nodejs.org/）からダウンロードできます。

インストール

@at-pocket/create-customize をグローバルにインストールします。

npm install -g @at-pocket/create-customize

カスタマイズ環境の作成

ヒント

最初に空のフォルダを作成し、ターミナルで作成したフォルダに移動してコマンドを実行してください。
実行フォルダ内にファイルが既に存在する場合はエラーになります。

対話形式でカスタマイズ開発環境をセットアップするには、以下のコマンドを実行します。

create-@pocket-customize

コマンドを実行すると、対話式で質問が表示されます。必要な情報を入力すると環境ファイルの作成と必要なライブラリが自動インストールされて、開発環境が構築されます。

? Select project type: (Use arrow keys)
❯ app
  portal
? Enter project ID (numeric):
? Enter site URL (optional):
? Enter API key for upload (optional):
? Select language: (Use arrow keys)
❯ JavaScript
  TypeScript
? Select stylesheet type: (Use arrow keys)
❯ CSS
  Scss

? Do you want to create the project with this configuration? (Y/n)

開発の進め方

開発時は src/ ディレクトリ内のコードを編集します。
Visual Studio Codeを使用している場合は、atPocket. と入力すると使用できる関数の候補が表示され、補完が利用できます。

ビルドとアップロード

開発が完了したら、以下のコマンドでカスタマイズをビルドし、自動でアップロードします。

npm run publish

このプロセスでは、以下の内容が自動的に実施されます。

1. 必要なファイルのバンドル
2. アップロード処理

ビルドのみ実施したい場合は、以下のコマンドでdistフォルダにビルドされたファイルが出力されます。

npm run build

設定ファイル

@at-pocket/create-customize は、プロジェクトのルートに .env という設定ファイルを作成します。このファイルで、アップロード先やAPIキーなどの情報を管理できます。

例

TYPE=app or portal
ID=appId or portalId
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 を実行し、依存関係を解決してください。