---
title: バッチ処理を利用し、PDFの1ページ目をサムネイル画像にする
description: コンテンツでPDFを登録した際に、PDFの1ページ目を自動でサムネイル画像にする方法を説明します。
---

バッチ処理を利用し、コンテンツでPDFを登録した際にPDFの1ページ目を自動でサムネイル画像にする方法を説明します。

## 前提条件
サムネイル画像の保存はGCSに保存されます。そのため、事前にFirebaseとの連携が必要になります。
[Firebaseと連携して、Storageにファイルを保存する](/ja/docs/tutorials/firebase/)を参考に、Firebaseの連携をお願いします。


## コンテンツ定義作成
まずはPDFを登録するコンテンツ定義を作成します。  
メニューより[コンテンツ定義]をクリックしコンテンツ定義一覧画面を開き、[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/82c255a46f5fd368be2e54ab5a5ad69b.png)

コンテンツ定義作成画面が開きます。
今回は下記で作成します。

| 項目名 | 設定内容 |
| :--- | :--- |
|名前| 自動サムネイル作成 |

![Image from Gyazo](https://t.gyazo.com/teams/diverta/233a64e34dd4067b224f30e91907395b.png)
また、下記2つのフィールドを追加します。

| ID | 項目名 | 識別子 | 項目設定 |
| :--- | :--- | :--- | :--- |
|1|サムネイル画像|image|画像(KurocoFilesにアップロード)|
|2|PDFファイル|pdf|ファイル(KurocoFilesにアップロード)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ec8284c29d1538e0040edcfddd2abe6c.png)

設定したら、[追加する]をクリックしコンテンツ定義を保存します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5df1447dbf037cafa4793515f702f7ff.png)

:::tip
コンテンツ定義の作成方法の詳細は、チュートリアル -> [コンテンツ定義を作成する](/ja/docs/tutorials/adding-a-topics/)をご確認ください。
:::

## APIの設定
次にPDFを画像に変換するためのAPIを設定します。  
メニューより[API] -> [Default]をクリックしエンドポイント一覧画面を開き、[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3132eb6b7e51cdd05a2842ecfcfc8f52.png)

API追加画面が表示されるので、以下のように設定し、[追加]をクリックします。

| 項目 | 設定 |
| :--- | :--- |
|タイトル| pdf-to-thumbs |
|版| 1.0 |
|ディスクリプション| 自動サムネイル作成API |

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8c22dfb04ada320c81ec1cee3a9dbf43.png)
作成したAPIのエンドポイント一覧画面が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a44373c8cd951c48a49f44221cbc6f04.png)
### API セキュリティの設定
APIセキュリティを設定します。  
今回作成するAPIは外部からリクエストされないように「動的アクセストークン」を選択します。

エンドポイント一覧画面より、[セキュリティ]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6dba7b8246e10d8c923a807baefd350f.png)
セキュリティより「動的アクセストークン」を選択し、[保存する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ad46f64cc412632ec93cf6fd38592b27.png)
以上でセキュリティの設定は完了です。

### エンドポイントの作成
次にエンドポイントを作成します。今回は下記2つのエンドポイントを作成します。

- サムネイル画像が未登録のコンテンツを取得する
- サムネイル画像を更新する

「サムネイル画像が未登録のコンテンツを取得する」にてコンテンツにサムネイル画像の登録有無を確認し、登録がない場合「サムネイル画像を更新する」にてサムネイル画像をコンテンツに登録します。

#### エンドポイント「サムネイル画像が未登録のコンテンツを取得する」の作成
まずは「サムネイル画像が未登録のコンテンツを取得する」のエンドポイントを作成します。
エンドポイント一覧画面より「新しいエンドポイントの追加」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/079cee81fe01e7151c2aad58dc77a024.png)
今回は下記で作成します。

|項目  | |内容  |
| :--- | :--- | :--- |
|パス | | no-thumb-list |
|カテゴリー | |コンテンツ |
|モデル| |Topics|
|オペレーション| |list|
|基本設定|filter|image="" and pdf!=""<br/>（注意:PDFファイル名/画像の説明部分のテキスト有無を検索条件にしています）|
|基本設定|topics_group_id| 先ほど作成した「自動サムネイル作成」のidを記載 |
|基本設定 | ctn | 0 |

![Image from Gyazo](https://t.gyazo.com/teams/diverta/475c220d7b1bec81f9e1a258103ce18b.png)

設定後、画面下部の[追加する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d46c58badffc7f8378eb3670336154ca.png)
#### エンドポイント「サムネイル画像を更新する」の作成
次に「サムネイル画像を更新する」のエンドポイントを作成します。
同様にエンドポイント一覧画面より「新しいエンドポイントの追加」をクリックし、下記で作成します。

|項目  | |内容  |
| :--- | :--- | :--- |
|パス | | thumb-update |
|カテゴリー | |コンテンツ |
|モデル| |Topics|
|オペレーション| |update|
|基本設定|topics_group_id|先ほど作成した「自動サムネイル作成」のidを記載|
|基本設定 | use_columns | image |

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ee2dad1dc3482cb8920842ff72380d64.png)

設定後、画面下部の[追加する]をクリックします。

以上でエンドポイントの作成完了です。

## 一時保存先フォルダの作成
次に、画像の保存先フォルダを作成します。
このフォルダは、PDFをサムネイル画像に保存したあとの一時保存先になります。

メニューより[ファイルマネージャ]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ed477ef9fdc85bd2f02a892743178cad.png)

[GCS(Private)]をクリックし、[新しいフォルダを作成]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/00d5dbe6dcc3db3ab2f6538dab0c93f1.png)
フォルダ名に「pdf_thumb」と記入し、[OK]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/425770514e1ed35232670996a51fc12a.png)
pdf_thumb フォルダが作成されました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a86ab71bb4dbffff6afdefdff75a2043.png)
## バッチ処理の作成
次にPDFを画像化するためのバッチ処理を作成します。今回は下記2つのバッチを作成します。

- PDFからサムネイル画像を生成する  
  PDFの先頭ページを画像化するバッチ処理です。
- 生成したサムネイル画像をコンテンツに登録する  
  作成されたサムネイル画像を対象のコンテンツに登録するバッチ処理です。

### バッチ処理「PDFからサムネイル画像を生成する」の作成

まずは「PDFからサムネイル画像を生成する」のバッチ処理を作成します。  
[オペレーション] -> [バッチ処理]より[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3d989ba34e3922ad7fd3b823511e74d5.png)

バッチ処理追加画面が表示されるので、以下のように設定します。

| 項目 | 設定 |
| :--- | :--- |
|タイトル| PDFからサムネイル画像作成 |
|識別子| create_thumb |
|バッチ| 1時間毎 |

また、実行内容には下記を記入してください。

```smarty
{*PDF登録有りでサムネイル未設定のコンテンツ一覧を取得*}
{api_internal member_id=1 endpoint='/rcms-api/2/no-thumb-list' query='' method='GET' var='contents_list' status_var='status'}
{if $status == 1 && $contents_list.list|@count > 0}
    {foreach from=$contents_list.list key=idx item=item}
        {if !$item.image.url && $item.pdf.url}{*画像未設定*}
            {get_file url=$item.pdf.url var=temp_path save=1}
            {if $temp_path}
                {assign var=gcp_pdf_path value='files/g/private/pdf_thumb/'|cat:$item.topics_id|cat:'.pdf'}
                {assign var=gcp_img_path value='files/g/private/pdf_thumb/'|cat:$item.topics_id|cat:'.png'}
                {*PDFファイルをGCS上のテンポラリディレクトリに保存*}
                {put_file tmp_path=$temp_path path=$gcp_pdf_path}
                {assign var=data value=null}
                {assign_array var=data values=''}
                {assign var=data.topics_id value=$item.topics_id}
                {assign var=data.pdf value=$item.pdf}
                {*CloudFunctionsの機能を利用してサムネイル生成*}
                {make_pdf_thumb pdfPath=$gcp_pdf_path destPath=$gcp_img_path callback_batch='update_pdf_thumb_bat' data=$data}
            {/if}
        {/if}
    {/foreach}
{/if}
```

:::caution
`/rcms-api/2/no-thumb-list` の`2`には、先ほど作成したAPIのidに変更してください。
APIのIDはエンドポイント一覧ページのURLより確認できます。  
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c93e6ff3170db67f8605a0d08828a470.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/835577330c766b45c495eb0108c84b8a.jpg)

設定したら、[追加する]をクリックしバッチ処理を保存します。

### バッチ処理「生成したサムネイル画像をコンテンツに登録する」の作成

次に、「生成したサムネイル画像をコンテンツに登録する」バッチ処理を作成します。
同様に、バッチ作成画面より以下のように追加します。

| 項目 | 設定 |
| :--- | :--- |
|タイトル| 画像をコンテンツに登録 |
|識別子| update_pdf_thumb_bat |
|バッチ| バッチテンプレート |

また、実行内容には下記を記入してください。

```smarty
{*CloudFunction側から取得したデータを設定*}
{assign var=topics_id value=$ext_data.data.topics_id}
{assign var=image_name value=$ext_data.data.pdf.desc|replace:'.pdf':''}
{assign var=dest_path value=$ext_data.destPath}
{assign var=file_id value='files/temp/pdf_thumb/'|cat:$topics_id|cat:'.png'}
{assign var=save_path value='/files/temp/pdf_thumb/'|cat:$topics_id|cat:'.png'}

{*GCSから画像ファイルをfiles/tempに取得*}
{get_file path=$dest_path save_path=$save_path save=1}

{*取得した画像をコンテンツにアップロード*}
{assign_array var=post_data values=''}
{assign_array var=post_data.image values=''}
{assign var=post_data.image.file_id value=$file_id}
{assign var=post_data.image.file_nm value=$image_name|cat:'.png'}
{assign var=post_data.image.desc value=$image_name}
{api_internal endpoint='/rcms-api/2/thumb-update/'|cat:$topics_id member_id=1 method='POST' queries=$post_data var='resp' status_var='status'}
{if $status==1}
    {*処理成功時にはPDFとサムネイルを削除する*}
    {remove_file path='/'|cat:$dest_path}
    {remove_file path='/'|cat:$dest_path|replace:'.png':'.pdf'}
{/if}
```

:::caution
`/rcms-api/2/thumb-update` の`2`には、先ほど作成したAPIのidに変更してください。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0330c3a338bdff2f5a4dc80485d30cef.jpg)

以上でバッチ処理の設定が完了です。

## 動作確認
最後に、設定内容の動作確認をします。

作成したコンテンツ定義「自動サムネイル作成」よりコンテンツを投稿します。
その際に、画像はアップロードせずPDFのみアップロードします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b6f6a96337e9dac254aed33e77b4ab1f.jpg)
PDFをアップロードしたら、[追加する]をクリックしコンテンツを投稿します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d57400da00a8c4ce5569c7d6f4ef1278.png)
次に、バッチ処理を実行します。
今回の設定ではバッチ処理が1時間毎に実行するように設定しましたが、テストのため手動で実行します。

バッチ処理より、先ほど作成した「PDFからサムネイル画像作成」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a311257dca7d529f2f790a7dad6b0510.png)
タイトル横の[すぐに実行する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6774cf3ed198b06fb641186333c83814.png)
アラートが表示されるので、[OK]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6d5263b5328a39aeff51ad784c2b9449.png)
バッチが実行されました。

次に、コンテンツに画像がアップロードされているかを確認します。

[コンテンツ定義]をクリックし、自動サムネイル作成の[一覧]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e1abdf8d535200f8bf2e115abf353156.png)

先ほど作成したコンテンツをクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/497fe7ee03b297068ccc772fa20f777c.png)
「サムネイル画像」フィールドに画像が登録されていることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/abaa1df3e4a619ed7a98e70e312a5886.png)
:::tip
画像作成されるまで、数分かかる場合があります。画像が登録されていない場合、時間を置いてから再度ご確認ください。
:::
