スニペットの理解

スニペットの理解

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

概要
スニペットは、ページコンポーネント内のカスタムブロックで、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など、さまざまな要素を柔軟な表示構造で配置できます。さらに、そのコンテンツはアプリケーションのテーマに合わせて完全にスタイル設定できます。
また、DelugeスクリプトをZMLスニペットに統合することで、検証、データ操作、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の埋め込みスニペットは、動画、Webサイト、ダッシュボードなどの外部コンテンツを埋め込むために、<iframe>コードを挿入して使用します。これにより、Zoho製品内のコンテンツを、それぞれの埋め込みコードを使用して表示できます。さらに、サードパーティリソースをカスタムダッシュボード内に直接埋め込むこともできます。そのため、YouTube動画、ブログ、Google Maps、Webサイト、外部分析ツール、Webアプリなどのコンテンツを、ユーザーをアプリケーション外にリダイレクトせずにアプリ内で表示できます。埋め込み時には、埋め込むアセットのサイズを設定し、アプリケーションのライブモードでの表示をプレビューできます。
例- Zoho WriterドキュメントやZoho WorkDriveにアップロードした動画は、公開版の<iframe>コードを追加することで、埋め込みスニペットを通じて挿入できます。その後、スニペットはダッシュボード内で外部URLをその場で読み込むコンテナーとして機能します。
セキュリティのヒント：CORSの問題を回避し、セキュリティリスクからアプリケーションを保護するため、信頼できるリソースのコンテンツのみを埋め込むようにしてください。

2. ユースケース

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='true' type='Text' value='プロジェクト別経費'> </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' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' value='タスク合計'> </text>
  23. </pc>
  24. <pc>
  25. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='true' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='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='true' type='Text' bgColor='#CCFBF1' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='+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' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' value='平均経費'> </text>
  38. </pc>
  39. <pc>
  40. <text marginLeft='10px' marginRight='0px' marginBottom='0px' marginTop='0px' padding='0px' color='#000000' colorType='solid' size='18px' bold='true' type='Text' bgColor='transparent' bgColorType='solid' cornerRadius='2px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='$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='true' type='Text' bgColor='#FEE2E2' bgColorType='solid' cornerRadius='10px' borderColor='#000000' borderColorType='solid' borderWidth='0px' value='+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='月別経費' height='fill' type='Column' bgColor='#ffffff' theme='theme' cornerRadius='0px' legendPos='none' appLinkName='thisapp' formLinkName='Expenses' xfield='Expense_Date' yfields='sum:Amount' showDataLabel='true' dateGrouping='month_year'/>
  53. </pc>
  54. </pr>
  55. </pc>
  56. </pr>
  57. </panel>
  58. <%

  60. }%>
2. フライトの動的な搭乗率を表示するHTMLスニペット- Airline Managementアプリケーションでは、リアルタイムのフライト搭乗率インジケーターを表示するためにHTMLスニペットが埋め込まれています。Delugeを使用してTicket Bookingsレポートからデータを取得し、カスタム進捗バーと上下矢印に反映して、現在の搭乗率や変動を視覚的に示します。これにより、ユーザーは状況をすぐに把握し、過剰予約のリスク回避や座席割り当てに役立てることができます。
  1. <%{
  2. counts = Passenger_Details[ID != null].count();
  3. maxPassengers = 50;
  4. percent = 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); /* 暗いニュートラルなガラス調 */
  12. backdrop-filter: blur(20px);
  13. -webkit-backdrop-filter: blur(20px);
  14. border: 1px solid rgba(255, 255, 255, 0.3);
  15. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  16. color: #e0e0f8;
  17. font-family: Arial, sans-serif;
  18. text-align: center;
  19. position: relative;
  20. }
  21. .scorecard h2 {
  22. margin: 0 0 0.5rem;
  23. font-size: 1.4rem;
  24. color: #FFFFFF;
  25. }
  26. .score {
  27. display: inline-block;
  28. font-size: 2.8rem;
  29. font-weight: bold;
  30. color: #6147e5;
  31. vertical-align: middle;
  32. }
  33. .trend {
  34. display: inline-block;
  35. font-size: 1.6rem;
  36. font-weight: 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: hidden;
  47. width: 100%;
  48. position: relative;
  49. }
  50. .progress-bar {
  51. height: 100%;
  52. width: <%=percent%>%;
  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. box-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. font-size: 1rem;
  73. opacity: 0.8;
  74. color: #fff;
  75. }
  76. </style>

  78. <div class='scorecard'>
  79. <h2>乗客定員</h2>
  80. <span class='score'><%=percent%>%</span><span class='trend'>⬆︎</span>
  81. <div class='progress-container'>
  82. <div class='progress-bar'>
  83. <div class='progress-indicator'></div>
  84. </div>
  85. </div>
  86. <div class='progress-text'><%=percent%>/100%</div>
  87. </div>
  88. <%

  90. }%>

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

ページを作成した後、アプリケーションの編集モードで、ページビルダーの左ペインにあるスニペット要素を確認できます。［スニペット］をクリックすると、3種類のスニペットが表示されます。目的のスニペットを作成スペースにドラッグ＆ドロップできます。
 
  1. ZMLスニペットの作成と管理
  2. HTMLスニペットの作成と管理
  3. 埋め込みiframeスニペットの作成と管理
  4. ページについて
次のステップ
前へ
次のステップ
以下のZML、HTML、埋め込みスニペットを作成し、インタラクティブなパネル、UI要素、外部の埋め込み要素などをページに追加する方法を学びます。
前へ
埋め込みレポートをページ内に挿入し、一元化されたダッシュボードの一部として使用する方法について学びます。フォームデータを簡単に確認でき、関連する他のページ要素とともに整理できます。