Catalyst

by Zoho
×
キャンセル

このページにアクセス
  • チュートリアル
  • FAQ
  • 開発者ツール
    CLI
    SDK
    Java Node.js Python Web Android iOS Flutter
    REST API
    ユーティリティ
    拡張機能 ツール インテグレーション
    • コンソールへ

    お知らせ：

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

    テンプレートのカスタマイズ

    テンプレートデザインを選択すると、コンソールに内蔵されたテンプレートエディターに移動し、テンプレートをカスタマイズしてお好みに合わせてスタイリングできます。このヘルプドキュメントでは、Certificateテンプレートを使用したカスタマイズを説明します。

    以下に示すように、コンソールでテンプレートをスタイリングおよびカスタマイズするためのHTML、CSS、JavaScriptの各エディターセクションがあります。

    catalyst_smartbrowz_template_HTML

    LiquidJSを使用したテンプレートのカスタマイズ

    Catalyst SmartBrowzは、テンプレートのカスタマイズにLiquidJSの使用をサポートしています。LiquidJSは、要件に合わせたテンプレートを素早く作成するために活用できる、人気のオープンソーステンプレート言語です。

    テンプレートに読み込むコンテンツやJSONデータ（動的データ）は、要件に基づいて変更される場合があります。LiquidJSを使用してテンプレートをカスタマイズすることで、ネイティブフィルターを活用してこの動的データをシームレスに処理できます。

    テンプレートへの動的データは、JSONペイロードとして渡す必要があります。例えば、Certificateテンプレートを使用している場合、JSONペイロードは次のようになります：

    copy
    {
  "name": "Michelle Mascarenhas",
  "workshop_name": "Serverless Computing",
  "event_duration": "one day",
  "event_description": "building cutting-edge cloud applications",
  "team_name": "Zylker Technologies ",
  "event_name": "Zylker Technologies Pvt. Ltd.,",
  "event_location": "Manhattan, NewYork",
  "event_date": "20th February 2025"
}

    catalyst_smartbrowz_templates_json_sample

    注意: SmartBrowzは現在、LiquidJSのv10ランタイムをサポートしています。

    LiquidJS構文

    以下の表には、動的JSONデータを処理するためにテンプレートに適用できる必要なLiquidJS構文が含まれています。

    タグタイプ LiquidJS構文
    出力
    copy
    {{ user.name }}
    ロジック（制御フロー）
    copy
    {% if user.role == "admin" %}
  Welcome, Admin!
{% else %}
  Welcome, User!
{% endif %}
    ループ（For文）
    配列の反復処理
    copy
    {% for item in items %}
  {{ item.name }}
{% endfor %}
    ループ（For文）
    反復可能オブジェクトの使用
    copy
    {% for item in items %}
  {{ forloop.index }}: {{ item.name }}
{% endfor %}
    フィルター
    copy
    {{ "hello" | append: " world" }}
{{ 1000 | divided_by: 2 }}
{{ "LiquidJS" | upcase }}
    日付フォーマット
    copy
    {{ "now" | date: "%Y-%m-%d %H:%M:%S" }}
{{ "2025-02-07" | date: "%B %d, %Y" }}
    AssignとCapture
    テンプレート内で変数を割り当て
    copy
    {% assign greeting = "Hello" %}
{{ greeting }} World
    AssignとCapture
    複数行の値をキャプチャ
    copy
    {% capture message %}
  This is a multi-line text.
{% endcapture %}
{{ message }}
    コメント
    copy
    {% comment %}
  This is a comment and will not be rendered.
{% endcomment %}
    デフォルトフィルター
    値が提供されない場合、デフォルトとして設定した値が表示されます。
    copy
    <p>Name: {{ user.name | default: "Guest" }}</p>
    unlessによる条件分岐
    if文の反対として機能します。
    unlessブロック内のロジックは、条件がfalseの場合にのみ実行されます。
    copy
    {% unless user.role == "admin" %}
  <p>You are not an Admin</p>
{% endunless %}
    Case/When条件
    copy
    {% case user.role %}
  {% when "admin" %}
    <p>Admin Page</p>
  {% when "user" %}
    <p>User Page</p>
  {% else %}
    <p>Unknown Role</p>
{% endcase %}
    Raw出力
    レンダリングせずにLiquidコードを出力するために使用します。一般的にドキュメント目的で使用されます。
    copy
    {% raw %}
  This is raw Liquid syntax: {{ user.name }}
{% endraw %}
    配列とオブジェクトフィルター
    copy
    <p>First Item: {{ items | first }}</p>
<p>Item Count: {{ items | size }}</p>
    数学フィルター
    テンプレート内で算術演算子を使用するため
    copy
    <p>Discounted Price: {{ price | minus: 10 }}</p>
<p>Total Price: {{ price | times: 1.1 }}</p>
    部分テンプレートのレンダリング
    copy
    {% render 'header' %}
    情報: LiquidJSの詳細については、公式ドキュメントこちらをご覧ください。

    LiquidJSを使用したHTMLコードの例

    以下のコードスニペットは、テンプレートをカスタマイズするためにHTMLコードでLiquidJSを使用する例を示すことを目的としています。

    example.html
    copy
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dashboard - {{ user.name }}</title>

    </head>
<body>
    

    <!– Header –>
<header>
<h1>Hello, {{ user.name | default: “Guest” }}</h1>
{% if user.role == “admin” %}
<p class=“admin”>You have administrator access.</p>
{% else %}
<p class=“user”>Standard user access granted.</p>
{% endif %}
</header>
    

    <!– Items Section –>
<section>
<h2>Your Items</h2>
<ul>
{% for item in items %}
<li>{{ forloop.index }}. {{ item.name }}</li>
{% endfor %}
</ul>
<p> <strong>First Item:</strong> {{ items | first | map: “name” }}</p>
<p> <strong>Total Items:</strong> {{ items | size }}</p>
</section>
    

    <!– Pricing Section –>
<section>
<h2>Price Breakdown</h2>
<p>Original Price: ${{ price }}</p>
<p>After Discount ($10 off): ${{ price | minus: 10 }}</p>
<p>After Tax (10%): ${{ price | times: 1.1 }}</p>
<p>Half Price: ${{ price | divided_by: 2 }}</p>
</section>
    

    <!– Time Section –>
<section>
<h2>Date & Time</h2>
<p>Current Timestamp: {{ “now” | date: “%Y-%m-%d %H:%M:%S” }}</p>
<p>Next Billing Date: {{ “2025-02-07” | date: “%B %d, %Y” }}</p>
</section>
    

    <!– Custom Message –>
<section>
<h2>Message</h2>
{% assign greeting = “Hello” %}
<p>{{ greeting }} {{ user.name }}!</p>
    

    {% if custom_message %}
<div class=“custom-message”>
{{ custom_message }}
</div>
{% else %}
<div class=“custom-message”>
No custom message provided.
</div>
{% endif %}
</section>
    

    <!– User Role Case –>
<section>
<h2>Role Based Content</h2>
{% case user.role %}
{% when “admin” %}
<p>You are on the <strong>Admin Dashboard</strong>.</p>
{% when “user” %}
<p>You are on the <strong>User Dashboard</strong>.</p>
{% else %}
<p class=“alert”>Unknown role. Please contact support.</p>
{% endcase %}
    

    {% unless user.role == "admin" %}
  &lt;p class="alert"&gt;You are not an admin.&lt;/p&gt;
{% endunless %}

    

    </section>
    

    <!– Raw Display –>
<section>
<h2>Liquid Syntax Example</h2>
{% raw %}
To print user name: {{ user.name }}
{% endraw %}
</section>
    

    </body>
</html>
    View more

    下書きモードのテンプレート

    要件に基づいてHTML、CSS、JavaScriptコードをカスタマイズできます。JSONデータセクションを使用して、テンプレートにカスタム入力データを渡すことができます。

    catalyst_smartbrowz_template_json

    エディターで行った変更をレンダリングするには、Save as Draftボタンをクリックします。

    catalyst_smartbrowz_template_save_as_draft_button_first

    これにより、公開バージョンに影響を与えずにテンプレートの変更を確認できます。

    catalyst_smartbrowz_template_draft_version

    View Published Versionボタンをクリックすることで、いつでもテンプレートの公開バージョンを確認できます。

    catalyst_smartbrowz_template_published_view

    必要な編集が完了したら、Save & Publishボタンをクリックしてライブにレンダリングできます。

    catalyst_smartbrowz_template_published_view

    この操作により、現在のライブバージョンが削除され、下書きがテンプレートのライブバージョンとしてレンダリングされます。

    下書きの破棄

    編集内容に満足できず、下書きへのすべての変更を削除したい場合、つまりテンプレートを最新の公開バージョンに復元したい場合は、下書きを破棄するだけです。

    下書きを破棄するには：

    1. Discard Draftボタンをクリックします。 catalyst_smartbrowz_templates_discard_draft

    2. Confirmをクリックして下書きを破棄します。 catalyst_smartbrowz_templates_discard_draft_confirm

    下書きが削除されます。テンプレートを最新のライブバージョンにレンダリングするコードと構成がエディターに復元されます。

    テンプレートの向きとレイアウトのカスタマイズ

    Settingsセクションを使用して、ビジュアルドキュメントのパスワード保護、ドキュメントのレイアウトと向きのスタイリング、出力形式の決定ができます。 catalyst_smartbrowz_template_settings

    このセクションでは、さまざまなドロップダウン選択を使用して、テンプレートの以下の機能をカスタマイズします：

    出力形式

    テンプレートの出力を以下の形式で生成できます：

    • PDF
    • HTML (Rendered): **HTML (Rendered)**出力形式は、テンプレートをHTMLコードとしてダウンロードします。テンプレートのすべてのスタイリング、構成、およびテンプレート自体がHTMLコードとしてダウンロードできます。
    • PNG、JPEG。 catalyst_smartbrowz_templates_output_format

    用紙サイズ

    SmartBrowz Templatesは、テンプレートの用紙レイアウトをデザインするためのCustomオプションを含む、すべてのISO 216用紙サイズオプションを提供しています。

    catalyst_smartbrowz_templates_paper_sizes

    向き

    SmartBrowz Templatesは、テンプレートの向きを選択するオプションを提供しています。LandscapeまたはPortraitの向きでテンプレートを生成するオプションがあります。

    catalyst_smartbrowz_templates_paper_orientation

    背景グラフィック

    SmartBrowz Templatesは、テンプレートの背景グラフィックを有効または無効にするオプションを提供しています。

    catalyst_smartbrowz_templates_drop_down

    詳細スタイリングオプション

    Show Advanced Styling Optionsをクリックすることで、テンプレートのマージンの向きをさらに変更できます。 catalyst_smartbrowz_template_advanced_ops

    注意:

    • ドキュメントのヘッダーとフッターを構成する際、入力フィールドに値を入力するか、HTMLコードオプションを選択してHTMLでカスタマイズをコーディングできます。

    • ヘッダーとフッターの値を入力する際は、プレビューセクションで変更を確認するために10px以上で入力してください。

    パスワード保護されたPDF

    Templatesでは、テンプレートを使用して生成されたドキュメントをパスワード保護できます。テンプレートのパスワードを手動で設定するか、Catalystにパスワードを動的に設定するよう指示するロジックをコーディングできます。

    注意: ビジュアルドキュメントをパスワード保護するには、ドキュメントの出力形式がPDFである必要があります。

    PDFをパスワード保護するには、Set Password for PDFトグルをクリックします： catalyst_smartbrowz_templates_pwd_protect

    1. PDFのパスワードを設定する方法は2つあります：

      • デフォルトでは、Set Password Manuallyオプションが選択されています。このオプションを選択すると、PDF & ScreenshotコンポーネントのPlaygroundセクションでPDFのパスワードを設定できます。 catalyst_smartbrowz_templates_pwd_protect_depicts
      注意: このAPIを使用して、「pdf_options」JSON内にJSONキーバリューペア「password」としてドキュメントのパスワードを渡すことで、PDFのパスワードを手動で設定することもできます。
      • Set Password Dynamicallyオプションをクリックすると、テンプレートからPDFが生成されるたびに、コーディングしたロジックに基づいてドキュメントのパスワードが自動的に設定されるカスタムロジックをコーディングできます。 catalyst_smartbrowz_templates_pwd_protect_dynamically
        このヘルプドキュメントでは、以下に示すコードスニペットを実装しています：
    Sample Logic
    copy
    module.exports = (jsonData) => {
    // client.nameの最初の4文字を抽出する
    const clientName = jsonData.client.data[0].name.trim(); // 先頭/末尾のスペースを削除
    const firstNameLetters = clientName.substring(0, 4);
    // client.phnの最後の4桁を抽出する
    const clientPhone = jsonData.client.data[0].phn.trim(); // 先頭/末尾のスペースを削除
    const lastFourDigits = clientPhone.slice(-4);
    const password = ${firstNameLetters}${lastFourDigits};
    //パスワードは「Amel2782」になります

     return password;

    

    };
    View more

    jsonData入力の値は以下の通りです：

    jsonData
    copy
    {
    "address": {
        "name": "107 Traction Street,Green Ville",
        "postal": "South carolina-600028"
    },
    "client": {
        "data": [
            {
                "name": "Amelia Burrows",
                "phn": "+1-212-6782782",
                "start": "Monday,Feburary,28,2019",
                "end": "Monday,March,28,2019"
            }
        ]
    }
}
    View more

    このテンプレートから生成されたPDFドキュメントには、名前の最初の文字と電話番号の下4桁の組み合わせによるパスワードパターンが設定されます。

    1. Save & Publishをクリックして、テンプレートにパスワード保護を適用します。
    注意: Save as Draftをクリックした場合、パスワード保護はテンプレートのライブバージョンには適用されません。

    テンプレートのすべてのカスタマイズが完了したら、Templatesコンポーネントからいつでもこのテンプレートにアクセスできます。

    catalyst_smartbrowz_template_created

    最終更新日 2026-03-30 13:40:30 +0530 IST

    前へ

    次へ