CLIを使った拡張機能の作成

CLIを使った拡張機能の作成

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要

Zoho マーケットプレイスは、開発した Zoho 製品向け拡張機能をアップロードできるオンラインストアです。また、ストアで公開されている拡張機能を自社で利用することもできます。本開発者ガイドでは、拡張機能を作成し、Zoho マーケットプレイスに公開するまでの手順を説明します。

開始前に確認しておくこと

マニフェストファイル

各拡張機能には、その動作を定義する独自の plugin-manifest.json ファイルが必要です。このファイルを定義したあとは、HTML、JavaScript、CSS などのクライアントサイド技術を使って拡張機能を作成できます。拡張機能は非公開としてホストすることも、公開拡張機能として申請することもできます。

非公開拡張機能と公開拡張機能

拡張機能を送信する際には、非公開拡張機能としてか、公開拡張機能としてかを指定する必要があります。それぞれの違いを理解しておくと、開発計画を立てやすくなります。

動作 非公開拡張機能 公開拡張機能
表示設定 インストール用 URL を知っているユーザーであれば、拡張機能にアクセスできます。 誰でも
送信後の審査 該当なし はい。
拡張機能は当社で審査され、Zoho マーケットプレイスに公開されます。

ランタイム環境の設定

  1. 拡張機能の開発環境を構築するために「Node.js」をインストールします。
  2. 以下のリンクからファイルをダウンロードします。
  3. 次のコマンドを実行してバージョンを確認します: $ node -v
ファイルのダウンロードリンク: https://nodejs.org/en/
Zoho Extension Toolkit(ZET)がサポートするバージョン: 6.0 以上

Zoho Extension Toolkit のインストール

Zoho Extension Toolkit(ZET)は、コマンドラインインターフェイスツールです。このツールを使用して、拡張機能の作成、テスト、パッケージ化を行います。お使いの OS に応じたコマンドを実行して、ツールをインストールしてください。

オペレーティングシステム コマンド
MacOS / Linux sudo npm install -g Zoho-extension-toolkit
Windows npm install -g Zoho-extension-toolkit

-g はグローバルインストールを表します。ZET をグローバルインストールすると、マシン上のどこからでもコマンドを実行できます。グローバルインストールしない場合は、ZET をインストールしたパスに移動してから ZET コマンドを実行する必要があります。インストール後、次のコマンドを実行してバージョンを確認します: zet -v

ZET オプション

  • -v, --version - バージョン番号を表示します
  • -h, --help - 使い方情報を表示します

ZET コマンド

init

使用方法: $zet init

このコマンドは、新しいプロジェクトテンプレート用のディレクトリを作成します。このセクションの手順 1 ~ 4 を実行して、拡張機能用に作成されるフォルダー構造を確認します。

run

使用方法: $zet run

このコマンドは、現在のディレクトリをコンテキストとしてローカルサーバーを起動します。このセクションの手順 6 と 7 を実行して、拡張機能を実行します。

validate

使用方法: $zet validate

このコマンドは、現在の拡張機能を検証します。このセクションの手順 8 を実行して、plugin-manifest.json ファイルで定義されたルールに対して拡張機能を検証します。

pack

使用方法: $zet pack

このコマンドは、プロジェクトを ZIP ファイルにパッケージ化し、Zoho マーケットプレイスにアップロードできるようにします。このセクションの手順 9 を実行して、拡張機能をパッケージ化します。これは拡張機能作成の最終手順です。

最初の拡張機能を作成する

拡張機能の作成方法

  1. zet init を実行します
     
    • 拡張機能を作成する対象の Zoho サービスを選択するプロンプトが表示されます。
  2. Zoho プロジェクト を選択します
  3. 拡張機能の名前を指定します。フォルダー構成が作成されます。
  4. cd [拡張機能名] を実行します
    • このコマンドにより、現在のパスが新しく作成された拡張機能のディレクトリパスに設定されます。
  5. マシン上で上記ディレクトリに移動し、HTML、JS、CSS などのクライアントサイド技術を使用して拡張機能を開発します。
    • 注意事項:
      manifest 参照を明確に定義します。
    • 当社がサポートする JS SDK メソッドを呼び出す前に、この JS をコードに含めてください。
  6. zet run を実行します
     
    • このコマンドはローカルサーバーを起動し、拡張機能をローカルで実行します。
    • 拡張機能はポート 5000 で実行されます。このコマンドを実行する前に、そのポートが使用可能であることを確認してください。
  7. http://127.0.0.1:5000/plugin-manifest.json または http://127.0.0.1:5000/app/index.html にアクセスして、サーバーが正常に起動しているか確認します。検証する前に、開発者モードで拡張機能をテストすることもできます。
  8. zet validate を実行します
     
    • このコマンドは、拡張機能が plugin-manifest.json ファイルで定義されたガイドラインを満たしているかどうかをチェックします。plugin-manifest.json ファイルの設定方法はこちらを参照してください。
    • ファイルが検証に合格すると、完了メッセージが緑色で表示されます。失敗した場合は内容を修正し、再度 zet validate を実行してください。
  9. zet pack を実行します
     
    • このコマンドは、拡張機能の実行に必要なファイルとフォルダーを圧縮し、出力として「.zip」ファイルを生成します。ファイルは「/{拡張機能のディレクトリ}/dist」パス内に作成されます。
      • サンプルファイルパス: '/myfirstextension/dist'
    • この zip ファイルは、拡張機能が非公開か公開かに関わらず、ZApps にアップロードする必要があります。

開発者モードで拡張機能をテストする

前提条件

  • 開発者モードで拡張機能をテストするには、Zoho プロジェクトのポータルにログインしている必要があります。まだアカウントをお持ちでない場合はこちらから登録し、ブラウザーで有効なセッションを開始してください。
  • 拡張機能はポート 5000 で実行されている必要があります。
  1. 右上隅の をクリックします。
  2. Integration の下で 開発者向け情報 を選択し、拡張機能を作成 を選択します。
  3. 開発者モードを有効にする をクリックします。
  4. ポート 5000 で実行されている拡張機能は、Zoho プロジェクト内のあらかじめ定義されたすべての場所に表示されます。指定されたウィジェットの場所に移動して、拡張機能をテストできます。
  5. 開発者モードが有効な場合、ローカルで実行されている拡張機能のみが表示され、その他の拡張機能は無効になります。
  6. 開発者モードを終了するには、開発者モードを有効にする ボタンの選択を解除します。
  • 開発者モードで拡張機能をテストするために、インストールは不要です。そのため、plugin-manifest.json ファイルの設定では、name とあわせて value パラメーターを指定する必要があります。
  • plugin-manifest.json ファイルの作成時にすでに認証が完了しているため、接続を再度認証しないでください。
  • ローカルで実行されている拡張機能のデータは Zoho プロジェクトには保存されません。代わりに、ブラウザーのローカルストレージが使用されます。
  • ポート 5000 で実行されている拡張機能は、開発者モードでのみ表示されます。

マーケットプレイスで既存の拡張機能を更新する

開発者は、必要に応じていつでも拡張機能を更新できます。頻繁に更新する場合は、拡張機能のバージョンがその都度変更されます。マーケットプレイスで公開済みの拡張機能を更新する手順は次のとおりです。

  1. https://sigma.zoho.com にアクセスします。
  2. 拡張機能の詳細 アイコンをクリックします。
  3. 拡張機能の件名の下にある     をクリックします。
  4. 新しい ZIP ファイル(拡張機能のパッケージ版)をアップロードします。
  5. 利用規約に同意します。
  6. 下書きとして保存 をクリックします。
  7. 右上隅の 公開 をクリックします。