--- title: "テンプレートのカスタマイズ" url: https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/customize-templates/ description: "Webページやドキュメントのテンプレートを作成、構成、管理し、PDF and Screenshotでビジュアルドキュメントを生成します。" last_updated: 2026-08-17T12:16:04Z service: SmartBrowz type: general --- # テンプレートのカスタマイズ テンプレートデザインを選択すると、コンソールに内蔵されたテンプレートエディターに移動し、テンプレートをカスタマイズしてお好みに合わせてスタイリングできます。このヘルプドキュメントでは、*Certificate*テンプレートを使用したカスタマイズを説明します。 以下に示すように、コンソールでテンプレートをスタイリングおよびカスタマイズするためのHTML、CSS、JavaScriptの各エディターセクションがあります。 ![catalyst_smartbrowz_template_HTML](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_HTML.webp) ### LiquidJSを使用したテンプレートのカスタマイズ Catalyst SmartBrowzは、テンプレートのカスタマイズに[LiquidJS](https://liquidjs.com/)の使用をサポートしています。LiquidJSは、要件に合わせたテンプレートを素早く作成するために活用できる、人気のオープンソーステンプレート言語です。 テンプレートに読み込むコンテンツやJSONデータ（動的データ）は、要件に基づいて変更される場合があります。LiquidJSを使用してテンプレートをカスタマイズすることで、ネイティブフィルターを活用してこの動的データをシームレスに処理できます。 テンプレートへの動的データは、JSONペイロードとして渡す必要があります。例えば、**Certificate**テンプレートを使用している場合、JSONペイロードは次のようになります： ```json { "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](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_json_sample.webp) > **注意:** SmartBrowzは現在、LiquidJSの`v10`ランタイムをサポートしています。 #### LiquidJS構文 以下の表には、動的JSONデータを処理するためにテンプレートに適用できる必要なLiquidJS構文が含まれています。
タグタイプ LiquidJS構文
**出力** ```javascript {{ user.name }} ```
**ロジック（制御フロー）** ```javascript {% if user.role == "admin" %} Welcome, Admin! {% else %} Welcome, User! {% endif %} ```
**ループ（For文）** 配列の反復処理 ```javascript {% for item in items %} {{ item.name }} {% endfor %} ```
**ループ（For文）** 反復可能オブジェクトの使用 ```javascript {% for item in items %} {{ forloop.index }}: {{ item.name }} {% endfor %} ```
**フィルター** ```javascript {{ "hello" | append: " world" }} {{ 1000 | divided_by: 2 }} {{ "LiquidJS" | upcase }} ```
**日付フォーマット** ```javascript {{ "now" | date: "%Y-%m-%d %H:%M:%S" }} {{ "2025-02-07" | date: "%B %d, %Y" }} ```
**AssignとCapture** テンプレート内で変数を割り当て ```javascript {% assign greeting = "Hello" %} {{ greeting }} World ```
**AssignとCapture** 複数行の値をキャプチャ ```javascript {% capture message %} This is a multi-line text. {% endcapture %} {{ message }} ```
**コメント** ```javascript {% comment %} This is a comment and will not be rendered. {% endcomment %} ```
**デフォルトフィルター** 値が提供されない場合、デフォルトとして設定した値が表示されます。 ```javascript <p>Name: {{ user.name | default: "Guest" }}</p> ```
**`unless`による条件分岐** `if`文の反対として機能します。 `unless`ブロック内のロジックは、条件がfalseの場合にのみ実行されます。 ```javascript {% unless user.role == "admin" %} <p>You are not an Admin</p> {% endunless %} ```
**Case/When条件** ```javascript {% case user.role %} {% when "admin" %} <p>Admin Page</p> {% when "user" %} <p>User Page</p> {% else %} <p>Unknown Role</p> {% endcase %} ```
**Raw出力** レンダリングせずにLiquidコードを出力するために使用します。一般的にドキュメント目的で使用されます。 ```javascript {% raw %} This is raw Liquid syntax: {{ user.name }} {% endraw %} ```
**配列とオブジェクトフィルター** ```javascript <p>First Item: {{ items | first }}</p> <p>Item Count: {{ items | size }}</p> ```
**数学フィルター** テンプレート内で算術演算子を使用するため ```javascript <p>Discounted Price: {{ price | minus: 10 }}</p> <p>Total Price: {{ price | times: 1.1 }}</p> ```
**部分テンプレートのレンダリング** ```javascript {% render 'header' %} ```
> **情報:** LiquidJSの詳細については、公式ドキュメント[こちら](https://liquidjs.com/)をご覧ください。 #### LiquidJSを使用したHTMLコードの例 以下のコードスニペットは、テンプレートをカスタマイズするためにHTMLコードでLiquidJSを使用する例を示すことを目的としています。 **example.html** ```xml <!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" %} <p class="alert">You are not an admin.</p> {% endunless %} </section> <!-- Raw Display --> <section> <h2>Liquid Syntax Example</h2> {% raw %} To print user name: {{ user.name }} {% endraw %} </section> </body> </html> ``` ### 下書きモードのテンプレート 要件に基づいてHTML、CSS、JavaScriptコードをカスタマイズできます。JSONデータセクションを使用して、テンプレートにカスタム入力データを渡すことができます。 ![catalyst_smartbrowz_template_json](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_json.webp) エディターで行った変更をレンダリングするには、**Save as Draft**ボタンをクリックします。 ![catalyst_smartbrowz_template_save_as_draft_button_first](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_save_as_draft_button_first.webp) これにより、公開バージョンに影響を与えずにテンプレートの変更を確認できます。 ![catalyst_smartbrowz_template_draft_version](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_draft_version.webp) **View Published Version**ボタンをクリックすることで、いつでもテンプレートの公開バージョンを確認できます。 ![catalyst_smartbrowz_template_published_view](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_published_view.webp) 必要な編集が完了したら、**Save & Publish**ボタンをクリックしてライブにレンダリングできます。 ![catalyst_smartbrowz_template_published_view](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_published_view.webp) この操作により、**現在のライブバージョンが削除**され、下書きがテンプレートのライブバージョンとしてレンダリングされます。 ### 下書きの破棄 編集内容に満足できず、下書きへのすべての変更を削除したい場合、つまりテンプレートを最新の公開バージョンに復元したい場合は、下書きを破棄するだけです。 下書きを破棄するには： 1. **Discard Draft**ボタンをクリックします。 ![catalyst_smartbrowz_templates_discard_draft](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_discard_draft.webp) 2. **Confirm**をクリックして下書きを破棄します。 ![catalyst_smartbrowz_templates_discard_draft_confirm](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_discard_draft_confirm.webp) 下書きが削除されます。テンプレートを最新のライブバージョンにレンダリングするコードと構成がエディターに復元されます。 ### テンプレートの向きとレイアウトのカスタマイズ **Settings**セクションを使用して、ビジュアルドキュメントのパスワード保護、ドキュメントのレイアウトと向きのスタイリング、出力形式の決定ができます。 ![catalyst_smartbrowz_template_settings](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_settings.webp) このセクションでは、さまざまなドロップダウン選択を使用して、テンプレートの以下の機能をカスタマイズします： #### 出力形式 テンプレートの出力を以下の形式で生成できます： * PDF * HTML (Rendered): **HTML (Rendered)**出力形式は、テンプレートをHTMLコードとしてダウンロードします。テンプレートのすべてのスタイリング、構成、およびテンプレート自体がHTMLコードとしてダウンロードできます。 * PNG、JPEG。 ![catalyst_smartbrowz_templates_output_format](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_output_format.webp) #### 用紙サイズ SmartBrowz Templatesは、テンプレートの用紙レイアウトをデザインするための*Custom*オプションを含む、すべての**ISO 216**用紙サイズオプションを提供しています。 ![catalyst_smartbrowz_templates_paper_sizes](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_paper_sizes.webp) #### 向き SmartBrowz Templatesは、テンプレートの向きを選択するオプションを提供しています。**Landscape**または**Portrait**の向きでテンプレートを生成するオプションがあります。 ![catalyst_smartbrowz_templates_paper_orientation](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_paper_orientation.webp) #### 背景グラフィック SmartBrowz Templatesは、テンプレートの背景グラフィックを**有効**または**無効**にするオプションを提供しています。 ![catalyst_smartbrowz_templates_drop_down](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_drop_down.webp) #### 詳細スタイリングオプション **Show Advanced Styling Options**をクリックすることで、テンプレートのマージンの向きをさらに変更できます。 ![catalyst_smartbrowz_template_advanced_ops](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_advanced_ops.webp) > **注意:** * ドキュメントの*ヘッダー*と*フッター*を構成する際、入力フィールドに値を入力するか、**HTMLコード**オプションを選択してHTMLでカスタマイズをコーディングできます。 * *ヘッダー*と*フッター*の値を入力する際は、プレビューセクションで変更を確認するために10px以上で入力してください。 ### パスワード保護されたPDF *Templates*では、テンプレートを使用して生成されたドキュメントをパスワード保護できます。テンプレートのパスワードを手動で設定するか、Catalystにパスワードを動的に設定するよう指示するロジックをコーディングできます。 > **注意:** ビジュアルドキュメントをパスワード保護するには、ドキュメントの*出力形式*がPDFである必要があります。 PDFをパスワード保護するには、**Set Password for PDF**トグルをクリックします： ![catalyst_smartbrowz_templates_pwd_protect](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect.webp) 1. PDFのパスワードを設定する方法は2つあります： * デフォルトでは、**Set Password Manually**オプションが選択されています。このオプションを選択すると、[PDF & Screenshot](https://docs.catalyst.zoho.com/ja/smartbrowz/help/pdfnscreenshot/introduction/)コンポーネントの*Playground*セクションでPDFのパスワードを設定できます。 ![catalyst_smartbrowz_templates_pwd_protect_depicts](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect_depicts.webp) > **注意:** この[API](https://docs.catalyst.zoho.com/ja/api/code-reference/smartbrowz/generate-pdfnscreenshottemplate/#PDF%26ScreenshotwithTemplateasInput)を使用して、「`pdf_options`」JSON内にJSONキーバリューペア「**password**」としてドキュメントのパスワードを渡すことで、PDFのパスワードを手動で設定することもできます。 * **Set Password Dynamically**オプションをクリックすると、テンプレートからPDFが生成されるたびに、コーディングしたロジックに基づいてドキュメントのパスワードが自動的に設定されるカスタムロジックをコーディングできます。 ![catalyst_smartbrowz_templates_pwd_protect_dynamically](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_templates_pwd_protect_dynamically.webp) このヘルプドキュメントでは、以下に示すコードスニペットを実装しています： **Sample Logic** ```javascript 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; }; ``` `jsonData`入力の値は以下の通りです： **jsonData** ```json { "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" } ] } } ``` このテンプレートから生成されたPDFドキュメントには、名前の最初の文字と電話番号の下4桁の組み合わせによるパスワードパターンが設定されます。 2. **Save & Publish**をクリックして、テンプレートにパスワード保護を適用します。 > **注意:** **Save as Draft**をクリックした場合、パスワード保護はテンプレートのライブバージョンには適用されません。 テンプレートのすべてのカスタマイズが完了したら、*Templates*コンポーネントからいつでもこのテンプレートにアクセスできます。 ![catalyst_smartbrowz_template_created](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_template_created.webp)