--- title: "実装" url: https://docs.catalyst.zoho.com/ja/smartbrowz/help/pdfnscreenshot/implementation/ description: "お好みの入力形式タイプに基づいて、プログラムまたはコンソールでWebページやドキュメントのPDFおよびスクリーンショットを取得します。" last_updated: 2026-08-17T12:16:04Z service: SmartBrowz type: general --- # 実装 コンソールの**SmartBrowz**セクションにある*PDF & Screenshot*コンポーネントに移動します。PDF & Screenshotを使用すると、任意のWebページのビジュアルドキュメントを生成できます。このコンポーネントは以下の2つの方法で使用できます： - **SDKの使用** ![catalyst_smartbrowz_pdfnscreen_code_snippets](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_code_snippets.webp) - **Playground機能の使用** ![catalyst_smartbrowz_pdfnscreen_playground_show](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_playground_show.webp) ### コードによるPDF & Screenshotの生成 Catalystは、以下のフレームワークでPDF & Screenshotを生成するために必要なSDKを提供しています： * [Java SDK](https://docs.catalyst.zoho.com/ja/sdk/java/v1/smartbrowz/generate-pdfnscreenshot/) * [NodeJS SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/) * [Python SDK](https://docs.catalyst.zoho.com/ja/sdk/python/v1/smartbrowz/generate-pdfnscreenshot/) この[Catalyst API](https://docs.catalyst.zoho.com/ja/api/code-reference/smartbrowz/generate-pdfnscreenshoturl/#PDF%26ScreenshotwithHTML%2fURLasInput)を使用して、お好みの形式でビジュアルドキュメントを生成することもできます。 お好みのプログラミング言語に基づいて、以下のコードスニペットをコピーしてアプリケーションロジックに貼り付けることで、ビジュアルドキュメントを生成できます： ### Java SDK **Java SDK to Generate Visual Documents** ```java // SmartBrowzを初期化 ZCSmartBrowz smartBrowz = ZCSmartBrowz.getInstance(); // 事前定義されたテンプレートから出力を生成する ZCSmartBrowzConvertDetails convertDetailsForTemplateConversion = ZCSmartBrowzConvertDetails.getInstance(); convertDetailsForTemplateConversion.setTemplateId(YOUR_TEMPLATE_ID); smartBrowz.generateFromTemplate(convertDetailsForTemplateConversion); // HTMLからPDFに変換する ZCSmartBrowzConvertDetails convertDetailsForPDF = ZCSmartBrowzConvertDetails.getInstance(); convertDetailsForPDF.setHtml("YOUR_HTML_CODE"); smartBrowz.takeScreenshot(convertDetailsForPDF); // URLからスクリーンショットを撮る ZCSmartBrowzConvertDetails convertDetailsForScreenshot = ZCSmartBrowzConvertDetails.getInstance(); convertDetailsForScreenshot.setUrl("YOUR_URL"); smartBrowz.convertToPdf(convertDetailsForScreenshot); ``` > **注意:** このコードスニペットには、受け入れ可能な入力を受け取り、PDFおよびスクリーンショットを生成するための個別のロジックが含まれています。スニペットをコピーする際は、要件に関連するコード行を保持し、残りは省略してください。 ### Node.js SDK **Node.js SDK to Generate Visual Documents** ```javascript const smartbrowz = app.smartbrowz(); // テンプレートから出力を生成する smartbrowz.generateFromTemplate("YOUR_TEMPLATE_ID", {"template_data": YOUR_TEMPLATE_DATA} ) .then((data)=>{ // 成功時 }).catch((err)=>{ // エラー時 }) // HTMLからPDFに変換する smartbrowz.convertToPdf("YOUR_HTML_CODE", { "pdf_options": {}, "page_options": {} }).then((data)=>{ // 成功時 }).catch((err)=>{ // エラー時 }); // URLからスクリーンショットをキャプチャする smartbrowz.takeScreenshot("YOUR_URL", { "screenshot_options": { "type": "jpeg" //Provide either jpg or png }, "page_options": { "device": "iPad" //Provide a device of your prefrence } }).then((data)=>{ // 成功時 }).catch((err)=>{ // エラー時 }) ``` > **注意:** このコードスニペットには、受け入れ可能な入力を受け取り、PDFおよびスクリーンショットを生成するための個別のロジックが含まれています。スニペットをコピーする際は、要件に関連するコード行を保持し、残りは省略してください。 ### Python SDK **Python SDK to Generate Visual Documents** ```python # SmartBrowzインスタンスを初期化する smart_browz = app.smart_browz() # generate output from a predefined template output_template = smart_browz.generate_output_from_template( template_id='YOUR_TEMPLATE_ID', template_data={}, output_type='pdf', // ここでビジュアルドキュメントの形式を指定できます pdf_options={}, navigation_options={} ) # convert to PDF from HTML output_pdf = smart_browz.convert_to_pdf(source='YOUR_HTML_CODE') # take a screenshot from URL output_screenshot = smart_browz.take_screenshot( source='YOUR_URL', screenshot_options={ 'quality': '100' }, page_options={ 'device': 'iphone 13 pro' //Provide a device of your prefrence }, navigation_options={ 'timeout': '3000', 'wait_until': 'domcontentloaded' } ) ``` > **注意:** このコードスニペットには、受け入れ可能な入力を受け取り、PDFおよびスクリーンショットを生成するための個別のロジックが含まれています。スニペットをコピーする際は、要件に関連するコード行を保持し、残りは省略してください。 これらのコードスニペットは、コンソールのPDF & Screenshotコンポーネントの**SDKコードスニペット**セクションで利用できます。必要なスタックのコードをコピーして、ビジネスロジックに組み込むことができます。 ![catalyst_smartbrowz_pdfnscreen_snippet_selection_py](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_snippet_selection_py.webp) この[API](https://docs.catalyst.zoho.com/ja/api/code-reference/smartbrowz/generate-pdfnscreenshoturl/#PDF%26ScreenshotwithHTML%2fURLasInput)を使用して、PDF & Screenshotを生成することもできます。[リクエストの認証](https://docs.catalyst.zoho.com/ja/api/oauth2/overview-and-terminology/#OverviewandTerminology)後、このAPIを直接実行できます。 > **注意:** これらのコードスニペットは、各フレームワークの[SDKドキュメント](https://docs.catalyst.zoho.com/ja/getting-started/catalyst-sdk/)でも利用できます。 ### PlaygroundによるPDF & Screenshotの生成 Playgroundは、ビジュアルドキュメントをすぐに生成したり、ロジックに組み込む前にこの機能をテストしたりするためにコンソールで利用できます。Playground自体には、コンポーネントの機能をテストするためのあらかじめ設計された入力が読み込まれています。 コンソールで3つの異なる方法で入力を提供して、WebページのビジュアルドキュメントをEr生成できます： **HTMLコード** ### HTMLコード 1. *入力タイプの選択*セクションで**HTMLコード**オプションを選択します。 ![catalyst_smartbrowz_pdfnscreen_html_main_view](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_html_main_view.webp) HTMLコードエディターに表示されているコードをカスタマイズするか、独自のコードを貼り付けることができます。 2. *出力形式の選択*ドロップダウンから必要な形式を選択します。 ![catalyst_smartbrowz_pdfnscreen_html_output_drop](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_html_output_drop.webp) 3. これはオプションの手順ですが、**詳細スタイリングオプションを表示**セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。 ![catalyst_smartbrowz_pdfnscreen_html_advanced_options](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_html_advanced_options.webp) このセクションでは、**パスワードの設定**セクションでパスワードを設定して、生成されたビジュアルドキュメントをパスワード保護することもできます。 4. **Generate**をクリックします。 ![catalyst_smartbrowz_pdfnscreen_generated_output](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_generated_output.webp) 生成したビジュアルドキュメントのプレビューがポップアップに表示されます。**Download**をクリックして、ドキュメントをローカルシステムに保存します。 PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。 ![catalyst_smartbrowz_pdfnscreen_pwd_protected](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_pwd_protected.webp) **URL** ### URL お好みのWebページのURLを直接入力して、ビジュアルドキュメントを生成できます。 1. URLを入力タイプとして使用するには、**URL**ボタンをクリックします。 2. *WebページのURLを入力*入力フィールドに必要なURLを入力します。 ![catalyst_smartbrowz_pdfnscreen_url_select](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_url_select.webp) 3. *出力形式の選択*ドロップダウンから必要な形式を選択します。 ![catalyst_smartbrowz_pdfnscreen_url_output_drop](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_url_output_drop.webp) 4. これはオプションの手順ですが、**詳細スタイリングオプションを表示**セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。 ![catalyst_smartbrowz_pdfnscreen_url_styling](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_url_styling.webp) このセクションでは、**パスワードの設定**セクションでパスワードを設定して、生成されたビジュアルドキュメントをパスワード保護することもできます。 5. **Generate**をクリックします。 ![catalyst_smartbrowz_pdfnscreen_generated_url_output](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_generated_url_output.webp) PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。 ![catalyst_smartbrowz_pdfnscreen_pwd_protected](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_pwd_protected.webp) **Templates** ### Templates > **注意:** この機能は、[Templates](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/introduction/)コンポーネントを使用して事前にテンプレートを作成・保存している場合にのみ使用できます。 1. テンプレートを入力タイプとして設定するには、**Template**ボタンをクリックします。 2. *Template*ドロップダウンからお好みのテンプレートを選択します。 ![catalyst_smartbrowz_pdfnscreen_template_select_layout](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_template_select_layout.webp) 3. このセクションのエディターを通じて、ビジュアルドキュメントのデータをJSON入力として提供できます。 ![catalyst_smartbrowz_pdfnscreen_template_json_input](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_template_json_input.webp) 4. **Generate**をクリックします。 ![catalyst_smartbrowz_pdfnscreen_generated_output](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_generated_output.webp) 生成したビジュアルドキュメントのプレビューがポップアップに表示されます。**Download**をクリックして、ドキュメントをローカルシステムに保存します。 > **注意:** * ビジュアルドキュメントを生成する前に、入力タイプが*Templates*であるため、テンプレートの作成・デザイン時にレイアウト、スタイリング要素、その他すべての美的特徴を選択済みです。テンプレートのカスタマイズ方法については、この[セクション](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/customize-templates/)をご確認ください。 * *Templates*を使用してパスワード保護されたPDFを生成しているため、パスワードを動的に設定するロジックをコーディングするオプションがあります。この機能の詳細については、この[セクション](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/customize-templates/#password-protected-pdfs)をご確認ください。 ドキュメントをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。 ![catalyst_smartbrowz_pdfnscreen_pwd_protected](https://catalyst-docs-development.zohostratus.in/images/help/smartbrowz/catalyst_smartbrowz_pdfnscreen_pwd_protected.webp) > **注意:** Browser Logic関数を使用してコーディングするブラウザアクションや操作、または**Catalyst SmartBrowz**のいずれかのコンポーネントを使用して実行するブラウザ自動化やWebスクレイピングタスクは、すべてお客様自身の責任で行ってください。SmartBrowzコンポーネントは、アクションを許可するドメインで、または適切な承認を得た上で操作を実行するために使用することを強くお勧めします。また、Catalystは関数をコーディングするための安全なインフラストラクチャを提供しますが、Catalyst関数を使用してコーディングしたロジックの結果については、お客様のみが責任を負います。