プラグイン開発機能のご利用について

プラグイン開発機能は プロフェッショナルプラン 限定で提供されています。ただし、該当プランをご利用の場合でも標準では無効になっています。
ご利用を希望される場合は、弊社までお問い合わせください。

JavaScript・CSSのプラグイン開発

プラグインとしてパッケージ化することで、ユーザによるプラグイン設定を可能にしたり、配布が容易になります。
パッケージ化には、manifest.jsonを作成し、その構成内容でファイルを作成します。

プラグイン開発ツールを使用すると開発環境が構築からプラグインの登録までを便利に行えます。

manifest.json の構成次第で自由なファイル配置で作成が行えます。今回は以下のディレクトリ構成で説明を行います。

root/
├── manifest.json
├── content/
│   ├── js/
│   │   └── plugin.js
│   ├── css/
│   │   └── plugin.css
├── config/
│   ├── html/
│   │   └── config.html
│   ├── js/
│   │   └── config.js
│   ├── css/
│       └── config.css

本稿では以下の手順に従ってプラグインを作成していきます。

manifest.json の作成
必要なファイルの作成と配置
設定画面の作成（任意）
プラグイン処理の作成
パッケージ化

1. manifest.json の作成

まずはプラグインの構成ファイルである manifest.json を作成します。

注意

UTF-8の文字コードで作成してください。

例
{
  "manifest_version": 1,
  "name": "サンプルプラグイン",
  "uuid": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "type": "app",
  "version": "1.0.1",
  "description": "サンプルプラグイン",
  "author": "iii",
  "vendor": "iii@oec",
  "icon": "",
  "content": {
    "js": [
      "js/plugin.js"
    ],
    "css": [
      "css/plugin.css"
    ]
  },
  "config": {
    "html": "html/config.html",
    "js": [],
    "css": []
  }
}

各パラメータの説明

パラメータ	必須/オプション	説明
`manifest_version`	必須	マニフェストファイルのバージョンを指定します。現在は `1` を使用します。
`name`	必須	プラグインの名前を指定します。
`uuid`	必須	プラグインを一意に識別するためのUUIDを指定します。UUID生成器で生成可能です。
`type`	必須	プラグインの種類（app OR portal）を指定します。例: `app`。
`version`	必須	プラグインのバージョンを指定します。例: `1.0.1`。
`description`	オプション	プラグインの簡単な説明を記述します。プラグイン設定の説明に表示されます
`author`	オプション	作成者の名前を記載します。
`vendor`	オプション	ベンダー情報を記載します。
`icon`	オプション	プラグインのアイコンファイルのパスを指定します。
`content.js`	オプション	JavaScriptファイルのパスを配列で指定します。（読み込み順に指定してください）
`content.css`	オプション	CSSファイルのパスを配列で指定します。（読み込み順に指定してください）
`config.html`	オプション	設定画面のHTMLファイルのパスを指定します。
`config.js`	オプション	設定用JavaScriptファイルのパスを配列で指定します。（読み込み順に指定してください）
`config.css`	オプション	設定用CSSファイルのパスを配列で指定します。（読み込み順に指定してください）

ヒント

JavaScript、Stylesheetファイルは複数指定可能です。定義された順番で読み込みを行います。(読み込み完了順は担保されません)
CDNなどの外部ファイルを使用する場合は、httpsから始まるURLを指定します。
構成ファイルは必要なファイルのみの作成で構いません。スタイルが不要、設定画面が不要な場合はそれらのパラメータは不要です。

2. 必要なファイルの作成と配置

manifest.json で定義した構成でファイルを作成します。

3. 設定画面の作成（任意）

プラグインの設定画面は、シンプルなHTMLファイルを作成することで実装できます。以下の点に注意してください。

<form>タグや送信ボタン (<button type="submit">) は不要です。
必要な入力要素 (input, select, textarea など) を配置します。
JavaScriptやスタイルシートを使用する場合は、manifest.jsonのconfig領域にパスを記述します。

例: html/config.html
<h1>プラグイン設定</h1>
<label>
    設定項目:
    <input type="text" id="setting1">
</label>

必要に応じてJavaScriptを追加（manifest.jsonにパスを追加）

例: js/config.js
(() => {
  'use strict';

  // 設定画面表示時にフィールドリスト取得
  atPocket.api('/apps/1/fields', 'GET', {}, (result) => {
    result.fields.forEach((field) => {
      
    });
  });
})();

必要に応じてスタイルも追加（manifest.jsonにパスを追加）

例: css/config.css
h1 {
    font-size: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input {
    padding: 5px;
    width: 100%;
    max-width: 300px;
}

4. プラグイン処理の作成

プラグイン本体JavaScriptファイルを作成して処理を記述します。
使用できる関数やイベントの使い方は各マニュアルページを参照してください。

js/plugin.js
(() => {
    'use strict';

    // ここにプログラムを記述
})();

5. パッケージ化

圧縮ソフトなどを使用して、ルートフォルダ は含めずにzip圧縮します。

PowerShellでの圧縮例
Compress-Archive -Path "C:\MyPlugin\*" -DestinationPath "C:\plugin.zip"

6. プラグインの登録

作成したプラグインは@pocketの 管理者設定 > プラグイン設定 の プラグイン追加 から追加出来ます。
※ uuidが同じプラグインは上書き更新されます。

プラグイン設定

登録したプラグインは各アプリケーションでプラグインを追加することで使用できます。

1. manifest.json の作成​

2. 必要なファイルの作成と配置​

3. 設定画面の作成（任意）​

4. プラグイン処理の作成​

5. パッケージ化​

6. プラグインの登録​