実装

# 実装

コンソールの**SmartBrowz**セクションにある*PDF & Screenshot*コンポーネントに移動します。PDF & Screenshotを使用すると、任意のWebページのビジュアルドキュメントを生成できます。このコンポーネントは以下の2つの方法で使用できます：

- {{%bold%}}SDKの使用{{%/bold%}}

- {{%bold%}}Playground機能の使用{{%/bold%}}

### コードによるPDF & Screenshotの生成

Catalystは、以下のフレームワークでPDF & Screenshotを生成するために必要なSDKを提供しています：
* {{%link href="/ja/sdk/java/v1/smartbrowz/generate-pdfnscreenshot/" %}}Java SDK{{%/link%}}
* {{%link href="/ja/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/" %}}NodeJS SDK{{%/link%}}
* {{%link href="/ja/sdk/python/v1/smartbrowz/generate-pdfnscreenshot/" %}}Python SDK{{%/link%}}

この{{%link href="/ja/api/code-reference/smartbrowz/generate-pdfnscreenshoturl/#PDF%26ScreenshotwithHTML%2fURLasInput" %}}Catalyst API{{%/link%}}を使用して、お好みの形式でビジュアルドキュメントを生成することもできます。

お好みのプログラミング言語に基づいて、以下のコードスニペットをコピーしてアプリケーションロジックに貼り付けることで、ビジュアルドキュメントを生成できます：

### Java SDK

{{% panel_with_adjustment header="Java SDK to Generate Visual Documents" footer="button" class="language-java linenumber" scroll="set-scroll" %}}// 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);
{{% /panel_with_adjustment %}}

{{%note%}}{{%bold%}}注意:{{%/bold%}} このコードスニペットには、受け入れ可能な入力を受け取り、PDFおよびスクリーンショットを生成するための個別のロジックが含まれています。スニペットをコピーする際は、要件に関連するコード行を保持し、残りは省略してください。{{%/note%}}

### Node.js SDK

{{% panel_with_adjustment header="Node.js SDK to Generate Visual Documents" footer="button" class="language-javascript linenumber" scroll="set-scroll" %}}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)=>{
 // エラー時
})
{{% /panel_with_adjustment %}}

### Python SDK

{{% panel_with_adjustment header="Python SDK to Generate Visual Documents" footer="button" class="language-python linenumber" scroll="set-scroll" %}}# 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'
 }
 )
{{% /panel_with_adjustment %}}

これらのコードスニペットは、コンソールのPDF & Screenshotコンポーネントの**SDKコードスニペット**セクションで利用できます。必要なスタックのコードをコピーして、ビジネスロジックに組み込むことができます。

この{{%link href="/ja/api/code-reference/smartbrowz/generate-pdfnscreenshoturl/#PDF%26ScreenshotwithHTML%2fURLasInput" %}}API{{%/link%}}を使用して、PDF & Screenshotを生成することもできます。{{%link href="/ja/api/oauth2/overview-and-terminology/#OverviewandTerminology" %}}リクエストの認証{{%/link%}}後、このAPIを直接実行できます。

{{%note%}}{{%bold%}}注意:{{%/bold%}} これらのコードスニペットは、各フレームワークの{{%link href="/ja/getting-started/catalyst-sdk/" %}}SDKドキュメント{{%/link%}}でも利用できます。{{%/note%}}

### PlaygroundによるPDF & Screenshotの生成

Playgroundは、ビジュアルドキュメントをすぐに生成したり、ロジックに組み込む前にこの機能をテストしたりするためにコンソールで利用できます。Playground自体には、コンポーネントの機能をテストするためのあらかじめ設計された入力が読み込まれています。

コンソールで3つの異なる方法で入力を提供して、WebページのビジュアルドキュメントをEr生成できます：

### HTMLコード

1. *入力タイプの選択*セクションで**HTMLコード**オプションを選択します。

HTMLコードエディターに表示されているコードをカスタマイズするか、独自のコードを貼り付けることができます。

2. *出力形式の選択*ドロップダウンから必要な形式を選択します。

3. これはオプションの手順ですが、**詳細スタイリングオプションを表示**セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。

このセクションでは、**パスワードの設定**セクションでパスワードを設定して、生成されたビジュアルドキュメントをパスワード保護することもできます。

4. **Generate**をクリックします。
 
 生成したビジュアルドキュメントのプレビューがポップアップに表示されます。**Download**をクリックして、ドキュメントをローカルシステムに保存します。

PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。
 
{{%/tab%}}

{{%tab "URL" %}}
### URL

お好みのWebページのURLを直接入力して、ビジュアルドキュメントを生成できます。

1. URLを入力タイプとして使用するには、**URL**ボタンをクリックします。
2. *WebページのURLを入力*入力フィールドに必要なURLを入力します。

3. *出力形式の選択*ドロップダウンから必要な形式を選択します。

4. これはオプションの手順ですが、**詳細スタイリングオプションを表示**セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。

5. **Generate**をクリックします。

PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。

### Templates

{{%note%}}{{%bold%}}注意:{{%/bold%}} この機能は、{{%link href="/ja/smartbrowz/help/templates/introduction/" %}}Templates{{%/link%}}コンポーネントを使用して事前にテンプレートを作成・保存している場合にのみ使用できます。{{%/note%}}

1. テンプレートを入力タイプとして設定するには、**Template**ボタンをクリックします。
2. *Template*ドロップダウンからお好みのテンプレートを選択します。

3. このセクションのエディターを通じて、ビジュアルドキュメントのデータをJSON入力として提供できます。

4. **Generate**をクリックします。

生成したビジュアルドキュメントのプレビューがポップアップに表示されます。**Download**をクリックして、ドキュメントをローカルシステムに保存します。

{{%note%}}{{%bold%}}注意:{{%/bold%}}

* ビジュアルドキュメントを生成する前に、入力タイプが{{%italics%}}Templates{{%/italics%}}であるため、テンプレートの作成・デザイン時にレイアウト、スタイリング要素、その他すべての美的特徴を選択済みです。テンプレートのカスタマイズ方法については、この{{%link href="/ja/smartbrowz/help/templates/customize-templates/" %}}セクション{{%/link%}}をご確認ください。

* {{%italics%}}Templates{{%/italics%}}を使用してパスワード保護されたPDFを生成しているため、パスワードを動的に設定するロジックをコーディングするオプションがあります。この機能の詳細については、この{{%link href="/ja/smartbrowz/help/templates/customize-templates/#password-protected-pdfs" %}}セクション{{%/link%}}をご確認ください。{{%/note%}}

ドキュメントをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。

{{%note%}}{{%bold%}}注意:{{%/bold%}} Browser Logic関数を使用してコーディングするブラウザアクションや操作、または{{%bold%}}Catalyst SmartBrowz{{%/bold%}}のいずれかのコンポーネントを使用して実行するブラウザ自動化やWebスクレイピングタスクは、すべてお客様自身の責任で行ってください。SmartBrowzコンポーネントは、アクションを許可するドメインで、または適切な承認を得た上で操作を実行するために使用することを強くお勧めします。また、Catalystは関数をコーディングするための安全なインフラストラクチャを提供しますが、Catalyst関数を使用してコーディングしたロジックの結果については、お客様のみが責任を負います。{{%/note%}}

コンソールのSmartBrowzセクションにあるPDF & Screenshotコンポーネントに移動します。PDF & Screenshotを使用すると、任意のWebページのビジュアルドキュメントを生成できます。このコンポーネントは以下の2つの方法で使用できます：

SDKの使用
Playground機能の使用

コードによるPDF & Screenshotの生成

Catalystは、以下のフレームワークでPDF & Screenshotを生成するために必要なSDKを提供しています：

このCatalyst APIを使用して、お好みの形式でビジュアルドキュメントを生成することもできます。

Java SDK

Java SDK to Generate Visual Documents
copy

// 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
copy

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)=>{
// エラー時
})

Python SDK

Python SDK to Generate Visual Documents
copy

# SmartBrowzインスタンスを初期化する
smart_browz = app.smart_browz()

output_template = smart_browz.generate_output_from_template(
template_id=‘YOUR_TEMPLATE_ID’,
template_data={},
output_type=‘pdf’, // ここでビジュアルドキュメントの形式を指定できます
pdf_options={},
navigation_options={}
)

output_pdf = smart_browz.convert_to_pdf(source=‘YOUR_HTML_CODE’)

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 & ScreenshotコンポーネントのSDKコードスニペットセクションで利用できます。必要なスタックのコードをコピーして、ビジネスロジックに組み込むことができます。

このAPIを使用して、PDF & Screenshotを生成することもできます。リクエストの認証後、このAPIを直接実行できます。

注意: これらのコードスニペットは、各フレームワークのSDKドキュメントでも利用できます。

PlaygroundによるPDF & Screenshotの生成

コンソールで3つの異なる方法で入力を提供して、WebページのビジュアルドキュメントをEr生成できます：

HTMLコード

入力タイプの選択セクションでHTMLコードオプションを選択します。

HTMLコードエディターに表示されているコードをカスタマイズするか、独自のコードを貼り付けることができます。

出力形式の選択ドロップダウンから必要な形式を選択します。
これはオプションの手順ですが、詳細スタイリングオプションを表示セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。

このセクションでは、パスワードの設定セクションでパスワードを設定して、生成されたビジュアルドキュメントをパスワード保護することもできます。

Generateをクリックします。
生成したビジュアルドキュメントのプレビューがポップアップに表示されます。Downloadをクリックして、ドキュメントをローカルシステムに保存します。

PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。

URL

お好みのWebページのURLを直接入力して、ビジュアルドキュメントを生成できます。

URLを入力タイプとして使用するには、URLボタンをクリックします。
WebページのURLを入力入力フィールドに必要なURLを入力します。
出力形式の選択ドロップダウンから必要な形式を選択します。
これはオプションの手順ですが、詳細スタイリングオプションを表示セクションのオプションを使用して、カスタムスタイリング要素やレイアウト、その他の美的構成を適用してビジュアルドキュメントをカスタマイズできます。

Generateをクリックします。

PDFをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。

Templates

注意: この機能は、Templatesコンポーネントを使用して事前にテンプレートを作成・保存している場合にのみ使用できます。

テンプレートを入力タイプとして設定するには、Templateボタンをクリックします。
Templateドロップダウンからお好みのテンプレートを選択します。
このセクションのエディターを通じて、ビジュアルドキュメントのデータをJSON入力として提供できます。
Generateをクリックします。

生成したビジュアルドキュメントのプレビューがポップアップに表示されます。Downloadをクリックして、ドキュメントをローカルシステムに保存します。

注意:

ビジュアルドキュメントを生成する前に、入力タイプがTemplatesであるため、テンプレートの作成・デザイン時にレイアウト、スタイリング要素、その他すべての美的特徴を選択済みです。テンプレートのカスタマイズ方法については、このセクションをご確認ください。
Templatesを使用してパスワード保護されたPDFを生成しているため、パスワードを動的に設定するロジックをコーディングするオプションがあります。この機能の詳細については、このセクションをご確認ください。

ドキュメントをパスワード保護した場合、パスワードを入力した後にのみ、プレビューとダウンロードオプションが有効になります。

注意: Browser Logic関数を使用してコーディングするブラウザアクションや操作、またはCatalyst SmartBrowzのいずれかのコンポーネントを使用して実行するブラウザ自動化やWebスクレイピングタスクは、すべてお客様自身の責任で行ってください。SmartBrowzコンポーネントは、アクションを許可するドメインで、または適切な承認を得た上で操作を実行するために使用することを強くお勧めします。また、Catalystは関数をコーディングするための安全なインフラストラクチャを提供しますが、Catalyst関数を使用してコーディングしたロジックの結果については、お客様のみが責任を負います。

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

Yes

Thank you for your feedback!

Send your feedback to us

Skip

Submit

Functionスタック

実装

コードによるPDF & Screenshotの生成

Java SDK

Node.js SDK

Python SDK

PlaygroundによるPDF & Screenshotの生成

HTMLコード

URL

Templates