ガイド：Zoho CRMでクライアントスクリプトを展開する方法とコード最適化のベストプラクティス

ガイド：Zoho CRMでクライアントスクリプトを展開する方法とコード最適化のベストプラクティス

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

この記事では、Zoho CRMの『Client ScriptClient Script
Client Scriptは、サーバーではなくWebブラウザ上で直接実行されるJavaScriptコードで、即時に応答が返されます。Zoho CRMでは、クライアント側Webブラウザの事前に定義されたイベントトリガーに基づいてClient Scriptが実行されます。たとえば、クライアント固有の処理（ページのonLoad、項目のonChange、ボタンのonClickなど）に応じてClient Scriptをトリガーし、指定したカスタム処理を行うことが可能です。

例：クライアントがリード／連絡先の「メール」項目にメールアドレスを入力した際、メールディスカバリーを実行し、同一ページ（作成ページや編集ページなど）の該当項目へ名・姓・電話番号などの関連情報を自動的に反映することができます。

  1. Client Scriptの展開場所

主な例
-> ページのOn_Load／On_Save／On_Edit、項目のOn_Type／On_Change、サブフォーム処理、Blueprint処理、リスト表示処理など
-> コマンド／ショートカットキー（CRM内のどこからでも、いつでもスクリプトをトリガー可能）
-> カスタムボタン（最近の拡張）
-> データ内のメモ関連リスト（最近の拡張）
-> Client Portal上（最近の拡張）
Notesさらに詳しい内容は、次のヘルプ参照をご確認ください（Client Script処理詳細）。

  1. Client Scriptの作成方法

Client Scriptは、2通りの方法で追加できます。

1. 設定ページからの場合：

Zoho CRMの設定（⚙️）>> Developer Hub >> Client Script >> 新規Scriptへ進みます。


-> スクリプトに適した名前と説明を入力してください

-> カテゴリー詳細-
  1. 要件に応じたカテゴリーを選択してください。タブ - 処理で発動 || Commands- コマンドパレットやショートカットキーで発動します。
  2. スクリプトを追加したいタブを選択してください（例：リード、連絡先など）。
  3. 特定のページでスクリプトを適用する場合はPageを選択してください（例：作成、編集、複製、詳細、リストなど）。
  4. Layoutを選択してください（例：スタンダード または カスタムレイアウト）。
-> イベント詳細-
対象の処理の種類を選択してください。項目イベント、ページイベント、サブフォームイベントのいずれかです。
  1.       項目イベント-> 項目とイベントを選択します（例：名項目のonChange）。
  2.       ページイベント-> ページとイベントを選択します（例：作成ページのonLoad）。
  3.       サブフォームイベント-> サブフォームとイベントを選択します（例：onCellChange）。

2. タブ内のデータの詳細／リスト／作成／編集／複製ページから

-> Zoho CRMで希望するタブを選択し、そのタブ内のリスト、作成、詳細、編集、または複製ページを開きます。例として、リードの作成ページを考えてみましょう。
-> ページ（作成／編集／複製など）の場合 - ページ右端にある「Client Script」をクリックします。次に、スクリプトを追加します。
-> カテゴリー詳細はシステムによって自動入力されます。client scriptの名前、説明、イベント詳細など、その他の詳細を入力してください。さらに「次へ」をクリックし、Client Script IDEのコードエディタにスクリプトを追加します。その後、「保存」および「閉じる」をクリックします。

詳細ページからClient Scriptを追加する方法：


リスト／作成／編集／複製ページなどからClient Scriptを追加する方法：


TIPS: Client Script内のコードを最適化する方法

Client ScriptをZoho CRMで利用する際、スムーズな実行とエラー防止のために、コードを最適化して記述することが重要です。これにより、パフォーマンスや保守性が向上し、不要なAPI通話を減らし、論理的に整理された構造で最適なコードを作成できます。

  1. 重複したコードを避ける

->Client Scriptは「Static Resources」という標準サブ機能をサポートしています。これにより、既存のコードファイルをインポート し、静的リソースとしてスクリプト内で利用することが容易になります。JavaScriptファイルを静的リソースとしてアップロードし、追加ボタンをコードエディタの右パネルでクリックしてスクリプトに取り込み、必要なときにスクリプト内から静的リソースファイルの関数を呼び出すことができます。詳細はStatic Resources（Client Script）をご参照ください。

  1. 初期設定のZDK ClientメソッドおよびWeb CRM APIの利用

-> Client Scriptは、ZDK（Zoho Development Kit）ライブラリにさまざまな初期設定の組み込みメソッドを提供しており、ユーザーがZoho CRM内での業務プロセスをより効率的に行うのに役立ちます。これらのすぐに利用できるメソッドを使うことで、ポップアップやアラートの表示、データの即時取得・更新、ログイン中のユーザーや組織情報の取得などの初期設定処理が実行可能です。Client APIの詳細およびサンプルについてはこちらをご覧ください。

-> 同様に、Zoho CRM REST APIのラッパーとして機能する各種Web CRMメソッドもサポートしており、ユーザーはClient Script内で直接利用できます。Zoho CRM内の必要な処理を実行する際にご活用ください。CRM APIでさらに詳しい情報やサンプルをご参照いただけます。

  1. Zoho CRM内でのWeb API通話の最小化

-> Web APIを頻繁に利用すると、カスタム関数・Developer Tool・サードパーティシステムで使用されるZoho CRM APIと同様にAPIクレジットが消費されます。例：fetchById（Web API）は「データ取得」CRM APIと同じクレジットを消費します。一方、Client APIはクライアント側のUI操作であり、クレジットは消費されません。API通話の過剰利用（またはループ内での繰り返しAPI通話）は、API利用上限を超過する原因となります。

  1. 不要なループの回避

-> スクリプトでfor()ループを使用する場合は、ループに入る前にデータをフィルタリングすることを推奨します。また、for()ループ内にIF条件を追加して、ループ内のデータをフィルタリングすることも可能です。

-> Bulk CRM APIを利用し、個別のAPI通話をループで繰り返す代わりに、一括処理（バルクリードやバルクライトなど）を実施してください。ユーザーは、Client Script内で初期設定のConnectionメソッドを使い、Zoho CRM APIへの通話が可能です。

  1. 変数の利用および本番環境でのログ記録

-> スクリプト作成中に、ユーザーはlog()/console.log()を各変数に追加して、出力結果を確認し、スムーズな動作を確かめることができます。出力は'Messages'タブ（Client Script IDE内）で各logs() 印刷の出力を表示できます。consoleログを表示するには、次の手順に従ってください - 'ブラウザページ上で右クリック >> 検証 >> Console'

-> コードのテストが完了した後は、出力ログや未使用変数を削除またはコメントアウトすることを推奨します。これにより、スクリプトが整理され、今後のデバッグが容易になります。

-> 変数名には意味のある名前を使用し、格納するデータや役割が明確になるようにしてください。これによりスクリプトの可読性が向上し、デバッグや共同作業も大幅に容易になります。

例:
​
      // ❌ 推奨されません
  1. x = input.取得する('Account_Name');
  2. var ar = ZDK.Apps.CRM.見込み客.fetchById( record_id );
      // ✅ 推奨
  1. accountName = input.取得する('Account_Name');
  2. lead = ZDK.Apps.CRM.見込み客.fetchById( record_id );
  1. Try-Catchブロックを使用する
-> try-catch ブロックを活用し、頻度 折れ線グラフ をtryで囲まずに例外処理を行うことができます。エラー発生時は、コードの折れ線グラフに関する問題を正確に特定できるよう、必須のエラーメッセージをログに記録してください。以下の例の構文を参照し、Client ScriptでTry-Catchを利用してください。
  1. ///下記のコードは、項目の更新時に折れ線グラフ4で構文エラーが発生します。そのため、Catchで例外がスローされます。
  2. try {
  3. 値 = 'テスト'
  4. Zoho.CRM.項目.setValue('市区町村', 値); //不正な構文
  5. }
  6. catch(e) {
  7. log('e ', e)
  8. log('e.メッセージ. ', e.メッセージ);
  9. }

  1. エラー防止のためのNullチェックの活用

-> Client Scriptで取得する()メソッドを利用する場合、'undefined/null'関連のエラーを回避するためにnullチェックを組み込むことができます。
Client Script内では、以下の方法でnull結果をチェックできます。

|| 演算子の使用  - 値が null、undefined、'' または 0 の場合に 0 を代入できます。
  1. 電話番号 = ZDK.Page.getField('電話番号').getValue();
  2. getFieldVal = phone123 ||0;
  3. log(getFieldVal); //phone123 が次の値と等しくない defined - 結果は「0」
?? 演算子の使用（推奨）- 値が null または undefined の場合のみ 0 を代入します。項目が空の文字列や 0 の場合は 0 にしません。
  1. emptyStr = '';
  2. getName = emptyStr ?? 0;
  3. log(getName); //いいえ string - 結果は 0 ではなく空の結果
if() 条件の使用- ユーザーは if 条件を使用して項目値を確認し、0 を代入することもできます。
  1. let 電話番号 = ZDK.Page.getField('電話番号').getValue();
  2. if (電話番号 === null || 電話番号 === undefined || 電話番号 === '') {
  3. 電話番号 = 0;
  4. }
  5. log(電話番号);
Info
Client Scriptの詳細については、サンプルコードをご参照ください。


ご不明な点がございましたら、どうぞご遠慮なくパートナー-サポート@zohocorp.comまでご連絡ください。
Notes
また、ヨーロッパおよびイギリスのパートナーの方は、パートナー-サポート@eu.zohocorp.comまでお問い合わせください。