スニペットの理解

スニペットの理解

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

概要
スニペットは、ZML（Zoho Markup Language）、HTML、または iframe コードを使用して作成できる、ページコンポーネント内のカスタムブロックです。コードブロック内に Deluge を組み込むことで、インタラクティブ性を持たせ、アプリケーションデータを表示できます。これにより、用途に合わせたヘッダー、データビュー付きのカスタムテーブル、メッセージなど、高度に動的な要素をページに埋め込むことができます。
利用可能プラン
  1. スニペットは、すべての Creator のプランで作成できます。
  2. スーパー管理者、管理者、および開発者のみが、スニペットを作成および管理できます。

1. 概要

Zoho Creator のスニペットは、ページコンポーネント内に追加されるコードのインラインブロックで、標準のページ要素を超えたカスタマイズ済みのページ要素を描画するために使用します。カスタムページ要素を作成できるだけでなく、スタイルを設定したり、UI インタラクション、Deluge 関数の呼び出しなどのロジックを追加することもできます。たとえば、アプリケーション内のフォームを埋め込むスニペットを作成し、ブランドやアプリケーションテーマに合わせて見た目をカスタマイズできます。
ページに埋め込めるスニペットの種類は次の 3 つです:
  1. ZML スニペット
  2. HTML スニペット
  3. 埋め込み iframe

1。1. ZML スニペット

ZML スニペットは、Zoho Markup Language（ZML）を使用してページ内に高度なパネルを設計・作成するためのコードブロックです。これらのパネルには、カスタムテーブル、インタラクティブな CTA など、柔軟なレイアウト構造で配置されたさまざまな要素を配置できます。さらに、パネル内のコンテンツは、アプリケーションのテーマに合わせて完全にスタイル設定できます。
さらに、ZML スニペットに Deluge スクリプトを組み込むことで、バリデーション、データ操作、API コールのトリガーなどのロジックを定義し、パネルのインタラクティブ性を高めることができます。たとえば、ZML スニペット内の要素をクリックしたときに Creator フォームを開いたり、関数をトリガーしたりできます。
例 - アプリケーションデータに応じて動的に更新されるヘッダーと、ナビゲーションや増減のためのインタラクティブな矢印を含むカスタムパネルを作成できます。

1。2. HTML スニペット

Zoho Creator の HTML スニペットは、標準的な HTML タグと CSS スタイルを使用して、完全にカスタマイズされたインタラクティブなユーザーインターフェイスを作成するために使用されます。主に、（ZML だけでは実現が難しい）高度なレスポンシブデザイン要件や、他サービスとの連携が必要な場合に利用されます。HTML スニペットを使用すると、インタラクティブなダッシュボード UI 要素を作成したり、地図、チャート、決済ゲートウェイなどの外部 UI 要素を埋め込んだり、それらに対して細かなスタイル制御を適用したりできます。
Zoho Creator の HTML スニペット内に Deluge スクリプトを統合することで、カスタムダッシュボードコンポーネントの機能性とインタラクティブ性を大幅に向上できます。Deluge コードを HTML スニペット内に直接埋め込むことで、ユーザー操作にリアルタイムで反応する動的なデータ駆動型要素を作成できます。これにより、フォーム送信、データバリデーション、API コールなどの処理を、カスタムデザインされたインターフェイス内からシームレスに実行できます。たとえば、HTML スニペット内のボタンをクリックすると、Creator フォームを開いたり、データを更新したり、ページを再読み込みすることなく外部データを取得したりできます。
例 - 以下のように、チャート、KPI 指標、トレンド、検索結果を整形して表示する iframe などを含む詳細パネルを作成できます。


1。3. 埋め込み

Zoho Creator の埋め込みスニペットは、<iframe> コードを挿入して、動画、Web サイト、ダッシュボードなどの外部コンテンツを埋め込むために使用します。これにより、各サービスが提供する埋め込みコードを利用して、Zoho 製品内にコンテンツを表示できます。さらに、サードパーティのリソースもカスタムダッシュボード内に直接埋め込むことができます。そのため、YouTube 動画、ブログ、Google マップ、Web サイト、外部分析ツール、Web アプリケーションなどのコンテンツを、ユーザーをアプリケーション外に遷移させることなく、アプリケーション内で閲覧できるようになります。埋め込む際には、埋め込みアセットのサイズを設定し、アプリケーションの有効な表示モードでどのように表示されるかをプレビューできます。
例 - Zoho Writer ドキュメントや Zoho WorkDrive にアップロードされた動画は、それぞれの公開バージョンの <iframe> コードを追加することで、埋め込みスニペットから挿入できます。スニペットはコンテナとして機能し、ダッシュボード上で外部 URL をその場で読み込みます。
セキュリティのヒント: CORS の問題を回避し、アプリケーションをセキュリティリスクから保護するため、信頼できるリソースからのコンテンツのみを埋め込むようにしてください。

1。4. 利用例

1. ダッシュボードにカスタム棒グラフを表示する ZML スニペット - プロジェクト管理アプリケーションのダッシュボードでは、リアルタイムのインサイトを提供するために、高度にカスタマイズされたメトリクス概要が実装されています。この概要パネルを設計するために、以下のコードを含む ZML スニペットがダッシュボードページに埋め込まれています。この概要には、送信された月次プロジェクトとその経費を比較するグラフが含まれており、ユーザーは財務パフォーマンスを詳細に監視できます。さらに、動的なヘルスインジケーターにより、その月のプロジェクトと経費の増減が視覚的に示され、プロジェクトの健全性を即座に把握できます。
  1. <%{
  2. %>
  3. <panel>
  4. <pr width='fill' height='fill' bgColor='#ffffff'>
  5. <pc>
  6. <pr width='fill' hAlign='left'>
  7. <pc>
  8. <text paddingTop='15px' paddingLeft='15px' color='#000000' colorType='solid' size='19px' bold='真' 種類='Text' 値='プロジェクト vs 経費'> </text>
  9. </pc>
  10. </pr>
  11. <pr width='fill'>
  12. <pc padding='10px' bgColor='transparent' bgColorType='noFill' width='100%' hAlign='center' vAlign='middle'>
  13. <pr width='fill' height='10px'>
  14. <pc>
  15. </pc>
  16. </pr>
  18. <pr width='fill' height='auto'>
  19. <pc padding='20px' bgColor='transparent' bgColorType='noFill' borderColor='#E4E9FA' borderColorType='solid' borderWidth='1px' width='50%' hAlign='center' vAlign='middle' cornerRadius='10px'>
  20. <pr width='auto' height='auto'>
  21. <pc>
  22. <text marginLeft='0px' marginRight='50px' marginBottom='0px' marginTop='0px' padding='0px' color='#333333' colorType='solid' size='16px' 種類='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' 値='タスク合計'> </text>
  23. </pc>
  24. <pc>
  25. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='真' 種類='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' 値='458'> </text>
  26. </pc>
  27. <pc>
  28. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' paddingTop='6px' paddingLeft='10px' paddingRight='10px' paddingBottom='6px' color='#115E59' colorType='solid' size='14px' bold='真' 種類='Text' bgColor='#CCFBF1' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' 値='+17%'> </text>
  29. </pc>
  30. </pr>
  31. </pc>
  32. <pc width='10px'>
  33. </pc>
  34. <pc paddingLeft='10px' paddingRight='10px' paddingTop='20px' paddingBottom='20px' bgColor='transparent' bgColorType='noFill' borderColor='#E4E9FA' borderColorType='solid' borderWidth='1px' width='50%' hAlign='center' vAlign='middle' cornerRadius='10px'>
  35. <pr width='auto' height='auto'>
  36. <pc>
  37. <text marginLeft='0px' marginRight='5px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='16px' 種類='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' 値='平均経費'> </text>
  38. </pc>
  39. <pc>
  40. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='真' 種類='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' 値='$19,888'> </text>
  41. </pc>
  42. <pc>
  43. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' paddingTop='6px' paddingLeft='10px' paddingRight='10px' paddingBottom='6px' color='#991B1B' colorType='solid' size='14px' bold='真' 種類='Text' bgColor='#FEE2E2' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' 値='+1%'> </text>
  44. </pc>
  45. </pr>
  46. </pc>
  47. </pr>
  48. </pc>
  49. </pr>
  50. <pr width='fill' height='auto'>
  51. <pc >
  52. <chart elementName='月別 vs. 経費' height='fill' 種類='列' bgColor='#ffffff' theme='theme' cornerRadius='0px' legendPos='なし' appLinkName='thisapp' formLinkName='経費' xfield='Expense_Date' yfields='sum:金額' showDataLabel='真' dateGrouping='month_year'/>
  53. </pc>
  54. </pr>
  55. </pc>
  56. </pr>
  57. </panel>
  58. <%

  60. }%>
2. フライトの動的な搭乗率を表示する HTML スニペット - 航空会社管理アプリケーションでは、リアルタイムのフライト搭乗率インジケーターを表示するために HTML スニペットが埋め込まれています。Deluge を使用してチケット予約レポートからデータを取得し、そのデータを基にカスタムの進捗バーと上下矢印を表示して、現在の搭乗率とその変動を視覚的に表現します。これにより、ユーザーはオーバーブッキングのリスクを回避し、座席割り当てを行うための即時のインサイトを得ることができます。
  1. <%{
  2. counts = Passenger_Details[ID != null].件数();
  3. maxPassengers = 50;
  4. パーセント = toNumber((counts/50)*100);
  5. %>
  6. <style>
  7. .scorecard {
  8. width: 320px;
  9. padding: 1。5rem;
  10. border-radius: 16px;
  11. background: rgba(44, 44, 44, 0。95); /* ダーク neutral glass */
  12. backdrop-フィルター: blur(20px);
  13. -webkit-backdrop-フィルター: blur(20px);
  14. border: 1px solid rgba(255, 255, 255, 0。3);
  15. 箱-shadow: 0 8px 32px rgba(0, 0, 0, 0。5);
  16. color: #e0e0f8;
  17. フォント-family: Arial, sans-serif;
  18. text-align: center;
  19. position: relative;
  20. }
  21. .scorecard h2 {
  22. margin: 0 0 0。5rem;
  23. フォント-size: 1。4rem;
  24. color: #FFFFFF;
  25. }
  26. .score {
  27. display: inline-block;
  28. フォント-size: 2。8rem;
  29. フォント-重さ: bold;
  30. color: #6147e5;
  31. vertical-align: middle;
  32. }
  33. .trend {
  34. display: inline-block;
  35. フォント-size: 1。6rem;
  36. フォント-重さ: bold;
  37. color: #2ecc71;
  38. margin-left: 0。5rem;
  39. vertical-align: middle;
  40. }
  41. .progress-container {
  42. margin: 1。2rem auto 0;
  43. height: 18px;
  44. border-radius: 9px;
  45. background: rgba(255, 255, 255, 0。2);
  46. overflow: 非表示;
  47. width: 100%;
  48. position: relative;
  49. }
  50. .progress-棒グラフ {
  51. height: 100%;
  52. width: <%=パーセント%>%;
  53. background: linear-gradient(90deg, #8f74e5, #6147e5);
  54. position: relative;
  55. }
  56. .progress-indicator {
  57. width: 14px;
  58. height: 14px;
  59. background: #fff;
  60. border: 3px solid #6147e5;
  61. border-radius: 50%;
  62. position: absolute;
  63. top: 50%;
  64. transform: translateY(-50%);
  65. right: -7px; /* インジケーター幅の半分を中央に配置 */
  66. 箱-shadow: 0 0 6px rgba(255, 255, 255, 0。6);
  67. }
  68. .progress-text {
  69. position: absolute;
  70. top: calc(50% + 20px);
  71. right: 1。5rem;
  72. フォント-size: 1rem;
  73. opacity: 0。8;
  74. color: #fff;
  75. }
  76. </style>

  78. <div クラス='scorecard'>
  79. <h2>Passenger Capacity</h2>
  80. <span クラス='score'><%=パーセント%>%</span><span クラス='trend'>⬆︎</span>
  81. <div クラス='progress-container'>
  82. <div クラス='progress-棒グラフ'>
  83. <div クラス='progress-indicator'></div>
  84. </div>
  85. </div>
  86. <div クラス='progress-text'><%=パーセント%>/100%</div>
  87. </div>
  88. <%

  90. }%>

1。2. スニペットのナビゲーションガイド

が次の後 you've ページを作成差出人 the 編集 モードof your application, できること find the snippet element オン the left pane of the page builder. When Snippetsis clicked, the three types of snippets are displayed, allowing you to drag and drop the desired one onto the building space.
 
  1. ZML スニペットの作成と管理
  2. HTML スニペットの作成と管理
  3. 埋め込み iframe スニペットの作成と管理
  4. ページについて
What's 次
前へ
What's 次
参照 to 作成 ZML, HTML, Embedsnippets to introduce interactive panels, UI 要素, external embedded 要素, and その他 into your pages.
前へ
参照 about how embedded レポート can be inserted within pagesto serve as part of a centralized ダッシュボード, making form data easily accessible and organized with other relevant page 要素.