Zet-CLIツールを使用して内部ウィジェットまたはWebタブパッケージを作成する - Zoho People
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
Zoho Extension Toolkit（ZET）は、開発者がZoho Peopleと連携するウィジェットやWebタブ用アプリケーションパッケージを作成するためのコマンド折れ線グラフインターフェースです。
node -v
npm -v
CLIのインストール
- 以下のコマンドを実行してzapps cliノードパッケージをインストールします。
npm install -g Zoho-extension-toolkit
2. インストールが正常に完了したことを確認するには、次のコマンドを実行します。
zet
'zet'コマンドのヘルプ情報が表示されます。
プロジェクトの作成
1. 次のコマンドを実行してプロジェクトディレクトリを指定します。
cd {directory}
例: cd desktop
2. 次のコマンドを実行して新しいプロジェクトを作成します:
zet init
プロジェクトテンプレートを作成できるZohoサービスの一覧が表示されます。
3. リストからZoho Peopleを選択し、プロジェクト名を入力します。
指定したディレクトリに、必要な基本ファイルとフォルダ構成を備えたサンプルプロジェクトが表示されます。
プロジェクトテンプレートディレクトリには、初期設定のplugin-manifestファイルが作成済みです。このファイルは拡張機能のJSONパラメーターをホスティング前に設定するために重要です。拡張機能に関するメタデータ（ウィジェットやWebタブの詳細、ロケーション、コネクタなど）が含まれています。plugin-manifestファイルの詳細については、こちらをクリックしてください。
プロジェクトの開発
- 作成したプロジェクトフォルダへ移動します。appフォルダ内に、初期設定で 'widget.html' という名前のHTMLファイルが見つかります。
- widget.htmlファイルには、ウィジェットやWebタブの構造、デザイン、コンポーネントが含まれています。HTMLファイルからウィジェットやWebタブを作成できます。
-
必要に応じて、JavaScriptファイルやスタイルシートを作成し、追加のデザインや機能を加えることでウィジェットやWebタブを拡張できます。（任意）
複数のHTMLファイルを単一のウィジェットまたはWebタブパッケージとしてまとめ、Zoho Peopleの対応インターフェースで利用できます。この機能を有効にするには、plugin-manifest.jsonファイルでロケーション識別子を正しく設定してください。 - ウィジェットやWebタブでZoho People APIを利用するには、JS SDKライブラリで提供されているJS SDK APIヘルパーを活用できます。
- plugin-manifest.jsonファイルの設定方法については、次のトピックをご参照ください。
plugin-manifest.jsonファイルの設定
- プロジェクトフォルダでウィジェットまたはWebタブの開発が完了したら、テキストエディタでplugin-manifest.jsonファイルを開き、ウィジェットまたはWebタブのロケーション識別子を指定します。
-
ホワイトリストに登録するドメインを追加します。
内部ウィジェットやWebタブは、初期設定でZoho Peopleサーバー内からのみアクセスが許可されており、他のすべてのURLはブロックされます。特定のソースからデータを取得する権限を与えるには、アクセスを許可したいURLをホワイトリストに登録してください。 -
plugin-manifest.jsonファイルを保存します。
Widget 場所 識別子
Web タブ 場所 識別子
|
Zoho People における Widget の位置
|
場所 識別子
|
|
ダッシュボード
|
people.ダッシュボード
|
|
カスタムボタン
|
people。custombutton
|
|
関連リスト
|
people。form。relatedlist
|
Web タブ 場所 識別子
|
Zoho People における Web タブの位置
|
場所 識別子 |
|
ホーム
|
people.ホーム
|
|
サービス
|
people.サービス
|
単一の郵便番号ファイルで複数のHTMLファイルをサポートするためのPlugin-manifest.jsonファイル設定
- {
- 'locale': [
- 'en'
- ],
- 'サービス': 'PEOPLE',
- 'whiteListedDomains': [],
- 'タブ': {
- 'widgets': [
- {
- '場所': 'people.ホーム',
- '名前': 'Zoho People Extension',
- 'url': '/app/widget。html',
- 'ロゴ': ''
- },
- {
- '場所': 'people.ダッシュボード',
- '名前': 'Zoho People Extension',
- 'url': '/app/時間.html',
- 'ロゴ': ''
- },
- {
- '場所': 'people。custombutton',
- '名前': 'Zoho People Extension',
- 'url': '/app/移動する.html',
- 'ロゴ': ''
- }
- ]
- },
- 'config': [],
- 'connectors': [],
- 'cspDomains': {
- '接続-src': []
- }
- }
テスト Widget または Web タブ
- 以下のコマンドを使用してプロジェクトディレクトリに移動します：
cd {プロジェクト directory}
- 次のコマンドを実行して、ローカルHTTPサーバーを開始します。これにより、ウィジェットやWebタブをローカルで実行し、テスト環境インスタンスでテストできます：
zet run
3. このコマンドによりローカルサーバーが起動し、拡張機能がローカルで実行されます。
拡張機能はポート5000で実行されます。このコマンドを実行する前に利用可能であることを確認してください。
4. サーバーを認証するには、拡張機能のテスト時に developer 方法を有効にしてください。
認証とパック
- 以下のコマンドを使用してプロジェクトディレクトリに移動します。
cd {プロジェクト directory}
- 以下のコマンドを実行してアプリケーションを認証します。
zet 認証
この操作により、アプリパッケージの認証が行われ、違反があれば表示されます。違反がある場合は、開発者コンソールで郵便番号ファイルを更新する前に修正してください。
3. Zoho People へアップロード可能なウィジェットまたはWebタブの郵便番号を生成するには、次のコマンドを実行します。
zet pack
ウィジェットまたはWebタブの郵便番号ファイルは、プロジェクトディレクトリ内の「dist」フォルダに作成されます。このファイルを使用してZoho Peopleアプリケーションへアップロードしてください。
内部ウィジェットまたはWebタブの郵便番号ファイルを作成したら、Zoho Peopleにアップロードして、ウィジェットやWebタブとして該当するインターフェースで利用できます。
ウィジェットのアップロード方法については、Zoho Peopleでのウィジェットの利用を参照してください。
Webタブのアップロード方法については、Zoho PeopleでのWebタブの利用を参照してください。
ウィジェットのアップロード方法については、Zoho Peopleでのウィジェットの利用を参照してください。
Webタブのアップロード方法については、Zoho PeopleでのWebタブの利用を参照してください。
注意事項
- ウィジェットまたはwebタブ 郵便番号フォルダーには、初期設定でAppフォルダー内にwidget。htmlファイルが格納されています。このファイルがインデックスファイルとなり、ページのウィジェットとして組み込まれます。
- Appフォルダー内に新たなフォルダーを作成し、widget。htmlファイルをその新規フォルダーに移動した場合、Zoho Peopleアカウントにウィジェットを追加する際、下記の形式でインデックスファイル名を指定する必要があります。
/
/
.html
- ウィジェット 郵便番号フォルダーは、zet packコマンドのみを使用して梱包済みの場合に有効な郵便番号ファイルとして認識されます。他のコマンドでウィジェットファイルをアップロードすると失敗します。
zet pack